organic-beauty
<!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>Organic Beauty - Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
body
{
background-color:#fff;
padding:0; font-family: Arial, Helvetica, sans-serif;
margin:0px auto auto auto;
color:#424849;
font-size:12px;
}
h1{
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#1a5114;
width:180px;
padding:15px 5px 2px 5px;
margin: auto;
text-decoration:none;
border-bottom:1px #CCCCCC dashed;
}
h2{
font-size:18px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
color:#63a130;
width: auto;
padding:15px 5px 2px 10px;
margin: auto;
font-style:italic;
text-decoration:none;
}
img.img_left{
float:left;
padding:0px 8px 8px 0px;
}
#header{
width:100%;
height:97px;
background:url(organic-beauty-images/top_bg.jpg) repeat-x top;
margin:0px;
}
#main_container{
width:780px;
height:auto;
margin:auto;
padding:0px;
}
#logo{
width:164px;
height:49px;
float:left;
padding:10px 0 0 5px;
}
/*------------------------------main content-----------------------*/
#main_content{
width:780px;
margin:auto;
clear:both;
background-color:#FFFFFF;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width: auto;
text-align:center;
height:34px;
margin:auto;
padding-top:50px;
}
ul.menu {
list-style-type:none; display:block; width:475px;
margin: auto; padding:0px; background:none;}
ul.menu li {
display:inline;
font-size:14px;
font-weight:bold;
line-height:34px;}
a.nav:link, a.nav:visited {
display:block; float:left; padding:0px 15px 0px 15px; margin:0;height:34px;
text-decoration:none; background:none; color:#FFFFFF;}
a.nav_selected:link, a.nav_selected:visited {
display:block; float:left; padding:0px 15px 0px 15px; margin:0; height:34px;
text-decoration:none;background:none; color: #009900;}
a.nav:hover {
color:#009900;}
/*------------------------middle_content-----------*/
.center_content{
width:780px;
height:auto;
clear:both;
}
.left_content{
width:410px;
float:left;
margin-right:5px;
}
.left_box{
background:url(organic-beauty-images/center_box_bg.jpg) no-repeat center;
width:409px;
height:213px;
}
p.left_text{
padding:25px 20px 20px 20px;
font-size:11px;
text-align:justify;
}
img.right_img{
float:right;
padding:17px 0 10px 10px;
}
.right_content{
width:321px;
height: auto;
border:1px #f6f5f5 solid;
border-left-width:3px;
border-left-color:#E8E8E8;
float:left;
margin-top:18px;
background:url(organic-beauty-images/right_tab_bg.jpg) no-repeat top center;
}
.right_box{
padding:10px 10px 0px 10px;
margin:auto;
}
.box_title{
background:url(organic-beauty-images/leaf.gif) no-repeat left;
background-position:0px 0px;
padding-left:25px;
font-size:11px;
font-weight:bold;
padding-bottom:10px;
padding-top:5px;
}
p.right_box{
padding:5px;
text-align:justify;
font-size:11px;
clear:both;
}
.right_bottom{
padding:10px 5px 0 0;
text-align:right;
}
.prod_box{
padding:5px;
border:1px #C2CA91 solid;
float:left;
text-align:center;
font-size:11px;
margin:10px;
}
div.pagination {
padding:5px;
margin:5px;
text-align:center;
float:left;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #ddd;
text-decoration: none;
color: #88AF3F;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #85BD1E;
color: #fff;
background-color: #519F31;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #B2E05D;
font-weight: bold;
background-color: #519F31;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
}
/*-----------------------------------------------*/
.contact_tab{
width:270px;
height:auto;
padding:30px;
background-color:#f4f6f9;
margin:5px auto 5px auto;
}
#fields label {
width: 260px;
display: block;
padding: 0px;
}
#fields input {
border: 1px solid #C8D2D9;
margin: 0 0 3px 0;
width: 260px;
}
#fields textarea {
border: 1px solid #C8D2D9;
margin: 0 0 3px 0;
width: 260px;
height: 63px;
}
#send input {
width: 80px;
height: 25px;
margin: 0px;
}
/*-------------------footer------------------------*/
#footer{
width:780px;
height:41px;
clear:both;
font-size:11px;
background:url(organic-beauty-images/footer_bg.gif) repeat-x;
}
ul.footer_menu {
list-style:none; float:right; display:block; width:520;
margin:0px; padding:9px 20px 0 0px;
}
ul.footer_menu li {
display:inline; font-size:11px;}
a.nav_footer:link, a.nav_footer:visited {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:none; color:#2F2626;}
a.nav_footer:hover {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:underline; color:#2F2626;}
a.nav_footer:active {
display:block; float:left; padding:5px 6px 5px 10px; margin:0;
text-decoration:none; color:#2F2626;}
#copyright{
float:left;
padding:0px;
}
</style>
</head>
<body>
<div id="header">
<div id="menu_tab">
<ul class="menu">
<li><a href="http://www.free-css.com/" class="nav"> home </a></li>
<li><a href="http://www.free-css.com/" class="nav"> about us</a></li>
<li><a href="http://www.free-css.com/" class="nav"> services</a></li>
<li><a href="products.html" class="nav"> products</a></li>
<li><a href="contact.html" class="nav_selected"> order online </a></li>
</ul>
</div>
</div>
<div id="main_container">
<div id="main_content">
<div id="logo"> <a href="http://www.free-css.com/"><img src="organic-beauty-images/logo.gif" width="164" height="49" alt="" border="0" /></a> </div>
<div class="center_content">
<div class="left_content">
<div class="left_box">
<p class="left_text"> <img src="organic-beauty-images/p3.gif" width="111" height="106" border="0" alt="" class="right_img" style="padding-top:60px;" /> <img src="organic-beauty-images/title1.gif" width="213" height="24" border="0" alt="" /><br />
<br />
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur". </p>
</div>
<h2>Contact<span style="color:#56644b;font-weight: normal;"> us</span></h2>
<div class="contact_tab">
<div id="fields">
<label for="inputname">Name:</label>
<input type="text" name="Name" />
<br />
<label for="inputmail">Email:</label>
<input type="text" name="email" />
<br />
<label for="inputtelefon">Contact Reason:</label>
<input type="text" name="web" />
<br />
<label for="inputmessage">Message:</label>
<textarea name="message" cols="28" rows="4"></textarea>
</div>
<div id="send">
<input type="image" src="organic-beauty-images/send.gif" value="send" />
</div>
</div>
</div>
<div class="right_content">
<h1>Clients testimonials</h1>
<div class="right_box">
<p class="right_box"> <img src="organic-beauty-images/p1.jpg" width="62" height="62" border="0" class="img_left" /> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </p>
</div>
<div class="right_box">
<p class="right_box"> <img src="organic-beauty-images/p2.jpg" width="60" height="89" border="0" class="img_left" /> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </p>
</div>
<div class="right_box">
<p class="right_box"> <img src="organic-beauty-images/p1.jpg" width="62" height="62" border="0" class="img_left" /> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </p>
</div>
<div class="right_box">
<p class="right_box"> <img src="organic-beauty-images/p2.jpg" width="60" height="89" border="0" class="img_left" /> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." </p>
</div>
<div class="right_bottom"> <img src="organic-beauty-images/flowers.jpg" width="150" height="130" alt="" /> </div>
</div>
</div>
</div>
<div id="footer">
<div id="copyright">
<div style="float:left; padding:3px;"><a href="http://www.free-css.com/"><img src="organic-beauty-images/footer_logo.gif" width="38" height="36" alt="" border="0" /></a></div>
<div style="float:left; padding:14px 10px 10px 10px;"> Company name.© All Rights Reserved 2008 - By <a href="http://csscreme.com" style="color:#772c17;">csscreme</a></div>
</div>
<ul class="footer_menu">
<li><a href="http://www.free-css.com/" class="nav_footer"> home </a></li>
<li><a href="http://www.free-css.com/" class="nav_footer"> about </a></li>
<li><a href="http://www.free-css.com/" class="nav_footer"> sitemap </a></li>
<li><a href="http://www.free-css.com/" class="nav_footer"> contact </a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category