designstudio : Design 3 « Templates « HTML / CSS






designstudio

   

<!DOCTYPE html>
<html lang="en">
<head>
<title>DesignStudio | Contacts</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
  display:block;
}
mark, rp, rt, ruby, summary, time {
  display:inline;
}
.left {
  float:left;
}
.right {
  float:right;
}
.wrapper {
  width:100%;
  overflow:hidden;
}
body {
  background:url(designstudio-images/bg.jpg) top center no-repeat #000;
  border:0;
  font:14px Arial, Helvetica, sans-serif;
  color:#000;
  line-height:20px;
}
.inner_copy, .inner_copy a {
  border:0;
  float:right;
  background:#fff;
  color:#f00;
  width:50%;
  line-height:10px;
  font-size:10px;
  margin:-220% 0 0 0;
  overflow:hidden;
  padding:0;
}
.css3 {
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  box-shadow:0 0 4px rgba(0, 0, 0, .4);
  -moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);
  -webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);
  position:relative;
}
.main {
  margin:0 auto;
  width:920px;
}
a {
  color:#ab0000;
  text-decoration:underline;
  outline:none;
}
a:hover {
  text-decoration:none;
}
h1 {
  padding:98px 0 0 72px;
}
h2 {
  font-size:34px;
  color:#222;
  line-height:55px;
  background:url(designstudio-images/bg_box1.png) 0 0 no-repeat;
  padding-left:22px;
  display:block;
  overflow:hidden;
}
h2 span {
  font-size:30px;
}
h3 {
  margin-left:21px;
  background:url(designstudio-images/latest_works.png) no-repeat;
  width:191px;
  height:86px;
  text-indent:-9999px;
  margin-bottom:13px;
}
h4 {
  background:url(designstudio-images/tweets.png) right 0 no-repeat;
  font-size:36px;
  color:#000;
  height:61px;
  line-height:55px;
  letter-spacing:-2px;
  padding-left:3px;
}
h5 {
  font-size:30px;
  line-height:1.2em;
  color:#fff;
  padding:124px 0 14px 0;
}
p {
  padding-bottom:20px;
}
header {
  width:100%;
  height:377px;
  overflow:hidden;
}
#logo {
  display:block;
  background:url(designstudio-images/logo.jpg) no-repeat;
  width:459px;
  height:44px;
  text-indent:-9999px;
}
#menu {
  padding:56px 0 0 34px;
  height:30px;
}
#menu li {
  float:left;
  padding-right:42px;
}
#menu li a {
  display:block;
  font-size:24px;
  color:#05080a;
  line-height:1.2em;
  text-decoration:none;
}
#menu li span {
  font-size:30px;
  display:inline-block;
  margin-top:-4px;
}
#menu li a:hover, #menu #menu_active a {
  color:#6a0000;
}
#content {
}
.pad_left1 {
  padding-left:12px;
}
.pad_left2 {
  padding-left:50px;
}
.pad {
  padding:0 12px;
}
.pad_bot1 {
  padding-bottom:13px;
}
.marg_right1 {
  margin-right:10px;
}
.pad_top1 {
  padding-top:25px;
}
#slider {
  margin-top:6px;
  height:260px;
  width:100%;
  overflow:hidden;
  background:url(designstudio-images/bg_slider.png) 0 0 no-repeat;
  overflow:hidden;
  padding-bottom:14px;
}
#for_img {
  padding-left:91px;
  padding-top:14px;
  width:342px;
  height:225px;
  overflow:hidden;
  padding-right:77px;
}
#nivo_slider {
  position:relative;
  width:342px;
  height:225px;
  z-index:88;
}
.nivoSlider a.nivo-imageLink {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  z-index:60;
  display:none;
}
.nivo-slice {
  display:block;
  position:absolute;
  z-index:50;
  height:100%;
}
.nivo-directionNav a {
  position:absolute;
  top:90px;
  z-index:99;
  cursor:pointer;
  text-indent:-5000px;
  width:52px;
  height:45px;
  display:block;
}
.nivo-prevNav {
  left:-77px;
  background:url(designstudio-images/marker_left.png) right 0 no-repeat;
}
.nivo-prevNav:hover, .nivo-nextNav:hover {
  background-position:bottom;
}
.nivo-nextNav {
  right:-77px;
  background:url(designstudio-images/marker_right.png) left 0 no-repeat;
}
.nivo-controlNav {
  position:absolute;
  z-index:99;
  right:0;
  bottom:0px;
  padding:10px;
  background:url(designstudio-images/bg_pagination.png) repeat;
  padding-left:222px;
}
.nivo-controlNav a {
  position:relative;
  z-index:99;
  cursor:pointer;
  width:19px;
  height:19px;
  float:left;
  margin-left:3px;
  background:url(designstudio-images/buttons.png) no-repeat;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  text-align:center;
  line-height:19px;
}
.nivo-controlNav a.active, .nivo-controlNav a:hover {
  color:#ab0000;
  font-weight:bold;
}
.font1 {
  font-size:16px;
}
.font2 {
  font-size:12px;
  font-weight:bold;
  color:#ab0000;
}
.ul_works {
  padding-bottom:3px;
}
.ul_works li {
  padding-bottom:14px;
}
.tweets {
  color:#fff;
  padding:7px 20px 0 11px;
}
.tweets a {
  text-decoration:none;
  color:#ab0000;
}
.tweets a:hover {
  text-decoration:underline;
}
.img1 {
  padding-top:12px;
}
.img1 figure {
  float:left;
  margin-right:24px;
  padding-left:5px;
}
.list2 {
  padding:10px 0 15px 0;
}
.list2 li {
  line-height:30px;
}
.list2 li a {
  padding-left:34px;
  background:url(designstudio-images/marker_2.png) 0 5px no-repeat;
  display:inline-block;
}
.link1 {
  display:inline-block;
  font-size:12px;
  font-weight:bold;
  text-decoration:none;
  padding-left:30px;
  background:url(designstudio-images/marker_3.png) 1px 0 no-repeat;
  margin-top:5px;
}
.link1:hover {
  color:#000;
}
.lightbox-image {
  position:relative;
  overflow:hidden;
  display:block;
}
.lightbox-image img {
  position:relative;
  z-index:2;
}
.lightbox-image span {
  display:block;
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:url(designstudio-images/magnify.png) no-repeat 50% 50%;
  z-index:1;
}
.pp_description {
  padding-bottom:0;
}
.pp_content {
}
#page2 .pad_top2 {
  padding-top:10px;
}
#page2 .col3 .pad {
  padding:5px 0 0 8px;
}
#page3 .cols p {
  padding:6px 0 0 10px;
}
#page3 .cols strong {
  display:block;
  padding-bottom:6px;
}
#page3 .pad_bot1 {
  padding-bottom:15px;
}
footer {
  width:100%;
  overflow:hidden;
  padding:0 0 74px 0;
}
footer a {
}
footer a:hover {
}
.list1 li {
  line-height:30px;
}
.list1 a {
  color:#fff;
  text-decoration:none;
  padding-left:15px;
  background:url(designstudio-images/marker_1.gif) 0 6px no-repeat;
}
.list1 a:hover {
  color:#ab0000;
}
.icons li {
  line-height:30px;
}
.icons a {
  color:#fff;
  text-decoration:none;
}
.icons a:hover {
  color:#ab0000;
}
.icons img {
  float:left;
  margin-right:14px;
  margin-top:7px;
}
#newsletter {
  background:url(designstudio-images/newsletter_bg.png) no-repeat;
  width:286px;
  float:left;
  margin-left:51px;
  height:360px;
  margin-top:25px;
}
#newsletter h5 {
  padding-top:98px;
  padding-left:15px;
}
#newsletter form {
  padding-left:71px;
  padding-top:5px;
}
#newsletter .wrapper {
  height:28px;
}
#newsletter .input {
  width:144px;
  background:none;
  font:14px Arial, Helvetica, sans-serif;
  color:#000;
  height:18px;
}
#newsletter a {
  font-weight:bold;
  color:#fff;
  text-decoration:none;
  margin-left:27px;
  padding:5px 6px 30px 6px;
  display:inline-block;
}
.privacy {
  float:left;
  padding-left:15px;
  width:350px;
  font-size:12px;
  color:#a3a3a3;
  margin-top:-3px;
}
.privacy a {
  color:#a3a3a3;
  text-decoration:none;
}
.footer_logo {
  font-size:26px;
  line-height:1.2em;
  float:right;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  margin-right:20px;
}
.footer_logo span {
  color:#ab0000;
}
#ContactForm {
  padding:18px 0 0 25px;
  width:497px;
}
#ContactForm .wrapper {
  min-height:30px;
}
#ContactForm .textarea_box {
  min-height:459px;
}
#ContactForm span {
  font-weight:bold;
  width:121px;
  float:left;
  line-height:26px;
}
#ContactForm a {
  float:right;
  background:url(designstudio-images/send_button.png) no-repeat;
  width:119px;
  height:38px;
  text-indent:-9999px;
}
#ContactForm .input {
  width:356px;
  height:18px;
  background:url(designstudio-images/bg_form.png) repeat;
  padding:4px 10px;
  color:#000;
  font:14px Arial, Helvetica, sans-serif;
  margin:0;
}
#ContactForm textarea {
  overflow:auto;
  width:356px;
  height:440px;
  background:url(designstudio-images/bg_form.png) repeat;
  padding:4px 10px;
  color:#000;
  font:14px Arial, Helvetica, sans-serif;
  margin:0;
}


