OnePagePortifolio

index.html

<header>
  <div id="nav">
       <ul>
           <li><a href="#sobre">Sobre</a></li>
           <li><a href="#portfolio">Portfólio</a></li>
           <li><a href="#contato">Contato</a></li>
       </ul>
  </div>
</header>
  <div id="page1" class="page">
    <a id="sobre"></a>
    <h1>About page content goes here.</h1>
  </div>
  <div id="page2" class="page">
    <a id="portfolio"></a>
      <h1>Portfolio page content goes here.</h1>
  </div>
<div id="page3" class="page">
  <a id="contato"></a>
    <h1>Contact page content goes here.</h1>
</div>

OnePagePortifolio.markdown

OnePagePortifolio

A Pen by Yuri Soares Brandão on CodePen.

License.

style.css

html, body, .page{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#page1, #page2, #page3 {}

h1 {
  float: left;
  padding-left:2rem;
  padding-top:2rem;
}

nav {
  display: block;
  position: absolute;
}

ul {
  list-style-type: none;
  position: fixed;
  width:100%;
  margin: 0;
  padding: 0;
  padding-left:2rem;
  background-color: black;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none;
  color: white;
}

li a:hover {
  background-color: red;
}