<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav> <ul> <a href="#one"><li>1</li></a> <a href="#two"><li>2</li></a> <a href="#three"><li>3</li></a> <a href="#four"><li>4</li></a> <a href="#five"><li>5</li></a> </ul> </nav> <a id="home" href="#top"></a> <header id="top"> <h1>Lorem Ipsum</h1> </header> <main> <section id="one"> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas sed nisi ac malesuada. Duis vitae risus id lectus volutpat interdum eget sit amet dolor. Phasellus euismod a felis varius faucibus. Nulla rhoncus ultricies est, non maximus mi sagittis vitae. Sed vel consequat urna. Proin semper mauris vel metus placerat, mattis congue enim consequat. In lobortis nibh sed lorem feugiat vulputate. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer vitae purus tristique, elementum eros quis, mollis felis. Praesent vitae dui malesuada, ullamcorper ex nec, elementum enim. Ut quis consectetur purus. In vehicula diam dui, vel egestas sem cursus id. Aenean luctus vehicula ante.</p> </section> <section id="two"> <h1>Maecenas</h1> <p>Maecenas et massa erat. In feugiat consectetur rhoncus. Phasellus vestibulum efficitur ex, sed scelerisque lorem eleifend et. Mauris ultricies dui et finibus finibus. Cras ac ornare nunc. Ut vel risus ultrices libero maximus varius id nec lorem. Fusce eu lacus sed dolor malesuada imperdiet non sed odio. Nullam quis tristique nisi, at maximus risus. Etiam finibus, ante sed pharetra feugiat, sapien lacus egestas enim, et lacinia nulla sem nec lorem. Duis eu justo ac ligula consectetur semper ac quis est. Nullam tempus diam nec mauris placerat rhoncus. Cras ut interdum arcu.</p> <p>In hac habitasse platea dictumst. Curabitur condimentum augue sed tellus congue, id vestibulum quam efficitur. Fusce vitae porttitor sem. Integer congue arcu erat, id fringilla magna sodales vitae. Nullam ut odio eu arcu rhoncus varius nec nec urna. Duis scelerisque tellus mattis, facilisis neque sit amet, accumsan metus. Pellentesque vitae dui in ex suscipit consectetur. Aenean sed malesuada velit.</p> </section> <section id="three"> <h1>In</h1> <p>In interdum, lectus sit amet iaculis scelerisque, ligula neque consectetur tellus, eu pharetra nisi nisl ut tellus. Sed mauris nibh, dignissim at magna semper, volutpat commodo erat. Fusce vehicula porta ex at auctor. Phasellus rhoncus, libero non cursus ultricies, ipsum ipsum mollis odio, in tincidunt lectus lacus sit amet mi. Ut accumsan nunc ante, in rhoncus mauris imperdiet ac. Aliquam nec est et velit sagittis suscipit eget quis erat. Morbi tincidunt turpis eget massa aliquet, eu eleifend felis ullamcorper. Sed maximus porta elit. Vivamus imperdiet, purus at mattis convallis, massa dui pulvinar sapien, nec tincidunt nisi ex at dolor.</p> <p>Fusce semper blandit dolor, at condimentum leo sodales vitae. Duis pulvinar bibendum sagittis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam venenatis neque vel diam varius, et ultricies orci venenatis. Vivamus placerat, lorem eu posuere gravida, ex risus eleifend leo, ac maximus urna turpis at justo. Curabitur iaculis luctus orci, nec fringilla tellus porttitor ac. Proin tempor mauris in enim porttitor, vitae tincidunt felis gravida. Nulla maximus aliquam tristique. Vestibulum a nunc at turpis convallis semper vitae vitae lorem. Maecenas tincidunt magna id metus egestas, at gravida mi congue. Donec ac neque at dui malesuada dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere libero quis efficitur facilisis. Praesent mauris ex, interdum ac orci fermentum, sodales aliquet ipsum.</p> <p>Morbi vitae massa luctus, pharetra ex ac, egestas lectus. Aliquam at augue imperdiet, laoreet felis in, sodales arcu. Sed fermentum sagittis orci vitae laoreet. Suspendisse quis ex tincidunt, congue justo vel, posuere nisi. In nec felis vitae dui varius tincidunt. Proin dignissim dapibus pharetra. Vestibulum consectetur pellentesque dui, volutpat sodales velit pulvinar non. Sed fermentum urna quis odio hendrerit, eget rhoncus arcu congue. Fusce eleifend condimentum nisi, in ornare eros.</p> </section> <section id="four"> <h1>Nullam</h1> <p>Nullam eu lacus a tortor placerat finibus vel eget neque. Praesent fringilla viverra semper. Donec vitae ex ac ex bibendum rhoncus nec vel metus. Donec aliquam neque a lectus condimentum, gravida varius risus maximus. Nullam egestas, quam a consectetur malesuada, nisi sem interdum ligula, ac condimentum tellus libero ut nisi. Mauris a ipsum eu turpis vulputate laoreet ut eu lectus. Nam sem libero, iaculis in nulla in, placerat condimentum ipsum. Proin mattis est id mi laoreet, gravida mollis est vehicula. Morbi eget tincidunt orci. Cras dictum congue pulvinar. Sed vel tellus varius, vestibulum felis at, vulputate purus. Integer posuere vitae turpis faucibus mattis.</p> <p>Morbi pulvinar, mi eget molestie tincidunt, odio velit porttitor sem, sed dictum dui lectus vel turpis. Duis condimentum lacus sed massa rhoncus, at imperdiet purus aliquam. Nullam rhoncus mi lorem, eu dignissim ipsum gravida vitae. Morbi at commodo orci. Pellentesque purus massa, malesuada et posuere non, fermentum eu magna. Sed sodales scelerisque turpis, eget ullamcorper nisl faucibus in. Mauris pretium, justo id bibendum interdum, lorem elit lobortis diam, et mattis massa lectus vitae ante. Suspendisse cursus convallis ipsum in faucibus. Quisque euismod sagittis nisl, non porttitor enim consequat id. Nunc libero diam, egestas nec dapibus et, volutpat id massa. Quisque egestas rutrum urna, sed ultrices sapien pharetra ut. Curabitur ex nisi, ullamcorper a sollicitudin nec, vulputate semper nulla. Nam placerat ex sit amet quam venenatis facilisis. Phasellus in nulla in ligula porta interdum eget id nunc. Quisque gravida consectetur tellus, ac suscipit neque dictum et.</p> </section> <section id="five"> <h1>Nam</h1> <p>Nam euismod nisl enim, a elementum risus blandit ac. Cras dignissim risus nec nisi blandit, vitae efficitur quam pretium. Nulla molestie nisi vitae velit efficitur, in rhoncus est luctus. Quisque enim ligula, convallis posuere velit id, condimentum pretium velit. Ut vitae nibh risus. Suspendisse quis pellentesque leo. Ut sit amet diam quis quam euismod ultricies. Fusce eleifend a quam sed commodo. Duis tempor, mi ac laoreet viverra, tellus nisl pellentesque orci, in tempor odio libero at tortor. Nullam et magna sit amet magna vulputate laoreet. Nulla purus mauris, placerat eu quam vulputate, facilisis aliquet quam.</p> </section> </main> <script> $(document).ready(function(){ $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') || location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 500); return false; } } }); }); </script>

@import url(https://fonts.googleapis.com/css?family=Cabin); body { color: #424242; font-family: "Cabin", sans-serif; } #home { position: fixed; height: 50px; width: 50px; background-color: transparent; border-radius: 50%; bottom: 0px; right: 0px; margin: 1em; } #home:hover { background-color: rgba(0, 0, 0, 0.5); } #home::before { content: ""; height: 2px; width: 15px; background-color: white; position: absolute; top: 45%; left: 13px; -webkit-transform: rotate(-50deg); transform: rotate(-50deg); } #home::after { content: ""; height: 2px; width: 15px; background-color: white; position: absolute; top: 45%; right: 13px; -webkit-transform: rotate(50deg); transform: rotate(50deg); } nav { background-color: #D6D6D6; width: 100%; height: 50px; position: fixed; top: 0px; left: 0px; border-bottom: thin solid #424242; -webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; } nav ul a { text-decoration: none; color: #424242; font-size: 30px; width: 20%; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } nav ul a:nth-child(odd):hover { background-color: #DBDFFF; } nav ul a:nth-child(even):hover { background-color: #EBEDFF; } nav::after { content: ""; height: 2px; width: 50px; background-color: black; position: fixed; top: 60px; left: calc(50% - 25px); } nav::before { content: ""; height: 20px; width: 40px; border-bottom: 2px solid black; position: fixed; top: 50px; left: calc(50% - 20px); } nav ul:hover::after nav { -webkit-transform: translateY(0%); transform: translateY(0%); } nav:hover { -webkit-transform: translateY(0%); transform: translateY(0%); } header { height: calc(100vh - 50px); padding-top: 50px; background-color: #B0B9FF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 40px; color: #FFF6B0; text-transform: uppercase; } main section { min-height: 100vh; padding-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } main section p { padding: 2em; } main section h1 { font-size: 20px; text-transform: uppercase; } main section:nth-child(odd) { background-color: #DBDFFF; } main section:nth-child(even) { background-color: #EBEDFF; }