blootoon : Design 3 « Templates « HTML / CSS

blootoon

     

<!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" lang="en" xml:lang="en">
<head>
<title>Blootoon</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
BLOOTOON STYLESHEET
A SKYROCKET LABS FREE XHTML/CSS TEMPLATE
http://www.skyrocketlabs.com
fred@skyrocketlabs.com
*/

/* ARCHITECTURE */

body {
  font: normal 85% arial,verdana,tahoma,sans-serif;
  color: #666;
  margin: 0;
  padding: 0;
  background: #50c5f1 url(blootoon-img/backgr.png);
}

#top {
  width: 980px;
  height: 130px;
  margin: 0 auto;
}

#logo {
  float: left;
  width: 360px;
  height: 130px;
}

#nav {
  float: right;
  width: 578px;
  height: 21px;
  margin: 35px 0 0 0;
  padding: 15px 20px;
  background: #000;
  border: 1px solid #000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;  
}

#wrapper {
  width: 940px;
  min-height: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 4px solid #fff;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;  
  overflow: hidden;  
}

#main {
  float: left;
  width: 625px;
  min-height: 760px;
  margin: 0 20px 0 0;
}

.post-snippet {
  width: 583px;
  min-height: 100px;
  margin: 0 0 25px 0;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #e0e0e0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  overflow: hidden;  
}

#sidebars {
  float: right;
  width: 260px;
  min-height: 760px;
}

#ads {
  width: 260px;
  height: 260px;
  margin: 0 0 20px 0;
}

.sidebar {
  width: 218px;
  min-height: 50px;
  margin: 0 0 30px 0;
  padding: 20px;
  background: #f4f4f4;
  border: 1px solid #e0e0e0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

#footer {
  width: 958px;
  height: 25px;
  margin: 30px auto;
  padding: 15px;
  background: #000;
  border: 1px solid #000;
  -moz-border-radius: 30px;
  -webkit-border-radius: 30px;
}

.line {
  width: 630px;
  height: 1px;
  margin: 40px 0;
  background: #ddd;
  overflow: hidden;
}

/* PRIMARY NAV MENU */

#nav ul {
  float: left;
  width: 378px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li {
  display: inline;
}

#nav li a {
  font-size: 1.0em;
  font-weight: normal;
  line-height: 21px;
  color: #999;
  text-decoration: none;
  margin: 0 25px 0 0;
  padding: 0;
}

#nav li a:hover {
  color: #50c5f1;
  text-decoration: none;
}

#nav li a.current {
  color: #fff;
  text-decoration: none;
}

/* FOOTER NAV MENU */

#footer ul {
  float: left;
  margin: 0 0 0 15px;
  padding: 0;
  list-style: none;
}

#footer li {
  display: inline;
  font-size: 0.9em;
  line-height: 25px;
  color: #999;
  margin: 0 25px 0 0;
  padding: 0;
}

#footer li a {
  color: #999;
  text-decoration: none;
}

#footer li a:hover {
  color: #50c5f1;
  text-decoration: none;
}

/* TYPOGRAPHY */

#main h2 {
  font-size: 2.3em;
  font-weight: normal;
  line-height: 1.0em;
  letter-spacing: -2px;
  margin: 0 0 15px 0;
  color: #000;
}

#main h2 a {
  color: #000;
  text-decoration: none;
}

#main h2 a:hover {
  color: #50c5f1;
  text-decoration: underline;
}

#main h4.post-date {
  font-size: 1.0em;
  font-weight: normal;
  line-height: 1.0em;
  margin: 0 0 15px 0;
  color: #999;
}

#main p {
  font-size: 1.0em;
  line-height: 1.6em;
  margin: 0;
}

#main p a {
  color: #50c5f1;
  text-decoration: underline;
}

#main p a:hover {
  color: #000;
  text-decoration: underline;
}

#main ul.buttons {
  height: 35px;
  margin: 15px 0 0 0;
  padding: 0;
  list-style: none;
}

#main ul.buttons li {
  display: inline;
}

#main ul.buttons li a {
  float: left;
  display: block;
  font-size: 0.9em;
  line-height: 0.9em;
  margin: 0 18px 0 0;
  padding: 11px 14px;
  color: #666;
  text-decoration: none;
  background: #e9e9e9 url(blootoon-img/buttons-backgr.png) repeat-x;
  border: 1px solid #bbb;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

#main ul.buttons li a:hover {
  color: #000;
  text-decoration: none;
}

#sidebars h3 {
  font-size: 1.4em;
  font-weight: normal;
  line-height: 1.0em;
  letter-spacing: -1px;
  color: #000;
  margin: 0 0 12px 0;
  padding: 0 0 12px 0;
  border-bottom: 1px solid #ddd;
}

#sidebars ul {
  margin: -12px 0 0 0;
  padding: 0;
  list-style: none;
}

#sidebars li {
  font-size: 1.0em;
  line-height: 1.3em;
  color: #999;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}

