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>About Us | Simayaa Technologies</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="bigTop">

      <div id="top" class="about_header">
            <a href="#">

</a>
            <ul class="navi">
                  <li><a href="#" title="home"><span class="left"><span class="right"><span>Home</span></span></span></a></li>
                  <li><a href="#" class="hover" 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="about">About Us Web Design and Web Standard strategists</h1>

      <div id="content_line">

      <div class="width485 mar43">
            <h2 class="who">Who we are</h2>
            <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. We love to make beautiful things for web, keeping some important points in mind: </p>
            <ul class="doBullet">
                  <li>Functional Design,</li>
                  <li>Semantic Coding and </li>
                  <li>Usability </li>
            </ul>
            <p>We are a strong believer of w3c standards and believe that valid and extensible solutions are essential. You can check our <a href="#" class="link1" title="portfolio">portfolio</a> which reflects our believe as well as our experience and creativity in the field of web designing. </p>
            <h2 class="philosophies">Our philosophies</h2>
            <p>We believe in togetherness and unity among ourselves. We are a group of designers who have the same bent of mental frequency and taste. Our USP (Unique Selling Proposition) is our energy and passion with which we work for our clients. We believe that whatever we are going to do we shall do it with passion. We have a great thirst for making the web a better place by creating usable and accessible websites. Please, check our services to know more about what we have for our clients.</p>
      </div>


      <div class="width225">
            <h2 class="tags">Tags</h2>
            <p class="tags_text">
                  <a href="#">custom logo design</a>
                  <a href="#" class="fonts14">Online Branding</a>
                  <a href="#" class="fonts18">Custom Web Design</a>
                  <a href="#" class="fonts11">accesible web design</a>
                  <a href="#" class="fonts18">Joomla theme design</a>
                  <a href="#" class="fonts11">Wordpress theme design</a>
                  <a href="#" class="fonts16"> Flash design</a>
                  <a href="#">osCommerce theme layout</a>
                  <a href="#" class="fonts18">Web 2.0 layouts</a>
                  <a href="#">Flash intro web designer</a>
                  <a href="#" class="fonts14">Business Website</a>
                  <a href="#" class="fonts18">Affordable Web Design</a>
                  <a href="#" class="fonts18">low cost web design </a>
                  <a href="#">Creative Web Templates</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="#" 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"><a href="#">simayaa</a></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;
}