xtreme
<!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>Xtreme</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin:0px;
padding:0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size:13px;
line-height:1.5em;
background-color: #212121;
background-image: url(xtreme-images/body.png);
background-repeat: repeat;
}
a, a:link, a:visited {
font-size: 12px;
color: #000;
font-weight: bold;
}
a:hover {
text-decoration:none;
color: #CC0000;
}
p { margin: 0px; padding: 0 0 20px 0; }
img { border: none; }
h1, h2, h3, h4, h5 { font-weight: normal; }
h1 { font-size: 32px; color: #000; margin: 0 0 30px 0; padding: 5px 0; }
h2 { font-size: 20px; color: #000; margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px dashed #999; }
h3 { font-size: 21px; color: #333; margin: 0 0 20px 0; padding: 0; text-decoration: none; font-weight: normal; }
h3 a { text-decoration: none; font-weight: normal; }
h3 span { color: #69F; }
h4 { font-size: 18px; color: #000; margin: 0 0 10px 0; padding: 0; }
h5 { font-size: 14px; height: 20px; color: #000; margin: 0 0 10px 0; padding: 2px 8px; background: url(xtreme-images/h5_bg.png) no-repeat top left; }
h6 { font-size: 12px; margin: 0 0 5px 0; padding: 0;}
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.margin_r10 { margin-right: 10px; }
.float_l { float: left; }
.float_r { float: right; }
.image_wrapper { padding: 8px; border: 1px solid #000; background: #0f1115; }
.fl_img { float: left; margin: 3px 30px 15px 0; }
.fr_img { float: right; margin: 3px 0 15px 15px; }
.image_wrapper_01 { position: relative; width: 297px; height: 102px; padding: 8px 0 0 8px; margin-bottom: 15px; }
.image_wrapper_01 span { position: absolute; top: 0; left: 0; width: 305px; height: 110px; background: url(xtreme-images/image_frame_01.png) no-repeat; }
blockquote { font-style: italic; }
cite { font-weight: bold; }
cite span { color: #fff; }
ul { margin: 15px; padding: 0; list-style: none; }
ul li { padding: 0 0 0 20px; margin: 0 0 5px 0; background: url(xtreme-images/list_01.png) left center no-repeat; }
#body_wrapper {
background: url(xtreme-images/body_top.png) repeat-x top;
}
#main_wrapper {
width: 966px;
padding: 0 15px;
margin: 0 auto;
}
/* header */
#temmplatemo_header {
padding: 20px 30px;
background: url(xtreme-images/header.png) top center;
}
#temmplatemo_header .header_left {
float: left;
width: 300px;
}
#temmplatemo_header .header_right {
float: right;
width: 580px;
}
/* site title */
#temmplatemo_header #site_title {
float: left;
width: 200px;
padding: 40px 0 0 0;
}
#site_title a {
margin: 0px;
padding: 0px;
font-size: 26px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: 5px;
color: #fff;
font-size: 11px;
text-align: center;
font-family: "Times New Roman", Times, serif;
}
/* end of site title */
/* search */
#search_box {
float: right;
margin-bottom: 50px;
}
#search_box form {
margin: 0;
padding: 0;
}
#search_box #input_field {
height: 13px;
width: 150px;
color: #fff;
font-size: 12px;
padding: 5px;
font-variant: normal;
line-height: normal;
border: 1px solid #212121;
background: #3a3a3a;
}
#search_box #submit_btn {
height: 26px;
cursor: pointer;
padding: 2px 5px 5px 5px;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#666666;
border: 1px solid #000;
background: #333;
}
/* end of search */
/* menu */
#temmplatemo_header #menu {
clear: both;
float: right;
height: 37px;
margin-top: 12px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 35px;
width: 57px;
margin-left: 30px;
padding: 2px 0 0 0;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #fff;
font-weight: normal;
outline: none;
}
#menu li a:hover, #menu li .current {
background: url(xtreme-images/menu_hover.png) no-repeat;
}
/* end of menu */
/* end of header */
/* content */
#content_outer {
background: url(xtreme-images/content.png) repeat-y;
}
#content_inner {
padding: 40px 30px;
background: url(xtreme-images/content_top.png) no-repeat;
}
#content_bottom {
width: 966px;
height: 25px;
background: url(xtreme-images/content_bottom.png)
}
#content {
float: right;
width: 620px;
}
.content_two_col {
float: left;
width: 305px;
}
#sidebar {
float: left;
width: 260px;
}
.sidebar_box {
margin-bottom: 40px;
}
.sidebar_box .sidebar_box_p_divider {
border-bottom: 1px dashed #000;
margin-bottom: 20px;
}
/* end of content */
/* newsletter */
#newsletter_box {
clear: both;
width: 850px;
height: 106px;
padding: 0 30px;
background: url(xtreme-images/newsletter_box.png) no-repeat;
}
#newsletter_box .box {
float: left;
width: 240px;
margin: 15px 20px 0 0;
}
#newsletter_box .box p {
margin: 0;
padding: 0;
}
#newsletter_box .box span {
color: #F60;
}
#newsletter_subscribe_box {
float: left;
width: 238px;
height: 101px;
margin: 3px 0 0 0;
padding: 20px 0 0 30px;
background: url(xtreme-images/newsletter_subscribe_box.png) no-repeat;
}
#newsletter_subscribe_box form {
margin: 0px;
padding: 0px;
font-size: 11px;
}
#newsletter_email {
width: 200px;
height: 17px;
padding: 3px 5px;
margin-bottom: 10px;
background: url(xtreme-images/newsletter_email_field_bg.png) no-repeat;
border: none;
line-height: normal;
}
#newsletter_submit{
border: none;
cursor: pointer;
font-size: 12px;
font-weight: bold;
font-weight: bold;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 35px;
height: 23px;
padding: 0 0 3px 0;
background: url(xtreme-images/button_02.png) no-repeat;
}
.col_w560 {
width: 560px;
}
.col_w300 {
width: 300px;
}
.col_w120 {
width: 140px;
}
#contact_box {
margin: 0px;
padding: 0px;
font-size: 11px;
}
#contact_box .inputfiled {
width: 130px;
height: 17px;
padding: 3px 5px;
margin-bottom: 10px;
background: #d8d8d8;
border: 1px solid #cbcbcb;
line-height: normal;
}
#contact_box #message_input{
width: 130px;
height: 86px;
padding: 3px 5px;
background: #d8d8d8;
border: 1px solid #cbcbcb;
}
#contact_box #contact_submit{
float: right;
border: none;
cursor: pointer;
font-size: 12px;
font-weight: normal;
text-align: center;
vertical-align: bottom;
white-space: pre;
width: 53px;
height: 23px;
padding: 0 0 10px 0;
background: url(xtreme-images/button_01.png) no-repeat;
}
/* end of newsletter */
/* footer */
#footer {
clear: both;
color: #868686;
padding: 20px 30px;
text-align: center;
}
#footer a{
color: #a3a3a3;
font-weight: normal;
}
/* end of footer */
</style>
<script language="javascript" type="text/javascript">
function clearText(field) {
if (field.defaultValue == field.value) field.value = '';
else if (field.value == '') field.value = field.defaultValue;
}
</script>
</head>
<body>
<div id="body_wrapper">
<div id="main_wrapper">
<div id="temmplatemo_header">
<div class="header_left">
<div id="site_title"> <a href="#"> <img src="xtreme-images/logo.png" alt="" /> <span>FREE CSS TEMPLATE</span> </a> </div>
</div>
<div class="header_right">
<div id="search_box">
<form action="#" method="get">
<input type="text" value="Type a keyword" name="username" size="10" id="input_field" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="submit" name="login" value="Search" alt="login" id="submit_btn" />
</form>
<div class="cleaner"></div>
</div>
<div id="menu">
<ul>
<li><a href="#" class="current">home</a></li>
<li><a href="#">templates</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">flash files</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<div class="cleaner"></div>
</div>
<!-- end of header -->
<div id="content_outer">
<div id="content_inner">
<div id="sidebar">
<div class="sidebar_box"> <img src="xtreme-images/welcome_title.png" alt="" />
<div class="cleaner_h20"></div>
<p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. </p>
<p>Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. Mauris quis nulla sed ipsum pretium sagittis.</p>
</div>
<div class="sidebar_box">
<h2>Vestibulum pede nonurna</h2>
<p class="sidebar_box_p_divider"><strong><a href="#">Aenean cursus</a> - </strong> Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh.</p>
<p class="sidebar_box_p_divider"><strong><a href="#">Vestibulum lorem</a></strong> - Urna in neque. Aenean eget tortor eget ipsum aliquet porta. </p>
<p><strong><a href="#">Parturient montes</a></strong> - Nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet.</p>
</div>
</div>
<div id="content">
<h1>Download Free Web Templates</h1>
<p>Donec a massa ut pede pulvinar vulputate. Nulla et augue. Sed eu nunc quis pede tristique suscipit. Nam sit amet justo vel libero tincidunt dignissim. Cras magna velit, <a href="#">pellentesque</a> mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. </p>
<p>Cum sociis natoque penatibus et magnis dis <a href="#">parturient</a> montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem. </p>
<p>Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio. <a href="#">Maecenas</a> venenatis metus eu est. In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. Vestibulum dapibus tortor vel orci. <a href="#">Read More...</a> </p>
<div class="cleaner_h20"></div>
<h2>Our Projects</h2>
<div class="content_two_col margin_r10">
<div class="image_wrapper_01"> <span></span> <img src="xtreme-images/image_01.jpg" alt="" /> </div>
<h5>Vivamus leo velit, convallis id</h5>
<ul>
<li>Quisque facilisis suscipit elit</li>
<li>Lacus et dictum tristique</li>
<li>Eeros ac tincidunt aliquam</li>
<li>Nullam commodo arcu non facilisis</li>
</ul>
<p><a href="#">Details</a></p>
</div>
<div class="content_two_col">
<div class="image_wrapper_01"> <span></span> <img src="xtreme-images/image_02.jpg" alt="" /> </div>
<h5>Aliquam ipsum felis</h5>
<ul>
<li>Curabitur adipiscing tellus</li>
<li>Vestibulum consectetur interdum</li>
<li>Maecenas scelerisque</li>
<li>Curabitur adipiscing tellus</li>
</ul>
<p><a href="#">Details</a></p>
</div>
<div class="cleaner"></div>
</div>
<!-- end of content -->
<div id="newsletter_box">
<div class="box"> <a href="#"><img src="xtreme-images/sign_up.png" alt="" /></a>
<p><span>Already sign up? CLICK <a href="#">HERE</a></span></p>
</div>
<div class="box"> <a href="#"><img src="xtreme-images/read_our_newsletter.png" alt="" /></a>
<p>Sodal esliber outodio maecenas enatis metus euest suspendisse.</p>
</div>
<div id="newsletter_subscribe_box">
<form action="#" method="get">
<input type="text" name="q" size="10" id="newsletter_email" />
<br />
<input type="radio" name="search" value="thissite" />
SUBSCRIBE
<input type="radio" name="search" value="theweb" checked="checked" />
UNSUBSCRIBE
<input type="submit" name="submit" value="GO!" alt="Search" id="newsletter_submit" />
</form>
</div>
</div>
<!-- end of newsletter_box -->
<div class="cleaner_h30"></div>
<div class="col_w560 float_l">
<h3><a href="#">Follow us on <span>Twitter</span></a></h3>
<p> Curabitur quis velit quis tortor tincidunt aliquet. Suspendisse ac magna quis est eleifend dictum. In velit urna, convallis id, pharetra in, iaculis sit amet, mi. Praesent consectetur imperdiet mauris. Suspendisse at pede vel lorem pulvinar laoreet. </p>
<p>Etiam et neque. Donec dapibus viverra est. Maecenas dignissim, quam a posuere scelerisque, ligula arcu dictum turpis, id tempus turpis erat at nulla.</p>
</div>
<div class="col_w300 float_r">
<h3>Quick Contact</h3>
<div id="contact_box">
<form action="#" method="get">
<div class="col_w120 float_l">
<input type="text" name="name" value="name" class="inputfiled" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="text" name="email" value="email" class="inputfiled" onfocus="clearText(this)" onblur="clearText(this)" />
<input type="text" name="subject" value="subject" class="inputfiled" onfocus="clearText(this)" onblur="clearText(this)" />
</div>
<div class="col_w120 float_r">
<textarea id="message_input" rows="" cols="" onfocus="clearText(this)" onblur="clearText(this)">message</textarea>
</div>
<div class="cleaner_h10"></div>
<input type="submit" name="submit" value="Submit" alt="Submit" id="contact_submit" />
</form>
</div>
</div>
<div class="cleaner"></div>
</div>
<!-- end of inner content -->
</div>
<!-- end of outer content -->
<div id="content_bottom"></div>
<div id="footer"> Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- end of footer -->
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<!-- end of wrapper -->
</body>
</html>
Related examples in the same category