how to create a sidebar using html and css only

sideBarMenu.html

<!Doctype html>

<html>

<head>

<title>Menu</title>

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

</head>

<body>

<div class="menu">

<a href="#first"></a>
<a href="#second"></a>
<a href="#third"></a>
<a href="#fourth"></a>

</div>

<div class="data">



<img src="profile.jpeg" class="image">
 Akash Maurya



Welcome to Coding Zone






What is Full Stack Developer?
 

Full Stack Developer
is an engineer who works on both client-side and server-side software. This type of software developer works on the Full Stack of an application meaning Front End Technology, Back End Development Languages, Database, Server, API, and version Controlling Systems. Hence, the name "Full Stack" Developer.








" To be successful, you have to use each day as an opportunity to improve, to be better, to get a little bit closer to your goals. It might sound like a lot of work—and with a busy schedule, next to impossible. But the best part is, the more you accomplish, the more you’ll want to do, the higher you’ll want to reach. So as long as you have the hunger for success, you will always have the power within you to achieve it "




</div>

</body>

</html>

style.css

*{

margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}

body{

font-family: Arial, Helvetica, sans-serif;
}

.menu{

position: fixed;
left:0;
z-index: 2;
display: flex;
justify-content: space-around;
flex-direction: column;
height: 100vh;
background: #282828;
}

.menu a{

font-size: 30px;
color:white;
padding: 15px;
text-align: center;
}

.data{

background: #747d8c;
min-height: 100vh;


}
.image{

height: 100px;
width: 100px;
border-radius: 100%;
border:3px solid white;
}

p{

padding-left: 30px;
padding-right: 30px;
color: white;
font-size:25px;
text-align: justify;

}

span{

position: absolute;
top:0;
padding-left: 50px;
height: 100vh;
width:0;
opacity: 0;
transition: all ease-in 0.5s;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;

}

span:target{

opacity: 1;
left:0;
width: 100%;
height: 100vh;
z-index: 1;

}

#first{

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url(chess.jpg);
background-size: cover;
background-repeat: no-repeat;
}

#second{

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url(cat.jpg);
background-size: cover;
background-repeat: no-repeat;
}

#third{

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url(green.jpg);
background-size: cover;
background-repeat: no-repeat;
}

#fourth{

background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) ,url(tree.jpg);
background-size: cover;
background-repeat: no-repeat;
}

When you open html file first time .