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 © 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