classique : Effect « Templates « HTML / CSS






classique

     

<!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">
<head>
<title>Classique</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */

body {
color:#71716F;
background:url(classique-images/body.png) top repeat-x #F3F1E9;
font: 12px/24px Arial;
padding-bottom:20px;
}

* {
margin:0;
padding:0;
outline:none;
}

.clear {
clear:both;
}

#header {
height:197px;
width:760px;
margin:0 auto;
background:url(classique-images/header.png) top no-repeat;
}

#top ul {
float:right;
margin:-2px 0 0 0;
}

#top ul li {
display:inline;
list-style:none;
font-size:11px;
margin:0 0 0 10px;
}

#top ul li a {
color:#999;
text-decoration:none;
font-weight:normal;
}

#top ul li a:hover {
color:#eee;
}

#header h1 {
font:20px Georgia;
text-transform:uppercase;
letter-spacing:5px;
color:#F3F1E9;
text-align:center;
font-weight:normal;
padding:60px 0 15px 0;
}

#header h1 a {
color:#F3F1E9;
text-decoration:none;
}

#header h2 {
font:12px Georgia;
color:#A7A5A0;
letter-spacing:3px;
text-align:center;
}

#nav {
margin:37px 0 0 0;
}

#nav li {
list-style:none;
float:left;
padding:11px 7px 9px;
}

#nav li a {
padding:11px 7px 6px;
font:12px Georgia;
color:#ccc;
font-weight:bold;
text-decoration:none;
}

#nav li a:hover {
background:url(classique-images/nav_a.gif) bottom no-repeat;
color:#fff;
}

#container {
background:#FCFAF4;
width:760px;
margin:0 auto;
}

#content {
width:460px;
float:left;
background:url(classique-images/content.png) top right no-repeat;
padding:35px;
}

#content h3 {
color:#842E31;
font:14px Arial;
font-weight:bold;
text-align:right;
background:url(classique-images/h3.png) bottom no-repeat;
padding:10px 0;
margin-bottom:10px;
}

a {
color:#4A8445;
font-weight:bold;
text-decoration:none;
}

a:hover {
color:#333;
}

#content h3 a {
color:#842E31;
text-decoration:none;
float:left;
}

#content h3 a:hover {
color:#620c10;
}

#content p {
padding:10px 15px;
line-height:21px;
}

.divider {
height:5px;
margin:10px auto;
width:460px;
background:url(classique-images/h3.png) no-repeat;
}

h4 {
font:12px Georgia;
font-weight:bold;
color:#315984;
border-bottom:1px solid #e7e7e7;
padding:5px 0;
margin:10px 0;
}


#content h3 span {
font:10px Georgia;
font-style:italic;
color:#A4A39F;
letter-spacing:3px;
}

#sidebar {
margin:0 0 0 530px;
background:url(classique-images/sidebar.png) top no-repeat;
padding:10px 20px;
}

#sidebar p {
font-size:11px;
line-height:18px;
}

#sidebar ul li {
list-style:none;
font-size:11px;
}



#sidebar ul li a:hover {
text-decoration:none;
}

#footer {
height:32px;
padding:18px 15px 0 15px;
clear:both;
background:url(classique-images/footer.png) top no-repeat;
}

#footer a.at {
display:block;
float:right;
text-align:left;
text-indent:-9999px;
height:24px;
width:26px;
background:url(classique-images/atlogo.png) no-repeat;
}

.comment {
background: #F6F4EF;
}

.comment div {
padding:2px 4px;
}

#content .comment p {
font:11px Arial;
color:#4A4B4A;
line-height:20px;
}

.commenter {
background:url(classique-images/commenter.png) top left no-repeat;
padding:15px 0 0 20px;
font:12px Arial;
font-weight:bold;
color:#4A8445;
margin-bottom:45px;
}

.commenter a {
color:#4A8445;
text-decoration:none;
}

.commenter small {
color:#ACABA9;
font:10px Georgia;
letter-spacing:1px;
display:block;
}


b.rtop, b.rbottom{display:block;background: #FCFAF4}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #F6F4EF}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

fieldset {
border:1px solid #F3F1E9;
padding:10px;
}

legend {
padding:5px;
}

label {
display:block;
}

blockquote {
padding:0 20px;
font:12px Georgia;
font-style:italic;
}

#content ul {
margin:10px 0 10px 30px;
list-style-type:circle;
}

input, textarea {
background:#EAE8E1;
border:none;
padding:5px;
margin-bottom:15px;
}



</style>


