106 lines
6.0 KiB
HTML
106 lines
6.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html class="no-js" lang="en" dir="ltr">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||
|
|
|
||
|
|
<title>Susy Test Page</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" media="screen, projection" />
|
||
|
|
|
||
|
|
<script type="text/javascript" src="{{ STATIC_URL }}js/modernizr-1.0.min.js"></script>
|
||
|
|
<!--[if IE]>
|
||
|
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="page">
|
||
|
|
|
||
|
|
<nav id="skip-links">
|
||
|
|
<ul>
|
||
|
|
<li><a href="#site-nav">skip to site navigation</a></li>
|
||
|
|
<li><a href="#content">skip to content</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav><!-- /#skip-links -->
|
||
|
|
|
||
|
|
<header role="banner">
|
||
|
|
<h1>A Susy Demo</h1>
|
||
|
|
</header><!-- /~banner -->
|
||
|
|
|
||
|
|
<nav id="site-nav" role="navigation">
|
||
|
|
<ul>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">an</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">inline-block</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">list</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">with links</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">to a picture</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">of what</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">the grid</a></li>
|
||
|
|
<li><a href="http://www.flickr.com/photos/nicole_hugo/3291776052/">should look like</a></li>
|
||
|
|
</ul>
|
||
|
|
</nav><!-- /#site-nav -->
|
||
|
|
|
||
|
|
<section id="content">
|
||
|
|
|
||
|
|
<aside>
|
||
|
|
<h1>Two columns left</h1>
|
||
|
|
<p>Delenit augue duis, dolore te feugait nulla facilisi nam liber tempor cum? Est notare quam littera gothica, quam nunc putamus parum claram anteposuerit litterarum formas humanitatis. Nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat ut. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
|
||
|
|
<p>Ipsum dolor sit amet, consectetuer adipiscing elit sed diam nonummy nibh euismod tincidunt ut. Lectorum mirum est; notare quam littera gothica quam nunc. Dolore magna aliquam erat volutpat ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper. Humanitatis per seacula quarta decima et quinta decima, eodem modo typi qui nunc?</p>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<aside>
|
||
|
|
<h1>Two columns right</h1>
|
||
|
|
<p>Facilisi nam liber, tempor cum soluta nobis eleifend. Nibh euismod tincidunt ut laoreet dolore magna, aliquam erat volutpat ut wisi enim. Facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit. Notare quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per. Feugait nulla option congue nihil imperdiet doming id quod mazim placerat facer possim. Insitam est usus legentis in iis qui facit eorum claritatem Investigationes demonstraverunt lectores. Lius quod ii legunt saepius claritas est etiam processus dynamicus qui sequitur mutationem.</p>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<section role="main">
|
||
|
|
|
||
|
|
<section class="major">
|
||
|
|
<article>
|
||
|
|
<h1>Three columns center-left</h1>
|
||
|
|
<p>Nam liber tempor cum soluta nobis eleifend option. Habent claritatem insitam est usus legentis in iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere. Assum typi non me, lius quod ii legunt saepius claritas est etiam.</p>
|
||
|
|
</article>
|
||
|
|
<article>
|
||
|
|
<h1>Three columns center-right</h1>
|
||
|
|
<p>Nam liber tempor cum soluta nobis eleifend option. Habent claritatem insitam est usus legentis in iis qui facit eorum claritatem Investigationes demonstraverunt lectores legere. Assum typi non me, lius quod ii legunt saepius claritas est etiam.</p>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="minor">
|
||
|
|
<aside>
|
||
|
|
<h1>Two columns center-left</h1>
|
||
|
|
<p>Delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum. Ii legunt saepius claritas est etiam processus dynamicus. Claram anteposuerit litterarum formas humanitatis per seacula quarta decima et. Dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio. Quinta decima eodem modo typi qui nunc nobis videntur parum clari. Quam littera gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per.</p>
|
||
|
|
</aside>
|
||
|
|
<article>
|
||
|
|
<div>
|
||
|
|
<header>
|
||
|
|
<h1>Two columns center</h1>
|
||
|
|
<p>Nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Molestie consequat vel illum dolore eu feugiat nulla? </p>
|
||
|
|
</header>
|
||
|
|
<div class="body">
|
||
|
|
<h2>Two columns center-right</h2>
|
||
|
|
<p>Nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip. Molestie consequat vel illum dolore eu feugiat nulla? </p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<h2>Four columns center-right</h2>
|
||
|
|
<p>Delenit augue duis dolore te feugait nulla facilisi nam liber tempor cum soluta nobis. Facit eorum claritatem Investigationes demonstraverunt lectores legere me lius quod ii legunt! Vulputate velit esse molestie consequat: vel illum dolore eu feugiat nulla facilisis at vero? Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Quinta decima eodem modo typi, qui nunc nobis videntur parum clari fiant sollemnes in. Ut laoreet dolore magna aliquam erat volutpat ut wisi. </p>
|
||
|
|
</footer>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
</section><!-- /#content -->
|
||
|
|
|
||
|
|
<footer role="contentinfo">
|
||
|
|
<p id="hcard-oddbird-collective" class="author vcard">
|
||
|
|
copywrong (cc) 2009
|
||
|
|
<a href="http://www.oddbird.net" class="fn org url">OddBird Collective</a>
|
||
|
|
</p>
|
||
|
|
</footer><!-- /~contentinfo -->
|
||
|
|
|
||
|
|
</div><!-- /#page -->
|
||
|
|
</body>
|
||
|
|
</html>
|