nimbuslike : Design 6 « Templates « HTML / CSS

nimbuslike

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Nimbuslike
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20090717

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Nimbuslike by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0px;
  padding: 0px;
  background: #B4F4FF url(nimbuslike-images/img01.jpg) repeat-x left top;
  line-height: 25px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #5698A3;
}

h1, h2, h3 {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  color: #337884;
}

h1 { font-size: 44px; }

h2 { font-size: 20px; }

h3 { }

p, ul, ol {
  margin-top: 0;
  text-align: justify;
  font-weight: normal;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

blockquote { }

a { color: #80A000; }

a:hover { text-decoration: none; }

a img {
  border: none;
}

img.left {
  float: left;
  margin: 7px 30px 0 0;
}

img.right {
  float: right;
  margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
  float: left;
  line-height: normal;
}

.list1 li img {
  margin: 0 30px 30px 0;
}

.list1 li.alt img {
  margin-right: 0;
}

#wrapper {
  width: 100%;
}

/* Header */

#header-wrapper {
  width: 900px;
  height: 143px;
  margin: 0px auto;
  padding: 0px;
}

#header {
  width: 900px;
  height: 92px;
  margin: 0px auto;
  background: url(nimbuslike-images/img02.gif) no-repeat left top;
}

/* Logo */

#logo {
  float: left;
  height: 52px;
  margin: 0px auto;
  padding: 40px 0px 0px 0px;
}

#logo h1 {
  float: left;
  margin: 0;
  padding: 0px 0px 0px 40px;
  letter-spacing: -1px;
  text-transform: lowercase;
  font: bold 34px "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#logo h1 a {
  color: #FFFFFF;
}

#logo h2 {
  float: left;
  padding: 10px 0px 0px 20px;
  letter-spacing: -1px;
  text-transform: lowercase;
  font-size: 14px;
  color: #E4EEB3;
}

#logo a {
  text-decoration: none;
  color: #E4EEB3;
}

/* Menu */

#menu {
  width: 900px;
  height: 51px;
  margin: 0px auto;
  padding-left: 40px;
  background: url(nimbuslike-images/img03.jpg) no-repeat left top;
}

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

#menu li {
  float: left;
}

#menu a {
  display: block;
  padding: 12px 20px 0px 22px;
  letter-spacing: -1px;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 20px;
  font-weight: normal;
  color: #D7E6A2;
}

#menu a:hover {
  text-decoration: underline;
}

#menu .first a {
  background: none;
  padding-left: 0px;
}


/* Search */

#search {
  float: right;
  width: 235px;
  padding: 50px 40px 0px 0px;
}

#search form {
  margin: 0 20px 0 0;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
  margin: 0 20px 0 0;
}

#search input {
  float: left;
}

#search-text {
  width: 235px;
  height: 22px;
  padding: 3px 0px 0px 26px;
  background: url(nimbuslike-images/img10.jpg) no-repeat left top;
  border: none;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #E4EEB3;
}

#search-submit {
  float: left;
  width: 34px;
  height: 29px;
  background: url(nimbuslike-images/img17.jpg) no-repeat left top;
  border: none;
  color: #636363;
}

/* Page */

#page {
  width: 870px;
  margin: 0px auto;
  border: 15px solid #FFFFFF;
  background: #FFFFFF url(nimbuslike-images/img04.gif) repeat-x left top;
}

#page-bgcontent {
  padding: 40px 25px 0px 25px;
  background: url(nimbuslike-images/img04.gif) repeat-x left top;
}

/* Content */

#content {
  float: left;
  width: 535px;
}

#banner {
  width: 870px;
  margin: 0px auto;
  padding-bottom: 5px;
}

/* Post */

.post {
  margin-bottom: 25px;
}

.post .title {
  padding: 26px 0px 0px 0px;
  letter-spacing: -1px;
  text-transform: lowercase;
  font-size: 34px;
  font-weight: normal;
}

.post .title h2 {
  margin: 0px;
  padding: 0px;
}

