characterized : Design 4 « Templates « HTML / CSS

HTML / CSS » Templates » Design 4 
characterized
     

<!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       : Characterized 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 200900814

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Characterized  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-top: 50px;
  padding: 0;
  background: #161616 url(characterized-images/img01.jpgrepeat-x left top;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #8A8A8A;
}

h1, h2, h3 {
  margin: 0;
  text-transform: uppercase;
  font-weight: normal;
  color: #549900;
}

h1 font-size: 44px; }

h2 font-size: 18px; }

h3 { }

p, ul, ol {
  margin-top: 0;
  line-height: 240%;
  text-align: justify;
}

ul, ol { }

blockquote { }

color: #F71476; }

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 {
}

/* Header */

#header-wrapper {
}

#header {
  width: 960px;
  height: 45px;
  margin: auto;
  background: url(characterized-images/img03.jpgno-repeat left top;
}

/* Menu */

#menu {
  float: left;
  width: 650px;
  height: 50px;
  background: url(characterized-images/img02.jpgno-repeat left top;
}

#menu ul {
  margin: 0;
  padding: 0px 0px 0px 5px;
  list-style: none;
  line-height: normal;
}

#menu li {
  display: block;
  float: left;
}

#menu a {
  display: block;
  float: left;
  height: 32px;
  margin-right: 3px;
  padding: 18px 30px 0px 30px;
  background: url(characterized-images/img07.gifno-repeat left top;
  text-decoration: none;
  text-transform: capitalize;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #000000;
}

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

#menu .current_page_item a {
  height: 50px;
  color: #000000;
}

#menu .first {
  background: none;
}
/* Search */

#search {
  float: right;
  width: 310px;
  height: 50px;
  background: url(characterized-images/img03.jpgno-repeat left top;
}

#search form {
  float: right;
  margin: 0;
  padding: 14px 30px 0 0;
}

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

#search input {
  float: left;
  font: 12px Georgia, "Times New Roman", Times, serif;
  border: none;
}

#search-text {
  width: 200px;
  height: 18px;
  padding: 3px 0 0 5px;
  border: 1px solid #333333;
  background: #ECF9E4;
  color: #000000;
}

#search-submit {
  height: 21px;
  margin-left: 10px;
  padding: 0px 5px;
  background: #000000;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 920px;
  margin: auto;
  padding: 40px 20px 0px 20px;
  background: #000000;
}


/** LOGO */

#logo {
  width: 960px;
  height: 120px;
  margin: auto;
}

#logo h1, #logo p {
  margin: 0px;
  line-height: normal;
  text-align: center;
  text-transform: lowercase;
  font-weight: normal;
  color: #FFFFFF;
}

#logo p {
  text-transform: lowercase;
  font-size: 13px;
  color: #757575;
}

#logo h1 {
  padding-top: 10px;
  font-size: 48px;
}

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

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


#banner {
  padding-bottom: 20px;
}

/* Content */

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

/* Post */

.post {
  background: url(characterized-images/img08.gifrepeat-x left bottom;
  margin-bottom: 45px;
}

.post .title {
  height: 30px;
  color: #FFFFFF;
}

.post .title a {
  text-decoration: none;
  text-transform: capitalize;
  font-size: 30px;
  color: #FFFFFF;
}

.post .date {
}

.post .meta {
  margin-left: 2px;
  padding: 2px 30px 2px 16px;
  background: url(characterized-images/img10.gifno-repeat left 7px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 10px;
  color: #66665E;
}

.post .meta span {
  display: block;
  margin-top: -10px;
}

.post .meta a { }

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

.post .links {
  margin: 0 250px 0 0;
  padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
  padding-left: 17px;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 300px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

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

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

#sidebar li ul {
  margin: 0px 14px;
}

#sidebar li li {
  margin: 0;
  padding: 12px 0px;
  background: url(characterized-images/img05.gifrepeat-x left bottom;
}

#sidebar li li a {
  padding: 0px 0px 0px 20px;
  background: url(characterized-images/img06.gifno-repeat left 2px;
  font-weight: normal;
  color: #B3B2B2;
}

#sidebar li li a:hover {
  color: #FFFFFF;
}

#sidebar p {
  margin: 0;
  padding: 0px 14px;
}

