newave : Design 6 « Templates « HTML / CSS






newave

   

<!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

Title      : Newave
Version    : 1.0
Released   : 20070803
Description: A wide two-column design suitable for blogs and small websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Newave 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: 0;
  padding: 0;
  background: #FFFFFF url(newave-images/img01.jpg) repeat-x;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
}

form {
  margin: 0;
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

input, textarea, select {
  font: normal 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h1, h2 {
  font-weight: normal;
  color: #7CD300;
}

h1 {
  letter-spacing: -1px;
  font-size: 2.6em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
}

p, ul, ol {
}

p {
}

blockquote {
  font-style: italic;
}

ul {
}

ol {
}

a {
  color: #7CD300;
}

a:hover {
  text-decoration: none;
}

small {
}

hr {
  display: none;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 15px 0 0;
}

img.right {
  float: left;
  margin: 0 0 0 15px;
}

/* Header */

#header {
  width: 920px;
  height: 160px;
  margin: 0 auto;
}

/* Logo */

#logo {
  float: left;
}

#logo h1, #logo h2 {
  margin: 0;
  text-transform: lowercase;
}

#logo h1 {
  padding-top: 52px;
  font-size: 4em;
  color: #554D49;
}

#logo h1 a {
  color: #554D49;
}

#logo h2 {
  margin-top: -10px;
  padding-left: 1px;
  letter-spacing: -1px;
  font-size: 1.8em;
  color: #7F7772;
}

#logo h2 a {
  color: #7F7772;
}

#logo a {
  text-decoration: none;
}

/* Menu */

#menu {
  float: right;
}

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

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  width: 130px;
  height: 90px;
  padding-top: 30px;
  background: #73D000 url(newave-images/img02.jpg) no-repeat;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 1.6em;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 920px;
  margin: 0 auto;
  padding-top: 20px;
}

#latest-post {
  float: left;
  width: 480px;
}

#recent-posts {
  float: right;
  width: 380px;
  padding: 12px 0 0 30px;
  background: url(newave-images/img03.gif) repeat-y;
}

#recent-posts .entry {
  background: url(newave-images/img04.gif) repeat-x left bottom;
}

.post {
}

.post .title {
  margin: 0;
}

.post .meta {
  margin: 0;
  padding-bottom: 10px;
  line-height: normal;
  font-family: Arial, Helvetica, sans-serif;
  color: #BABABA;
}

.post .meta a {
  color: #BABABA;
}

.post .entry {
  margin-bottom: 10px;
  padding-bottom: 5px;
}

/* Sidebar */

#sidebar {
  clear: both;
  width: 920px;
  background: #CDEB8B url(newave-images/img05.gif) no-repeat;
  border-top: 20px solid #FFFFFF;
  color: #008C00;
}

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

#sidebar li {
  display: block;
  float: left;
  width: 200px;
  padding: 15px;
}

#sidebar li ul {
  line-height: 1.8em;
}

#sidebar li li {
  display: list-item;
  float: none;
  width: auto;
  padding: 0;
}

#sidebar h2 {
  margin: 0 0 15px 0;
  color: #008C00;
}

#sidebar a {
  text-decoration: none;
  color: #008C00;
}

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

/* Footer */

#footer {
  width: 920px;
  height: 100px;
  margin: 0 auto;
  background: url(newave-images/img06.gif) no-repeat;
}

#footer p {
  margin: 0;
  padding: 15px;
}

#legal {
  float: left;
}

#links {
  float: right;
}


</style>


