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>