.post .byline {
  padding-top: 6px;
  letter-spacing: -1px;
  font-size: 20px;
  color: #74C6D5;
}

.post strong {
  color: #9B9A9A;  
}

.post .meta {
  height: 32px;
  padding-top: 6px;
  padding-left: 25px;
  background: url(nimbuslike-images/img06.jpg) repeat-x left top;
}

.post .meta a { }

.post .entry {
  padding: 0px 0px 20px 0px;
}

.post .links {
  padding: 0px 30px 0px 0px;
}

.post .links .comments {
  padding-left: 20px;
  background: url(nimbuslike-images/img07.gif) no-repeat left 3px;
}

.post .links .permalink {
  padding-left: 17px;
  background: url(nimbuslike-images/img08.gif) no-repeat left 3px;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 238px;
}

#sidebar ul {
  margin: 0px;
  list-style: none;
  line-height: normal;
  border: none;
}

#sidebar li {
  margin-bottom: 30px;
}

#sidebar li ul {
  line-height: 200%;
  padding: 0px;
  background: url(nimbuslike-images/img12.jpg) no-repeat left top;
}

#sidebar li li {
  margin: 0;
  padding: 7px 0px;
  background: url(nimbuslike-images/img09.jpg) repeat-x left bottom;
}

#sidebar p {
  margin: 0;
}

#sidebar h2 {
  width: 190px;
  height: 26px;
  padding: 20px 30px 10px 0px;
  background: url(nimbuslike-images/img11.jpg) no-repeat left top;
  letter-spacing: -1px;
  text-align: left;
  text-transform: lowercase;
  font-size: 22px;
  font-weight: normal;
}


#sidebar p {
  line-height: 200%;
  padding-bottom: 20px;
}

#sidebar a {
}

/* Calendar */

#calendar {
}

#calendar caption {
  padding-bottom: 5px;
  font-weight: bold;
}

#calendar table {
  width: 100%;
  border-collapse: collapse;
  border-right: 1px solid #F5F2EF;
}

#calendar thead th {
  padding: 5px 0;
  text-align: center;
  border-top: 1px solid #F5F2EF;
  border-left: 1px solid #F5F2EF;
  background: #F5F2EF;
}

#calendar tbody td {
  padding: 5px 0;
  text-align: center;
  border-top: 1px solid #F5F2EF;
  border-left: 1px solid #F5F2EF;
}

#calendar tfoot td {
  padding: 5px;
}

#calendar tfoot #next {
  text-align: right;
}

#calendar #today {
  background: #E7F1E1;
}

/* Footer */

#footer {
  height: 100px;
  margin: 0px auto;
  padding: 0px;
  background: url(nimbuslike-images/img04.gif) repeat-x left top;
}

#footer p {
  margin: 0;
  padding: 30px 0;
  text-align: center;
  text-transform: lowercase;
  line-height: normal;
  font-size: 11px;
  color: #A2CAD1;
}

