Examples | CSS Rockers

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Affordable high-quality web and print designing services from India | Simayaa Technologies</title>

<body>


      <div id="bigTop">

      <div id="top">
            <img  src="images/logo.gif" alt="Simayaa Technologies" width="178" height="71" class="logo" title="Simayaa Technologies"/>
            <p>We are a small creative web design agency based in India comprised of highly talented print and web designers. We are small but have big ideas for our clients. We are creative but affordable. We love design but at the same time have a deep inclination for cutting-edge technologies. </p>
            <p class="more1">
                  <a href="#" title="more about us">more about us</a>..
            </p>
            <ul class="navi">
                  <li><a href="index.html" class="hover" title="home"><span class="left"><span class="right"><span>Home</span></span></span></a></li>
                  <li><a href="#" title="about us"><span class="left"><span class="right"><span>About Us</span></span></span></a></li>
                  <li><a href="#" title="services"><span class="left"><span class="right"><span>Services</span></span></span></a></li>
                  <li><a href="#" title="portfolio"><span class="left"><span class="right"><span>Portfolio</span></span></span></a></li>
                  <li><a href="#" title="contact us"><span class="left"><span class="right"><span>Contact Us</span></span></span></a></li>
                  <li class="nopad"><a href="#" title="blog" target="_blank"><span class="left"><span class="right"><span>Blog</span></span></span></a></li>
          </ul>
      </div>

      </div>


      <div id="pattern">

      <div id="body">
            <h1 class="welcome">Welcome to Simayaa Technologies-Custom Web Development and Print Services</h1>

      <div id="body_content">

            <div class="width225 mar43">
            <h2 class="who">Who we are</h2>
      </div>


      <div class="width225 mar43">
            <h2 class="what">What we do</h2>
            <ul class="do">
                     <li>Online Branding</li>
                     <li>Custom Logo Design</li>
                     <li>Custom Web Design</li>
                     <li>Template Design</li>
                     <li>Web 2.0 Design</li>
                     <li>Wordpress Theme Design</li>
                     <li>Standard Compliant HTML Code</li>
                     <li>Flash Design</li>
                     <li>Flash banner, intro, animations</li>
            </ul>
           <p class="more"><a href="#" title="more services">more services..</a></p>
      </div>


       <div class="width225">
              <h2 class="feature">Featured Work</h2>
              <img src="images/works.jpg" alt="" width="215" height="124" class="mar_bot_img" />
              <p class="more"><a href="#" title="more portfolio">more portfolio..</a></p>
       </div>

       <br class="spacer" />
       </div>

       </div>

       </div>


       <div id="footer_part">

       <div id="want">

       <div id="body_content1">

       <div id="want_left">
           <h2 class="hear">Want to hear from you</h2>
           <p>We like to hear from prospective clients. We love to do all things in web and want to ensure you that we will be a good fit for all your needs. If you have a project, then please <a href="contact.html" class="link">contact us </a>for the proposal form and we will be in touch shortly. </p>
       </div>


       <div id="contact_right">
              <h2>Quick Contact</h2>
              <ul>
                     <li class="con1"><a href="#">info@simayaa.com</a></li>
                     <li class="con2"><a href="#">simayaa@hotmail.com</a></li>
                     <li class="con3">simayaa</li>
                     <li class="con4"><a href="#">simayaa@yahoo.com</a></li>
              </ul>
       </div>

        <br class="spacer" />
       </div>

       <ul class="footer_link">
              <li class="hover" title="home">home</li>
              <li>|</li>
              <li><a href="#" title="about us">about us</a></li>
              <li>|</li>
              <li><a href="#" title="services">services</a></li>
              <li>|</li>
              <li><a href="#" title="portfolio">portfolio</a></li>
              <li>|</li>
              <li><a href="#" title="sitemap">sitemap</a></li>
             <li>|</li>
             <li><a href="#" title="contact us">contact us</a></li>
       </ul>
       <p class="copy"> Copyright © 2008-2009 simayaa.com . All rights reserved.<br /> Built on a PC, designed in Photoshop and coded with valid <a href="#" target="_blank">CSS</a> and<a href="#" target="_blank"> XHTML</a>, all with lots of passion.</p>
       </div>

       </div>

