digitalweb : Design 3 « Templates « HTML / CSS






digitalweb

   

<!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>DigitalWeb | Contact</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
@charset "utf-8";
body { margin:0; padding:0; width:100%; background:#1a2328;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.resize { width:960px; padding:0; margin:0 auto;}
/********** header **********/
.header_resize { margin:0; padding:0; background:url(digitalweb-images/header_bg.gif) top repeat-x;}
.header { width:980px; padding:0; margin:0 auto; border-bottom:1px solid #3d464a;}
.header_blog { background:#e9e9e9 url(digitalweb-images/slider_bg.jpg) top center repeat-x; padding:0; margin:0; }
.header_blog_resize { width:980px; margin:0 auto; padding:0;}
.header_blog_resize h2 { font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:40px 0; margin:0;}
.header_blog_resize img { float:right; padding:45px 0 0 0; margin:0;}

/* 2 */
.header_blog2 { background:url(digitalweb-images/header_blog_bg.gif) top center repeat-x; padding:20px 0 0 0; margin:0; height:95px;}
.header_blog2 h2 { font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:10px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:321px; float:left;}
/*menu*/
.menu { padding:75px 0 0 0; margin:0 ; width:410px;  float:right; }
.menu ul { text-align:right;  padding:0; margin:0; list-style:none; border:0; float:right;}
.menu ul li { float:left; margin:0; padding:0 10px; border:0;}
.menu ul li a { float:left; margin:0; padding:8px 0; color:#8f999e; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { color:#fff; border-bottom:3px solid #e8ad09;}
.menu ul li a.active { color:#fff; border-bottom:3px solid #e8ad09;}
/* search_bg */
.search_bg { background:url(digitalweb-images/search_main_bg.gif) top no-repeat; margin:0 auto 10px auto; padding:0; width:980px;}
.search_bg p.search_bgg { width:300px; float:left; color:#1a2328; padding:13px 0 0 20px; margin:0; line-height:1.8em; font:normal 12px Arial, Helvetica, sans-serif;}
.search_bg img.search1 { float:left; margin:10px 20px 0 20px; padding:0;}
/* */
.body_resize_top_resize { margin:10px auto; padding:0 10px;}
.body_resize  { background: url(digitalweb-images/body_bg.gif) top repeat-y; padding:0; width:980px; margin:0 auto;}
.body_resize_top { background: url(digitalweb-images/body_top_bg.gif) top no-repeat; margin:0; padding:0;}
.body_resize_bottom { margin:0; padding:10px; width:960px; background:url(digitalweb-images/body_bottom_bg.gif) bottom no-repeat;}
.body { padding:20px 0; margin:0 auto; background:#e9e9e9;}
.body h2 { font:bold 18px Arial, Helvetica, sans-serif; color:#343434; border-bottom:1px  solid #dbdbdb; padding:10px 5px; margin:0 0 10px 0;}
.body h4 { font:bold 18px Arial, Helvetica, sans-serif; color:#343434; padding:10px 5px; margin:0 0 10px 0;}
.body h3 { font:normal 18px Arial, Helvetica, sans-serif; color:#575757; padding:10px 5px; margin:0 0 10px 0;}
.body p { font:normal 11px Arial, Helvetica, sans-serif; color:#7d7d7d; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { color:#e8ad09;}
.body a { color:#1b2428; text-decoration:none;}
.body img { margin:10px auto; padding:0;}
.body img.floated { float:right; margin:5px 20px; padding:0;}
.body img.floated2 { float:left; margin:5px 20px 5px 0; padding:0;}
.right { width:290px; margin:0; padding:10px 15px; float:right;}
.right ul { list-style:none; margin:0; padding:0;}
.right li { padding:5px; margin:0; border-bottom:1px solid #dbdbdb;}
.right li a { font:normal 11px Arial, Helvetica, sans-serif; color:#7d7d7d; text-decoration:none;}
.right li a:hover { font:bold 11px Arial, Helvetica, sans-serif; color:#343434;}
.left {width:610px; margin:0; padding:10px 15px; float:left;}
.blog {width:290px; margin:0; padding:10px 15px; float:left;}
.port { width:270px; float:left; margin:10px 10px 10px 5px; padding:5px; background:#fff; border:1px solid #ddd;}
/* search */
.search { padding:10px 20px 10px 0; margin:0 auto; float:right; }
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background:url(digitalweb-images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px; height:23px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:5px 0; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;}
.search form .button { float:left; margin:0; padding:0;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px; }
#contactform * { color:#F00; }
#contactform ol { margin:0; padding:0; list-style:none; }
#contactform li { margin:0; padding:0; background:none; border:none; display:block; clear:both; }
#contactform li.buttons { margin:5px 0 5px 0; clear:both; }
#contactform label { margin:0; width:100px; display:block; padding:10px 0; color:#575757; font:bold 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:450px; border:1px solid #ddd; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:right; }
#contactform textarea { width:450px; border:1px solid #ddd; margin:2px 0; padding:2px; background:#fff; float:right; }
#contactform li.buttons input { padding:3px 0 3px 110px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer {padding:0;  margin:0;  background:#e9e9e9;}
.footer_resize { width:940px; margin:0 auto; padding:20px 10px;}
.footer p { font:normal 11px  Arial, Helvetica, sans-serif; color:#737373;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#737373; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:400px; margin:0; padding:15px 0 0 0; float:right;} 
.footer img.loggo { float:left; margin:0; padding:0;}
.footer img.rss { float:left; margin:5px; padding:0;}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
.bg { border-bottom:1px solid #dbdbdb; clear:both; padding:0; margin:10px 0; background:none;}
/* Slider */
#slider {  width:960px; padding:0; margin:0 auto;}
div#slideshow { float:left; width:100%; }
.slider-item { width:100% !important; display:block; clear:both; background:url(digitalweb-images/slider_bg.jpg) top center repeat-x;}
.slider-item img { float:right; margin:0; padding:32px 12px 0 0;}
.slider-item .text_item { width:420px; float:left; margin:0; padding:40px 0 0 0;}
.slider-item .text_item h2 { font:bold 36px Arial, Helvetica, sans-serif; color:#fff; padding:20px 0; margin:0; line-height:1.2em;}
.slider-item .text_item p { font:normal 12px Arial, Helvetica, sans-serif; color:#8c9da1; padding:0 0 20px 0; margin:0; line-height:1.8em;}
.slider-item .text_item img { margin:10px auto; padding:0; float:left;}
.slider_content_inner img { border:none; }
.controls-center { width:960px; margin:0 auto; padding:0;}
#slider_controls { margin:0 auto; z-index:1000; width:960px;}
#slider_controls h2 { width:600px; float:left; font:normal 11px Arial, Helvetica, sans-serif; color:#676767; padding:30px 0 0 0; margin:0;}
#slider_controls ul { margin:30px 50px 0 0; padding:0; width:254px; float:right;}
#slider_controls ul li { margin:0; padding:0; list-style:none; }
#slider_controls ul li { float:right; display:block; }
#slider_controls ul li a { width:10px; height:10px; background:url('digitalweb-images/tabs_2.gif') no-repeat center center; display:block; float:left; padding:10px 2px 0 2px; margin:2px !important; margin:1px 1px; outline:none; }
#slider_controls ul li a:focus { outline:none; }
#slider_controls ul li a:hover,
#slider_controls ul li a.activeSlide { color:#979797; background:url('digitalweb-images/tabs_1.gif') no-repeat center center; }

</style>


</head>
<body>
<div class="main">
  <div class="header_resize">
    <div class="header">
      <div class="logo"><a href="#"><img src="digitalweb-images/logo.gif" width="321" height="143" border="0" alt="" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="services.html">Services </a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="contact.html" class="active">Contact Us</a></li>
        </ul>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="header_blog">
    <div class="header_blog_resize"> <a href="#"><img src="digitalweb-images/top_link.gif" alt="" width="192" height="44" border="0" /></a>
      <h2>Contact</h2>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>
  <div class="body">
    <div class="search_bg">
      <p class="search_bgg"><a href="#" class="active search_bgg">You are here! > home</a> <a href="#">> services</a></p>
      <div class="search">
        <form id="form1" name="form1" method="post" action="#">
          <span>
          <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." />
          </span>
          <input name="b" type="image" src="digitalweb-images/search.gif" class="button" />
        </form>
      </div>
      <div class="clr"></div>
    </div>
    <div class="body_resize">
      <div class="body_resize_top">
        <div class="body_resize_bottom">
          <div class="left">
            <h2>Send Us an e-mail</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie, felis in sodales scelerisque, magna metus laoreet massa, facilisis interdum antequam auctor arcu. Pellentesque a neque. In aerat. Morbi volutpat ligula eu odio. Vivamus nonnibh dictum nisi iaculis elementum. Vestibulum nibh. Pellentesque habitant morbi tristique senectuset netus et malesuada fames ac turpis egestas.Sed condimentum rhoncus nibh. Mauris ullamcorper, orci nec posuere volutpat, quam diam iaculis lectus, et ultrices risus est nec erat. Mauris mollis ligula a arcu. Vivamus</p>
            <p>&nbsp;</p>
            <h2>Contact us via this form</h2>
            <p>&nbsp;</p>
            <form action="#" method="post" id="contactform">
              <ol>
                <li>
                  <label for="name">First Name <span class="red">*</span></label>
                  <input id="name" name="name" class="text" />
                </li>
                <li>
                  <label for="email">Your email <span class="red">*</span></label>
                  <input id="email" name="email" class="text" />
                </li>
                <li>
                  <label for="company">Company</label>
                  <input id="company" name="company" class="text" />
                </li>
                <li>
                  <label for="subject">Subject</label>
                  <input id="subject" name="subject" class="text" />
                </li>
                <li>
                  <label for="message">Message <span class="red">*</span></label>
                  <textarea id="message" name="message" rows="6" cols="50"></textarea>
                </li>
                <li class="buttons">
                  <input type="image" name="imageField" id="imageField" src="digitalweb-images/send.gif" class="send" />
                  <div class="clr"></div>
                </li>
              </ol>
            </form>
          </div>
          <div class="right">
            <h2>Contact Details</h2>
            <p>Need help? We will be happy to hear from you. <br />
              For contacting us please use our contact page or the email and phone info below.</p>
            <p><strong>Office</strong> : +91-99876543102<br />
              <strong>Cell</strong> : +91-99876543102<br />
              <strong>Email</strong> : email@yourdomain.com</p>
            <h2>Email Support</h2>
            <p><strong>Sales</strong> : sales@yourdomain.com<br />
              <strong>Info</strong> : info@yourdomain.com<br />
              <strong>Technical</strong>: support@yourdomain.com<br />
              <strong>Jobs</strong> : jobs@domain.com<br />
            </p>
          </div>
          <div class="clr"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="footer">
    <div class="footer_resize"> <a href="#"><img src="digitalweb-images/footer_logo.gif" alt="" width="322" height="61" border="0" class="loggo" /></a>
      <p class="right"> <a href="#"><img src="digitalweb-images/rss_1.gif" alt="" width="16" height="16" border="0" class="rss" /></a> <a href="#"><img src="digitalweb-images/rss_2.gif" alt="" width="16" height="16" border="0" class="rss" /></a> <a href="#"><img src="digitalweb-images/rss_3.gif" alt="" width="16" height="16" border="0" class="rss" /></a> <a href="#"><img src="digitalweb-images/rss_4.gif" alt="" width="16" height="16" border="0" class="rss" /></a>  Copyright websitename . All Rights Reserved<br />
        <a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">RSS</a> (Blue) <a href="http://www.bluewebtemplates.com">Website Templates</a></p>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
</div>
</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.designstudio
132.Design_Agency
133.deskspace
134.detachable
135.deviation
136.devision
137.dewdrops
138.dezinstudio
139.didactic
140.Did_My_Time
141.differential
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