#footer a {
  color: #A2CAD1;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header-wrapper">
    <div id="header">
      <div id="logo">
        <h1><a href="#">Nimbuslike</a></h1>
        <h2>by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> + <a href="http://www.freecsstemplates.org/">fct</a></h2>
      </div>
      <div id="search">
        <form method="get" action="">
          <fieldset>
          <input type="text" id="search-text" name="s" value="" />
          </fieldset>
        </form>
      </div>
      <!-- end #logo -->
    </div>
    <!-- end #header -->
    <div id="menu">
      <ul>
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- end #menu -->
  </div>
  <!-- end #header-wrapper -->
  <div id="page">
    <div id="banner"><a href="#"><img src="nimbuslike-images/img05.jpg" alt="" /></a></div>
    <div id="page-bgcontent">
      <div id="content">
        <div class="post">
          <h2 class="title">Welcome to Nimbuslike </h2>
          <p class="byline">by nodethirtythree and freecsstemplates </p>
          <div class="entry">
            <p><strong>Nimbuslike</strong> is a free template by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> and <a href="http://www.freecsstemplates.org">Free CSS Templates</a> released under the <a href="http://creativecommons.org/">Creative Commons Attribution license</a>. The photo above is from <a href="http://www.pdphoto.org">PDPhoto.org</a>. Youre free to use this template for commercial or personal use provided you keep the footer links to our sites intact.  Thats all :)</p>
            <p>This template is also available as a <a href="http://www.freewpthemes.net">WordPress theme</a>. Check out more WordPress conversions of our templates at <a href="http://www.freewpthemes.net">Free WP Themes</a> and follow me on <a href="http://twitter.com/nodethirtythree">Twitter</a> for news and updates.</p>
          </div>
          <div class="meta">
            <p class="links"><a href="#" class="comments">Comments (64)</a> &nbsp;&nbsp;&nbsp; <a href="#" class="permalink">Full article</a></p>
          </div>
        </div>
        <div class="post">
          <h2 class="title">Veroeros Sed Consequat</h2>
          <p class="byline">posted by someone on july 19, 2009</p>
          <div class="entry">
            <p>Sed vel quam. Vestibulum pellentesque. Morbi sit amet magna ac lacus dapibus interdum. Donec pede nisl, gravida iaculis, auctor vitae, bibendum sit amet, mauris. Cras adipiscing libero et risus. Donec rutrum tempus massa. Proin at mauris sed <a href="#">elit venenatis porttitor</a>. Morbi quam nisl, fringilla quis.</p>
            <p>Sagittis nec, adipiscing at, elit. Maecenas sed sem sit amet lectus mattis molestie. Integer quis eros lorem ipsum dolor sit amet veroeros consequat ipsum dolor sit amet veroeros consequat.</p>
          </div>
          <div class="meta">
            <p class="links"><a href="#" class="comments">Comments (64)</a> &nbsp;&nbsp;&nbsp; <a href="#" class="permalink">Full article</a></p>
          </div>
        </div>
      </div>
      <!-- end #content -->
      <div id="sidebar">
        <ul>
          <li>
            <h2>blandit sed dolore</h2>
            <p><strong>Lorem ipsum dolor sit</strong> amet consectetur adipiscing elit. Vivamus sed elit id dolor varius iaculis. Donec accumsan aliquam interdum. eget velit placerat imperdiet. Aenean vulputate felis vitae turpis <a href="#">tempus vehicula tempor dolor </a>dignissim. Aenean at tortor augue.</p>
          </li>
          <li>
            <h2>dolor sit volutpat</h2>
            <ul>
              <li><a href="#">Sed accumsan congue</a></li>
              <li><a href="#"> Nulla dignissim nec augue</a></li>
              <li><a href="#">Nunc ante elit nulla</a></li>
              <li><a href="#">Sed suscipit consequat</a></li>
              <li><a href="#">Cursus sed arcu sed</a></li>
              <li><a href="#">Nulla dignissim nec augue</a></li>
              <li><a href="#">Sed accumsan congue</a></li>
              <li><a href="#">Dignissim lorem augue</a></li>
              <li><a href="#">Nunc ante elit nulla</a></li>
              <li><a href="#">Sed suscipit consequat</a></li>
              <li><a href="#">Cursus sed arcu sed<br />
                </a></li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- end #sidebar -->
      <div style="clear: both;">&nbsp;</div>
    </div>
    <div id="footer">
      <p>(c) 2009 Sitename.com. Design by <a href="http://www.nodethirtythree.com/">nodethirtythree</a> + <a href="http://www.freecsstemplates.org">free css templates</a></p>
    </div>
    <!-- end #footer -->
  </div>
  <!-- end #page -->
</div>
</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.	nixed
20.	noimages
21.	noname1
22.	nonzero
23.	nothingfanzy
24.	nourish
25.	nowhere
26.	NuahSwirl
27.	nullbullum
28.	numerology
29.	o-no-typography
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