</body>
</html>

/* CSS Document */

body{
    padding:0;
    margin:0;
    font-family:Georgia, "Times New Roman", Times, serif;
    color:#474747;
}

div, p, img, h1, h2, form, ul{
    padding:0;
    margin:0;
}

.spacer{
    line-height:0;
    font-size:0;
    clear:both;
}

#bigTop{
    background:url(../images/top_bg.jpg) repeat-x 0 0;
    height:233px;
}

#top{
    width:717px;
    background:url(../images/header.jpg) no-repeat left bottom;
    margin:0 auto;
    padding:7px 0 0 61px;
    height:226px;
    position:relative;
}

#top ul.navi{
    height:38px;
    list-style-type:none;
    margin:0 0 46px 125px;
}

#top ul.navi li{
    float:left;
    display:block;
    padding:0 5px 0 ;
}

#top ul.navi li.nopad{
    padding:0;
}

#top ul.navi li a{
    font-size:18px;
    line-height:25px;
    color:#fff;
    background-color:inherit;
    display:block;
    height:38px;
    text-decoration:none;
    float:left;
    cursor:pointer;
}

#top ul.navi li a span{
    display:block;
    float:left;
    height:38px;
}

#top ul.navi li a span.left span.right span{
padding:0 12px;
}

#top ul.navi li a:hover{
background:url(../images/hover_bg.gif) repeat-x 0 0;
}

#top ul.navi li a:hover span.left{
    background:url(../images/left_hover.gif) no-repeat 0 0;
}

#top ul.navi li a:hover   span.left span.right{
    background:url(../images/right_hover.gif) no-repeat right top;
}

#top ul.navi li a:hover span.left span.right span{
    background:url(../images/arrow_hover.gif) no-repeat center bottom;
    padding:0 12px;
}

#top ul.navi li a.hover{
    background:url(../images/hover_bg.gif) repeat-x 0 0;
    cursor:text;
    height:38px;
    font-size:18px;
    line-height:25px;
    color:#fff;
    background-color:inherit;
}

#top ul.navi li a.hover span{
    display:block;
    height:38px;
    float:left;
}

#top ul.navi li a.hover span.left{
    background:url(../images/left_hover.gif) no-repeat 0 0;
    display:block;
    height:38px;
    float:left;
}

#top ul.navi li a.hover span.left span.right{
    background:url(../images/right_hover.gif) no-repeat right top;
}

#top ul.navi li a.hover span.left span.right span{
    background:url(../images/arrow_hover.gif) no-repeat center bottom;
    padding:0 12px;
}

#top img.logo{
    position:absolute;
    left:61px;
    top:91px;
}

#top p {
    width:225px;
    position:absolute;
    top:366px;
    left:15px;
    font-size:12px;
    line-height:18px;
}

/*------------< < < pattern part > > >---------*/

#pattern{
background:url(../images/pattern_bg.gif) repeat-x 0 0;
}

#body{
  width:761px;
  padding:11px 0 19px 17px;
  margin:0 auto;
}

#body h1.welcome{
  background:url(../images/welome_to.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 29px 0;
}

#body_content{
  width:761px;
  background:url(../images/body_line.gif) repeat-y 242px 0;
}

.width225{
  width:225px;
  float:left;
  font-size:12px;
  line-height:18px;
}

.who{
  background:url(../images/who.gif) no-repeat 0 0;
  height:29px;
  font:normal 20px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 12px 0;
  padding:0 0 0 40px;
}

