Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (82 sloc) 4.18 KB
<!doctype html>
<html>
<head>
<title>HNR using LESS</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/reset/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/fonts/fonts.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/base/base.css" type="text/css" media="screen" />
<link rel="stylesheet" href="jonikorpi-Less-Framework-d3d7877/main-16px.css" type="text/css" media="screen" />
<style>
body {margin: 0 auto}
.header { background: rgba(200,200,200,0.75); }
.sidebar { background: rgba(100,100,100,0.75); }
.main { background: rgba(150,150,150,0.75); }
.footer { background: rgba(0,0,0,0.75); color: #fff; }
.footer .col1 ul { margin: 0; border-right: 1px solid #fff; padding : 0 10px;}
.footer .col1 ul li { list-style-type: none; margin: 0; text-transform: capitalize; }
.footer .col1 ul li:first-child { color:red; font-weight: bold; text-transform: lowercase; }
.col1, .col2, .col3, .col4 {float:left; width: 25%; margin:5px 0;}
.col2 { width: 50%;}
.col3 { width: 75%;}
.col4 { width: 100%; margin-right: 0; }
.last { margin-right: 0; }
</style>
</head>
<body lang="en">
<div id="wrapper">
<div class="col4 header">
<h1>header</h1>
</div>
<div class="sidebar col1">
<h2>left column</h2>
<p>Fusce dapibus ultrices quam, ac convallis neque viverra nec. Pellentesque ut vehicula leo. Nulla leo libero, mattis elementum volutpat et, iaculis in ligula. Cras scelerisque leo et risus egestas pharetra. Suspendisse pellentesque tristique aliquam. Donec faucibus mauris vitae purus aliquam ut convallis ipsum placerat. Donec eu leo neque. </p>
</div>
<div class="main col3 last">
<h2>main content area</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis urna nulla. Aenean feugiat gravida luctus. Fusce convallis ornare purus, ac vehicula nibh aliquam nec. Nam at mi arcu. Nulla egestas lectus at dolor dignissim vulputate cursus ipsum mollis. Nam dolor felis, feugiat quis hendrerit sit amet, pretium ac nibh. In quam libero, hendrerit sit amet scelerisque at, fermentum a sapien. Maecenas rutrum vestibulum neque vel venenatis. Proin commodo faucibus tellus non dapibus. </p>
</div>
<div class="footer col4">
<div class="col1">
<ul>
<li>span-2 prepend-1 clear</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="col1">
<ul>
<li>span-2 prepend-1 clear</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="col1">
<ul>
<li>span-2 prepend-1 clear</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="col1 last">
<ul>
<li>span-2 prepend-1 clear</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
</div>
</div>
</body>
</html>