Skip to content

Instantly share code, notes, and snippets.

@og-shawn-crigger

og-shawn-crigger/newlayour.html

Created March 14, 2012 22:35
Show Gist options
  • Save og-shawn-crigger/2040103 to your computer and use it in GitHub Desktop.
Save og-shawn-crigger/2040103 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Layout with Grid System and Bootstraped
Raw
newlayour.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="http://localhost/layout/css/stylesheet.css" rel="stylesheet" type="text/css">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" >
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<style>
body { background: url('http://www.preventionandwellbeing.net/images/bg.jpg') repeat;}
.header {
background: #e1e3de;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e3de), to(#999966));
background: -moz-linear-gradient(top, #e1e3de, #999966);
background: -webkit-linear-gradient(top, #e1e3de, #999966);
background: -o-linear-gradient(top, #e1e3de, #999966);
background: -ms-linear-gradient(top, #e1e3de, #999966);
background: linear-gradient(top, #e1e3de, #999966);
min-height: 167px;
font-family: 'LonelySandwichRegular';
}
h1.header {
font-size: 140%;
}
.footer {
background: #e1e3de;
background: -webkit-gradient(linear, left top, left bottom, from(#e1e3de), to(#999966));
background: -moz-linear-gradient(top, #e1e3de, #999966);
background: -webkit-linear-gradient(top, #e1e3de, #999966);
background: -o-linear-gradient(top, #e1e3de, #999966);
background: -ms-linear-gradient(top, #e1e3de, #999966);
background: linear-gradient(top, #e1e3de, #999966);
min-height: 272px;
}
.below_footer {
background: #6f6f4b;
min-height: 100px;
}
.content {
min-height: 392px;
background: #FFF;
}
nav.top ul {
list-style: none;
background: #376405;
}
nav.top ul li {
display: inline-block;
background: #376405;
width: 100px;
float: left;
height: 40px;
text-align: center;
font-size: 14px;
border-right: 1px solid #FFF;
}
nav.top ul li:last-child {
border: none;
}
nav.top ul li.active {
background: #fffeff;
}
nav.top ul li:hover {
background: #fffeff;
}
nav.top ul li a {
padding-top: 11px;
padding-bottom: 11px;
height:40px;
color: #000;
text-decoration: none;
vertical-align: middle;
display: block;
}
nav.top ul li a:hover {
color: #F90;
}
nav.top ul li a:active {
color: #F90;
}
</style>
</head>
<body>
<div class="container">
<div class="row header">
<div class="span10">
<h1>Test Header</h1>
</div>
<div class="span2">
<span class="pull-right" style="margin-right: 10px; ">Image here</span>
</div>
<div class="span6" style="margin-top:100px;">
Tagline here
</div>
<div class="span6" style="margin-top:100px;">
<nav class="top">
<ul class="pull-right">
<li class="active"><a href="#">First item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Second Item</a></li>
<li><a href="#">Second Item</a></li>
</ul>
</nav>
</div>
</div>
<div class="row content">
<div class="span12">
<div class="page-header">
<h1>Page Header goes here....</h1>
</div>
</div>
<div class="span6">
</div>
<div class="span6">
Split 1/2
</div>
</div>
<div class="row footer">
<div class="span6">
<h1>Our Services</h1>
<div class="row">
<div class="span3">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<div class="span3"
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
</div>
</div>
<div class="span6">
<h1>The other half of the footer</h1>
</div>
</div>
<div class="row below_footer">
<div class="span12">
<p style="margin:10px auto; margin-top: 30px; text-align: center;">Footer Links Would Go Here</p>
<p>Copyright stuff here</p>
</div>
</div>
</div> <!-- end of container -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment