creative-media : Effect « Templates « HTML / CSS

HTML / CSS » Templates » Effect 
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.jpgrepeat;
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.jpgno-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.gifno-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.gifno-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.gifno-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.gifno-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.gifno-repeat center;
}

.main_content{
width:878px;
padding:0px;
clear:both;
margin:auto;
background:url(creative-media-images/center_bg.jpgno-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.jpgno-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.jpgno-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.jpgno-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.jpgno-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
1.amazinglycool
2.exposure
3.expressivestars
4.extended
5.external
6.extracts
7.falling-away
8.fantasy
9.flare
10.flashyweb
11.flash_web
12.fireworks
13.floating
14.falling
15.fantasyland
16.metamorph_weird
17.metamorph_violet
18.metamorph_violetdream
19.metamorph_mydesign
20.metamorph_myst
21.metamorph_mywaves
22.metamorph_myweb
23.metamorph_freedom_lt
24.metamorph_gloryfield
25.metamorph_horizon
26.bubble
27.classic-luxury
28.classic
29.classique
30.classliclink
31.civilized
32.metamorph_cool
33.metamorph_imaginary
34.metamorph_infinity
35.metamorph_newage
36.metamorph_madness
37.metamorph_heaven
38.metamorph_lensflare
39.metamorph_shinyblur_lt
40.metamorph_sparks_lt
41.metamorph_soulfrost
42.metamorph_space
43.metamorph_spaceglowing
44.metamorph_sphere
45.metamorph_starwars
46.metamorph_steel
47.metamorph_stones
48.abundant
49.chalkboard
50.cool-web
51.coolblack
52.CoolishBlack
53.coolracing
54.coolzone
55.cool_web
56.creative-mind
57.creative
58.creevykeel
59.decayed
60.essence
61.essential
62.auroradesktop
63.scenic-reflections
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.