Typography
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!--
**************************************************************
* *
* Thanks for your interest in the source code! *
* Designed and hand coded by John O'Nolan @ LyricalMedia.com *
* *
**************************************************************
-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>O'No! Typography - Created Exclusively for Smashing Magazine</title>
<style type='text/css'>
/*--------------------------------------|
| Site: http://www.smashingmagazine.com |
| Author: John O'Nolan |
| Author URI: http://john.onolan.org |
| Type: Screen |
| Date: June 2009 |
|--------------------------------------*/
/*--- CSS Reset ---*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 22px;
}
ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
.left {float:left}
.right {float:right;margin-right:0!important;}
.clearfix:after {
content: ".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/* Hides from IE-max \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/*--- Common ---*/
body {
font-family:Arial, Verdana, sans-serif;
color:#fff;
background:#474747 url(Typography-images/nav-bg.png) top left repeat-x
}
h1 {font-size:50px;letter-spacing:-10px}
h2 {
width:300px;
float:left;
font-size:40px;
line-height:58px;
letter-spacing:-1px;
margin:45px 0 0 70px;
text-indent:-15px;
}
h3 {
float:left;
margin:0 0 30px 0;
font-family:Times, Georgia, Serif;
font-weight:normal;
font-size:30px;
line-height:30px;
width:80%;
}
h4 {float:left;margin:0 0 20px 0;font-size:20px;}
p {font-size:16px;line-height:24px;margin-bottom:24px;float:left;}
em {font-style:italic;border-bottom:1px dashed;}
strong {font-weight:bold;color:#ff9000;text-transform:uppercase;}
a {color:#fff;border-bottom:1px solid;}
a:hover {color:#ff9000;}
.o {color:#ff9000}
.number {
float:right;
color:#fff;
font-family:Times, Georgia, Serif;
font-size:30px;
line-height:30px;
}
/*--- Layout ---*/
#wrapper {
width:960px;
margin:0 auto;
background:url(Typography-images/radial-bg.png) top left no-repeat;
}
/*--- Nav ---*/
#nav {
list-style:none;
margin:0;
padding:7px 0 0 0;
font-size:20px;
letter-spacing:-1px;
position:relative;
z-index:50;
}
#nav li {float:left;margin:0 72px 0 0;}
#nav li a {text-decoration:none;padding:3px 10px;border:none;}
#nav li#first a {padding-left:0}
/*--- Header ---*/
#header {height:375px}
#logo {float:left;margin:65px 0 0 0}
/*--- Content ---*/
.box {
float:left;
width:100%;
margin:45px 30px 0 0;
padding:10px 0 0 0;
background:url(Typography-images/box-bg.png) top left repeat-x
}
.small {width:300px;}
.big {width:630px;}
.sidenote p {
text-align:right;
font-size:20px;
line-height:24px;
margin:-1px 0 24px 0;
float:none;
}
/*--- Footer ---*/
#footer {
float:left;
width:100%;
height:355px;
margin:50px 0 0 0;
background:url(Typography-images/footer-bg.png) bottom left repeat-x;
}
.inner {width:960px;margin:0 auto;padding:40px 0 0 0;}
#footer img, #footer p {margin:0 53px 10px 0; width:200px;float:left}
.credits {margin:35px 0 0 0;font-size:13px}
.credits a {text-decoration:none;}
</style>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/CartoGothic_Std_400-CartoGothic_Std_700-CartoGothic_Std_italic_400-CartoGothic_Std_italic_700.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h4')('p');
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li id="first"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span id="navnumber" class="number">000</span>
<img id="logo" src="Typography-images/logo.png" alt="O'No! Typography, The Best Place on The Web" />
<h2><span class="o">"</span>all we do is <br />(<span class="o">really</span>) stunning typography for the world wide wonderful web<span class="o">"</span></h2>
<div class="clearfix"></div>
</div><!--header-->
<div id="content">
<div class="box">
<h3>About us, the story so far and how we got there</h3><span class="number">001</span>
<div class="clearfix"></div>
<div class="sidenote left small">
<p class="o">001. All About Us</p>
<p>Everything you need to know, wrapped up in a little nutshell</p>
</div>
<div class="right big">
<p>Lorem ipsum dolor sit amet, <em>consectetur adipisicing elit</em>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur <strong>sint occaecat</strong> cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="#">Read More...</a></p>
</div>
</div><!--about-->
<div class="box left small">
<h3>Portfolio</h3><span class="number">002</span>
<div class="clearfix"></div>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim. <a href="#">Read More...</a></p>
</div><!--portfolio"-->
<div class="box left small">
<h3>Blog</h3><span class="number">003</span>
<div class="clearfix"></div>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna eiusmod aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla voluptate pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui. <a href="#">Read More...</a></p>
</div><!--blog"-->
<div class="box right small">
<h3>Contact</h3><span class="number">004</span>
<div class="clearfix"></div>
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in. <a href="#">Read More...</a></p>
</div><!--contact"-->
</div><!--content-->
</div><!--wrapper-->
<div id="footer">
<div class="inner">
<img src="Typography-images/typ.png" alt="typ" />
<img src="Typography-images/og.png" alt="og" />
<img src="Typography-images/rap.png" alt="rap" />
<img class="right" src="Typography-images/hy.png" alt="hy" />
<p>01. Lorem ipsum sut dolor</p>
<p>02. Lorem ipsum sut dolor</p>
<p>03. Lorem ipsum sut dolor</p>
<p class="right">04. Lorem ipsum sut dolor</p>
<div class="clearfix"></div>
<div class="credits left">Copyright <span class="o">O?No!</span> Typography 2009</div>
<div class="credits right"><a href="http://www.flashmint.com/show-type-flash.html">Flash Templates</a> by<a href="http://www.flashmint.com/">FlashMint</a></div>
</div>
</div><!--footer-->
<script type="text/javascript">Cufon.now();</script>
</body>
</html>
Related examples in the same category