As when clicking on the icon a div appeared

Question

<html lang="en">
<head>
    <script src="https://kit.fontawesome.com/4fcf22c1ce.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="css.css">
    <script type="text/javascript" src="javascript.js"></script>
    <meta charset="UTF-8">
    <title>I Dont Know</title>
</head>
<body>
    <section class="head">
        <div class="block_head">
            <div class="block_menu">
                <input type="checkbox" class="button_menu">
                <i class="fas fa-times-circle"></i>
            </div>
            <div class="menu_list">

            </div>
        </div>
    </section>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    outline: none;
}

.block_head{
    position: absolute;
    top: 0;
    right: 0;
    width: 10rem;
    height: 100vh;
    overflow: hidden;
}

.block_menu{
    position: absolute;
    height: 4rem;
    width: 4rem;
}

.button_menu{
    position: absolute;
    width: 4rem;
    height: 4rem;
    z-index: 20;
    border-radius: 80px;
    opacity: 0;
    cursor: pointer;
}

.menu_list{
    position: relative;
    width: 10rem;
    height: 100vh;
    right: -10rem;
    background-color: black;
    transition: 1s;
}

.button_menu:checked ~ .menu_list{
    transform: translateX(-100%);
}

.block_menu{
    position: absolute;
    top: 1rem;
    right: 1rem;
    border-radius: 50%;
}

.fa-times-circle{
    font-size: 4rem;
    font-weight: 1;
    transition: .4s;
    transform: rotate(45deg);
}

.button_menu:checked ~ .fa-times-circle{
    transform: rotate(0deg);
}```

БЛОГ НА HUSL

As when clicking on the icon a div appeared

Ответы (0 шт):