creative-media
<!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>Creative Studio - Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background:url(creative-media-images/bg.jpg) repeat;
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#876039;
}
p{
text-align:justify;
line-height:18px;
font-weight:bold;
font-style:italic;
padding:5px 0 5px 0;
margin:0px;
}
p.tab_content{
width:200px;
padding:75px 15px 0 15px;
margin:0px;
}
a.read_more{
float:right;
padding:0 15px 0 0;
}
.clear{
clear:both;
}
#main_container{
width:960px;
height:auto;
margin:auto;
background:url(creative-media-images/header_bg.jpg) no-repeat center top;
}
#header{
width:960px;
height:160px;
margin:auto;
}
#logo{
clear:both;
margin:auto;
width:308px;
}
/*----------------------menu-------------------------*/
#menu{
width:272px;
background:url(creative-media-images/menu_bg.gif) no-repeat center;
float:right;
height:22px;
padding:0;
margin:0 20px 0 0;
}
#menu ul{
list-style:none;padding:0px;margin:0px;display:block;
}
#menu ul li{
list-style:none;display:inline;float:left;width:auto;padding:0px; font-size:12px; font-weight:bold; font-style:italic; line-height:18px;
}
#menu ul li.divider{
list-style:none;display:inline;float:left;width:2px; height:22px; background:url(creative-media-images/menu_divider.gif) no-repeat center;padding:0px;
}
#menu ul li a{
float:left;text-decoration:none;padding:0px 10px 0 10px;_padding:0px 9px 0 9px; color:#feecda;text-align:center;
}
#menu ul li a:hover{
text-decoration:none;color: #fff;
}
#menu ul li a.current{
float:left;text-decoration:none;padding:0px 10px 0 10px;_padding:0px 9px 0 9px;color: #fff;
}
/*-----------------slider----------------------*/
div#slider {
width:900px;
height:265px;
padding:0px;
margin:0px;
float:left;
position: relative;
}
.stripViewer {
position: relative;
overflow: hidden;
width:900px;
height:265px;
float: left;
margin:0px;
}
.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
width: 100%; height: 100%;
list-style-type: none;
float: left; overflow: hidden;
}
.stripViewer .panelContainer .panel {
float:left;
overflow: hidden;
position: relative;
width:900px;
height:265px;
padding: 0px;
}
.stripNavL, .stripNavR {
text-indent: -9000em;
}
div.featured-arrow {
width:27px; height:89px;
float: left;
padding:70px 0px 0px 0px;
}
.csw {width: 100%; height: 100%; overflow: hidden; float: left;}
.csw .loading { margin: 100px 0 300px 0; text-align: center; color: #fff; font-weight: bold;font-size: 12px; }
.tab1{
width:239px;
height:236px;
float:left;
margin:0 32px 0 29px;
_margin:0 32px 0 19px;
background:url(creative-media-images/tab1.gif) no-repeat center;
}
.tab2{
width:239px;
height:236px;
float:left;
margin:0 32px 0 29px;
_margin:0 32px 0 19px;
background:url(creative-media-images/tab2.gif) no-repeat center;
}
.tab3{
width:239px;
height:236px;
float:left;
margin:0 32px 0 29px;
_margin:0 32px 0 19px;
background:url(creative-media-images/tab3.gif) no-repeat center;
}
.main_content{
width:878px;
padding:0px;
clear:both;
margin:auto;
background:url(creative-media-images/center_bg.jpg) no-repeat center top;
}
.left_content{
width:375px;
float:left;
padding:15px 0 30px 20px;
}
.right_content{
width:430px;
float:left;
padding:15px 0 30px 40px;
}
.wide_content{
width:820px;
float:left;
padding:15px 0 30px 20px;
}
.title{
font-size:18px;
color:#e77330;
clear:both;
padding:5px 0 5px 0px;
}
img.left_img{
float:left;
padding:0 10px 0 0;
}
.banner{
width:374px;
height:86px;
float:left;
background:url(creative-media-images/banner_bg.jpg) no-repeat center;
margin:10px 0 15px 0px;
}
img.news_icon{
float:left;
padding:12px 0 0 17px;
}
p.banner_content{
width:265px;
float:left;
padding:10px 0 0 15px;
}
.project_box{
width:430px;
float:left;
clear:both;
padding:10px 0 30px 0;
margin:0 0 20px 0;
background:url(creative-media-images/border.jpg) no-repeat center bottom;
}
.project_title_tab{
width:436px;
float:left;
height:22px;
}
.project_bullet{
width:22px;
height:22px;
line-height:22px;
background:url(creative-media-images/green_bullet.jpg) no-repeat center;
text-align:center;
color:#FFFFFF;
float:left;
font-weight:bold;
}
.project_title{
float:left;
padding:2px 0 0 7px;
font-size:14px;
font-weight:bold;
color:#95b313;
}
.project_content{
clear:both;
padding:10px 0 0 0;
}
.project_content p{
padding:0px;
}
/*-----------------------contact_form-------------------*/
#contact_form{
width:370px;
height:auto;
padding:20px 0 0 10px;
}
.form_row{
float:left;
padding:7px 0 7px 0;
}
label{
width:60px;
float:left;
padding:3px 5px 0 0;
color:#89613a;
text-align:right;
font-weight:bold;
}
input.contact_input{
width:293px;
height:24px;
float:left;
border:1px #c3b688 solid;
background-color:#f2edd1;
color: #89613a;
}
textarea.contact_textarea{
width:293px;
height:80px;
float:left;
border:1px #c3b688 solid;
background-color:#f2edd1;
color: #89613a;
}
input.send_message{
float:right;
padding:10px 10px 0 0;
}
/*------------footer----------------*/
.footer{
width:960px;
height:96px;
clear:both;
margin:auto;
color:#876039;
font-weight:bold;
font-style:italic;
background:url(creative-media-images/footer_bg.jpg) no-repeat center top;
}
.right_footer{
float:right;
padding:70px 60px 0 0;
}
.right_footer a{
padding:0 10px 0 10px;
text-decoration:none;
font-weight:bold;
font-style:italic;
color:#876039;
}
</style>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing.1.2.pack.js"></script>
</head>
<body>
<div id="main_container">
<div id="header">
<div id="menu">
<ul>
<li><a href="index.html">home</a></li>
<li class="divider"></li>
<li><a href="content.html">about us</a></li>
<li class="divider"></li>
<li><a class="current" href="contact.html">contact</a></li>
<li class="divider"></li>
<li><a href="http://www.free-css.com/">portofolio</a></li>
</ul>
</div>
<div id="logo"><a href="http://www.free-css.com/"><img src="creative-media-images/logo.gif" alt="" border="0" /></a></div>
</div>
<div class="slider_content">
<div class="featured-arrow" id="stripNavL0"> <a href="javascript:void(0);"><img src="creative-media-images/left_nav.gif" alt="" border="0" /></a> </div>
<div id="slider">
<div class="slider-wrap">
<div id="sliderc" class="csw">
<div class="panelContainer">
<div class="panel">
<div class="tab1">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
<div class="tab2">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
<div class="tab3">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
</div>
<div class="panel">
<div class="tab1">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
<div class="tab2">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
<div class="tab3">
<p class="tab_content">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.</p>
<a href="http://www.free-css.com/" class="read_more"><img src="creative-media-images/read_more.gif" alt="" border="0" /></a> </div>
</div>
</div>
</div>
</div>
</div>
<div class="featured-arrow" id="stripNavR0"> <a href="javascript:void(0);"><img src="creative-media-images/right_nav.gif" alt="" border="0"/></a></div>
</div>
<div class="clear"></div>
</div>
<!--end of slider content-->
<div class="main_content">
<div class="left_content">
<div class="title">Contact Form</div>
<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>subject:</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>
<input type="image" src="creative-media-images/send.gif" class="send_message" />
</div>
</div>
<!--end of left content-->
<div class="right_content">
<div class="title">Clients Testimonials</div>
<div class="project_box">
<div class="project_title_tab">
<div class="project_bullet">1</div>
<div class="project_title">Mark Alvaro</div>
</div>
<div class="project_content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </p>
</div>
</div>
<div class="project_box">
<div class="project_title_tab">
<div class="project_bullet">2</div>
<div class="project_title">Mark Alvaro</div>
</div>
<div class="project_content">
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "</p>
</div>
</div>
</div>
<!--end of right content-->
<div class="clear"></div>
</div>
<div class="footer">
<div class="right_footer"> Copyright 2009.<a href="http://www.free-css.com/">Websitename</a> | Template by<a href="http://indeziner.com">INDEZINER</a> </div>
</div>
</body>
</html>
Related examples in the same category