cssheaven-2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSSHeaven 2 | About</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=Vollkorn);
@import url(http://fonts.googleapis.com/css?family=Lobster);
* {
padding:0;
margin:0;
}
body {
background:#242424;
font:14px Georgia, "Times New Roman", Times, serif;
color:#242424;
}
#topbanner {
height:80px;
border-bottom:solid 1px #f2efe9;
}
#pagewrap {
background:url(cssheaven-2-images/bg.jpg) repeat;
padding-top:10px;
padding-bottom:10px;
}
#wrap {
width:1010px;
margin:auto;
}
.clear {
clear:both;
}
#homeheader {
height:350px;
}
#mainimg {
width:700px;
height:330px;
padding:10px;
float:left;
border:solid 1px #ac9f87;
}
#rightboxes {
float:right;
width:272px;
float:right;
}
#rightboxes .box1 {
background:url(cssheaven-2-images/rightimg1.jpg) 10px 10px no-repeat;
width:250px;
height:90px;
padding:10px;
margin-bottom:8px;
border:solid 1px #ac9f87;
}
#rightboxes .box2 {
background:url(cssheaven-2-images/rightimg2.jpg) 10px 10px no-repeat;
width:250px;
height:90px;
padding:10px;
margin-bottom:8px;
border:solid 1px #ac9f87;
}
#rightboxes .box3 {
background:url(cssheaven-2-images/rightimg3.jpg) 10px 10px no-repeat;
width:250px;
height:90px;
padding:10px;
margin-bottom:0;
border:solid 1px #ac9f87;
}
#maincontent {
padding:10px 10px 0 10px;
font-family:Vollkorn!important;
}
#threecol .col1 {
width:300px;
float:left;
padding:10px;
}
#threecol .col2 {
width:300px;
float:right;
padding:10px;
}
#threecol .col3 {
padding:10px;
margin:0 335px 0 335px;
}
#maincontent h2 {
font: bold 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-bottom:10px;
text-shadow:#fff 1px 1px 1px;
}
#maincontent p {
font:normal 14px Vollkorn;
line-height:22px;
}
#topbanner .container {
width:1010px;
margin:auto;
}
#sitename {
width:250px;
float:left;
display:block;
color:#f3ebd9;
font:normal 32px Lobster;
padding:13px 0 0 10px;
line-height:32px;
}
#sitename span {
display:block;
font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
line-height:17px!important;
color:#999;
clear:both;
}
#sitename a {
color:#f3ebd9;
text-decoration:none;
display:block;
float:left;
padding:0 20px 0 0;
}
#sitename a:hover {
background:url(cssheaven-2-images/homelinkicon.gif) right 8px no-repeat;
}
#mainnav {
float:right;
float:right;
height:80px;
color:#ccc;
min-width:600px;
}
#mainnav ul {
list-style:none;
}
#mainnav li {
display:inline;
font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#mainnav li a {
color:#827b6e;
text-decoration:none;
padding:25px 30px 0 30px;
height:55px;
display:block;
float:left;
}
#mainnav li a span {
display:block;
font:normal 14px Vollkorn, Georgia, "Times New Roman", Times, serif;
color:#6c675e;
text-transform:capitalize;
}
#mainnav li a:hover {
color:#f3ebd9;
}
#mainnav li a:hover span {
color:#827b6e!important
}
#mainnav li.active a {
color:#f3ebd9;
background:url(cssheaven-2-images/menuactive.gif) center bottom no-repeat;
text-shadow:#222 1px 1px 1px;
}
#page {
width:640px;
float:left;
padding:0 10px 10px 10px;
border-right:solid 1px #ac9f87;
}
#sidebar {
width:300px;
float:right;
padding:10px;
}
.bordered {
border-bottom:solid 1px #ac9f87;
}
.subhead {
font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
background:url(cssheaven-2-images/subheadh2bg.jpg) left bottom no-repeat;
padding:8px 10px 4px 25px;
height:20px;
color:#b3a893;
margin:0 0 25px -10px!important;
}
.rotate {
-moz-transform:rotate(-1.5deg); /* FF3.5+ */
-o-transform:rotate(-1.5deg); /* Opera 10.5 */
-webkit-transform:rotate(-1.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573); /* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=0.9996573249755573, M12=0.02617694830787315, M21=-0.02617694830787315, M22=0.9996573249755573)"; /* IE8 */
zoom:1;
}
.post p {
margin-bottom:15px;
}
.posthead {
margin-bottom:15px;
}
.posthead p, .posthead h3 {
margin-bottom:0!important;
}
.posthead .date {
font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
color:#8b7f6c;
}
.post .posthead h3 {
display:block;
font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#c83d26;
text-shadow:#fff 1px 1px 1px;
}
.posthead h3 a {
color:#222!important;
text-decoration:none;
}
.posthead h3 a:hover {
background:#f5eee2;
}
.posthead .postmeta {
display:block;
font:italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif!important;
}
#maincontent a {
color:#222;
}
#maincontent a:visited, #maincontent a:active {
color:#333;
}
#maincontent a:hover {
color:#000;
text-decoration:none;
}
.post {
background:url(cssheaven-2-images/subheadbg.gif) left bottom repeat-x;
padding-top:10px;
padding-bottom:10px;
margin-bottom:10px;
}
#sidebar ul {
list-style:none;
display:block;
margin-bottom:15px;
}
#sidebar ul li {
display:block;
}
#sidebar .menu {
font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#sidebar ul.menu li {
display:block;
height:37px;
background:url(cssheaven-2-images/sidebarbullet.jpg) 3px 10px no-repeat;
}
#sidebar ul.menu li:hover {
background:url(cssheaven-2-images/sidebarbulleth.jpg) 1px 8px no-repeat;
}
#sidebar ul.menu li a {
display:block;
height:30px;
padding:5px 5px 0 35px;
background:url(cssheaven-2-images/subheadbg.gif) left bottom repeat-x;
text-decoration:none;
text-shadow:#fff 1px 1px 1px;
}
#sidebar ul.menu li a:hover {
color:#000;
}
#sidebar .posts li {
display:block;
padding:5px 10px 8px 0;
background:url(cssheaven-2-images/subheadbg.gif) left bottom repeat-x;
}
#sidebar .posts li span {
display:block;
font:11px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#222;
padding:3px 0 0 35px;
}
#sidebar .posts a {
display:block;
font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration:none;
background:url(cssheaven-2-images/starblt.gif) 3px 2px no-repeat;
height:12px;
padding:3px 0 7px 35px;
}
#sidebar .posts a:visited, #sidebar .posts a:active {
text-decoration:none;
}
#sidebar .posts a:hover {
color:#000!important;
background:url(cssheaven-2-images/starblt2.gif) 3px 1px no-repeat;
}
#sidebar h2 {
display:block;
font:bold 18px Vollkorn;
padding:5px;
border-bottom:dashed 1px #c8bead;
}
#bottom {
padding:10px 0 0 0;
color:#c2b7a2;
border-top:solid 2px #111;
}
#bottom a {
color:#ece6db;
}
#btmcontent {
width:1010px;
margin:auto;
padding-bottom:25px;
}
#bottom .col1, #bottom .col2 {
width:30%;
}
#bottom .col1 {
float:left;
}
#bottom .col2 {
float:right;
}
#bottom .col3 {
margin:0 34%;
}
#bottom .col1, #bottom .col2, #bottom .col3 {
padding:10px;
}
#bottom h2 {
display:block;
font:normal 22px Lobster!important;
text-shadow:#222 1px 1px 1px;
color:#e0d8c9!important;
margin-bottom:15px;
}
#bottom p {
font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
line-height:16px;
margin-bottom:15px;
}
#bottom ul {
list-style:none;
font:normal 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:capitalize;
}
#btmcontent ul {
display:block;
}
#btmcontent li {
display:block;
height:27px;
background:url(cssheaven-2-images/btmlibg.gif) left bottom repeat-x;
}
#btmcontent li a {
display:block;
height:20px;
padding:5px 10px 0 40px;
background:url(cssheaven-2-images/btmblt.gif) 8px 8px no-repeat;
text-decoration:none;
}
#btmcontent li a:hover {
text-decoration:underline!important;
}
#pageheader {
background:url(cssheaven-2-images/normalheader.jpg) 10px 10px no-repeat;
height:200px;
padding:10px;
border:solid 1px #ac9f87;
margin-bottom:10px;
}
.post ol, .post ul {
padding:0 15px 0 35px;
margin-bottom:15px;
line-height:18px;
}
.post ul {
list-style:square;
}
.post ul, .post ol {
font-family:Vollkorn;
}
.post h4 {
display:block;
font:bold 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;
margin-bottom:15px;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
.post img.alignleft, .post img.alignright {
display:block;
padding:10px;
border:solid 1px #ac9f87;
margin:0 15px;
}
blockquote p {
margin-bottom:0!important;
}
blockquote {
margin:10px;
border:solid 1px #ac9f87;
padding:10px 10px 10px 55px;
background:url(cssheaven-2-images/bloqckquote.gif) 10px 10px no-repeat;
display:block;
}
blockquote cite {
font:bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#111;
}
blockquote.alignleft {
float:left;
width:200px;
}
blockquote.alignright {
float:right;
width:200px;
}
.post code {
font:12px "Courier New", Courier, monospace;
white-space:pre!important;
padding:10px;
margin:10px;
color:#fff!important;
background:#706a5f;
display:block;
}
form {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.form2 {
padding:10px;
}
.formpadding {
padding:10px;
}
.formstyle {
padding:15px 0;
}
.formstyle label {
display:block;
padding:3px 3px 3px 0;
}
.textfield input, .textfield textarea {
display:block;
padding:3px;
border:solid 1px #ac9f87;
background:#f5efe3;
}
.textfield input:hover, .textfield textarea:hover {
background:#fff;
}
.textfield input:focus, .textfield textarea:focus {
background:#fff;
border:solid 1px #222;
}
.textfield input {
width:98%;
}
.textfield textarea {
width:98%;
}
.fields {
margin-bottom:5px;
}
.infobox {
width:38%;
float:right;
padding-top:25px;
font-size:10px;
margin-bottom:5px;
}
.fieldsets {
padding:15px;
border:solid 1px #ac9f87;
margin:5px 10px 20px 10px;
}
.fieldsets h3 {
display:block;
font:bold italic 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#222;
background:url(cssheaven-2-images/bg.jpg) repeat;
float:left;
padding:3px 8px;
margin:-25px 0 0 5px;
}
.fieldsets .info {
font-size:10px;
color:#555;
font-style:italic;
margin-bottom:5px!important;
}
.fields .selectmenu {
width:280px;
display:block;
padding:3px;
border:solid 1px #ac9f87;
}
.fields .smallselect {
padding:3px;
border:solid 1px #ac9f87;
}
.widefields {
padding:3px;
margin-bottom:5px;
}
.textadblock2 {
padding:5px;
background:#ffc;
border:solid 1px #666;
margin-bottom:8px;
margin-right:35px;
}
.btn1 {
background:#706a5f;
padding:8px 10px;
text-align:center;
font:bold 14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#efe9df;
border:none;
}
#comments h2 {
background:#c7bdaa;
padding:10px;
font-size:18px!important;
}
#comments .entry {
padding:10px;
background:#c7bdaa;
margin-bottom:10px;
}
#comments .entry p {
display:block;
margin-bottom:8px!important;
}
#comments .entry .avt {
float:left;
width:55px;
margin-right:10px;
}
.avt img {
background:#706a5f;
padding:5px;
}
#comments .entry .con, #comments .entry .name, #comments .entry .date {
margin-left:70px;
font:italic 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#comments .entry .con blockquote {
}
h3#respond {
color:#fff;
font:bold 18px "Trebuchet MS", Arial, Helvetica, sans-serif;
margin-bottom:15px;
}
.comments-form {
background:#706a5f;
padding:10px;
}
.formid, .formuri, .formemail {
padding:3px;
height:25px;
background:#f2ebdd;
border:solid 1px #1C1B17;
width:250px;
color:#999;
font-size:16px;
}
.comments-form label {
padding-left:15px;
color:#FFC;
}
.comments-form .button {
display:block;
background:#333;
border:none;
padding:8px;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#fff;
}
.comments-form textarea {
padding:3px;
background:#f2ebdd;
border:solid 1px #1C1B17;
color:#999;
font-size:16px;
}
.postheader {
margin-bottom:18px;
}
.widepage {
width:970px!important;
border:none!important;
}
#rightboxes div p {
display:block;
padding:55px 20px 0 0;
font:bold 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#rightboxes div a {
color:#fff;
text-decoration:none;
}
#rightboxes div p a span {
background:#000;
padding:3px;
font-size:14px;
}
#rightboxes div p a:hover {
color:#ffc;
}
#footer {
padding:40px 0;
text-align:center;
background:#111;
border-top:solid 1px #000;
}
#footer p, #footer a {
margin:0;
font-size:12px;
color:#C2B7A2;
text-decoration:none;
}
#footer #copyright {
display:block;
width:970px;
margin:0 auto;
}
#footer .left {
float:left;
}
#footer .right {
float:right;
}
</style>
</head>
<body>
<div id="topbanner">
<div class="container">
<h1 id="sitename"><a href="index.html">CSSHeaven 2</a> <span>Company Slogan Here</span></h1>
<div id="mainnav">
<ul>
<li><a href="index.html">Welcome <span>home..</span></a></li>
<li><a href="style.html">Style <span>examples</span></a></li>
<li class="active"><a href="about.html">About <span>another example</span></a></li>
<li><a href="blog.html">Blog <span>examples of posts</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="pagewrap">
<div id="wrap">
<div id="maincontent">
<div id="threecol">
<div class="col1">
<h2>About </h2>
<p>CSSHeaven 2 is a Free CSS Template designed by Roshan and released by CSSHeaven.org. This template suitable for small business or personal websites.</p>
</div>
<div class="col2">
<h2>What else ?</h2>
<p>That's all and some lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquam pulvinar adipiscing. In euismod nunc vel mauris placerat vitae fermentum lacus pharetra.</p>
</div>
<div class="col3">
<h2>License</h2>
<p>This template is released under General Public License (GPL). You may modify, use, or redistribute this template. This tempalte comes without any warranty.</p>
</div>
<div class="clear"></div>
</div>
<div class="clear bordered"></div>
<div id="page" class="widepage">
<div class="post">
<div class="posthead">
<h3><a href="#">About Us</a></h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at turpis metus. Donec gravida varius metus et tincidunt. Sed sit amet orci ipsum. Nunc scelerisque purus at massa faucibus id scelerisque nisi suscipit. Cras mollis, nunc eu mattis cursus, lorem mi sollicitudin lectus, ac luctus libero sem at erat. Phasellus commodo vulputate odio sed lobortis. Vivamus in augue ipsum. Integer non quam eget leo egestas lacinia eu ac magna. Sed nec odio nisl, et ultrices mauris. Morbi odio lacus, porta eu venenatis eget, pulvinar a odio</p>
<p>Nunc at tortor justo, sit amet posuere neque. Etiam est mauris, ullamcorper eget ultrices in, commodo at nunc. Ut venenatis consectetur dui. Suspendisse eget mauris mauris. Praesent malesuada, arcu et commodo pharetra, dolor ante dictum mauris, ac aliquam lectus elit in libero. Phasellus a purus non urna tincidunt vulputate. Mauris quis ligula in lectus euismod placerat ac ultrices augue. Sed et magna ut urna dictum aliquet ut sed mi. Aliquam erat volutpat. Sed tincidunt vestibulum convallis. Nulla ornare adipiscing velit, nec porttitor est fringilla ut. Cras dictum, velit id vulputate dapibus, magna nisi vestibulum ante, at viverra enim erat id erat. Sed sapien risus, ultricies non scelerisque ac, vehicula placerat purus. Nulla viverra sapien nec lectus consequat volutpat. Proin bibendum enim vitae ante luctus ac vulputate neque malesuada.</p>
<p>Vestibulum iaculis ultricies gravida. Morbi vitae augue velit. Morbi eu massa nulla. Cras sed purus est. Nulla laoreet facilisis metus nec lobortis. Quisque lobortis, mauris in dignissim lobortis, metus tortor pulvinar mauris, et hendrerit velit quam at urna. Aliquam pellentesque dignissim ligula at laoreet. In nec lorem pretium nibh condimentum porta. Suspendisse eu purus turpis. Nam eu mauris ac turpis pretium accumsan eu vel lorem. Aliquam at lectus nibh, at lobortis lorem.</p>
<p>Nulla quis lorem sit amet sapien imperdiet semper. Vestibulum sed turpis risus, non rutrum sem. Aliquam erat volutpat. Etiam rhoncus aliquam tortor, ut consequat eros scelerisque eu. Praesent accumsan blandit pellentesque. Curabitur sodales pulvinar bibendum. Vivamus suscipit blandit pulvinar. Donec placerat justo a ante adipiscing blandit in in magna. Aliquam adipiscing eleifend magna lobortis ultricies. Vivamus suscipit eros ac eros interdum in ornare massa pulvinar. Integer consequat ullamcorper volutpat.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="bottom">
<div id="btmcontent">
<div class="col1">
<h2>Products</h2>
<p>raesent tempor, diam at egestas mollis, nisi sapien tristique sem, ac feugiat lectus sapien in turpis. Nam viverra nibh quis arcu aliquam non hendrerit velit vehicula.</p>
<ul>
<li><a href="#">raesent tempor</a></li>
<li><a href="#">diam at egestas mollis</a></li>
<li><a href="#">nisi sapien tristique sem</a></li>
<li><a href="#">ac feugiat lectus sapien in turpis</a></li>
<li><a href="#">Nam viverra nibh quis </a></li>
<li><a href="#">arcu aliquam non hendrerit </a></li>
<li><a href="#">velit vehicula</a></li>
</ul>
</div>
<div class="col2">
<h2>Support</h2>
<p>raesent tempor, diam at egestas mollis, nisi sapien tristique sem, ac feugiat lectus sapien in turpis. Nam viverra nibh quis arcu aliquam non hendrerit velit vehicula.</p>
<ul>
<li><a href="#">raesent tempor</a></li>
<li><a href="#">diam at egestas mollis</a></li>
<li><a href="#">nisi sapien tristique sem</a></li>
<li><a href="#">ac feugiat lectus sapien in turpis</a></li>
<li><a href="#">Nam viverra nibh quis </a></li>
<li><a href="#">arcu aliquam non hendrerit </a></li>
<li><a href="#">velit vehicula</a></li>
</ul>
</div>
<div class="col3">
<h2>Company</h2>
<p>raesent tempor, diam at egestas mollis, nisi sapien tristique sem, ac feugiat lectus sapien in turpis. Nam viverra nibh quis arcu aliquam non hendrerit velit vehicula.</p>
<ul>
<li><a href="#">raesent tempor</a></li>
<li><a href="#">diam at egestas mollis</a></li>
<li><a href="#">nisi sapien tristique sem</a></li>
<li><a href="#">ac feugiat lectus sapien in turpis</a></li>
<li><a href="#">Nam viverra nibh quis </a></li>
<li><a href="#">arcu aliquam non hendrerit </a></li>
<li><a href="#">velit vehicula</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="copyright">
<p class="left">Copyright © 2010, Your Company Here, All Rights Reserved</p>
<p class="right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.cssheaven.org/">CSS Heaven</a></p>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category