<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>farnaz ahari</title>
<link rel="stylesheet" href="master.css">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav>
<ul class="menu">
<li>
<a href=""><i class="fa fa-home" aria-hidden="true"></i>home</a>
</li>
<li>
<a href=""><i class="fa fa-envelope" aria-hidden="true"></i>about</a>
</li>
<li>
<a href=""><i class="fa fa-cog" aria-hidden="true"></i>services</a>
</li>
<li>
<a href=""><i class="fa fa-graduation-cap" aria-hidden="true"></i>portfolio</a>
</li>
<li>
<a href=""><i class="fa fa-paper-plane" aria-hidden="true"></i>contact</a>
</li>
<li class="white"></li>
</ul>
</nav>
</body>
</html>*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, rgba(225,153,129,1) 0%, rgba(224,186,163,0.6815768543745624) 100%, rgba(72,88,78,0) 100%);
}
nav{
width: 700px;
height: 100px;
background-color: #ad5a2d;
border-radius: 5px;
overflow: hidden;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2), 2px 2px 0 rgba(0, 0, 0, 0.2), 3px 3px 0 rgba(0, 0, 0, 0.2), 4px 4px 0 rgba(0, 0, 0, 0.2), 5px 5px 0 rgba(0, 0, 0, 0.2), 6px 6px 0 rgba(0, 0, 0, 0.2), 7px 7px 0 rgba(0, 0, 0, 0.2), 8px 8px 5px rgba(0, 0, 0, 0.2);
position: relative;
}
.menu{
height: 100%;
display: flex;
justify-content: center;
list-style: none;
}
.menu>li, .menu>li>a{
display: block;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu>li{
flex-basis: 20%;
border-right: 1px solid #31313149;
}
.menu>li>a{
width: 100%;
text-decoration: none;
color: #e0baa3;
font-size: 20px;
z-index: 1;
transition: 1s;
}
.menu>li>a>i{
margin-right: 5px;
}
.white{
position: absolute;
top: 0;
left: 0;
background-color: white;
width: 20%;
height: 100%;
transition: 1s;
}
.menu>li:hover a{
color: #b15a23;
}
.menu>li:nth-of-type(2):hover ~ .white{
left: 20%;
}
.menu>li:nth-of-type(3):hover ~ .white{
left: 40%;
}
.menu>li:nth-of-type(4):hover ~ .white{
left: 60%;
}
.menu>li:nth-of-type(5):hover ~ .white{
left: 80%;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.