</style>


<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/CabinSketch_700.font.js"></script>
<script type="text/javascript" src="js/EB_Garamond_400.font.js"></script>
<!-- [if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.bg {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!-- [if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/designstudio-images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page5">
<!-- START PAGE SOURCE -->
<div class="main">
  <header>
    <div class="wrapper">
      <nav>
        <ul id="menu">
          <li><a href="index.html"><span>A</span>bout</a></li>
          <li><a href="services.html"><span>S</span>ervices</a></li>
          <li><a href="gallery.html"><span>G</span>allery</a></li>
          <li><a href="privacy.html"><span>P</span>rivacy</a></li>
          <li id="menu_active"><a href="contacts.html"><span>C</span>ontacts</a></li>
        </ul>
      </nav>
    </div>
    <h1><a href="index.html" id="logo">DesignStudio.com</a></h1>
  </header>
  <section id="content">
    <div class="wrapper">
      <article class="col1">
        <h2>Our Contacts</h2>
        <div class="pad">
          <div class="wrapper">
            <p class="cols"><strong>Country:<br>
              State:<br>
              City:<br>
              Telephone:<br>
              Email:</strong> </p>
            <p class="col3">USA<br>
              California<br>
              San Diego<br>
              +354 5635600<br>
              <a href="#">d.studio@mail.com</a> </p>
            <p><strong>Miscellaneous Info:</strong><br>
              Namlibero tempore, cum solutnobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere.</p>
          </div>
        </div>
        <h2><span>Contact Form</span></h2>
        <form id="ContactForm">
          <div>
            <div class="wrapper"> <span>Your Name:</span>
              <input type="text" class="input">
            </div>
            <div class="wrapper"> <span>Your E-mail:</span>
              <input type="text" class="input" >
            </div>
            <div class="textarea_box"> <span>Your Message:</span>
              <textarea name="textarea" cols="1" rows="1"></textarea>
            </div>
            <a href="#">Send</a> </div>
        </form>
      </article>
      <article class="col2">
        <h3>Latest Works</h3>
        <ul class="ul_works">
          <li><a href="#"><img src="designstudio-images/page1_img1.png" alt=""></a></li>
          <li><a href="#"><img src="designstudio-images/page1_img2.png" alt=""></a></li>
        </ul>
        <h4>Recent Tweets</h4>
        <div class="tweets">
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.<br>
            <a href="#">20 days ago</a></p>
          <p>Accusantium doloremque laudatium, totam rem aperiam, eaque ipsa.<br>
            <a href="#">36 days ago</a></p>
          <p>Nemo enim ipsam voluptatem quia voluptas.<br>
            <a href="#">54 days ago</a></p>
        </div>
      </article>
    </div>
  </section>
  <footer>
    <div class="wrapper">
      <article class="col">
        <h5>Why Us</h5>
        <ul class="list1">
          <li><a href="#">Sedut perspiciatis</a></li>
          <li><a href="#">Unde omnis iste</a></li>
          <li><a href="#">Natus error sit </a></li>
          <li><a href="#">Volupttem accus</a></li>
          <li><a href="#">Ntium doloremque </a></li>
        </ul>
      </article>
      <article class="col pad_left2">
        <h5>Links</h5>
        <ul class="list1">
          <li><a href="#">Audantium, totam</a></li>
          <li><a href="#">Remaperiam, eaque</a></li>
          <li><a href="#">Ipsa quae abillo</a></li>
          <li><a href="#">Inventore veritatis et </a></li>
          <li><a href="#">Quasi architecto </a></li>
        </ul>
      </article>
      <article class="col pad_left2">
        <h5>Follow Us</h5>
        <ul class="icons">
          <li><a href="#"><img src="designstudio-images/icon1.jpg" alt="">Facebook</a></li>
          <li><a href="#"><img src="designstudio-images/icon2.jpg" alt="">Stumleupon</a></li>
          <li><a href="#"><img src="designstudio-images/icon3.jpg" alt="">Twitter</a></li>
          <li><a href="#"><img src="designstudio-images/icon4.jpg" alt="">Digg</a></li>
          <li><a href="#"><img src="designstudio-images/icon5.jpg" alt="">RSS Feed</a></li>
        </ul>
      </article>
      <article id="newsletter">
        <h5>Newsletter</h5>
        <form id="newsletter_form" action="#">
          <div class="wrapper">
            <input class="input" type="text" value="Enter your email here" onBlur="if(this.value=='') this.value='Enter your email here'" onFocus="if(this.value =='Enter your email here' ) this.value=''" >
          </div>
          <a href="#">Subscribe</a>
        </form>
      </article>
    </div>
    <article class="privacy"> Copyright &copy; 2010 <a href="#">SiteName</a> - All Rights Reserved<br>
      <a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></article>
    <a href="index.html" class="footer_logo">Design<span>Studio</span>.com</a> </footer>
</div>
<script type="text/javascript">Cufon.now();</script>
<!-- END PAGE SOURCE -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.blankspace
2.Blasphemy
3.blended
4.blewwave
5.blootoon
6.blush
7.boardroom
8.BOOM
9.boorish
10.boosting
11.bordered
12.boswell
13.bounderies
14.boxedtype
15.boxes_template
16.boxybox
17.branches
18.breaking_ontop
19.brewedcoffee
20.brightfolio
21.brightsideoflife1.0
22.Broadcaster
23.broadsheet
24.brycesunrise
25.bucolic
26.burgeon
27.buzz
28.BW
29.bwdec2007
30.calliope
31.callofduty2
32.candiiclouds
33.cantya-studio
34.canuckington-post
35.canvass
36.capricious
37.capsicum
38.carbonated
39.carbonizer
40.carlmelon
41.caronline
42.carrera
43.castellated
44.catch_info
45.cattleya
46.center-stage
47.COIL
48.col1
49.col2
50.col3
51.collaboration
52.collectiveblue
53.collegemusic
54.colorus
55.colosseum
56.columna
57.combination
58.ComingSoon
59.commission
60.communication-1.0
61.communication-co
62.communication
63.community-live
64.compiled
65.complete-collection
66.complimentary
67.component
68.compressed
69.compromise
70.compus
71.conceptnova
72.concrete
73.concurrence
74.condition
75.conglomerate
76.conjunction
77.connection
78.connections
79.consulting-co
80.contemplate
81.convergence
82.cookiefusion
83.Copy of modify
84.corporattica
85.Cosmopolitan
86.counterstrike
87.cover
88.coverage
89.coxswain
90.creamburn
91.crisp2
92.criterion
93.crystalblack
94.css-heaven-1
95.cssgallery
96.cssheaven-2
97.cssmajesty
98.cubismo
99.cultivated
100.cultureshock
101.cupofcoffee
102.customary
103.customize
104.cyano
105.cyanspark
106.cyberarray
107.daleri-mega
108.daleri-structure
109.dalmatians
110.danmyaz1
111.dapple
112.david-kruger
113.deardiary
114.decorative
115.deepimpact
116.deerpark
117.dekada
118.delta
119.delzep_enterprise
120.description
121.deserted
122.desertsand
123.design-gallery
124.design-studio
125.design10
126.Design9
127.designersstudio
128.designersworld
129.designgalo
130.designhq
131.Design_Agency
132.deskspace
133.detachable
134.deviation
135.devision
136.dewdrops
137.dezinstudio
138.didactic
139.Did_My_Time
140.differential
141.digitalweb
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