css-heaven-1
<!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>CSS Heaven 1 | Articles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
@import url("fontface.css");
* {
padding:0;
margin:0;
}
.clear {
clear:both;
}
body {
background:url(css-heaven-1-images/bg.jpg) repeat;
font-family:Georgia, "Times New Roman", Times, serif;
color:#212713;
}
#wrap {
width:1000px;
margin:auto;
}
#contentwrap {
background:url(css-heaven-1-images/contentbg.gif) repeat-y;
padding:10px 0 3px 0;
}
#menu {
background:url(css-heaven-1-images/contenttop.gif) center bottom no-repeat;
height:44px;
padding-bottom:11px;
}
#contentbtm {
background:url(css-heaven-1-images/cntntbtm.gif) center no-repeat;
height:12px;
}
ul {
list-style:none;
}
#menu li {
display:inline;
font:bold 22px Comfortaa;
}
#menu li a {
display:block;
height:44px;
float:left;
background:url(css-heaven-1-images/menu2.gif) right top no-repeat;
margin-right:3px;
padding-right:10px;
color:#dbe7af;
text-decoration:none;
}
#menu li a span {
display:block;
background:url(css-heaven-1-images/menu1.gif) left top no-repeat;
padding:7px 20px 0 30px;
height:37px;
}
#menu li a:hover {
background:url(css-heaven-1-images/menuh2.gif) right top no-repeat;
color:#1b2502;
text-shadow:#fff 1px 1px 1px;
}
#menu li a:hover span {
background:url(css-heaven-1-images/menuh1.gif) left top no-repeat;
}
#menu li.active a {
background:url(css-heaven-1-images/menuh2.gif) right top no-repeat;
color:#1b2502;
text-shadow:#fff 1px 1px 1px;
}
#menu li.active a span {
background:url(css-heaven-1-images/menuh1.gif) left top no-repeat;
}
#sitename {
font: normal 46px chunk;
color:#1b2502;
text-shadow:#5d7a17 1px 1px 1px;
display:block;
padding:45px 0 0 0;
width:60%;
float:left;
}
#searchbar {
width:39%;
float:right;
}
#sitename em {
font: italic 46px Georgia, "Times New Roman", Times, serif;
}
#top {
height:145px;
}
#header {
background:url(css-heaven-1-images/header.jpg) center center no-repeat;
width:980px;
height:170px;
padding:10px;
}
#mainpage {
padding:0 10px 10px 10px;
}
.ftbox {
width:301px;
margin:0 auto 20px auto;
}
.ftbox .ftbox1 {
background:url(css-heaven-1-images/hbox1.jpg) no-repeat;
height:10px;
}
.ftbox .ftcontent {
background:url(css-heaven-1-images/hbox2.jpg) repeat-y;
padding: 0 10px 0 10px;
}
.ftbox .ftbox2 {
background:url(css-heaven-1-images/hbox3.jpg) no-repeat;
height:10px;
}
.ftcontent .post {
}
#threecolumns {
padding:10px 0 10px 0;
}
#threecolumns .col1 {
width:32%;
float:left;
margin-left:5px;
}
#threecolumns .col2 {
width:32%;
float:right;
margin-right:5px;
}
#threecolumns .col3 {
margin:0 33% 0 33%;
}
.post p {
font: 16px Contra;
line-height:22px;
margin-bottom:16px;
}
.ftbox p {
display:block;
margin:0!important;
}
h2 {
display:block;
font:bold 22px Comfortaa;
margin-bottom:8px;
}
#sidebar h2 {
color:#656f42;
text-shadow:#fff 1px 1px 1px;
}
.post h2 a {
color:#656f42;
text-decoration:none;
}
.normalpage .post h2 a {
color:#656f42!important;
text-decoration:none;
}
.post h2 a:active, .post h2 a:visited {
color:#656f42;
text-decoration:none;
}
.post h2 a:hover {
color:#474f24!important;
}
.ftcontent h2 {
background:url(css-heaven-1-images/boxh2bg.jpg) left bottom repeat-x;
padding-bottom:5px;
color:#656f42;
text-shadow:#dde4c4 1px 1px 1px;
}
.hboxthumb {
background:#ccd4aa;
border: solid 1px #e1e7c8!important;
padding:3px;
margin-bottom:10px;
}
.readmore a {
display:block;
background:url(css-heaven-1-images/readmorebtn.gif) no-repeat;
height:27px;
width:122px;
text-align:center;
padding:5px 0 0 0;
color:#5b6435!important;
font:bold 16px Comfortaa;
text-decoration:none;
text-shadow:#e0e5c9 1px 1px 1px;
}
.readmore a:hover {
background:url(css-heaven-1-images/readmorebtnh.gif) no-repeat;
}
.ftbox .readmore {
padding-top:10px;
display:block;
}
#bottom {
padding:20px 10px 10px 10px;
margin: 0 10px 0 10px;
background:url(css-heaven-1-images/footerbg.gif) repeat;
color:#c8d0ab;
font-family:Contra;
}
#shortinfo {
width:45%;
float:left;
margin-bottom:10px;
padding-right:20px;
background:url(css-heaven-1-images/ftlv.jpg) right top repeat-y;
}
#linkmenu {
width:51%;
float:right;
margin-bottom:10px;
}
#authimg {
width:150px;
float:left;
}
#authbio {
margin-left:155px;
}
#authbio p {
font-style:italic;
}
#authimg img {
display:block;
background:#313719;
padding:5px;
border-left: solid 1px #21250f;
border-bottom:solid 1px #848e59;
border-top:solid 1px #21250f;
border-right:solid 1px #848e59;
}
#bottom h2 {
display:block;
font:bold 22px Comfortaa;
margin-bottom:8px;
background:url(css-heaven-1-images/ftl-h.jpg) left bottom repeat-x;
padding:0 0 5px 0;
}
#bottom a {
color:#e6ecd1!important;
text-decoration:none;
}
.footerlinks li {
display:block;
width:41%;
float:left;
height:32px;
margin:5px;
background:url(css-heaven-1-images/footerli2.gif) no-repeat;
}
.footerlinks li a {
color:#fff;
background:url(css-heaven-1-images/footerli.gif) 5px 6px no-repeat;
text-shadow:#3b441d 1px 1px 1px;
height:28px;
padding:5px 8px 0 22px;
display:block;
}
#footer {
color:#fff;
font:normal 14px Comfortaa;
background:url(css-heaven-1-images/ftl-h.jpg) left top repeat-x;
padding:15px 0 10px 0;
}
#footer a {
color:#fff;
text-decoration:none;
}
#fl_left, #fl_right {
margin:0;
padding:0;
}
#fl_left {
float:left;
}
#fl_right {
float:right;
}
#left {
width:655px;
float:left;
padding:0 15px 15px 0;
margin-bottom:15px;
border-right:solid 1px #aab38a;
}
#sidebar {
width:276px;
padding:10px 10px 10px 15px;
float:right;
margin-bottom:15px;
}
#sidebar .box {
margin-bottom:10px;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
img.alignleft, img.alignright {
background:#eef6cf;
border:solid 1px #fcfff0;
padding:5px;
margin:8px;
}
.normalpage .post {
margin-bottom:10px;
padding:10px;
}
.postmeta {
font:normal 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#8f9676;
margin-bottom:15px;
}
.normalpage h2 {
padding-bottom:5px;
border-bottom:solid 1px #b0bb88;
font-size:28px;
}
.normalpage .readmore a {
margin-bottom:15px;
color:#5b6435!important
}
.postbottom {
padding:5px;
margin-bottom:10px;
background:#bec993;
font-size:12px;
}
.postbottom a {
color:#535d2f!important;
padding:5px;
}
#contentwrap a {
color:#993403;
}
blockquote {
border-bottom:solid 1px #b7c38a;
border-top:solid 1px #b7c38a;
display:block;
padding:10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
margin-bottom:10px;
background:#e7f0c8;
}
blockquote p {
margin-bottom:5px!important;
}
blockquote.alignleft, blockquote.alignright {
width:230px;
}
blockquote.alignleft {
margin-right:10px;
}
blockquote.alignright {
margin-left:10px;
}
.post ul {
list-style:square;
padding:10px 10px 10px 35px;
line-height:25px;
margin-bottom:10px;
}
.post ol {
padding:10px 10px 10px 35px;
line-height:25px;
margin-bottom:10px;
}
.post code {
display:block;
padding:10px;
margin:10px;
background:#b8c295;
font: normal 14px "Courier New", Courier, monospace;
color:#222!important;
}
.post table {
width:98%;
margin-bottom:10px;
}
.post table td, .post table .th {
padding:5px;
}
.post table th {
font-family: Comfortaa;
font-size:18px;
background:#c3d092;
color:#616943;
padding:5px;
}
.post table td {
border:dashed 1px #c3d092;
}
.formstyle label {
display:block;
font:bold 16px Comfortaa;
padding:5px;
margin-bottom:5px;
}
.text_field {
width:90%;
display:block;
background:#fff;
border:solid 1px #616943;
padding:5px;
}
.submitbutton {
display:block;
background:#616943;
font:bold 18px Comfortaa;
padding:5px;
color:#fff;
border:solid 1px #444b2b;
}
#sidebar li {
display:block;
padding:5px;
border-bottom:dashed 1px #aab38a;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:capitalize;
}
#sidebar a {
color:#656f42;
text-shadow:#fff 1px 1px 1px;
text-decoration:none;
}
#sidebar a:hover {
color:#222;
}
#left.widepage {
float:none!important;
width:970px!important;
padding:5px!important;
border:none!important;
}
.pagenav a {
display:block;
color:#222!important;
font: bold 14px Comfortaa;
text-shadow:#fff 1px 1px 1px;
padding:8px;
background:#fff;
}
.pagenav {
clear:both;
margin-bottom:15px;
}
#searchbar {
padding:55px 0 0 0;
}
#searchfield {
background:url(css-heaven-1-images/searchbar.gif) no-repeat;
width:239px;
height:35px;
float:right;
}
#searchfield .keyword {
width:170px;
background:transparent;
border:none;
padding:8px 0 0 10px;
color:#fff;
display:block;
float:left;
}
#searchfield .searchbutton {
display:block;
float:left;
margin:7px 0 0 5px;
}
</style>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="wrap">
<div id="top">
<h1 id="sitename">Name <em>Of</em> Website</h1>
<div id="searchbar">
<form action="#">
<div id="searchfield">
<input type="text" name="keyword" class="keyword" />
<input class="searchbutton" type="image" src="css-heaven-1-images/searchgo.gif" alt="search" />
</div>
</form>
</div>
</div>
<div id="menu">
<ul>
<li><a href="index.html"><span>Welcome</span></a></li>
<li><a href="styles.html"><span>Styles</span></a></li>
<li class="active"><a href="articles.html"><span>Articles</span></a></li>
<li><a href="notes.html"><span>Notes</span></a></li>
<li><a href="#"><span>A long link text</span></a></li>
</ul>
</div>
<div id="contentwrap">
<div id="header"> </div>
<div id="mainpage" class="normalpage">
<div id="left" class="widepage">
<div class="post">
<h2><a href="#">Image in a post</a></h2>
<div class="postmeta"><span class="date">Posted on 12 June 2010</span> <span class="author">By YourName</span><span class="category">Example Category</span> </div>
<p>Example of image in a post without a css class</p>
<img src="css-heaven-1-images/image6.jpg" alt="" />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui ante, venenatis eleifend, condimentum vel, tincidunt eu, nisl. Nulla eu augue. Vivamus scelerisque sagittis lorem. Nunc tincidunt eleifend risus. </p>
<p>Example of Image with css class - .alignleft</p>
<p><img class="alignleft" src="css-heaven-1-images/image4.jpg" alt="" width="270" height="140" />Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. Morbi lorem sem, pulvinar condimentum, porttitor ultricies, dignissim a, leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<p>Example of Image with css class - .alignright</p>
<p><img class="alignright" src="css-heaven-1-images/imgsample.jpg" alt="" width="196" height="178" />Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. Morbi lorem sem, pulvinar condimentum, porttitor ultricies, dignissim a, leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<span class="readmore"><a href="#">Read More</a></span>
<div class="postbottom"><a href="#">Permalink</a> <a href="#">Comments</a> <a href="#">Category</a> <a href="#">Author</a></div>
</div>
<div class="post">
<h2>Blockquotes, Lists & Code</h2>
<p>Blockquote without a CSS Class</p>
<blockquote>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui ante, venenatis eleifend, condimentum vel, tincidunt eu, nisl. Nulla eu augue. </p>
</blockquote>
<p>Blockquote with CSS Class .alignleft</p>
<blockquote class="alignleft">
<p>Vivamus scelerisque sagittis lorem. Nunc tincidunt eleifend risus. </p>
</blockquote>
<p>Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. </p>
<p>Ordered List</p>
<ol>
<li>Morbi lorem sem</li>
<li> pulvinar condimentum</li>
<li> porttitor ultricies</li>
<li> dignissim </li>
</ol>
<p>Unordered List</p>
<ul>
<li>Morbi lorem sem</li>
<li> pulvinar condimentum</li>
<li> porttitor ultricies</li>
<li> dignissim </li>
</ul>
<p>Code</p>
<code> code { display:block; padding:5px; background: #3A3936; white-space: pre; border: 1px solid #000000; font: normal 12px 'Courier New', Courier, monospace;} </code>
<p>leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<span class="readmore"><a href="#">Read More</a></span>
<div class="postbottom"><a href="#">Permalink</a> <a href="#">Comments</a> <a href="#">Category</a> <a href="#">Author</a></div>
</div>
<div class="post">
<h2>Tables</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui ante, venenatis eleifend, condimentum vel, tincidunt eu, nisl.</p>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="col">Lorem</th>
<th scope="col">Ipsum</th>
<th scope="col">Dolor</th>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<td>Consectetuer</td>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<td>Euismond vitae</td>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<td>Posuere et</td>
</tr>
<tr>
<td>Sit</td>
<td>Ipsum</td>
<td>Consectetuer</td>
</tr>
<tr>
<td>Adipiscing elit</td>
<td>Aliquam Negue mi</td>
<td>Euismond vitae</td>
</tr>
<tr>
<td>Morbi elit nulla</td>
<td>Laoreet Vel</td>
<td>Posuere et</td>
</tr>
</tbody>
</table>
<p> Nulla eu augue. Vivamus scelerisque sagittis lorem. Nunc tincidunt eleifend risus. Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. Morbi lorem sem, pulvinar condimentum, porttitor ultricies, dignissim a, leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<span class="readmore"><a href="#">Read More</a></span>
<div class="postbottom"><a href="#">Permalink</a> <a href="#">Comments</a> <a href="#">Category</a> <a href="#">Author</a></div>
</div>
<div class="post">
<h2>Form</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui ante, venenatis eleifend, condimentum vel, tincidunt eu, nisl. Nulla eu augue. </p>
<p>Vivamus scelerisque sagittis lorem. Nunc tincidunt eleifend risus. Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. Morbi lorem sem, pulvinar condimentum, porttitor ultricies, dignissim a, leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<form action="#">
<div class="formstyle">
<label for="name">Name:</label>
<input class="text_field" name="Nname" id="name" type="text" />
<label for="email">email:</label>
<input class="text_field" id="email" name="email" type="text" />
<label for="Age">age:</label>
<input class="text_field" name="Age" id="Age" type="text" />
<label for="Comments">Comments/Questions:</label>
<textarea class="text_field" id="Comments" name="Comments" cols="30" rows="8"></textarea>
<label for="Submit"><span class="hide">Submit</span></label>
<input name="Submit" type="button" id="Submit" class="submitbutton" value="Submit" />
</div>
</form>
<p> </p>
<span class="readmore"><a href="#">Read More</a></span>
<div class="postbottom"><a href="#">Permalink</a> <a href="#">Comments</a> <a href="#">Category</a> <a href="#">Author</a></div>
</div>
<div class="post">
<h2>Others</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc dui ante, venenatis eleifend, condimentum vel, tincidunt eu, nisl. Nulla eu augue. Vivamus scelerisque sagittis lorem. Nunc tincidunt eleifend risus. Suspendisse laoreet, mi eget dapibus eleifend, risus dolor egestas ante, in luctus est risus ac mi. Mauris in libero eget leo laoreet rhoncus. Nam porta nisi id turpis. Ut ac justo at urna consequat mollis. Ut interdum sem ac justo. Curabitur vestibulum nulla ac nibh. Praesent imperdiet. Morbi lorem sem, pulvinar condimentum, porttitor ultricies, dignissim a, leo. Proin ligula libero, elementum eget, aliquam a, dictum eget, lectus. Etiam diam leo, ullamcorper vel, eleifend sodales, fringilla ac, arcu. Pellentesque enim elit, lobortis ut, egestas sit amet, imperdiet sed, ante. In sit amet urna. Nulla iaculis, est vel scelerisque posuere, ligula nunc condimentum ante, et porta leo libero in nunc. Phasellus nisl. Proin a neque. Pellentesque ac odio eu leo commodo luctus. </p>
<span class="readmore"><a href="#">Read More</a></span>
<div class="postbottom"><a href="#">Permalink</a> <a href="#">Comments</a> <a href="#">Category</a> <a href="#">Author</a></div>
</div>
<div class="pagenav"> <span class="alignleft"><a href="#">Previous Posts</a></span> <span class="alignright"><a href="#">Next Posts</a></span></div>
</div>
<div class="clear"></div>
</div>
<div id="bottom">
<div id="shortinfo">
<div id="authimg"> <img src="css-heaven-1-images/bug.jpg" alt="" width="128" height="128" /></div>
<div id="authbio">
<h2>About You!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id arcu nulla. Donec eu risus nisl, id cursus justo. Proin non mauris enim, eu suscipit libero. Fusce eget nunc nibh. Integer elementum consectetur sagittis. Quisque adipiscing auctor risus, id vulputate eros auctor vel. Vivamus pellentesque arcu vel libero eleifend sed aliquam </p>
</div>
</div>
<div id="linkmenu">
<h2>Places of Interest</h2>
<ul class="footerlinks">
<li><a href="#">Free CSS Templates</a></li>
<li><a href="#">Opensource </a></li>
<li><a href="#">Free Stock Photos</a></li>
<li><a href="#">Free Software</a></li>
<li><a href="#">Lorem Ipsum</a></li>
<li><a href="#">XHTML Templates</a></li>
<li><a href="#">HTML Templates</a></li>
<li><a href="#">CSS 3 & HTL5</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div id="fl_left">© YourSitename.com | All Rights Reserved</div>
<div id="fl_right"><a href="http://www.websitetemplateco.com/">Free CSS Templates</a> by <a href="http://cssheaven.org">CSS Heaven</a></div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="contentbtm"></div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category