Basic Web Grid Template

Basic Web Grid

Strapline, delete this if you don't want to use it!

This is some callout text that works best as a nice and punchy description for your site & company.

.content

Header 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Header 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

This is a Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Header 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


Source: http://codepen.io/ahd/pen/GfakJ
Code:

Basic Web Grid

Strapline, delete this if you don't want to use it!



This is some callout text that works best as a nice and punchy description for your site & company.


.content

Header 2

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Header 3

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

This is a Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Header 4

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.





.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

.quart .module

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.


CSS:
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);
* {
box-sizing: border-box;
}

h1, h2, h3, h4 {
margin: 0;
}

a:link, a:visited {
color: inherit;
text-decoration: none;
}

body {
background: url(http://subtlepatterns.com/patterns/binding_dark.png);
color: #333;
font-family: "Open Sans Condensed", sans-serif;
font-size: 1em;
}

p {
text-align: justify;
}

blockquote {
font-style: italic;
color: #666;
background: #f1f1f1;
border: 1px solid #60ba6d;
padding: 20px;
}
blockquote p {
padding: 0;
margin: 0;
}

.wrapper {
width: 100%;
max-width: 1050px;
margin: 20px auto 0 auto;
background: #f1f1f1;
padding: 20px;
overflow: hidden;
}

.top {
width: 100%;
padding: 0;
position: relative;
}
.top span {
position: absolute;
top: 40%;
right: 0;
font-size: 1.2em;
}

.banner {
overflow: hidden;
background: url(http://subtlepatterns.com/patterns/textured_paper.png);
width: 100%;
height: 350px;
margin-top: 20px;
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
position: relative;
}
.banner h1 {
padding-top: 14%;
text-align: center;
}
.banner span {
font-weight: normal;
position: absolute;
bottom: 0;
left: 0;
padding: 20px;
width: 100%;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
}

.clear {
clear: both;
}

nav {
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
margin-top: 20px;
overflow: hidden;
background-color: #60ba6d;
color: #f1f1f1;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
text-transform: uppercase;
padding: 20px;
}
nav ul li a {
text-decoration: none;
font-weight: bold;
}
nav ul li:hover, nav ul .current {
background: #78d686;
color: #333;
}

.callout {
margin-top: 20px;
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
overflow: hidden;
padding: 20px;
width: 100%;
background: #fff;
text-align: justify;
}

.content {
background-color: #fff;
padding: 20px;
margin-top: 20px;
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
overflow: hidden;
width: 64%;
float: left;
}

.sidebar {
background-color: #fff;
padding: 20px;
margin-top: 20px;
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
float: right;
width: 33.33%;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar ul li {
margin-top: 10px;
padding: 10px;
text-transform: uppercase;
background: #78d686;
color: #333;
}
.sidebar ul li:hover {
color: #fff;
background: #60ba6d;
}

.lower {
overflow: hidden;
}
.lower .quart {
width: 25%;
float: left;
padding: 20px 0 0 0;
}
.lower .quart .module {
padding: 20px;
border-top: 3px solid #60ba6d;
border-bottom: 3px solid #60ba6d;
background-color: #fff;
}
.lower .quart p {
margin: 0;
}

.footer {
max-width: 1050px;
width: 100%;
background-color: #60ba6d;
padding: 20px;
margin: 0 auto;
overflow: hidden;
}