otakuhub/views/pages/home.html.php

<div>
	<div id="recent">
		<h2>The Otaku Social Network</h2>
		<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
		eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
	</div>
	<div id="signup">
		<h2>Sign up:</h2>
		<form method="post" action="/users/signup">
			<table>
				<tr>
					<td><label for="username">Username</label></td>
					<td><input type="text" name="username" id="username">
				</tr>
				<tr>
					<td><label for="password">Password</label></td>
					<td><input type="password" id="password" name="password"></td>
				</tr>
				<tr>
					<td><label for="email">Email</label></td>
					<td><input type="text" id="email" name="email"></td>
				</tr>
			</table>
			<input class="button green" type="submit" value="Sign up">
		</form>
	</div>
</div>

<h2 class="ribbon">Why you'll &#9825; OtakuHub~</h2>
<div class="triangle-ribbon"></div>
<br class="cl" />
<h3>For Us By Us</h3>
<p>
	Built by Otakus for Otakus, we know what you want, and we work tirelessly to give it to you.
</p>
<h3>Data Portability</h3>
<p>
	Move your data between AnimePlanet AnimeDB or MAL or export your list for your own records
</p>
<h3>Meet others</h3>
<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<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 class="cl" />