heatwave
<!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>
<!-- website template design by download website templates - http://www.downloadwebsitetemplates.co.uk -->
<title>Heat Wave Website Template created by Download Website Templates</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type='text/css'>
@import url("reset.css");
body
{
background: #FFF url("heatwave-images/bg.png") repeat-x;
color: #444;
padding: 0 0 30px 0;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
/* Misc Styles */
a { color: #903; text-decoration: none; }
a:hover { color: #222; text-decoration: none; }
img.imgright { float: right; margin: 0 0 15px 15px; padding: 5px; border: 1px dashed #CCC; }
img.imgleft { float: left; margin: 0 15px 15px 0; padding: 5px; border: 1px dashed #CCC; }
/* Main Styles */
#container
{
margin: 0 auto;
width: 900px;
background: #FFF;
}
#container #headercont
{
width: 860px;
height: 95px;
padding: 65px 20px 0 20px;
background: #111;
}
#container #headercont h1 a
{
font-size: 48px;
letter-spacing: -2px;
color: #FFF;
}
#container #headercont h1 a:hover
{
color: #903;
}
#container #menucont
{
margin: 0 auto;
width: 900px;
height: 44px;
background: #903;
}
#container #menucont ul
{
float: left;
height: 46px;
}
#container #menucont ul li
{
float: left;
display: block;
}
#container #menucont ul li a
{
float: left;
display: block;
color: #FFF;
background: #903;
padding: 0 25px;
line-height: 44px;
font-size: 11px;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
}
#container #menucont ul ul li a
{
float: none;
width: 160px;
padding: 10px 20px;
border: 0;
line-height: 14px;
font-weight: normal;
}
#container #menucont ul li a:hover, #container #menucont ul li.sfHover a, #container #menucont ul ul a
{
color: #FFF;
background: #780027;
}
#container #menucont ul li li a:hover, #container #menucont ul li.sfHover li a:hover
{
color: #FFF;
background: #4B0019;
}
/*** Start SuckerFish Styles ***/
.sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; }
.sf-menu { line-height: 1.0; }
.sf-menu ul { position: absolute; top: -999em; width: 200px; margin-top: 0; padding-top: 0; }
.sf-menu ul li { width: 100%; }
.sf-menu li:hover { visibility: inherit; }
.sf-menu li { float: left; position: relative; }
.sf-menu a { display: block; position: relative; }
.sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 44px; z-index: 99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 200px; top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; top: 0; }
/** End SuckerFish Styles **/
#container #maincont
{
margin: 0 auto;
width: 900px;
line-height: 22px;
background: url("heatwave-images/bg-maincont.gif") repeat-y;
}
#container #maincont p { margin: 0 0 15px 0; }
#container #maincont h1, #container #maincont h2, #container #maincont h3, #container #maincont h4, #container #maincont h5 { margin: 0 0 10px 0; font-weight: normal; letter-spacing: -1px; }
#container #maincont h1 { font-size: 34px; }
#container #maincont h2 { font-size: 32px; }
#container #maincont h3 { font-size: 32px; }
#container #maincont h4 { font-size: 30px; }
#container #maincont h5 { font-size: 30px; }
#container #maincont ul { margin: 0 0 15px 35px; list-style-type: square; }
#container #maincont ul li { padding: 0 0 0 2px; }
#container #maincont ol { margin: 0 0 15px 35px; list-style-type: decimal; }
#container #maincont ol li { padding: 0 0 0 2px; }
#container #maincont blockquote { background: #EEE; border-left: 3px solid #903; padding: 15px; margin: 0 0 15px 0; font-style: italic; line-height: 18px; }
#container #maincont #mainleft
{
float: left;
width: 610px;
padding: 20px;
}
#container #maincont #mainright
{
float: left;
width: 210px;
padding: 20px;
}
#footercont
{
clear: both;
margin: 0 auto;
width: 840px;
padding: 20px 15px 5px 15px;
border-top: 1px solid #DDD;
font-size: 11px;
color: #777;
text-align: right;
}
form input
{
border: 1px solid #999999;
padding: 6px;
color: #666666;
width: 120px;
}
form input.formbutton
{
background: #903;
color: #FFF;
border: none;
font-weight:bold;
width: 60px;
}
form input.formbutton:hover
{
background: #4B0019;
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/fonts/leaguegothic.font.js"></script>
</head>
<body>
<div id="container" class="clearfix">
<div id="headercont">
<h1><a title="" href="#">Heat Wave Website Template</a></h1>
</div>
<div id="menucont">
<ul class="sf-menu dropdown">
<li><a title="" href="#">Home</a></li>
<li><a class="has_submenu" title="" href="#">About Us</a>
<ul>
<li><a title="" href="#">Sub Link 1</a></li>
<li><a title="" href="#">Sub Link 2</a></li>
<li><a title="" href="#">Sub Link 3</a></li>
</ul>
</li>
<li><a class="has_submenu" title="" href="#">Our Services</a>
<ul>
<li><a title="" href="#">Sub Link 1 which is really really really long</a></li>
<li><a title="" href="#">Sub Link 2</a></li>
<li><a title="" href="#">Sub Link 3</a></li>
<li><a title="" href="#">Sub Link 4</a></li>
<li><a title="" href="#">Sub Link 5</a></li>
</ul>
</li>
<li><a title="" href="#">Contact</a></li>
</ul>
</div>
<div id="maincont" class="clearfix">
<div id="mainleft">
<h1>Lorem ipsum dolor sit amet</h1>
<img class="imgleft" alt="" src="heatwave-images/image.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque, turpis a gravida porta, nibh libero feugiat augue, vel interdum erat lectus nec lorem. Phasellus vel odio felis, a venenatis tellus. Nullam sit amet ligula vitae tellus laoreet accumsan eu nec odio. Sed tincidunt congue euismod. Pellentesque sollicitudin erat massa. <a title="" href="../">Quisque lacinia</a>, metus in pretium lobortis, ipsum leo semper mauris, at gravida est nisl sit amet metus. Pellentesque quis massa eget odio lobortis pharetra. Sed faucibus sapien et ligula vulputate eu iaculis dui adipiscing. Etiam a quam lacus. Etiam urna sapien, porttitor at rhoncus sed, tristique sed sapien. Nam felis nulla, sodales a tincidunt ac, fermentum eu nisi.</p>
<ul>
<li>This is an nordered list Item 1</li>
<li>This is an nordered list Item 2</li>
<li>This is an nordered list Item 3</li>
<li>This is an nordered list Item 4</li>
</ul>
<h2>Vivamus urna libero, blandit nec eleifend at</h2>
<p>Vivamus urna libero, blandit nec eleifend at, porta id ante. Proin vitae turpis lacus. Sed ultrices vulputate dictum. Cras porttitor nibh sed eros suscipit quis pellentesque urna feugiat. Fusce interdum mattis ullamcorper. Aliquam non nibh arcu. Donec mollis, libero eget tempor facilisis, libero erat viverra lorem, et porta neque elit ornare arcu. Sed a ipsum diam. Ut pellentesque egestas lacus, non ultrices dui molestie non. Vivamus venenatis pharetra massa vitae tincidunt. Nulla quis lorem lacus, quis sagittis urna.</p>
<ol>
<li>This is an ordered list Item 1</li>
<li>This is an ordered list Item 2</li>
<li>This is an ordered list Item 3</li>
<li>This is an ordered list Item 4</li>
</ol>
<img class="imgright" alt="" src="heatwave-images/image.jpg" />
<p>Aliquam rhoncus, massa eget congue accumsan, turpis ante vestibulum ligula, sed auctor ligula quam at quam. Integer fringilla, diam vitae egestas elementum, erat tellus lacinia neque, posuere eleifend turpis quam quis mi. Cras bibendum varius lacus, a varius quam lacinia non. Duis ac purus id dolor aliquam interdum. Maecenas sit amet neque lectus. Nullam non mi non sapien dignissim dapibus at ac turpis. Sed nec luctus nunc. In id felis vitae massa adipiscing lacinia. Aenean placerat massa sit amet tortor porttitor adipiscing. Donec iaculis nisi fringilla mi pretium at sodales tellus suscipit. Maecenas ac sollicitudin urna. Suspendisse sed purus a libero fermentum rhoncus. Morbi diam orci, volutpat sed cursus vel, ultrices eu dolor. Nullam et magna non ante sagittis euismod sed at erat.</p>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam pellentesque,</blockquote>
</div>
<div id="mainright">
<h3>Nullam blandit</h3>
<p>Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh.</p>
<p>Etiam a quam lacus. Etiam urna sapien, porttitor at rhoncus sed, tristique sed sapien. Nam felis nulla, sodales a tincidunt ac, fermentum eu nisi.</p>
<p><img alt="" src="heatwave-images/image2.jpg" /></p>
<h4>Lpsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mi arcu, lacinia scelerisque blandit nec, mattis non nibh. Curabitur quis urna at massa placerat auctor. Quisque et mauris sapien, a consectetur nulla.</p>
<h4>Search</h4>
<form action="#" method="get" class="searchform">
<p>
<input type="text" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" id="search" name="s" />
<input type="submit" class="formbutton" value="Search" />
</p>
</form>
</div>
</div>
</div>
<div id="footercont">
<p>Template Design by <a title="download website templates" href="http://www.downloadwebsitetemplates.co.uk" rel="external">Download Website Templates</a></p>
</div>
</body>
</html>
Related examples in the same category