blue99
<!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>Blue 99 - Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background-color: #F3F3F3;
margin:0px;
padding:0px;
font: 11px verdana, arial, helvetica;
color: #424749;
}
h1{
font-size:14px;
font-weight:bold;
font-family:Arial;
color:#7e7373;
padding:8px 0 8px 0;
margin:0px;
}
h2{
font-size:14px;
font-weight:bold;
font-family:Arial;
color:#399dc4;
padding:8px 0 8px 0;
margin:0px;
}
p{
text-align:justify;
padding:0px;
margin:0px;
}
p.left_text{
text-align:justify;
padding:5px 0 5px 0;
margin:0px;
color:#424749;
font-size:11px;
clear:both;
}
img.left_img{
float:left;
padding:3px;
margin:0px 10px 10px 0;
}
#main_container{
width:900px;
height:auto;
margin:auto;
background-color:#FFFFFF;
}
#header{
width:900px;
height:120px;
background:url(blue99-images/header_bg.gif) repeat-x;
}
.logo{
float:left;
padding:30px 0 0 25px;
}
/*----------------------menu-------------------------*/
#menu{
width:500px;
height:61px;
float:right;
padding-top:59px;
}
#menu ul{
list-style:none;padding:0px 0px 0px 20px;margin:0px;display:block;
}
#menu ul li{
list-style:none;display:inline;float:left;width:64px;padding:0px 20px 0 20px;
}
#menu ul li a.tooltip{
height:61px;float:left;text-decoration:none;position:relative;z-index:24;
}
#menu ul li a.tooltip:hover{z-index:25;
}
a.tooltip span{display: none}
a.tooltip:hover span{
display:block;
position:absolute;
top:-30px; left:0px;
width: auto;
height: auto;
border:1px solid #0cf;
background-color:#fff;
padding:5px;
color:#000;
text-align: center;
}
.subheader_content{
width:900px;
height:130px;
background:url(blue99-images/middle_bg.jpg) no-repeat center;
}
.subheader_text{
width:450px;
float:right;
padding:40px 10px 0 0 ;
text-align:justify;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
/*--------------------------center_content--------------*/
#center_content{
width:900px;
clear:both;
height:auto;
}
.wide_content{
width:850px;
float:left;
padding:5px 15px 5px 15px;
}
.left_content{
width:450px;
float:left;
padding:5px 5px 5px 15px;
}
.right_content{
width:400px;
float:left;
padding:5px 15px 5px 15px;
}
.title{
clear:both;
padding:10px;
color:#828486;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
}
.title span{
font-size:28px;
color:#424749;
}
.title span.blue{
color:#4bb0d8;
font-size:22px;
}
.contact_box{
width:353px;
height:122px;
background:url(blue99-images/contact_box.jpg) no-repeat center;
background-position:0px 0px;
margin:15px 0 0 10px;
}
.contact_box_text{
width:200px;
padding:5px 10px 10px 10px;
}
/*------------------------portofolio style---------------*/
.portofolio_box{
width:427px;
height:168px;
text-align:center;
padding-top:10px;
background:url(blue99-images/portofolio_box.gif) no-repeat center;
}
.more{
width:90px;
height:23px;
padding:10px 0 10px 0;
background:url(blue99-images/more.jpg) no-repeat center;
padding-left:33px;
}
.more a{
text-decoration:none;
color:#000;
line-height:23px;
}
.thumbnail_box a{
width:114px;
height:101px;
float:left;
margin:7px;
text-align:center;
padding-top:7px;
background:url(blue99-images/thumbnail_box.gif) no-repeat center;
}
.next_project{
clear:both;
padding:10px 30px 10px 0;
float:right;
margin-right:20px;
background:url(blue99-images/arrow.gif) no-repeat right;
}
.next_project a{
text-decoration:none;
color:#000000;
}
/*-----------------------contact_form-------------------*/
#contact_form{
width:435px;
height:auto;
padding:20px 0 0 20px;
}
.form_row{
float:left;
padding:4px 0 4px 0;
}
label{
width:70px;
float:left;
padding:3px 5px 0 0;
color:#7e7373;
text-align:right;
}
input.contact_input{
width:220px;
height:18px;
float:left;
border:1px #cbd1d2 solid;
background-color:#FFFFFF;
color: #666666;
}
textarea.contact_textarea{
width:320px;
height:80px;
float:left;
border:1px #cbd1d2 solid;
background-color:#FFFFFF;
color: #666666;
}
.submit_form{
clear:both;
float:right;
padding:10px 40px 20px 0;
}
/*-----------------------------footer------------------*/
#footer{
clear:both;
width: auto;
height:45px;
color: #999999;
background:url(blue99-images/footer_logo.gif) no-repeat left #dbdcdd;
background-position:0px 50%;
}
.copyright{
float:left;
padding-left:70px;
padding-top:15px;
}
.footer_links{
float:right;
padding-right:10px;
padding-top:15px;
}
.footer_links a{
text-decoration:none;
color: #999999;
}
.footer_links a:hover{
text-decoration:underline;
color: #666666;
}
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div class="logo"><a href="http://www.free-css.com/"><img src="blue99-images/logo.gif" width="238" height="78" border="0" alt="" /></a></div>
<div id="menu">
<ul>
<li><a class="tooltip" href="http://www.free-css.com/"><img src="blue99-images/icon1.gif" border="0" alt="" /><span>Home</span></a></li>
<li><a class="tooltip" href="portofolio.html"><img src="blue99-images/icon2.gif" border="0" alt="" /><span>Portofolio</span></a></li>
<li><a class="tooltip" href="portofolio.html"><img src="blue99-images/icon3.gif" border="0" alt="" /><span>Services</span></a></li>
<li><a class="tooltip" href="contact.html"><img src="blue99-images/icon4.gif" border="0" alt="" /><span>Contact</span></a></li>
</ul>
</div>
</div>
<div class="subheader_content">
<div class="subheader_text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div id="center_content">
<div class="left_content">
<h1>Contact Information</h1>
<div class="contact_box">
<div class="contact_box_text">
<h1>Adress</h1>
Street Name, Nr 3453-6<br />
Email: info@companyname.com<br />
Telephone: +34 345 54675<br />
<br />
www.companyname.com</div>
</div>
<h1>Contact Form</h1>
<div id="contact_form">
<div class="form_row">
<label>Name:</label>
<input type="text" name="name" class="contact_input" />
</div>
<div class="form_row">
<label>Email:</label>
<input type="text" name="email" class="contact_input" />
</div>
<div class="form_row">
<label>Phone:</label>
<input type="text" name="phone" class="contact_input" />
</div>
<div class="form_row">
<label>Message:</label>
<textarea name="name" class="contact_textarea"></textarea>
</div>
<div class="submit_form">
<input type="image" src="blue99-images/send.gif" />
</div>
</div>
</div>
<div class="right_content">
<h1>Clients Testimonials</h1>
<p class="left_text"> ?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 class="more"><a href="http://www.free-css.com/">read more</a></div>
<p class="left_text"> ?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 class="more"><a href="http://www.free-css.com/">read more</a></div>
<p class="left_text"> ?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 class="more"><a href="http://www.free-css.com/">read more</a></div>
<p class="left_text"> ?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 class="more"><a href="http://www.free-css.com/">read more</a></div>
</div>
</div>
<div id="footer">
<div class="copyright"> Blue Pill Desgin © 2008</div>
<div class="footer_links"> <a href="privacy.html">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms & Conditions</a> | <a href="http://www.free-css.com/">Contact Us</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category