<!--[if IE 7]><link href="css/ie7-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
<!--[if lt IE 7]><link href="css/ie6-only.css" rel="stylesheet" type="text/css" media=screen><![endif]-->
</head>
<body>
<div id="header">
  <div id="top">
    <ul>
      <li><a href="http://www.free-css.com/">Sitemap</a></li>
      <li><a href="http://www.free-css.com/">Search</a></li>
      <li><a href="http://www.free-css.com/">Terms</a></li>
    </ul>
  </div>
  <h1><a href="http://www.free-css.com/">Classique</a></h1>
  <h2>A traditionally styled template for your blog </h2>
  <ul id="nav">
    <li><a href="http://www.free-css.com/">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
    <li><a href="http://www.free-css.com/">Link Here</a></li>
  </ul>
</div>
<div id="container">
  <div id="content">
    <div class="post">
      <h3><a href="http://www.free-css.com/">Blog Post Title Here</a><span>5th December 2007</span></h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      <h4>Blockquote Example</h4>
      <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      </blockquote>
      <h4>List Example</h4>
      <ul>
        <li><span>Phasellus non lectus. Duis pede.</span></li>
        <li><span>Phasellus non lectus. Duis pede.</span></li>
        <li><span>Phasellus non lectus. Duis pede.</span></li>
        <li><span>Phasellus non lectus. Duis pede.</span></li>
      </ul>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
    </div>
    <div class="divider"></div>
    <h4>4 Comments on "Blog post title goes here."</h4>
    <div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      </div>
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
    <div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
    <div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      </div>
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
    <div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
    <div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      </div>
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
    <div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
    <div class="comment"> <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet ante. Praesent cursus mattis erat. Praesent vel nisl. Nulla facilisi. Duis pellentesque. Sed sed tellus. Sed eu arcu quis est scelerisque porta. Mauris consequat. Sed tempus cursus dolor. Morbi hendrerit, lectus sodales condimentum posuere, tortor elit facilisis dui, et pulvinar justo ante vel elit. Donec risus.</p>
      </div>
      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div>
    <div class="commenter"> <a href="http://www.free-css.com/">Author Name</a> <small>5th December 2007</small> </div>
    <h4>Add your Comment</h4>
    <fieldset>
    <legend>Fill in this form to add your comment</legend>
    <label>Name</label>
    <input />
    <br />
    <label>Email Address</label>
    <input />
    <br />
    <label>Your Comment</label>
    <textarea></textarea>
    <br />
    <input type="submit" />
    </fieldset>
  </div>
  <div id="sidebar">
    <h4>About</h4>
    <p>Classique is a free template designed by the people at the Jigowatt Premium Templates. It is designed with a blog layout /format in mind, but of course can be used for any web site. </p>
    <h4>Archives</h4>
    <ul>
      <li><a href="http://www.free-css.com/">December 2007</a></li>
      <li><a href="http://www.free-css.com/">November 2007</a></li>
      <li><a href="http://www.free-css.com/">October 2007</a></li>
    </ul>
    <h4>Links</h4>
    <ul class="links">
      <li><a href="http://www.free-css.com/">Premium Templates</a></li>
      <li><a href="http://www.free-css.com/">Google</a></li>
      <li><a href="http://www.free-css.com/">Yahoo</a></li>
      <li><a href="http://www.free-css.com/">Ebay</a></li>
    </ul>
    <h4>Search</h4>
    <input />
  </div>
  <div id="footer">
    <p style="float:right">Classique template designed by <a href="http://www.jigowattpremiumtemplates.co.uk">Jigowatt Premium Templates</a>.</p>
    <p>Footer content goes here</p>
  </div>
</div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.amazinglycool
2.exposure
3.expressivestars
4.extended
5.external
6.extracts
7.falling-away
8.fantasy
9.flare
10.flashyweb
11.flash_web
12.fireworks
13.floating
14.falling
15.fantasyland
16.metamorph_weird
17.metamorph_violet
18.metamorph_violetdream
19.metamorph_mydesign
20.metamorph_myst
21.metamorph_mywaves
22.metamorph_myweb
23.metamorph_freedom_lt
24.metamorph_gloryfield
25.metamorph_horizon
26.bubble
27.classic-luxury
28.classic
29.classliclink
30.civilized
31.metamorph_cool
32.metamorph_imaginary
33.metamorph_infinity
34.metamorph_newage
35.metamorph_madness
36.metamorph_heaven
37.metamorph_lensflare
38.metamorph_shinyblur_lt
39.metamorph_sparks_lt
40.metamorph_soulfrost
41.metamorph_space
42.metamorph_spaceglowing
43.metamorph_sphere
44.metamorph_starwars
45.metamorph_steel
46.metamorph_stones
47.abundant
48.chalkboard
49.cool-web
50.coolblack
51.CoolishBlack
52.coolracing
53.coolzone
54.cool_web
55.creative-media
56.creative-mind
57.creative
58.creevykeel
59.decayed
60.essence
61.essential
62.auroradesktop
63.scenic-reflections