o-no-typography : Design 6 « Templates « HTML / CSS






o-no-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">
<head>
<title>O'No! Typography</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<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(o-no-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(o-no-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(o-no-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(o-no-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="o-no-typography-images/logo.png" alt="" />
    <h2><span class="o">&quot;</span>all we do is <br />
      (<span class="o">really</span>) stunning typography for the world wide wonderful web<span class="o">&quot;</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="o-no-typography-images/typ.png" alt="" /> <img src="o-no-typography-images/og.png" alt="" /> <img src="o-no-typography-images/rap.png" alt="" /> <img class="right" src="o-no-typography-images/hy.png" alt="" />
    <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">ONo!</span> Typography 2009</div>
    <div class="credits right">Layout by <a href="http://john.onolan.org">John <span class="o">ONo!</span>an</a></div>
  </div>
</div>
<!--footer-->
<script type="text/javascript">Cufon.now();</script>
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.obsess
31.obsession
32.obtanium
33.office-plants
34.offlimits
35.offrecord
36.oheon_com_110100021
37.ohgreenworld
38.Okeanos
39.old-wall
40.oldarchitecture
41.Olive
42.one-penny
43.one_two_three
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination