[Link]
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Company Name | About</title>
6
7 <!-- HTML5 -->
8 <!--[if lt IE 9]>
9 <script src="[Link]
10 <![endif]-->
11
12 <!-- VIEWPORT FOR MOBILE -->
13 <meta name="viewport" content="width=device-width; initial-scale=1"/>
14
15 <!-- MAIN CSS -->
16 <link href="css/[Link]" rel="stylesheet" type="text/css">
17
18 </head>
19
20 <body>
21
22
23 <header>
24 <div class="container">
25
26 <h2><a href="[Link]">Company Name</a></h2>
27 <p>Tagline</p>
28
29 <nav id="utilitynav">
30 <ul>
31 <li><a href="#">Link</a></li>
32 <li><a href="#">Link</a></li>
33 <li><a href="#">Link</a></li>
34 </ul>
35 </nav>
36
37 </div><!-- END CONTAINER -->
38 </header>
39
40 <nav id="mainnav">
41 <div class="container">
42
43 <ul class="group">
44 <li><a href="[Link]">Home</a></li>
45 <li class="selected"><a href="[Link]">About</a></li>
46 <li><a href="#">Products</a></li>
47 <li><a href="#">Contact</a></li>
48 </ul>
49
50 </div><!-- END CONTAINER -->
51 </nav>
52
53 <section id="main">
54 <div class="container group">
55
56 <article>
57 <h1>Title of the Main Article</h1>
58 <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
semper, nunc quis euismod porta. Cras volutptat neque eget neque volutpat in
1 of 3
[Link]
congue diam eleifend.</h2>
59 <h4 class="date">Date of Article MM/DD/YYYY</h4>
60 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus scelerisque condimentum leo in porta. Pellentesque ac mauris diam,
et scelerisque tortor. Cras volutpat neque eget neque volutpat in congue diam
eleifend. Donec aliquam accumsan urna, volutpat semper augue lobortis eget.
Maecenas condimentum est eu urna consectetur vestibulum. Curabitur eget purus
massa, non lobortis ipsum. Nulla mollis rhoncus vehicula. Pellentesque nunc
metus, posuere et pellentesque non, faucibus ut dui. Ut rhoncus iaculis est
eget pulvinar. Mauris consectetur ornare quam, congue vehicula tortor pharetra
et. Morbi ornare ipsum vel tortor ultricies venenatis consequat magna
convallis. Nullam fermentum, magna nec mattis porttitor, sem tortor faucibus
ipsum, sed rutrum tellus velit vel mauris. Vivamus vitae mauris ut lacus
blandit consectetur.</p>
61
62 <p>Maecenas ac lacus massa, ac sodales velit. Nullam viverra felis
quis mi volutpat non posuere lacus tempor. Aliquam erat volutpat. Curabitur
pellentesque, nunc sed ornare ultricies, libero nibh convallis odio, sit amet
pretium ante massa et erat. Nulla facilisi. In hac habitasse platea dictumst.
Suspendisse non metus justo. Cras sapien turpis, convallis ac fringilla quis,
aliquam egestas dui. Suspendisse mollis fringilla eros tempus congue. Aenean
diam dui, tempor sit amet placerat a, pellentesque non nisl. Nulla facilisi.
Integer nec ligula felis, eget mattis magna. In sit amet quam eu augue commodo
pharetra. Nunc eu magna nulla. Sed a diam nibh, non fermentum velit. Etiam et
facilisis neque.</p>
63
64 <p>In hac habitasse platea dictumst. Vestibulum orci urna, egestas
sit amet luctus eu, ullamcorper varius libero. Vivamus in diam mauris.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Morbi vulputate vehicula orci, eu pellentesque nibh viverra
porta. Phasellus tristique sem eu urna elementum vulputate. Cras eu enim sem.
Vivamus ullamcorper enim sit amet lectus porta loborti.</p>
65
66 </article>
67
68 <aside id="sidebar">
69
70 <div class="widget">
71 <h3>Subnav</h3>
72 <ul>
73 <li><a href="#">Sub Section 1</a></li>
74 <li><a href="#">Sub Section 2</a></li>
75 </ul>
76 </div>
77
78 <div class="widget">
79 <h3>Testimonials</h3>
80 <p>“Curabitur a nunc at arcu elementum tincidunt. Sed sit amet
turpis sed tortor venenatis lacinia. Suspendisse ut felis in tortor porttitor
euismod.” <span class="author">John Doe</span></p>
81 </div>
82
83 </aside>
84
85 </div><!-- END CONTAINER -->
86 </section>
87
88
89 <footer>
90 <div class="container">
2 of 3
[Link]
91
92 <nav id="footernav">
93 <ul class="group">
94 <li class="column1"><a href="#">Products</a>
95 <ul>
96 <li><a href="#">Services</a></li>
97 <li><a href="#">Packages</a></li>
98 <li><a href="#">Custom</a></li>
99 </ul>
100 </li>
101 <li class="column2"><a href="#">News</a>
102 <ul>
103 <li><a href="#">Latest News</a></li>
104 <li><a href="#">Facebook</a></li>
105 <li><a href="#">Twitter</a></li>
106 </ul>
107 </li>
108 <li class="column3"><a href="#">About</a>
109 <ul>
110 <li><a href="#">Mission Statement</a></li>
111 <li><a href="#">History</a></li>
112 </ul>
113 </li>
114 <li class="column4"><a href="#">Contact</a>
115 <ul>
116 <li>
117 <address>
118 John Doe<br>
119 Company Name<br>
120 999 Street Address, Town, ST 12345
121 </address>
122 </li>
123 <li>(800) 555-1212</li>
124 <li>email [at] [Link]</li>
125 </ul>
126 </li>
127 </ul>
128 </nav>
129
130 <p id="copyright">© Copyright 2013 Company Name</p>
131
132 </div><!-- END CONTAINER -->
133 </footer>
134
135
136
137 </body>
138 </html>
139
3 of 3
[Link]
/* BASE (Initital Setup)
=====================================
#RESET
#HTML5
#BASE TYPOGRAPHY
#BODY
#HEADINGS
#PARAGRAPHS
#LINKS
#LISTS
#IMAGES
#CLEARFIX
#LAYOUT/GRID
#SITE-SPECIFIC
#SECTIONS
#MEDIA QUERIES
#@FONT-FACE
===================================== */
/* #RESET
================================================== */
* {
margin: 0;
padding: 0;
}
/* #HTML5
================================================== */
header, section, footer, aside, nav, article, figure {
display: block;
}
/* BODY */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%; /* 1em = 16px */
line-height: 1.5em; /* 16px x 1.5em = 24px */
color: #333;
}
/* HEADINGS
Based on a Traditional Typographic Scale
48, 36, 24, 21, 18, 16
*/
h1, h2, h3, h4, h5, h6 {
margin-bottom: .5em;
}
h1 {
font-size: 3em; /* 48px / 16px = 3em */
line-height: 1em;
}
h2 {
font-size: 2.25em; /* 36px / 16px = 2.25em */
line-height: 1.1em;
}
1 of 10
[Link]
h3 {
font-size: 1.5em; /* 24px / 16px = 1.5em */
line-height: 1.2em;
}
h4 {
font-size: 1.3125em; /* 21px / 16px = 1.3125em */
line-height: 1.3em;
}
h5 {
font-size: 1.125em; /* 18px / 16px = 1.125em */
line-height: 1.4em;
}
h6 {
font-size: 1em; /* 16px / 16px = 1em */
line-height: 1.5em;
}
/* #Paragraphs
================================================== */
p {
margin-bottom: .5em;
}
/* #Links
================================================== */
a { color: #369; text-decoration: none; }
a:visited, a:hover, a:focus { color: #036; }
/* #Lists
================================================== */
ul, ol {
margin-bottom: .5em;
}
ul li ul, ul li ol, ol li ul, ol li ol {
margin: 0;
}
li {
margin-left: 1.875em;
}
/* #Images
================================================== */
[Link]-with-grid {
max-width: 100%;
height: auto;
}
a img {
border: none;
}
2 of 10
[Link]
/* #CLEARFIX
================================================== */
.group:after {
content: "";
display: table;
clear: both;
}
/* LAYOUT/GRID
===================================== */
.container {
width: 60em; /* 960px / 16px (base) = 60em */
margin: 0 auto;
}
/* SITE SPECIFIC CSS
===================================== */
/* #Sections (Header, Navigation, Content Sections, Footer) */
body {
background: #333;
}
h1 {
font-family: 'ChunkFiveRegular', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 2.625em; /* 42px / 16px = 2.625em */
line-height: 1.2em; /* 50px / 42px = ~1.2em */
margin-bottom: .3em;
}
h2 {
font-size: 1.5em; /* 24px / 16px = 1.5em */
line-height: 1.25em; /* 30px / 24px = 1.25em */
font-weight: normal;
margin-bottom: 1em;
}
h3 {
font-size: 1.3125em; /* 21px / 16px = 1.3125em */
line-height: 1.143em; /* 24px / 21px = ~1.143em */
}
h4 {
font-size: .6875em; /* 11px / 16px = .6875em */
line-height: 1.27em; /* 14px / 11px = ~1.27em */
text-transform: uppercase;
color: #666;
font-weight: normal;
}
.container {
width: 58.75em; /* 960px - 10px left and rigth side margins */
padding: 0 .625em; /*10px side margins */
3 of 10
[Link]
position: relative;
}
header {
background: #3279a1;
height: 155px;
}
header h1, header h2, header p {
margin: 0;
padding: 0;
}
header h1 a, header h2 a {
position: absolute;
top: 50px;
left: 10px;
display: block;
background: url(../images/[Link]) no-repeat;
width: 352px;
height: 0px;
padding-top: 65px;
overflow: hidden;
}
header p {
text-indent: -9000px;
height: 0px;
}
header #utilitynav {
position: absolute;
top: 10px;
right: 10px;
font-size: .75em;
}
header #utilitynav ul li {
float: left;
list-style: none;
margin: 0;
}
header #utilitynav ul li a {
color: #fff;
text-decoration: underline;
margin-left: 1em;
}
#mainnav {
background: #333;
font-family: "Arial Black", "Arial Bold", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform:uppercase;
letter-spacing: .05em;
}
#mainnav ul {
margin: 0;
}
4 of 10
[Link]
#mainnav ul li {
margin: 0;
list-style: none;
}
#mainnav ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: .8em 1.5em;
float: left;
}
#mainnav ul li a:hover {
color: #000;
background: #aaa;
}
#mainnav ul [Link] a, #mainnav ul [Link] a:hover {
color: #69c;
background: #333;
}
#section01 {
background: #ccc;
padding: 2em 0;
}
#section01 .column1 {
width: 36.17%;
float: right;
margin: 0 0 0 1.06%;
}
#section01 .column2 {
width: 61.71%;
float: left;
margin: 0 1.06% 0 0;
}
#section01 h2 {
font-family: 'ChunkFiveRegular', Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 2.625em; /* 42px / 16px = 2.625em */
line-height: 1.2em; /* 50px / 42px = ~1.2em */
margin-bottom: .2em;
}
#section01 p {
font-size: 1.125em; /* 18px / 16px = 1.125em */
line-height: 1.39em; /* 25px / 18px = ~1.39em */
}
#section01 [Link]-big {
background: url(../images/[Link]) no-repeat 0 0;
display: block;
width: 235px; /*width of image*/
height: 0;
5 of 10
[Link]
padding: 57px 0 0 0; /*top padding of 1/2 the height*/
overflow: hidden;
}
#section01 [Link]-big:hover {
background: url(../images/[Link]) no-repeat 0 -57px;
}
#section02 {
background: #fff;
padding: 2em 0;
}
#section02 .column1 {
float: left;
width: 23.4%;
margin: 0;
}
#section02 .column2 {
float: left;
width: 23.4%;
margin: 0 0 0 14.9%;
}
#section02 .column3 {
float: left;
width: 23.4%;;
margin: 0 0 0 14.9%;
}
#section02 h3 {
margin-bottom: .1em;
}
#section02 h4 {
border-bottom: 4px solid #000;
padding-bottom: .3em;
}
#section02 [Link]-small {
margin: 7px 0 0 0;
background: url(../images/[Link]) no-repeat 0 0;
display: block;
width: 128px; /*width of image*/
height: 0;
padding: 30px 0 0 0; /*top padding of 1/2 the height*/
overflow: hidden;
}
#section02 [Link]-small:hover {
background: url(../images/[Link]) no-repeat 0 -30px;
}
footer {
background: #333;
color: #fff;
padding: 2em 0;
}
6 of 10
[Link]
footer #footernav ul li {
margin: 0;
list-style: none;
text-transform: uppercase;
font-size: 1.125em; /* 18px / 16px = 1.125em */
line-height: 1.1em; /* 20px / 18px = ~1.1em */
}
footer #footernav ul li.column1,
footer #footernav ul li.column2,
footer #footernav ul li.column3 {
float: left;
width: 17.02%;
margin: 0 2.12% 0 0;
}
footer #footernav ul li.column4 {
float: right;
width: 23.4%;
}
footer #footernav ul li a {
color: #fff;
}
footer #footernav ul li a:hover {
text-decoration: none;
}
footer #footernav ul li ul {
border-top: 1px solid #fff;
margin-top: .4em;
margin-bottom: 1em;
padding-top: .4em;
}
footer #footernav ul li ul li {
text-transform: none;
font-size: .61em; /* 11px / 18px = ~.61em */
line-height: 1.64em; /* 18px / 11px = ~1.64em */
}
footer #footernav ul li ul li a:hover {
text-decoration: underline;
}
footer #footernav ul li ul li address {
font-style: normal;
}
footer #copyright {
font-size: .5625em; /* 9px / 16px = .5625em */
color: #999;
}
/* SUB PAGES */
#main {
background: #fff;
7 of 10
[Link]
#main article{
float: left;
width: 62%;
margin: 3em 0;
}
#main aside{
float: right;
width: 30%;
margin: 3em 0;
}
#main aside .widget {
margin: 0 0 2em 0;
padding: 2em;
background: #ccc;
-webkit-border-radius: 1.25em;
-moz-border-radius: 1.25em;
border-radius: 1.25em;
}
#main aside .widget h3 {
border-bottom: 4px solid #000;
padding-bottom: .2em;
text-transform: uppercase;
font-size: 1.125em; /* 18px / 16px = 1.125em */
line-height: 1.1em; /* 20px / 18px = ~1.1em */
}
#main aside .widget p {
font-size: .75em; /* 12px / 16px = .75em */
line-height: 1.6em; /* 20px / 12px = ~1.6em */
}
/* MEDIA QUERIES
===================================== */
/* Tablet (Between 768px - 992px)*/
@media all and (min-width: 48em) and (max-width: 62em) {
body {
font-size: 87.5%; /* 14px */
}
.container {
width: 96%;
margin: 0 2%;
padding: 0;
}
#section02 .column1 {
float: left;
width: 30%;
margin: 0;
}
8 of 10
[Link]
#section02 .column2,
#section02 .column3 {
float: left;
width: 30%;
margin: 0 0 0 5%;
}
footer #footernav ul li.column1,
footer #footernav ul li.column2,
footer #footernav ul li.column3 {
float: left;
width: 17%;
margin: 0 2% 0 0;
}
footer #footernav ul li.column4 {
float: right;
width: 24%;
}
/* MOBILE (Smaller than 768px)*/
@media all and (max-width: 47.9999em) {
body {
font-size: 75%; /* 12px */
}
.container {
width: 96%;
margin: 0 2%;
padding: 0;
}
header {
height: auto;
padding: 2em 1em;
}
header h1 a, header h2 a {
position: static;
background-size: 211px 39px;
width: 211px;
padding-top: 39px;
margin: 0 auto;
}
header #utilitynav {
display: none;
}
#mainnav ul {
padding: 1em 0;
}
#mainnav ul li a {
float: none;
}
9 of 10
[Link]
#section01 .column1,
#section01 .column2 {
width: 96%;
float: none;
margin: .5em 2%;
}
#section01 img {
margin-bottom: 1em;
}
#section02 .column1,
#section02 .column2,
#section02 .column3 {
width: 96%;
float: none;
margin: 1em 2% 3em 2%;
}
footer #footernav ul li.column1,
footer #footernav ul li.column2,
footer #footernav ul li.column3,
footer #footernav ul li.column4 {
width: 96%;
float: none;
margin: 2%;
}
#main article, #main aside {
width: 96%;
float: none;
margin: 2%;
padding: 3em 0 0 0;
}
footer #copyright {
margin: 0 2%;
}
/* @FONT-FACE
===================================== */
@font-face {
font-family: 'ChunkFiveRegular';
src: url('../fonts/[Link]');
src: url('../fonts/[Link]?#iefix') format('embedded-
opentype'),
url('../fonts/[Link]') format('woff'),
url('../fonts/[Link]') format('truetype'),
url('../fonts/[Link]#ChunkFiveRegular') format('svg');
font-weight: normal;
font-style: normal;
}
10 of 10