floral
<!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>Floral Blog Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.4em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
background: url(floral-images/pg_bg.jpg) repeat;
}
a:link, a:visited { color: #ffffff; text-decoration: none; }
a:active, a:hover { color: #ffffff; text-decoration: none }
h1 {
font-size: 20px;
color: #9c2681;
padding-left: 20px;
margin-top: 40px;
}
h2 {
margin-top: 10px;
padding-left: 60px;
font-size: 13px;
font-weight: bold;
color: #FFFFFF;
}
#container {
clear: none;
margin: auto;
margin-top: 30px;
width: 755px;
height: 820px;
background:#fff;
}
#body {
margin: auto;
margin-top: 0px;
margin-bottom:10px;
width: 735px;
height: 800px;
border: 3px solid #83246e;
}
#header {
width: 729px;
height: 180px;
background: url(floral-images/header.jpg);
}
#site_title {
padding-top: 100px;
padding-left: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
color: #ffffff;
font-weight: bold;
}
#site_title2 {
font-size: 18px;
color: #F0C1F4;
}
#slogan {
float: right;
padding-right: 100px;
padding-top: 33px;
width: 500px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: right;
}
.space {
width: 729px;
height: 7px;
color: #fff;
}
.link {
float: left;
width: 729px;
height: 55px;
margin: 0px;
padding: 0px;
background: url(floral-images/link_bar.jpg) no-repeat;
}
.link ul {
margin-left: 85px;
margin-top: 20px;
padding: 0px;
list-style: none;
text-align: center;
}
.link li{
display: inline;
}
.link li a{
float: left;
text-decoration: none;
padding-top: 0px;
color: #753d68;
width: 80px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
.link li a:hover, .link li .current{
color: #d201a5;
}
.text_area {
color: #666666;
padding-left: 20px;
padding-right: 20px;
text-align: justify;
}
.text_area a:link, a:visited {
color: #0066CC;
}
.text_area a:active, a:hover {
color: #FF0000;
}
.text_area img {
float: left;
padding-right: 10px;
}
#bottom {
float: none;
width: 735px;
margin-top: 40px;
}
.mid1 {
float: left;
width: 220px;
height: 250px;
background: url(floral-images/button.jpg) no-repeat;
}
.mid1 p {
float: left;
padding-left: 25px;
}
.mid1 a {
padding-left: 20px;
font-size: 12px;
line-height: 20px;
color: #6b3a60;
text-decoration: none;
background: url(floral-images/bullet.jpg) no-repeat center left;
}
.mid1 a:hover {
color: #ee376b;
text-decoration: underline;
}
.left_border {
float: left;
height: 250px;
width: 15px;
background: url(floral-images/left_border.jpg) no-repeat;
}
.right_border {
float: left;
background: url(floral-images/right_border.jpg) no-repeat;
height: 250px;
width: 15px;
}
.mid2 {
float: left;
width: 220px;
height: 250px;
background: url(floral-images/button.jpg) no-repeat;
}
.mid2 p {
text-align: justify;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
}
.mid3 {
float: right;
margin-top: 20px;
padding-right: 15px;
padding-top: 50px;
padding-left: 15px;
width: 225px;
height: 180px;
background: url(floral-images/address.jpg) no-repeat;
color:#FFFFFF;
}
#footer {
margin-top: 20px;
float: none;
width: 755px;
height: 30px;
font-weight: bold;
text-align: center;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div class="space"></div>
<div id="body">
<div id="header">
<div id="site_title">FLORAL <span id="site_title2">BLOG WEBSITE</span></div>
<div id="slogan">Free CSS Template</div>
</div>
<div class="link">
<ul>
<li><a href="http://www.free-css.com/">Main Page</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Flowers</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<p> </p>
<h1>Free CSS Website Template</h1>
<div class="text_area"><img src="floral-images/pic.jpg" alt="" width="192" height="147" />
<p>This is a free CSS template provided by TemplateMo.com website. You may download, modify and apply this CSS layout for your personal or business websites. Credit goes to PDPhoto.org for photos.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est.</p>
<p>Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut iaculis lacinia purus. Duis pulvinar scelerisque ante. Morbi tristique, risus quis congue pulvinar, nisl nisi commodo diam, a porta nisi ligula ac massa. Vestibulum blandit lacus sed sapien.</p>
</div>
<div id="bottom">
<div class="mid1">
<h2>Featured Web Links</h2>
<p> <a href="http://www.free-css.com/">CSS Layouts</a><br />
<a href="http://www.free-css.com/">Website Design</a><br />
<a href="http://www.free-css.com/">Customer Services</a><br />
<a href="http://www.free-css.com/">Testimonials</a><br />
<a href="http://www.free-css.com/">Blogging Tips</a><br />
<a href="http://www.free-css.com/">Photoshop Techniques</a><br />
<a href="http://www.free-css.com/">Vector Illustrations</a></p>
<p> </p>
</div>
<div class="left_border"></div>
<div class="mid2">
<h2>Latest News</h2>
<p><strong>Post Date: 19-10-2020 </strong><br />
Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. Aenean eget tortor eget ipsum aliquet porta. Morbi nunc. Praesent varius egestas velit. Praesent vel diam. Cras sed leo tempor neque placerat pretium. </p>
</div>
<div class="right_border"></div>
<div class="mid3">
<p><strong> Quick Contact</strong><br />
Tel: 000-100-1000<br />
Fax: 001-001-0011<br />
Email: info {at} templatemo.com</p>
<p><br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/floral-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
</div>
<p> </p>
</div>
<div id="footer">Copyright 2008 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">templatemo.com</a></div>
</div>
</body>
</html>
Related examples in the same category