One Page CSS Navigation

<div class="ct" id="t1">

 <div class="ct" id="t2">

   <div class="ct" id="t3">

     <div class="ct" id="t4">

<section>  

 <ul>

   <a href="#t1"><li class="icon fa fa-home" id="uno"></li></a>

   <a href="#t2"><li class="icon fa fa-keyboard-o" id="dos"></li></a>

   <a href="#t3"><li class="icon fa fa-coffee" id="tres"></li></a>

   <a href="#t4"><li class="icon fa fa-dribbble" id="cuatro"></li></a>

 </ul>

  <div class="page" id="p1">

     <li class="icon fa fa-home"><span class="title">Home</span><span class="hint">Like this pen to see the magic!...<br/> Just kidding, it won't happen anything but I'll be really happy If you do so.</span></li>   

  </div>

  <div class="page" id="p2">

    <li class="icon fa fa-keyboard-o"><span class="title">Type</span></li>

  </div>  

  <div class="page" id="p3">

    <li class="icon fa fa-coffee"><span class="title">Coffee</span></li>

  </div>

  <div class="page" id="p4">

   <li class="icon fa fa-dribbble"><span class="title">Dribbble</span><span class="hint"><a href="https://dribbble.com/rupok" target="_blank">Follow me on Dribbble</span></li>

  </div>  

    <p class="credit"> Original Pen by <a href="https://codepen.io/hrtzt/">Alberto Hartzet</a></p>

</section>

     </div>

     </div>

   </div>

  </div>