<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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.