style.css

*{
    margin:0;
    padding:0;
    font-family: "Oswald", sans-serif;
  
}
.main_box{
    background-image: url("photo.jpg");
    height:100vh;
    background-size: cover;
}
.btn_one{
    color:white;
    font-size: 30px;
    position: absolute;
    left:20px;
    line-height: 50px;

}
.sidebar_menu{
    position: fixed;
    height:100vh;
    width:300px;
    left: -300px;
    background-color:rgba(255, 255, 255, 0.1);
    box-shadow:0 0 10px rgba(255, 255, 255, 0.3) ;
    transition:all 0.3s linear;
}
div.logo{
    position: absolute;
    width:100%;
    line-height: 50px;
    box-shadow:0 0 7px rgba(255,255, 255, 0.3) ;
    height:60px;
}
div.logo a{
    position:absolute;
    left:60px;
    color:white;
    text-decoration: none;
    font-size: 24px;
}
div.menu{
    color: rgb(245, 238, 238);
    position: absolute;
    width:100%;
    top:70px;
}
.btn_two{
    color:rgb(246, 225, 225);
    font-size: 20px;
    position: absolute;
    left:250px;
    line-height: 60px;
    opacity: 1;
}
div.menu li{
    margin-top: 6px;
    padding:10px 20px;
}
div.menu li a{
    color:white;
    text-decoration: none;
}
div.menu i{
    padding-right: 10px;
}
div.social_media ul a i{
    color:white;
    opacity:0.5;
    display:inline-block;
    position:relative;
    left:20%;
    bottom:20px;
    padding:10px;
    top:500px;
}
#check{
    display:none;
}
div.menu ul :hover{
    box-shadow:0 0 7px rgba(255,255, 255, 0.3) ;

}
div.social_media ul a i:hover{
    
    opacity: 1;
    transform:scale(2);
}
#check:checked~.sidebar_menu{
    left:0;
}
#check:checked~.btn_one i{
    opacity:0;
}