<nav>
<ul className="n-list">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
</ul>
</nav>
<section>
<div id= "home"></div>
<div id= "about"></div>
</section>
*{
padding: 0;
margin: 0;
}
nav{
background-color: #000B49;
height: 70px;
position: fixed;
width: 100%;
top: 0;
z-index: 1;
}
ul{
display: flex;
list-style-type: none;
justify-content: space-evenly;
align-items: center;
}
ul li a{
text-decoration: none;
color: #fff;
font-size: 2rem;
}
section{
width: 100%;
height: calc(100vh - 70px);
position: relative;
top: 70px;
}
section > *{
height: calc(100vh - 70px);
width: 100%;
}
#home{
background-color: #9B0000;
}
#about{
background-color: #FF7272;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.