.what{
  background:url(../images/what.gif) no-repeat 0 0;
  height:29px;
  font:normal 20px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 12px 0;
  padding:0 0 0 40px;
}

.feature{
  background:url(../images/feature.gif) no-repeat 0 0;
  height:32px;
  font:normal 20px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 12px 0;
  padding:0 0 0 40px;
}

.more{
  width:123px;
  display:block;
  height:46px;
  margin:18px auto 0;
  text-align:center;
  background:url(../images/more_link.gif) no-repeat 0 0;
}

.more1{
  width:123px !important;
  display:block;
  height:46px;
  position:absolute;
  top:543px!important;
  left:50px !important;
  text-align:center;
  background:url(../images/more_link.gif) no-repeat 0 0;
}

.more1 a:hover{
  color:#000;
  background-color:inherit;
}

.more1 a{
  color:#105795;
  background-color:inherit;
  text-decoration:none;
  line-height:25px;
}

.more a:hover{
  color:#000;
  background-color:inherit;
}

.more a{
  color:#105795;
  background-color:inherit;
  text-decoration:none;
  line-height:25px;
}

.more a:hover{
  color:#000;
  background-color:inherit;
}

.mar43{
  margin-right:43px;
}

.width225 ul.do{
  list-style-type:none;
}

.width225 ul.do li{
  background:url(../images/what_arrow.gif) no-repeat 0 5px;
  padding:0 0 0 16px;
}

.mar_bot_img{
  margin:0 0 32px 0;
}

/*------------< < < footer pattern part > > >---------*/

#footer_part{
  background:url(../images/footer_pattern.gif) repeat-x left bottom #c0ebf8;
  padding:0 0 24px 0;
  color:#707070;
}

#want{
  width:761px;
  padding:18px 0 0 17px;
  margin:0 auto;
}

#body_content1{
  width:740px;
  position:relative;
}

#want_left{
  width:462px;
  float:left;
  font-size:12px;
  line-height:18px;
  color:#187693;
  background-color:inherit;
}

#want_left h2.hear{
  background:url(../images/hi_icon.gif) no-repeat 0 0;
  padding:0 0 0 48px;
  height:37px;
  font:normal 20px/37px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 9px 0;
}

.link{
  color:#187693;
  font-weight:bold;
  text-decoration:none;
  background-color:inherit;
}

.link:hover{
  text-decoration:underline;
}

.link1{
  color:#474747;
  font-weight:bold;
  text-decoration:none;
  background-color:inherit;
}

.link1:hover{
  text-decoration:underline;
}

#contact_right{
  width:223px;
  float:right;
}

#contact_right h2{
  height:37px;
  font:normal 20px/37px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 9px 0;
}

#contact_right ul{
  list-style-type:none;
}

#contact_right ul li{
  padding:0 0 0 38px;
  color:#187693;
  background-color:inherit;
  font-size:12px;
  line-height:30px;
}

#contact_right ul li a{
  color:#187693;
  background-color:inherit;
  font-size:12px;
  line-height:30px;
  text-decoration:none;
}

#contact_right ul li a:hover{
  color:#000;
  background-color:inherit;
}

#contact_right ul li.con1{
  background:url(../images/contact-icon1.gif) no-repeat 0 5px;
}

#contact_right ul li.con2{
  background:url(../images/contact-icon2.gif) no-repeat 0 5px;
}

#contact_right ul li.con3{
  background:url(../images/contact-icon3.gif) no-repeat 0 5px;
}

#contact_right ul li.con4{
  background:url(../images/contact-icon4.gif) no-repeat 0 5px;
}

#want p.copy{
  text-align:center;
  font-size:10px;
  width:500px;
  margin:0 0 0 88px;
}

#want p.copy a{
  color:#707070;
  background-color:inherit;
}

#want p.copy a:hover{
  color:#0084ba;
  background-color:inherit;
  text-decoration:none;

}

