Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
278 lines (277 sloc) 14 KB
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Template Variations | StackLayout Mockup 2</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" media="all" type="text/css" href="../stacklayout.css" />
<!--[if lte IE 7]>
<![endif]-->
<link rel="stylesheet" media="all" type="text/css" href="skin_mockup.css" />
<link rel="stylesheet" media="handheld, only screen and (max-width: 767px)" type="text/css" href="mockup_mobile.css" />
</head>
<body id="mockup2">
<div id="page">
<div class="stack">
<div id="header">
<h1 id="title" class="stackContent">Template Variations</h1>
<div id="banner" class="stackContent">
<img width="1100" src="images/my-banner.png" alt="My Banner" />
</div>
<ul id="nav" class="stackContent">
<li><a href="mockup1.html">Basic Mockup</a></li>
<li class="active"><a href="mockup2.html">Template Variations</a></li>
<li><a href="mockup3.html">Wrappers and Nesting</a></li>
<li><a href="mockup4.html">Semantic Class Names</a></li>
</ul>
</div>
<div id="content">
<div>
<h2 class="stackContent">Both these 2 column layouts have the same markup. Columns are moved using relative positioning.</h2>
<h2 class="stackContent"><strong>Layout 1:</strong></h2>
<div id="column1" class="stack3of4">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of4">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
</div>
<div class="flip2col">
<h2 class="stackContent"><strong>Layout 2:</strong></h2>
<div id="column1" class="stack3of4">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of4">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
</div>
<div>
<h2 class="stackContent">Similarly these 3 column layouts all have the same markup. Columns are moved using relative positioning.</h2>
<h2 class="stackContent"><strong>Layout 1:</strong></h2>
<div id="column1" class="stack3of5">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of5">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
<div id="column3" class="stack1of5">
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
</div>
</div>
<div class="flip3col">
<h2 class="stackContent"><strong>Layout 2:</strong></h2>
<div id="column1" class="stack3of5">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of5">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
<div id="column3" class="stack1of5">
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
</div>
</div>
<div class="flop3col">
<h2 class="stackContent"><strong>Layout 3:</strong></h2>
<div id="column1" class="stack3of5">
<div class="stackContent">
<h2>My Awesome Heading</h2>
<p>This is sample content</p>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
<div class="stack1of3">
<div class="stackContent">
<h3>Another Heading</h3>
<p>Even more sample content</p>
</div>
</div>
</div>
<div id="column2" class="stack1of5">
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
<div class="stackContent">
<h3>Column Heading</h3>
<p>Side column sample content</p>
</div>
</div>
<div id="column3" class="stack1of5">
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
<div class="stack1of2">
<h3 class="stackContent">Sample Content</h3>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div class="stackAuto">
<p class="stackContent">&copy; 2011 Your Name here</p>
</div>
<div class="stackAuto">
<a class="stackContent" href="#">License</a>
</div>
<div class="stackAuto">
<a id="twitter" class="stackContent" href="#">Follow me on Twitter</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.