otakuhub/views/pages/home.html.php

<div id="feature">
<img class="feature-img" src="/img/screenshot.png" alt="">
<div class="feature-text">
<h2 id="tagline">The Otaku Social Network</h2>
<h3 id="tagline-mini">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
<h2>Signup Now!</h2>
<hr/>
<form method="post" action="/users/signup"><div><label for="Username">Username</label><input type="text" style="width: 200px;" name="username" id="Username"></div><div><label for="Password">Password</label><input type="text" id="Password" name="password" style="width: 200px;"><div><label for="Email">Email</label><input type="text" id="Email" name="email" style="width: 200px;"><input class="button green" type="submit" value="Signup!"></div></form>
<br class="cl" />
</div>
<br class="cl" />
</div>
</div>




    <div id="page-content" class="container_12">
      <h2 class="ribbon full">Why You'll &#9825; OtakuHUB:</h2>
      <div class="triangle-ribbon"></div>
<br class="cl" />

      <div class="grid_4 feature">
        <h3>For Us By Us</h3>
        <img src="/img/features/box_address.png" height="48" width="48" alt="design" />
        <p>Built by Otakus for Otakus, we know what you want, and we work tirelessly to give it to you. </p>
      </div>
      <div class="grid_4 feature">
        <h3>Data Portability</h3>
        <img src="/img/features/magic_wand.png" height="48" width="48" alt="design" />
        <p>Move your data between AnimePlanet AnimeDB or MAL or export your list for your own records</p>
      </div>
      <div class="grid_4 feature">
        <h3>Meet others</h3>
        <img src="/img/features/monitor.png" height="48" width="48" alt="design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Options</h3>
        <img src="/img/features/preferences.png" height="48" width="48" alt="coding" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Security</h3>
        <img src="/img//features/lock_closed.png" height="48" width="48" alt="seo" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div class="grid_4 feature">
        <h3>Support</h3>
        <img src="/img/features/security.png" height="48" width="48" alt="icon design" />
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <br class="cl" />
      <br />
      <h2 class="ribbon blue">Screenshots</h2>
      <div class="triangle-ribbon blue"></div>
<br class="cl" />


<!-- "previous page" action -->
<a class="prev browse left"></a>
<div id="browsable" class="scrollable">   
   
   <!-- root element for the items -->
   <div class="items">
   
      <!-- 1-5 -->
      <div>
         <img src="/img/screenshots/buttons.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/gallery.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/calendars.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/charts.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/coding.jpg" height="100" width="100" alt="" />
      </div>
      
      <!-- 5-10 -->
      <div>
         <img src="/img/screenshots/docs.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/forms.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/gallery.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/notifications.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/pagination.jpg" height="100" width="100" alt="" />
      </div>
      
      <!-- 10-15 -->
      <div>
         <img src="/img/screenshots/psd.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/switches.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/tabs.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/themes.jpg" height="100" width="100" alt="" />
            <img src="/img/screenshots/tips.jpg" height="100" width="100" alt="" />
      </div>
      
   </div>
   
</div>
<!-- "next page" action -->
<a class="next browse right"></a>
<br />


    </div>
    <br class="cl" />