#sidebar h2 {
  height: 30px;
  margin: 0 0 10px 0px;
  padding: 6px 0 2px 14px;
  background: url(characterized-images/img04.jpgno-repeat left top;
  text-transform: capitalize;
  font-size: 18px;
  font-weight: normal;
  color: #FFFFFF;
}


#sidebar p {
  line-height: 200%;
}

#sidebar a {
  text-align: left;
  text-decoration: none;
  font-weight: bold;
}

/* Calendar */

#calendar {
}

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

#calendar table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid #24130F;
  border-left: 1px solid #24130F;
  border-right: 1px solid #24130F;
}

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

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

#calendar tfoot td {
  padding: 5px;
  border-left: 1px solid #24130F;
  border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
  border-top: 1px solid #24130F;
  text-align: right;
}

#calendar tfoot #prev {
  border-top: 1px solid #24130F;
}

#calendar .pad {
  border-bottom: 1px solid #24130F;
}

#calendar #today {
  background: #24130F;
}

/* Footer */

#footer {
  width: 920px;
  height: 49px;
  margin: auto;
  padding-top: 50px;
}

#footer-bgcontent {
  margin: 0px;
  padding: 0px;
  height: 99px;
}

#footer p {
  margin: 0;
  text-align: center;
  line-height: normal;
  text-transform: uppercase;
  font-size: 10px;
  color: #FFFFFF;
}

#footer a {
  color: #E5FFC4;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="logo">
    <h1><a href="#">Characterized  </a></h1>
    <p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
  </div>
  <hr />
  <!-- end #logo -->
  <div id="header">
    <div id="menu">
      <ul>
        <li><a href="#" class="first">Home</a></li>
        <li class="current_page_item"><a href="#">Blog</a></li>
        <li><a href="#">Photos</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <!-- end #menu -->
    <div id="search">
      <form method="get" action="">
        <fieldset>
        <input type="text" name="s" id="search-text" size="15" />
        <input type="submit" id="search-submit" value="GO" />
        </fieldset>
      </form>
    </div>
    <!-- end #search -->
  </div>
  <!-- end #header -->
  <!-- end #header-wrapper -->
  <div id="page">
    <div id="content">
      <div id="banner"><img src="characterized-images/img09.jpg" alt="" /></div>
      <div class="post">
        <h2 class="title"><a href="#">Welcome to Characterized </a></h2>
        <p class="meta">Sunday, April 262009 7:27 AM Posted by <a href="#">Someone</a></p>
        <div class="entry">
          <p>This is <strong>Characterized </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>, released for free under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a> license.  You're free to use this template for anything as long as you link back to <a href="http://www.freecsstemplates.org/">my site</a>. Enjoy :)</p>
          <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. </p>
        </div>
      </div>
      <div class="post">
        <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
        <p class="meta">Sunday, April 262009 7:27 AM Posted by <a href="#">Someone</a></p>
        <div class="entry">
          <p>Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec   consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. Etiam non felis. Donec ut ante. In id eros.</p>
        </div>
      </div>
      <div class="post">
        <h2 class="title"><a href="#">Lorem ipsum sed aliquam</a></h2>
        <p class="meta">Sunday, April 262009 7:27 AM Posted by <a href="#">Someone</a></p>
        <div class="entry">
          <p>Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum vel, tempor at, varius non, purus. Mauris vitae nisl nec metus placerat consectetuer. Donec ipsum. Proin imperdiet est. Phasellus <a href="#">dapibus semper urna</a>. Pellentesque ornare, orci in consectetuer hendrerit, urna elit eleifend nunc, ut consectetuer nisl felis ac diam. </p>
        </div>
      </div>
    </div>
    <!-- end #content -->
    <div id="sidebar">
      <ul>
        <li>
          <h2>Aliquam tempus</h2>
          <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, volutpat.</p>
        </li>
        <li>
          <h2>Pellenteque ornare </h2>
          <ul>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
          </ul>
        </li>
        <li>
          <h2>Turpis nulla</h2>
          <ul>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
            <li><a href="#">Magna lacus bibendum mauris</a></li>
            <li><a href="#">Velit semper nisi molestie</a></li>
            <li><a href="#">Eget tempor eget nonummy</a></li>
            <li><a href="#">Nec metus sed donec</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end #sidebar -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end #page -->
  <div id="footer-bgcontent">
  <div id="footer">
    <p>Copyright (c2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  </div>
  </div>
  <!-- end #footer -->
</div>
</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.