Full width blocks - one page website

full-width-blocks-one-page-website.markdown

Full width blocks - one page website

A Pen by Jonathan Silva on CodePen.

License.

index.html

<nav class="nav">
  <ul>
    <li><a href="#bloco1" class="link">Bloco 1</a></li>
    <li><a href="#bloco2" class="link">Bloco 2</a></li>
    <li><a href="#bloco3" class="link">Bloco 3</a></li>
    <li><a href="#bloco4" class="link">Bloco 4</a></li>
    <li><a href="#bloco5" class="link">Bloco 5</a></li>
  </ul>
</nav>
<div class="blocks" id="bloco1"></div>
<div class="blocks" id="bloco2"></div>
<div class="blocks" id="bloco3"></div>
<div class="blocks" id="bloco4"></div>
<div class="blocks" id="bloco5"></div>

script.js

$(document).ready(function() {

  $('.link').on('click', function(e){
    
    var hash = $(this).attr('href');
     $('html,body').animate({
       scrollTop: $(hash).offset().top
     }, 800);
    
    return false;
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

html, body {
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
  padding: 0;
  margin: 0;
}

.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background: #fff;
}

.nav li {
  list-style: none;
  display: inline-block;
}

.nav .link {
  text-transform: uppercase;
  text-decoration: none;
  font-size: 11px;
  font-family: Sans-serif;
  color: #333;
  margin: 0 10px;
}

.blocks {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.blocks:nth-child(1) {
  background: green;
}
.blocks:nth-child(2) {
  background: blue;
}
.blocks:nth-child(3) {
  background: pink;
}
.blocks:nth-child(4) {
  background: yellow;
}
.blocks:nth-child(5) {
  background: black;
}