Example of our HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Viewpointr - Home</title>
<link rel="stylesheet" type="text/css" media="all" href="_ui-preview/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" media="all" href="_ui-preview/css/ie.css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="print" href="_ui-preview/css/print.css" />
</head>
<body class="home">
<ol id="accessibility-nav">
<li><a href="#navigation">Skip to navigation</a></li>
<li><a href="#content">Skip to content</a></li>
<li><a href="#sidebar">Skip to sidebar</a></li>
</ol>
<!-- / accessibility-nav -->
<div class="container">
<div id="header">
<h1 class="logo"><span class="url"><strong class="fn org">Viewpointr</strong><span></span></span></h1>
<ul id="navigation">
<li><a href="index.html">home</a></li>
<li><a href="discover_friends.html">discover friends</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">settings</a></li>
<li><a href="#">sign out</a></li>
</ul>
</div>
<!-- / header -->
<div id="content">
<div class="box-help">
<h2>what do you need help with?</h2>
<form action="">
<fieldset>
<label for="what">For what</label>
<textarea id="what" rows="1" cols="65"></textarea>
<p>Ex. Does anyone know any data warehousing projects that were done in rails?</p>
<label for="who">From who</label>
<textarea id="who" rows="1" cols="65"></textarea>
<p class="last">Ex. ruby developers, engineers, geeks</p>
<button type="submit" class="xbuttons xbtn-share">SHARE</button>
<div class="share-feature"> <a href="#" class="toggle-share">show/hide<span></span></a>
<ul>
<li>
<label>
<input type="checkbox" type="shareto" checked="checked" name="facebook" value="facebook" />
<span>Facebook</span> </label>
</li>
<li>
<label>
<input type="checkbox" type="shareto" checked="checked" name="twitter" value="twitter" />
<span>Twitter</span> </label>
</li>
<li class="default"><a href="#">Default Settings</a></li>
</ul>
</div>
<!-- share-feature -->
</fieldset>
</form>
</div>
<h2>Request Feed</h2>
<ul class="nav">
<li>Show:
<ul>
<li class="first"><a href="#">All</a></li>
<li><strong>Where I can help</strong></li>
<li><a href="#">Where my friends can help</a></li>
</ul>
</li>
</ul>
<div class="request-feed hentry"> <span class="vcard author"><a class="url" href="#"><img class="photo fn avatar" src="_media-preview/images/avatar_big001.png" alt="New Scientist" /></a></span>
<div class="more-wrapper">
<p class="entry-content"><strong class="request-inline-author"><a href="#">New Scientist</a></strong> We need 1 million signatures for Jamie Oliver’s TEDPrize wish. Help fight obesity. Does anyone know any data warehousing projects that were done in rails? The bigger the better. I would really love to hear.</p>
</div>
<ul class="tags">
<li><a rel="tag" href="#">ruby on rails developers</a></li>
<li><a rel="tag" href="#">engineers</a></li>
</ul>
<div class="info entry-meta">
<p class="entry-date"><span class="published timestamp" data="{time:'Thu Apr 15 21:04:44 +0000 2010'}">about 2 minutes ago</span></p>
<ul>
<li><a href="addaviewpoint2.html">8 viewpoints</a></li>
<li><a href="addaviewpoint2.html">2 comments</a></li>
</ul>
</div>
<ul class="links">
<li class="reply"><a href="addaviewpoint2.html" class="xbuttons xbtn-reply">Reply</a></li>
<li class="point show-bubble"> <a href="#" class="xbuttons xbtn-point point">Point</a>
<div class="bubble"> <a href="#" class="bubble-close">x</a>
<p>Press "<strong>Point</strong>" to refer this questions to a friend!</p>
</div>
<div class="point-dropdown"> <span class="point-to">To:</span>
<ul>
<li class="point-facebook"><a href="point-facebook.html">Your Facebook Friends</a></li>
<li class="point-twitter"><a href="point-twitter.html">People you Follow</a></li>
<li class="point-viewpointr"><a href="point-viewpointr.html">Viewpontr Helpers</a></li>
<li class="point-email"><a href="point-email.html">Friends via Email</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="request-feed hentry"> <span class="vcard author"><a class="url" href="#"><img class="photo fn avatar" src="_media-preview/images/avatar_big002.png" alt="Kickstarter" /></a></span>
<div class="more-wrapper">
<p class="entry-content"><strong class="request-inline-author"><a href="#">Kickstarter</a></strong> We need 1 million signatures for Jamie Oliver’s TEDPrize wish. Help fight obesity!</p>
</div>
<ul class="tags">
<li><a rel="tag" href="#">everyone</a></li>
</ul>
<div class="info entry-meta">
<p class="entry-date"><span class="published timestamp" data="{time:'Thu Apr 15 21:04:44 +0000 2010'}">about 2 minutes ago</span></p>
<ul>
<li><a href="addaviewpoint2.html">8 viewpoints</a></li>
<li><a href="addaviewpoint2.html">2 comments</a></li>
</ul>
</div>
<ul class="links">
<li class="reply"><a href="addaviewpoint2.html" class="xbuttons xbtn-reply">Reply</a></li>
<li class="point"> <a href="#" class="xbuttons xbtn-point point">Point</a>
<div class="point-dropdown"> <span class="point-to">To:</span>
<ul>
<li class="point-facebook"><a href="point-facebook.html">Your Facebook Friends</a></li>
<li class="point-twitter"><a href="point-twitter.html">People you Follow</a></li>
<li class="point-viewpointr"><a href="point-viewpointr.html">Viewpontr Helpers</a></li>
<li class="point-email"><a href="point-email.html">Friends via Email</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="request-feed hentry"> <span class="vcard author"><a class="url" href="#"><img class="photo fn avatar" src="_media-preview/images/avatar_big003.png" alt="Imogen Heap" /></a></span>
<div class="more-wrapper">
<p class="entry-content"><strong class="request-inline-author"><a href="#">Imogen Heap</a></strong> We need 1 million signatures for Jamie Oliver’s TEDPrize wish. Help fight obesity. Does anyone know any data warehousing projects that were done in rails? The bigger the better. I would really love to hear.Does anyone know any data warehousing projects that were done in rails? The bigger the better. I would really love to hear.</p>
</div>
<ul class="tags">
<li><a rel="tag" href="#">everyone</a></li>
</ul>
<div class="info entry-meta">
<p class="entry-date"><span class="published timestamp" data="{time:'Thu Apr 15 21:04:44 +0000 2010'}">about 2 minutes ago</span></p>
<ul>
<li><a href="addaviewpoint2.html">8 viewpoints</a></li>
<li><a href="addaviewpoint2.html">2 comments</a></li>
</ul>
</div>
<ul class="links">
<li class="reply"><a href="addaviewpoint2.html" class="xbuttons xbtn-reply">Reply</a></li>
<li class="point"> <a href="#" class="xbuttons xbtn-point point">Point</a>
<div class="point-dropdown"> <span class="point-to">To:</span>
<ul>
<li class="point-facebook"><a href="point-facebook.html">Your Facebook Friends</a></li>
<li class="point-twitter"><a href="point-twitter.html">People you Follow</a></li>
<li class="point-viewpointr"><a href="point-viewpointr.html">Viewpontr Helpers</a></li>
<li class="point-email"><a href="point-email.html">Friends via Email</a></li>
</ul>
</div>
</li>
</ul>
</div>
<p class="more"><a href="#">more</a></p>
</div>
<!-- / content -->
<div id="sidebar">
<dl class="intro vcard">
<dt> <a class="url" rel="contact" href="#"> <img class="photo fn" src="_media-preview/images/logo_nytimes.png" alt="NY Times" /> <span class="fn">NY Times</span> </a> </dt>
<dd>Newspaper</dd>
</dl>
<ul class="info">
<li> <a href="#"> <strong>50</strong> <span>Helping</span> </a> </li>
<li> <a href="#"> <strong>100</strong> <span>Helpers</span> </a> </li>
<li> <a href="#"> <strong>10</strong> <span>Requests</span> </a> </li>
</ul>
<ul class="social-media">
<li class="facebook vcard"><a class="url" href="#"><span class="fn org">Facebook</span> /nytimes</a></li>
<li class="twitter vcard"><a class="url" href="#"><span class="fn org">Twitter</span> @nytimes</a></li>
</ul>
<h2>Helping</h2>
<div class="avatars"> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar001.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar002.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar003.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar004.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar005.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar006.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar007.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar008.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar009.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar010.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar011.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar012.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar013.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar014.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar015.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar016.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar017.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar018.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar019.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar020.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar021.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar022.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar023.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar024.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar025.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar026.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar027.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar028.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar029.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar030.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar031.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar032.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar033.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar034.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar035.png" alt="User's Full Name Here" /></a></span> <span class="vcard"><a class="url" title="User's Full Name Here" rel="contact" href="#"><img class="photo fn" src="_media-preview/images/avatar036.png" alt="User's Full Name Here" /></a></span> <a title="User's Full Name Here" rel="contact" href="#" class="url see-all">See all >></a> </div>
</div>
<!-- / sidebar -->
<div id="footer">
<p><strong>Viewpointr 2010</strong> <a href="#">Keep up with us on Facebook and Twitter</a></p>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
<!-- / footer -->
</div>
<!-- / container -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="_ui-preview/js/autoresize.jquery.js"></script>
<script type="text/javascript" src="_ui-preview/js/jquery.jtruncate.js"></script>
<script type="text/javascript" src="_ui-preview/js/jScrollPane.js"></script>
<script type="text/javascript" src="_ui-preview/js/application.js"></script>
</body>
</html>