</head>
<body>
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Newave</a></h1>
    <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/">home</a></li>
      <li><a href="http://www.free-css.com/">photos</a></li>
      <li><a href="http://www.free-css.com/">about</a></li>
      <li><a href="http://www.free-css.com/">links</a></li>
      <li><a href="http://www.free-css.com/">contact</a></li>
    </ul>
  </div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
  <!-- start content -->
  <div id="content">
    <!-- start latest-post -->
    <div id="latest-post" class="post">
      <h1 class="title">Welcome to Our Website!</h1>
      <p class="meta"><small>Posted by Admin on August 3, 2007<br />
        Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (12)</a></small></p>
      <div class="entry">
        <p>This is <strong>Newave</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)</p>
        <p>This template is also available as a <a href="http://www.freewpthemes.net/preview/newave/">WordPress theme</a> at <a href="http://www.freewpthemes.net/">Free WordPress Themes</a>.</p>
        <h2>Sample Tags</h2>
        <blockquote>
          <p>&#8220;A blockquoted paragraph. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.&#8221;</p>
        </blockquote>
        <p>An example of an ordered list:</p>
        <ol>
          <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
          <li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
        </ol>
        <h3>Heading Level 3: Followed by an Unordered List</h3>
        <ul>
          <li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
          <li>Maecenas vitae orci vitae tellus feugiat eleifend.</li>
          <li>Etiam ac tortor eu metus euismod lobortis</li>
        </ul>
        <p>&nbsp;</p>
      </div>
    </div>
    <!-- end latest-post -->
    <!-- start recent-posts -->
    <div id="recent-posts">
      <div class="post">
        <h2 class="title">Maecenas Vitae Orci Vitae</h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="http://www.free-css.com/">Read more&hellip;</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Maecenas Vitae Orci Vitae</h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="http://www.free-css.com/">Read more&hellip;</a></p>
        </div>
      </div>
      <div class="post">
        <h2 class="title">Maecenas Vitae Orci Vitae</h2>
        <p class="meta"><small>Posted by Admin on August 3, 2007<br />
          Filed under <a href="http://www.free-css.com/">Uncategorized</a> | <a href="http://www.free-css.com/">Comments (12)</a></small></p>
        <div class="entry">
          <p>Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit [&hellip;]</p>
          <p><a href="http://www.free-css.com/">Read more&hellip;</a></p>
        </div>
      </div>
    </div>
    <!-- end recent-posts -->
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>
      <li id="search">
        <h2>Search</h2>
        <form method="get" action="">
          <fieldset>
          <input type="text" id="s" name="s" value="" />
          <input type="submit" id="x" value="Search" />
          </fieldset>
        </form>
      </li>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Fusce dui neque fringilla</a></li>
          <li><a href="http://www.free-css.com/">Eget tempor eget nonummy</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Nec metus sed donec</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
          <li><a href="http://www.free-css.com/">Eget tempor eget nonummy</a></li>
        </ul>
      </li>
      <li>
        <h2>Volutpat Dolore</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Eget tempor eget nonummy</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
          <li><a href="http://www.free-css.com/">Nec metus sed donec</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Fusce dui neque fringilla</a></li>
        </ul>
      </li>
      <li>
        <h2>Magna Bibendum</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Nec metus sed donec</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
          <li><a href="http://www.free-css.com/">Eget tempor eget nonummy</a></li>
          <li><a href="http://www.free-css.com/">Nec metus sed donec</a></li>
          <li><a href="http://www.free-css.com/">Magna lacus bibendum mauris</a></li>
          <li><a href="http://www.free-css.com/">Velit semper nisi molestie</a></li>
        </ul>
      </li>
    </ul>
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end sidebar -->
</div>
<!-- end page -->
<div id="footer">
  <p id="legal">&copy;2007 Newave. All Rights Reserved. | Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
  <p id="links"><a href="http://www.free-css.com/">Privacy</a> | <a href="http://www.free-css.com/">Terms</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.newdarkside
2.newday
3.newera
4.newfangled
5.newgreeny
6.newgreys
7.newhorizon
8.news portal
9.news-print
10.newsbeat
11.newsflash
12.newsportal
13.newsroll
14.newstheme
15.newwave-business-inc
16.new_rise
17.NiceSite
18.nimbuslike
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