#want ul.footer_link{
  list-style-type:none;
  height:20px;
  margin:16px 0 0 100px;
}

#want ul.footer_link li{
  float:left;
  display:block;
  color:#0084ba;
  background-color:inherit;
  font-size:11px;
  padding:0 6px;
}

#want ul.footer_link li a{
  color:#0084ba;
  background-color:inherit;
  text-decoration:none;
}

#want ul.footer_link li a:hover{
  color:#000;
  background-color:inherit;
}

#want ul.footer_link li.hover{
  color:#000;
  background-color:inherit;
}

/*-------------< < < about part start > > >-------------*/

.about_header{
  background:url(../images/about_header.jpg) no-repeat left bottom !important ;
}

#body h1.about{
  background:url(../images/about_us.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 29px 0;
}

#content_line{
  width:761px;
  background:url(../images/content_line.gif) repeat-y 505px 0;
  padding-bottom:50px;
}

.width485{
width:485px;
float:left;
font-size:12px;
line-height:18px;
}

.width485 p{
font-size:12px;
line-height:18px;
padding:0 0 12px 0;
}

.width485 ul{
list-style-type:none;
}

.width485 li{
  list-style-type:none;
}

.philosophies{
  background:url(../images/philo_icon.gif) no-repeat 0 0;
  height:29px;
  font:normal 20px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:21px 0 12px 0;
  padding:15px 0 0 40px;
}

.tags{
  background:url(../images/tag_bg.gif) no-repeat 0 0;
  height:32px;
  font:normal 20px/32px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 12px 0;
  padding:0 0 0 40px;
}

.tags_text{
  font:bold 12px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#7dd6f2;
  background-color:inherit;
}

.tags_text a{
  color:#7dd6f2;
  background-color:inherit;
  text-decoration:none;
}

.tags_text a:hover{
  color:#2aa6cd;
  background-color:inherit;
}

.tags_text a.fonts11{
  font-size:11px !important;
  line-height:18px;
}

.tags_text a.fonts14{
  font-size:14px;
  line-height:18px;
}

.tags_text a.fonts16{
  font-size:16px;
  line-height:18px;
}

.tags_text a.fonts18{
  font-size:18px;
  line-height:18px;
}

ul.doBullet{
  list-style-type:none;
  margin:8px 10px 15px;
}

ul.doBullet li{
  background:url(../images/what_arrow.gif) no-repeat 0 5px;
  padding:0 0 0 16px;
}

/*-------------< < < services part start > > >-------------*/

.services_header{
  background:url(../images/services_header.jpg) no-repeat left bottom !important ;
}

#body h1.services{
  background:url(../images/services_to.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 29px 0;
}

.bot_padding{
  padding-bottom:20px;
}

.font14{
  font-size:14px !important;
  line-height:16px;
  font-weight:bold;
}

.process{
  background:url(../images/our_process_icon.gif) no-repeat 0 0;
  height:29px;
  font:normal 20px/29px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:35px 0 12px 0;
  padding:0 0 0 40px;
}

/*-------------< < < portfolio part start > > >-------------*/

.portfolio_header{
  background:url(../images/protfolio_header.jpg) no-repeat left bottom !important ;
}

#body h1.portfolio{
  background:url(../images/port_to.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 29px 0;
}

#portfolio_body{
  width:761px;
  padding-bottom:57px;
}

.selected{
  background:url(../images/select_icon.gif) no-repeat 0 0;
  height:35px;
  font:normal 20px/35px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#67c4e1;
  background-color:inherit;
  margin:0 0 24px 0;
  padding:0 0 0 40px;
}

.portfolio_title {
  height:30px;
  font:normal 18px/35px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color:#27a2c8;
  background-color:inherit;
  margin:0 0 24px 0 !important;
  padding:0;
}

ul.portfolio{
  list-style-type:none;
}

ul.portfolio li{
  display:block;
  padding:0 20px 0 0;
  margin:0 0 28px 0 !important;
  float:left;
  height:92px;
}

