pink_float
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Author: Reality Software
Website: http://www.realitysoftware.ca
Note: This is a free template released under the Creative Commons Attribution 3.0 license,
which means you can use it in any way you want provided you keep the link to the author intact.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body { margin:0; font-size:0.9em; line-height:20px; font-family: "Myriad Pro", "Trebuchet MS", Arial;}
a { color:#DB0048;}
a:hover { text-decoration:none;}
#header { background:url(pink_float-images/header_bckg.jpg) repeat-x #000000;}
#logo { padding:30px 0 0 40px; height:34px; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; height:36px; font-size:26px; text-transform:uppercase;}
#menu { background:#000000; width:780px; margin:0 auto; height:32px; margin-top:47px;}
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:100px; list-style:none; text-align:center; height:32px;}
#menu a { display:block; float:left; width:100px; color:#FFFFFF; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; padding-top:8px;}
#menu a:hover{ background: #5D9E9B; padding-top:8px; height:24px;}
#main { width:100%; background-color:#FFFFFF; float:left;}
#content { margin:0 auto; padding:10px 0 20px 0; width:780px;}
#content h1 { margin:0; text-transform:uppercase; font-size:2em;}
.text_block { padding-top:20px; float:left; background-color:#FFFFFF;}
.image { padding:10px; margin:0 0 20px 0; background-color:#f0f0f0; float:left; }
.text { float:right; width:480px; padding-left: 30px;}
.text h1 { margin:0; text-transform:uppercase; font-size:2em;}
.text li { list-style:none; padding-left:20px; background:url(pink_float-images/li.gif) no-repeat 0px 5px;}
.pink { color:#DB0048;}
#content p { padding-bottom:10px;}
#footer {background:url(pink_float-images/footer_bckg.jpg) repeat-x #DB0048; height:102px; clear:both; }
#left_footer { float:left; padding:40px 0 0 60px; background:url(pink_float-images/c.gif) no-repeat 30px 35px; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px;}
#left_footer a { color:#FFFFFF;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:11px; text-align:right;}
#right_footer a { color:#FFFFFF;}
#right_footer a:hover { text-decoration:none;}
</style>
</head>
<body>
<div id="container">
<!-- header -->
<div id="header">
<div id="logo"><a href="#">Your website name</a></div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
<!--end header -->
<!-- main -->
<div id="main">
<div id="content">
<div class="text_block">
<div class="image"><img src="pink_float-images/screenshot.gif" alt=" " /></div>
<div class="text">
<h1 class="pink">Welcome</h1>
<p><b>Pink Float </b> is a free template released by <a href="http://www.realitysoftware.ca">Reality Software</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0</a> license, which means you can use it in any way you want provided you keep the link to the author intact.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam pharetra tempus nunc. Donec feugiat lorem nec odio. Mauris vitae nisi sed mi rhoncus ultrices.</p>
</div>
</div>
<div class="text_block">
<div class="image"><img src="pink_float-images/screenshot.gif" alt=" " /></div>
<div class="text">
<h1 >Lorem ipsum dolor</h1>
<ul>
<li>Pfraesent aliquam,</li>
<li> justo convallis luctus rutrum, </li>
<li>erat nulla fermentum diam, </li>
<li>at nonummy quam ante ac quam. </li>
</ul>
<p><strong>Suspendisse</strong> egestas tincidunt erat. Proin tellus lacus, luctus vitae, ultrices vel, tincidunt vitae, quam. Proin sed enim. Nullam lobortis. Phasellus nec urna sit amet nibh iaculis consequat. Maecenas nisi eros, volutpat a, sagittis vitae, semper vestibulum, nibh. Integer euismod ante et ipsum. Praesent hendrerit tincidunt metus. Proin vel felis a urna <a href="#">tempus lobortis</a>. Sed pellentesque est in mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
</div>
</div>
</div>
</div>
<!-- end main -->
<!-- footer -->
<div id="footer">
<div id="left_footer">© Copyright 2008 Pink Float</div>
<div id="right_footer">
<!-- DO NOT DELETE THIS LINK! READ THE LICENSE! -->
Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>
<!-- ****************************************** -->
</div>
</div>
<!-- end footer -->
</div>
</body>
</html>
Related examples in the same category