#sidebars li.last {
  padding: 10px 0 0 0;
  border-bottom: none;
}

#sidebars li a {
  color: #666;
  text-decoration: none;
}

#sidebars li a:hover {
  color: #50c5f1;
  text-decoration: none;
}

/* IMAGES  */

#logo img {
  border: 0;
}

.post-snippet img {
  margin: 0 0 16px 0;
  border: 1px solid #ddd;
}

#ads img, #ads img.right {
  float: left;
  margin: 0 10px 10px 0;
  border: 0;
}

#ads img.right {
  margin: 0 0 10px 0;
}

/* FORMS */

form,fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

#nav form,fieldset {
  float: right;
  width: 200px;
  margin: -4px 0 0 0;
}

.searchfield {
  font: normal 1.0em arial,verdana,tahoma,sans-serif;
  color: #000;
  margin: 0;
  padding: 10px 14px;
  background: #444;
  border: 1px solid #444;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px; 
}

.searchfield:focus {
  background: #f0f0f0;
  border: 1px solid #f0f0f0;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px; 
}


</style>


</head>
<body>
<!-- BEGIN TOP -->
<div id="top">
  <div id="logo"> <a href="#"><img src="blootoon-img/logo.png" alt="" /></a> </div>
  <div id="nav">
    <ul>
      <li><a href="#" class="current">Page one</a></li>
      <li><a href="#">Page two</a></li>
      <li><a href="#">Page three</a></li>
      <li><a href="#">Page four</a></li>
    </ul>
    <form action="#">
      <fieldset>
        <input type="text" size="23" class="searchfield" />
      </fieldset>
    </form>
  </div>
</div>
<!-- END TOP -->
<!-- BEGIN WRAPPER -->
<div id="wrapper">
  <!-- BEGIN MAIN -->
  <div id="main">
    <!-- BEGIN POST SNIPPET -->
    <div class="post-snippet">
      <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></h2>
      <h4 class="post-date">January 6, 2010</h4>
      <a href="#"><img src="blootoon-img/post-pic.jpg" alt="" /></a>
      <p>Aliquam nec tortor id libero ullamcorper cursus. Praesent tempor arcu <a href="#">vel ante suscipit sed</a> auctor nisl eleifend. Sed posuere egestas pulvinar. Ut tortor libero, egestas ut aliquam sed, aliquam eget sem. Nunc molestie nisi a justo luctus sagittis.</p>
      <ul class="buttons">
        <li><a href="#">Full post &raquo;</a></li>
      </ul>
    </div>
    <!-- END POST SNIPPET -->
    <!-- BEGIN POST SNIPPET -->
    <div class="post-snippet">
      <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></h2>
      <h4 class="post-date">January 6, 2010</h4>
      <a href="#"><img src="blootoon-img/post-pic.jpg" alt="" /></a>
      <p>Aliquam nec tortor id libero ullamcorper cursus. Praesent tempor arcu <a href="#">vel ante suscipit sed</a> auctor nisl eleifend. Sed posuere egestas pulvinar. Ut tortor libero, egestas ut aliquam sed, aliquam eget sem. Nunc molestie nisi a justo luctus sagittis.</p>
      <ul class="buttons">
        <li><a href="#">Full post &raquo;</a></li>
      </ul>
    </div>
    <!-- END POST SNIPPET -->
    <!-- BEGIN POST SNIPPET -->
    <div class="post-snippet">
      <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></h2>
      <h4 class="post-date">January 6, 2010</h4>
      <a href="#"><img src="blootoon-img/post-pic.jpg" alt="" /></a>
      <p>Aliquam nec tortor id libero ullamcorper cursus. Praesent tempor arcu <a href="#">vel ante suscipit sed</a> auctor nisl eleifend. Sed posuere egestas pulvinar. Ut tortor libero, egestas ut aliquam sed, aliquam eget sem. Nunc molestie nisi a justo luctus sagittis.</p>
      <ul class="buttons">
        <li><a href="#">Full post &raquo;</a></li>
      </ul>
    </div>
    <!-- END POST SNIPPET -->
    <!-- BEGIN POST SNIPPET -->
    <div class="post-snippet">
      <h2><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></h2>
      <h4 class="post-date">January 6, 2010</h4>
      <a href="#"><img src="blootoon-img/post-pic.jpg" alt="" /></a>
      <p>Aliquam nec tortor id libero ullamcorper cursus. Praesent tempor arcu <a href="#">vel ante suscipit sed</a> auctor nisl eleifend. Sed posuere egestas pulvinar. Ut tortor libero, egestas ut aliquam sed, aliquam eget sem. Nunc molestie nisi a justo luctus sagittis.</p>
      <ul class="buttons">
        <li><a href="#">Full post &raquo;</a></li>
      </ul>
    </div>
    <!-- END POST SNIPPET -->
    <ul class="buttons">
      <li><a href="#">Browse the archives &raquo;</a></li>
    </ul>
  </div>
  <!-- END MAIN -->
  <!-- BEGIN SUDEBARS -->
  <div id="sidebars">
    <div id="ads"> <a href="#"><img src="blootoon-img/ad-blank.jpg" alt="" /></a> <a href="#"><img src="blootoon-img/ad-blank.jpg" alt="" class="right" /></a> <a href="#"><img src="blootoon-img/ad-blank.jpg" alt="" /></a> <a href="#"><img src="blootoon-img/ad-blank.jpg" alt="" class="right" /></a> </div>
    <div class="sidebar">
      <h3>Sidebar header</h3>
      <ul>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li class="last"><a href="#">List item</a></li>
      </ul>
    </div>
    <div class="sidebar">
      <h3>Sidebar header</h3>
      <ul>
        <li><a href="#">List item</a></li>
        <li><a href="#">List item</a></li>
        <li class="last"><a href="#">List item</a></li>
      </ul>
    </div>
    <div class="sidebar">
      <h3>Sidebar header</h3>
      <ul>
        <li><a href="#">List item</a> (0)</li>
        <li><a href="#">List item</a> (0)</li>
        <li><a href="#">List item</a> (0)</li>
        <li><a href="#">List item</a> (0)</li>
        <li><a href="#">List item</a> (0)</li>
        <li class="last"><a href="#">List item</a> (0)</li>
      </ul>
    </div>
  </div>
  <!-- END SIDEBARS -->
