strawberry
?<!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>Strawberry</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: url(strawberry-images/bg.jpg);
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: url(strawberry-images/bg.jpg);
}
a{ color: #6ec13a; text-decoration: underline; }
a:hover{ color: #6ec13a; text-decoration: none;}
#container {
width: 900px;
margin: auto;
}
#header {
width: 849px;
height: 216px;
background: url(strawberry-images/header.jpg) no-repeat;
margin: 20px 0 0 38px;
padding: 0;
}
#logo_area {
float: left;
width: 300px;
height: 45px;
margin: 20px 0 0 20px;
padding: 0;
}
* html #logo_area {
margin: 20px 0 0 10px;
}
span.gray {
font-family: "Times New Roman";
font-size: 24px;
color: #525252;
font-weight: bold;
margin: 0 0 10px 0;
padding: 0;
}
span.red {
font-family: "Times New Roman";
font-size: 24px;
font-weight: bold;
color: #e20b00;
margin: 0 0 10px 0;
padding: 0;
}
#slogan {
font-family: "Times New Roman";
font-size: 11px;
color: #a4a0a0;
font-weight: bold;
margin: 0;
padding: 0;
}
/* Menu */
#menu{
width: 600px;
height: 33px;
float: left;
margin: 74px 0 0 10px;
padding: 0;
}
#menu ul{
list-style: none;
display: inline;
}
#menu li{
float:left;
}
#menu li a{
float: left;
display: block;
color: #fff;
background: url(strawberry-images/menu_left.jpg) no-repeat;
text-decoration: none;
font-family: "Times New Roman";
font-size: 12px;
font-weight: bold;
margin: 0 10px 0 0;
padding: 0 0 0 5px;
height: 77px;
line-height: 77px;
text-align: center;
cursor: pointer;
}
* html #menu li a{
margin-right: 5px;
}
#menu li a b{
float: left;
display: block;
padding: 0 15px 0 10px;
background: url(strawberry-images/menu_right.jpg) right top no-repeat;
}
#menu li.current a, #menu li a:hover, #menu li.current a b, #menu li a:hover b{
color: #fff;
text-decoration: underline;
}
/*End OF menu*/
#content {
width: 887px;
margin: 0;
padding: 0;
}
#content_left {
float: left;
width: 651px;
background: url(strawberry-images/left_top.jpg) top no-repeat;
margin: 0;
padding: 0;
}
#content_left #content_area{
float: right;
width: 573px;
background: #f3f3f3;
margin: 0;
padding: 20px;
}
#content_area .post_area{
margin: 0;
padding: 0;
}
#content_left #content_area_black{
float: right;
width: 573px;
background: #151515;
margin: 0;
padding: 20px;
}
#content_area_black .post_area_black{
margin: 0;
padding: 0;
}
.post_area_black h1{
font-family: Tahoma;
font-size: 12px;
color: #fff;
margin: 0 0 10px 0;
padding: 0;
}
.post_area_black h2{
font-family: Tahoma;
font-size: 11px;
color: #94e225;
margin: 0 0 2px 0;
padding: 0;
}
.post_area_black p{
font-family: Tahoma;
font-size: 11px;
color: #fff;
text-align: justify;
margin: 0 0 10px 0;
padding: 0;
}
#content_area .left_line {
clear: both;
height: 0px;
border-bottom: #d1ebb2 solid 1px;
margin: 0 0 10px 0;
padding: 0;
}
.post_area h1{
font-family: "Times New Roman";
font-size: 18px;
color: #79cb21;
margin: 0 0 15px 0;
padding: 0;
}
.post_area p{
font-family: Tahoma;
font-size: 11px;
color: #444546;
text-align: justify;
margin: 0 0 15px 0;
padding: 0;
}
.post_area p b{
color: #6ec23a;
font-weight: bold;
}
.post_area .3_col{
float: left;
width: 180px;
margin: 0 16px 0 0;
padding: 0;
}
.3_col p{
font-family: Tahoma;
font-size: 11px;
color: #444546;
text-align: justify;
margin: 5px 5px 0 5px;
padding: 0;
}
.post_area .3_col_last{
float: left;
width: 180px;
margin: 0;
padding: 0;
}
.3_col_last p{
font-family: Tahoma;
font-size: 11px;
color: #444546;
text-align: justify;
margin: 5px 5px 0 5px;
padding: 0;
}
#content_right {
float: right;
width: 236px;
margin: 0;
padding: 0;
}
#content_right #content_right_top {
width: 236px;
height: 62px;
background: url(strawberry-images/right_top.jpg) no-repeat;
margin: 0;
padding: 0;
}
#content_right #content_right_mid {
width: 236px;
background: url(strawberry-images/right_middle.jpg);
margin: 0;
padding: 0;
}
#content_right_mid .right_line {
width: 236px;
background: url(strawberry-images/right_line.jpg) no-repeat;
height: 1px;
}
#content_right_mid .section {
margin: 0;
padding: 20px;
}
.section .section_title{
height: 22px;
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #fff;
background: #7c896d;
margin: 0 0 10px 0;
padding: 2px 0 0 10px;
}
.section p{
font-family: Tahoma;
font-size: 11px;
text-align: justify;
color: #484848;
margin: 0;
padding: 0;
}
.section ul{
list-style: none;
margin: 0;
padding: 0 0 0 10px;
}
.section li a{
font-family: Tahoma;
font-size: 11px;
text-align: justify;
color: #484848;
text-decoration: underline;
}
.section li a:hover{
text-decoration: none;
}
.cleaner {
clear: both;
height: 0px;
}
#footer {
margin: 0;
padding: 10px 0;
font-family: Arial;
font-size: 12px;
text-align: center;
color: #adad7b;
}
#footer a{
color: #adad7b;
text-decoration: underline;
}
#footer a:hover{
color: #adad7b;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo_area"> <span class="red">STRAWBERRY</span> <span class="gray"> </span>
<div id="slogan">Free CSS Template</div>
</div>
<div id="menu">
<ul>
<li class="current"><a href="http://www.free-css.com/" ><b>HOME</b></a></li>
<li><a href="http://www.free-css.com/"><b>PRODUCTS</b></a></li>
<li><a href="http://www.free-css.com/"><b>SERVICES</b></a></li>
<li><a href="http://www.free-css.com/"><b>GALLERY</b></a></li>
<li><a href="http://www.free-css.com/"><b>COMPANY</b></a></li>
<li><a href="http://www.free-css.com/"><b>CONTACT</b></a></li>
</ul>
</div>
</div>
<!-- End OF Header -->
<div id="content">
<div id="content_left">
<div id="content_area">
<div class="post_area">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>This template is provided by TemplateMo. You may use this template for any of your websites. Credit goes to Photovaco.com for photo usage.</p>
<p><b>Lorem ipsum dolor sit amet,</b> consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim.</p>
<p><b>Donec mollis aliquet ligula,</b> maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum.</p>
</div>
<div class="left_line"></div>
<div class="post_area">
<h1>GALLERY OF THE WEEK</h1>
<div class="3_col"> <a href="http://www.free-css.com/"><img src="strawberry-images/thumb_1.jpg" alt="" border="0" /></a>
<p>Prae sent id tell us. Etiam faucibus. Cum sociis natoque penatibus et magnis dis part urient mon tes, nas cetur ridi culus mus. </p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam interdum erat id ipsum. Aenean fringilla tempus est.</p>
</div>
<div class="3_col"> <a href="http://www.free-css.com/"><img src="strawberry-images/thumb_2.jpg" alt="" border="0" /></a>
<p>Fusce enim elit, fermentum vel, tris tique sit amet, pos uere id, eros. Viva mus elem entum dign issim ne que. Sed gra vida, dolor at lob ortis com modo.</p>
<p>Lectus purus molestie libero, quis hendrerit odio turpis nec eros. Donec non magna quis nunc fri ngil la pos uere.</p>
</div>
<div class="3_col_last"> <a href="http://www.free-css.com/"><img src="strawberry-images/thumb_3.jpg" alt="" border="0" /></a>
<p>Maecenas aliquam ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. Con sec tet uer adi pis cing elit.</p>
<p>Nu nc qu is sem nec tel lus blan dit tin cidunt. Duis vitae velit sed dui mal esu ada dig nissim.</p>
</div>
<div class="cleaner"></div>
</div>
</div>
<!-- End OF Left Content Area -->
<div id="content_area_black">
<div class="post_area_black">
<h1>RECENT TESTIMONIALS</h1>
<h2>Maecenas venenatis metus eu est</h2>
<p>In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. Vestibulum dapibus tortor vel orci. </p>
<h2>Cras semper, odio et placerat vestibulum</h2>
<p>augue urna placerat sem, id mollis elit quam quis velit. Ut vehicula cursus orci morbi porttitor est sed neque. Aliquam lorem elit, mollis eget.</p>
</div>
</div>
<!-- End OF Left Content Area Black -->
<div class="cleaner"></div>
<div id="footer"> Copyright © 2024 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</div>
<!-- End OF Left -->
<div id="content_right">
<div id="content_right_top"></div>
<div id="content_right_mid">
<div class="section">
<div class="section_title"> USEFUL RESOURCES </div>
<p>Lorem ipsum dolor sit amet, con sec tetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim.</p>
</div>
<div class="right_line"></div>
<div class="section">
<div class="section_title"> FUTURE PLAN </div>
<p>Sus pen disse a nibh tris tique justo rhon cus volu tpat. Sus pen disse vitae neque eget ante tri stique ves tibu lum. Pe len tesque dolor nulla, congue vitae, fringilla in, varius a, orci.</p>
</div>
<div class="right_line"></div>
<div class="section">
<div class="section_title"> OUR PARTNERS </div>
<ul>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Free Flash Templates</a></li>
<li><a href="http://www.free-css.com/">Web Design Blog</a></li>
<li><a href="http://www.free-css.com/">Royalty Free Photos</a></li>
</ul>
</div>
</div>
</div>
<!-- End OF Right -->
</div>
<!-- End OF Content -->
</div>
<!-- End OF Container -->
</body>
</html>
Related examples in the same category