brown template
<!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>Brown</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
html {
background: #fff;
}
body {
margin: 0;
padding:0;
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
line-height: 1.5em;
width: 100%;
display: table;
background: #fff;
}
a:link, a:visited { color: #333333; text-decoration: underline; }
a:active, a:hover { color: #990000; text-decoration: none; }
p {
font-size: 13px;
color: #252525;
text-align: justify;
margin: 0 0 15px 0;
}
h1 {
font-size: 25px;
color: #252525;
font-weight: normal;
margin: 0 0 15px 0;
}
#container {
background: url(brown-images/templaetmo_container_bg.jpg) no-repeat top;
width: 1024px;
margin: auto;
}
#header {
background: url(brown-images/header.jpg);
width: 1024px;
height: 340px;
color: #fff;
}
#menu {
width: 960px;
height: 48px;
background: url(brown-images/menu_bg.jpg);
padding: 0 0 0 0;
}
#menu ul {
float: right;
margin: 0px;
padding: 0 0 0 0;
width: 960px;
list-style: none;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
padding: 16px 40px;
text-align: center;
font-size: 12px;
text-align: center;
text-decoration: none;
background: url(brown-images/menu_divider.png) center right no-repeat;
font-size: 15px;
outline: none;
color: #fff;
}
#menu li a:hover, #menu li .current {
color: #fbb100;
background: url(brown-images/menu_current.png) top center no-repeat;
}
#logo_area {
float: left;
width: 290px;
height: 100px;
margin: 85px 0 0 60px;
background: url(brown-images/slogan.png) no-repeat;
background-position: 10px 50px;
}
#logo {
font-size: 79px;
}
#slogan {
font-size: 18px;
width: 250px;
height: 32px;
}
.welcome {
float: right;
width: 437px;
height: 213px;
background: url(brown-images/welcome.png) no-repeat;
padding: 10px 85px;
margin: 55px 15px 0 0;
}
.welcome p {
color: #000000;
font-size: 16px;
}
.welcome h1 {
color: #FFFF00;
font-size: 38px;
}
#content {
width: 1024px;
background: #ededed;
}
#content_top {
width: 1024px;
background: url(brown-images/content_bg_top.jpg) top no-repeat;
}
#content_bottom {
width: 1024px;
background: url(brown-images/content_bg_bottom.jpg) bottom no-repeat;
padding: 30px 0;
}
#templaetmo_left {
float:left;
width: 585px;
margin: 0 0 0 30px;
}
.one_col {
width: 585px;
margin: 0 0 10px 0;
}
.one_col img {
float: left;
margin: 0 10px 10px 0;
}
.section_1 {
float: left;
width: 270px;
}
.section_2 {
float: right;
width: 270px;
background: url(brown-images/contact_bg.png) no-repeat center;
}
#right {
float: right;
width: 359px;
margin: 0 25px 0 0;
}
#right_top {
width: 329px;
height: 26px;
background: url(brown-images/right_top.png) no-repeat;
padding: 30px 0 0 30px;
}
#right_top h1 {
margin: 0;
}
#right_mid {
width: 359px;
background: url(brown-images/right_bg.png);
}
#right_mid #right_mid_top {
width: 309px;
background: url(brown-images/right_mid_top.png) top no-repeat;
padding: 15px 25px 0px 25px;
}
#right_mid_top img {
border: 5px #d5d5d5 solid;
margin: 0 0 15px 0;
}
#right_bottom {
width: 359px;
height: 19px;
background: url(brown-images/right_bottom.png) bottom no-repeat;
}
#bottom_panel {
width: 1024px;
background: url(brown-images/bottom_panel_bg.jpg);
}
#bottom_panel #bottom_top {
width: 1024px;
background: url(brown-images/bottom_panel_top.jpg) top no-repeat;
}
#bottom_bottom {
width: 1024px;
height:18px;
background: url(brown-images/bottom_panel_bottom.jpg);
}
.bottom_3_col {
float: left;
width: 300px;
margin: 0 0 0 30px;
padding: 30px 0 ;
}
.bottom_3_col p, h1 {
color: #b29584;
}
.bottom_3_col a {
color: #fff;
font-weight: bold;
text-decoration: underline;
}
.bottom_3_col a:hover {
color: #fff;
text-decoration: none;
}
.bottom_3_col img {
float:left;
border: 4px solid #fff;
margin: 0 10px 10px 0;
}
.labels {
color: #b29584;
float: right;
font-size: 12px;
margin: 0 0 5px 0;
}
.field {
float: right;
width: 210px;
height: 20px;
border: none;
color: #686868;
background: url(brown-images/text_field.png) no-repeat;
margin: 0 0 5px 0;
padding: 4px 7px 0 5px;
}
.text_area {
float: right;
width: 212px;
height: 54px;
border: none;
color : #686868;
background: url(brown-images/text_area.png) no-repeat;
margin: 0 0 5px 0;
padding: 5px;
}
.button {
float: right;
width: 102px;
height: 29px;
border: none;
color: #cba78f;
background: url(brown-images/form_button.png) no-repeat;
margin: 0;
padding: 0 0 3px 10px;
cursor: pointer;
}
.v_line {
float: left;
width: 1px;
height: 185px;
border-right: 1px solid #e0e0e0;
border-left: 1px solid #fafafa;
margin: 0 20px;
}
.h_line {
height: 10px;
background:url(brown-images/templaetmo_one_col_bottom.png) center;
margin: 0 0 10px 0;
}
.h_line_2 {
height: 0px;
border-top: 1px solid #dcdcdc;
border-bottom: 1px solid #f4f4f4;
margin: 0 0 10px 0;
}
.more {
float: right;
background: url(brown-images/button.png);
width: 133px;
height: 44px;
font-size: 16px;
text-align: center;
margin: 10px 20px 10px 0;
color: #fff;
padding: 15px 0 0 0;
}
.more a {
color: #FFFFFF;
text-decoration: none;
}
.more a:hover {
color: #FFFF00;
text-decoration: underline;
}
.list {
list-style: none;
font-size: 13px;
color: #252525;
padding: 0;
}
.list li {
background: url(brown-images/bullet.png) no-repeat;
background-position: 0 1px;
padding: 0 0 0 25px;
margin: 0 0 5px 0;
}
#footer {
width: 100%;
color: #000000;
margin: 0;
padding: 10px 0 15px 0;
text-align: center;
}
.cleaner {
clear: both;
height: 0;
margin: 0;
padding: 0;
}
.cleaner img {
margin: 0 0 0 30px;
}
</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="container">
<div id="header">
<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="#">Clients</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="logo_area">
<div id="logo"> Brown</div>
</div>
<div class="welcome">
<h1>Featured Work</h1>
<p>This website template is provided by TemplateMo.com for free of charge. Feel free to download and use it for any purpose. Thank you for visiting!</p>
<div class="more"> <a href="#">Buy</a> </div>
<div class="more"> <a href="#">Demo</a></div>
</div>
</div>
<!-- End Of header -->
<div id="content">
<div id="content_top">
<div id="content_bottom">
<div id="templaetmo_left">
<div class="one_col">
<h1>Free Website Template</h1>
<a href="#"><img src="brown-images/img_1.jpg" alt="" border="0" /></a>
<p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui.</p>
<div class="cleaner"></div>
</div>
<div class="h_line"></div>
<div class="one_col">
<h1>WHAT WE DO?</h1>
<img src="brown-images/img_2.jpg" alt="" />
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna.</p>
<div class="cleaner"></div>
</div>
<div class="h_line"></div>
<div class="section_1">
<h1>New Services</h1>
<div class="h_line_2"></div>
<p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula.</p>
<ul class="list">
<li><a href="#">Cras ornare tristique elit</a></li>
<li><a href="#">Vestibulum auctor dapibus neque</a></li>
<li><a href="#">Nunc dignissim risus id metus</a></li>
<li><a href="#">Vivamus molestie gravida turpis</a></li>
</ul>
</div>
<div class="v_line"></div>
<div class="section_2">
<h1>Contact Info</h1>
<div class="h_line_2"></div>
<p>Tel: 010-100-1000<br />
Fax: 020-200-2000<br />
Email: info@yourcompany.com<br />
Web: <a href="#">www.templatemo.com</a></p>
</div>
<div class="cleaner"></div>
</div>
<!-- End Of Left-->
<div id="right">
<div id="right_top">
<h1>Latest Projects</h1>
</div>
<div id="right_mid">
<div id="right_mid_top"> <a href="#"><img src="brown-images/img_3.jpg" alt="" width="293" height="89" /></a> <a href="#"><img src="brown-images/img_4.jpg" alt="" width="292" height="89" /></a> <a href="#"><img src="brown-images/img_5.jpg" alt="" width="293" height="89" /></a> <a href="#"><img src="brown-images/img_6.jpg" alt="" width="293" height="89" /></a> </div>
</div>
<div id="right_bottom"> </div>
</div>
<!-- End Of Right-->
<div class="cleaner"></div>
</div>
<!-- End Of Content Bottom-->
</div>
<!-- End Of Content Top-->
</div>
<!-- End Of Content-->
<div id="bottom_panel">
<div id="bottom_top">
<div class="bottom_3_col">
<h1>Web Design Tips</h1>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
</div>
<div class="bottom_3_col">
<h1>Maecenas adipiscing</h1>
<a href="#"><img src="brown-images/img_7.jpg" alt="" /></a>
<p>Nulla et nunc commodo ante ornare imperdiet. Donec in nisi. Etiam sit amet turpis. </p>
<p> Proin dui mauris, tempor eget, pulvinar sed, pretium sit amet, dui. Proin vulputate justo et quam. Cras nisl eros, elementum eu, iaculis vitae, viverra ut, ligula. Pellentesque metus. Duis dolor.</p>
<p>Photos by <a href="#">photovaco.com</a></p>
</div>
<div class="bottom_3_col">
<h1>Contact Us</h1>
<form action="#" method="post">
<label class="labels">Your Name:</label>
<div class="cleaner"></div>
<input type="text" value="Type Your Name" name="fullname" class="field" onfocus="clearText(this)" onblur="clearText(this)" id="fullname" />
<div class="cleaner"></div>
<label class="labels">Email:</label>
<div class="cleaner"></div>
<input type="text" value="Type Your Email Adddress" name="email" class="field" onfocus="clearText(this)" onblur="clearText(this)" />
<div class="cleaner"></div>
<label class="labels">Message:</label>
<div class="cleaner"></div>
<textarea name="message" cols="50" rows="3" class="text_area" onfocus="clearText(this)" onblur="clearText(this)">Type Your Message</textarea>
<input type="submit" name="search" value = "Send" alt="Search" class="button" />
</form>
</div>
<div class="cleaner"></div>
</div>
<!-- End Of bottom_top-->
</div>
<!-- End Of bottom_panel-->
<div id="bottom_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>
</div>
<!-- End Of Container -->
</body>
</html>
Related examples in the same category