</div>
<!-- END WRAPPER -->
<!-- BEGIN FOOTER -->
<div id="footer">
  <ul>
    <li>&copy;2010 <a href="#">Name Here</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Privacy Policy</a></li>
    <li><a href="#">Careers</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Sitemap</a></li>
    <li>Designed by <a href="http://www.skyrocketlabs.com/">Skyrocket Labs</a></li>
  </ul>
</div>
<!-- END FOOTER -->
</body>
</html>

Related examples in the same category

1.	blankspace
2.	Blasphemy
3.	blended
4.	blewwave
5.	blush
6.	boardroom
7.	BOOM
8.	boorish
9.	boosting
10.	bordered
11.	boswell
12.	bounderies
13.	boxedtype
14.	boxes_template
15.	boxybox
16.	branches
17.	breaking_ontop
18.	brewedcoffee
19.	brightfolio
20.	brightsideoflife1.0
21.	Broadcaster
22.	broadsheet
23.	brycesunrise
24.	bucolic
25.	burgeon
26.	buzz
27.	BW
28.	bwdec2007
29.	calliope
30.	callofduty2
31.	candiiclouds
32.	cantya-studio
33.	canuckington-post
34.	canvass
35.	capricious
36.	capsicum
37.	carbonated
38.	carbonizer
39.	carlmelon
40.	caronline
41.	carrera
42.	castellated
43.	catch_info
44.	cattleya
45.	center-stage
46.	COIL
47.	col1
48.	col2
49.	col3
50.	collaboration
51.	collectiveblue
52.	collegemusic
53.	colorus
54.	colosseum
55.	columna
56.	combination
57.	ComingSoon
58.	commission
59.	communication-1.0
60.	communication-co
61.	communication
62.	community-live
63.	compiled
64.	complete-collection
65.	complimentary
66.	component
67.	compressed
68.	compromise
69.	compus
70.	conceptnova
71.	concrete
72.	concurrence
73.	condition
74.	conglomerate
75.	conjunction
76.	connection
77.	connections
78.	consulting-co
79.	contemplate
80.	convergence
81.	cookiefusion
82.	Copy of modify
83.	corporattica
84.	Cosmopolitan
85.	counterstrike
86.	cover
87.	coverage
88.	coxswain
89.	creamburn
90.	crisp2
91.	criterion
92.	crystalblack
93.	css-heaven-1
94.	cssgallery
95.	cssheaven-2
96.	cssmajesty
97.	cubismo
98.	cultivated
99.	cultureshock
100.	cupofcoffee
101.	customary
102.	customize
103.	cyano
104.	cyanspark
105.	cyberarray
106.	daleri-mega
107.	daleri-structure
108.	dalmatians
109.	danmyaz1
110.	dapple
111.	david-kruger
112.	deardiary
113.	decorative
114.	deepimpact
115.	deerpark
116.	dekada
117.	delta
118.	delzep_enterprise
119.	description
120.	deserted
121.	desertsand
122.	design-gallery
123.	design-studio
124.	design10
125.	Design9
126.	designersstudio
127.	designersworld
128.	designgalo
129.	designhq
130.	designstudio
131.	Design_Agency
132.	deskspace
133.	detachable
134.	deviation
135.	devision
136.	dewdrops
137.	dezinstudio
138.	didactic
139.	Did_My_Time
140.	differential
141.	digitalweb
142.	dimension
143.	diminishing
144.	dirtylicious
145.	disambiguation
146.	discovery
147.	distillate
148.	distinctive
149.	diversity
150.	DJ