ul.portfolio li.nopad{
  padding:0;
}

ul.portfolio li a{
  border:#ccf0fa 10px solid;
  float:left;
  display:block;
}

ul.portfolio li a img{
  display:block;
  font-size:0;
  line-height:0;
}

ul.portfolio li a:hover{
  border:#afeafa 10px solid;
}

#gallery1 {
  padding:0 0 0 70px;
}

/*-------------< < <contact part start > > >-------------*/

.contact_header{
  background:url(../images/contact_hader.jpg) no-repeat left bottom !important ;
}

#body h1.contact{
  background:url(../images/contact_us.gif) no-repeat 0 0;
  height:46px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 31px 0;
}

form.contact_form{
  width:427px;
}

form.contact_form label{
  width:147px;
  float:left;
  line-height:27px;
  color:#474747;
  font-size:12px;
  background-color:inherit;
  text-align:right;
  margin:0 0 10px 0;
}

form.contact_form input{
  width:240px;
  border:#d4d4d4 1px solid;
  height:20px;
  float:right;
  margin:0 0 10px 0;
  padding:5px 0 0 25px;
}

form.contact_form textarea{
  width:240px;
  height:155px;
  background:url(../images/comment_icon.gif) no-repeat 5px 5px #fff;
  color:#666;
  float:right;
  border:#d4d4d4 1px solid;
  margin:0 0 11px 0;
  padding:5px 0 0 25px;
}

.mar_bot{
  margin:0 0 135px 0 !important;
}

form.contact_form input.name{
  background:url(../images/name_icon.gif) no-repeat 5px 4px #fff;
  color:#666;
}

form.contact_form input.name_error{
  background:url(../images/name_icon_error.gif) no-repeat 5px 4px #fff;
  color:#666;
}

form.contact_form input.email{
  background:url(../images/email_icon.gif) no-repeat 5px 7px #fff;
  color:#666;
}

form.contact_form input.email_error{
  background:url(../images/email_icon_error.gif) no-repeat 5px 7px #fff;
  color:#666;
}

form.contact_form input.company{
  background:url(../images/company_icon.gif) no-repeat 5px 4px #fff;
  color:#666;
}

form.contact_form input.website{
  background:url(../images/website_icon.gif) no-repeat 5px 4px #fff;
  color:#666;
}

form.contact_form input.submit{
  background:url(../images/submit_but.gif) no-repeat 0 0;
  height:43px;
  width:123px;
  border:none;
  float:right;
  font-size:0;
  line-height:0;
  cursor:pointer;
}

/*----------< < < site map > > >----------------*/

.siteMap_header{
background:url(../images/sitemap_header.jpg) no-repeat left bottom !important ;
}

#body h1.sitemap{
  background:url(../images/site_map.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 31px 0;
}

ul.site_link{
  list-style-type:none;
  margin:8px 10px 15px;
}

ul.site_link li{
  background:url(../images/site_map_icon.gif) no-repeat 0 10px;
  padding:0 0 0 25px;
}

ul.site_link li a{
  color:#474747;
  background-color:inherit;
  text-decoration:none;
  font-size:12px;
  line-height:24px;
}

ul.site_link li a:hover{
background-color:inherit;
color:#2365a1;
}

/*-------------< < <thank you part start > > >-------------*/

.thank{
  margin:130px 40px 100px;
  font-size:20px;
  line-height:20px;
  color:#67c4e1;
  background-color:inherit;
  text-align:center;
}

/*----------< < < Error > > >----------------*/

.error_header{
background:url(../images/error_header.jpg) no-repeat left bottom !important ;
}

#body h1.error{
  background:url(../images/error-to.gif) no-repeat 0 0;
  height:48px;
  font-size:0;
  line-height:0;
  text-indent:-222222px;
  margin:0 0 31px 0;
}