sindromk : Design 7 « Templates « HTML / CSS






sindromk

  

<!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>SindromK - About</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<style type='text/css'>
html{
background:url(sindromk-images/bg.jpg) repeat;
}
body
{
background:url(sindromk-images/top_bg.jpg) repeat-x top;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px auto auto auto;
color:#FFFFFF;
}
h1{
font-size:18px;
font-weight:normal;
color:#b4a2c8;
margin:0px;
padding:5px 0 5px 0;
}
p{
text-align:justify;
padding:5px 0 5px 0;
margin:0px;
line-height:19px;
}
.clear{
clear:both;
}
img.left_img{
float:left;
padding:0 15px 15px 0;
}
#main_container{
width:960px;
height:auto;
margin:auto;
padding:0px;
}
#header{
width:960px;
height:174px;
margin:auto;
background:url(sindromk-images/header_bg.jpg) no-repeat center;
}
#logo{
padding:35px 0 0 15px;
float:left;
}
/*---------------- menu tab----------------------*/
#menu_tab{
width:960px;
height:32px;
clear:both;
padding:47px 0 0 0;
}
ul.menu {
list-style-type:none; display:block; width: auto; 
margin: auto; padding:0px 0 0 150px;}

ul.menu li {
display:inline;
line-height:32px;
}
ul.menu li a{
color:#85679b;
font-size:14px;
font-weight:bold;
float:left;
display:block;
height:32px;
text-decoration:none;
padding:0 42px 0 0;
margin:0 32px 0 0;
}
ul.menu li a:hover{
color:#A683BF;
}

a.nav_home:link, a.nav_home:visited { background:url(sindromk-images/menu_icon1.gif) no-repeat right;}
a.nav_home:hover { background:url(sindromk-images/menu_icon1_a.gif) no-repeat right;}

a.nav_about:link, a.nav_about:visited { background:url(sindromk-images/menu_icon2.gif) no-repeat right;}
a.nav_about:hover { background:url(sindromk-images/menu_icon2_a.gif) no-repeat right;}

a.nav_services:link, a.nav_services:visited { background:url(sindromk-images/menu_icon3.gif) no-repeat right;}
a.nav_services:hover{ background:url(sindromk-images/menu_icon3_a.gif) no-repeat right;}

a.nav_help:link, a.nav_help:visited { background:url(sindromk-images/menu_icon4.gif) no-repeat right;}
a.nav_help:hover { background:url(sindromk-images/menu_icon4_a.gif) no-repeat right;}

a.nav_contact:link, a.nav_contact:visited { background:url(sindromk-images/menu_icon5.gif) no-repeat right;}
a.nav_contact:hover { background:url(sindromk-images/menu_icon5_a.gif) no-repeat right;}
/*------------------main_content-------------------*/
#main_content{
width:960px;
height:auto;
padding:20px 0 25px 0;
}
.left_content{
width:560px;
float:left;
padding:0 0 0 20px;
}
.right_content{
width:350px;
float:right;
padding:0px;
}
.left_box{
clear:both;
width:560px;
float:left;
padding:0 0 20px 0;
}
.left_icon{
width:100px;
float:left;
text-align:center;
padding:45px 0 0 0;
}
.left_text_box{
width:440px;
float:left;
border-left:1px #695a7c dotted;
padding:0 0 0 15px;
}
.main_title{
padding:0 0 20px 0;
float:left;
clear:both;
}
a.read_more{
display:block;
width:79px;
height:23px;
float:right;
margin:5px 0 0 0;
text-align:center;
text-decoration:none;
color:#b4a2c8;
line-height:23px;
background:url(sindromk-images/read_more.gif) no-repeat center;
}
a.project_title{
text-decoration:none;
color:#e2845a;
padding:0 0 5px 0;
float:left;
width:450px;
display:block;
}
a.view_project{
width:150px;
display:block;
text-decoration:none;
background:url(sindromk-images/bullet.gif) no-repeat left;
color:#6e5884;
padding:0 0 0 7px;
margin:2px 0 0 5px;
}
.featured_project{
float:left;
clear:both;
padding:0 0 5px 0;
margin:0 0 20px 20px;
_margin:0 0 20px 10px;
border-bottom:1px #695a7c dotted;
}
.blog_title{
font-size:14px;
background:url(sindromk-images/blog_icon.gif) no-repeat left;
padding:0 0 0 50px;
height:32px;
line-height:32px;
color:#FFFFFF;
}
.testimonials_title{
font-size:14px;
background:url(sindromk-images/icon_testimonials.gif) no-repeat left;
padding:0 0 0 50px;
height:32px;
line-height:32px;
color:#FFFFFF;
}
.right_box{
width:348px;
padding:10px 0 15px 0;
}
.right_box_top{
width:348px;
height:10px;
background:url(sindromk-images/right_box_top.gif) no-repeat center bottom;
}
.right_box_bottom{
width:348px;
height:10px;
background:url(sindromk-images/right_box_bottom.gif) no-repeat center top;
}
.right_box_center{
width:318px;
height: auto;
padding:0 15px 15px 15px;
background:url(sindromk-images/right_box_center.gif) repeat-y center;
}
p.text_box{
border-bottom:1px #695a7c dotted;
padding:15px 0 10px 0;
}
span.orange{
color:#e2845a;
}
/*---------------contact_form------------------*/
.contact_form{
width:420px;
float:left;
padding:15px 0 0 25px;
}
.form_row{
width:420px;
clear:both;
padding:10px 0 10px 0;
_padding:5px 0 5px 0;
color:#a53d17;
}
label.contact{
width:75px;
float:left;
font-size:12px;
text-align:right;
padding:4px 15px 0 0;
color:#fff;
}
input.contact_input{
width:325px;
height:22px;
background-color:#332B42;
color:#FFFFFF;
border:1px #584C6F solid;
float:left;
padding:4px 0 0 3px;
}
textarea.contact_textarea{
width:325px;
height:100px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
background-color:#332B42;
border:1px #584C6F solid;
float:left;
padding:4px 0 0 3px;
}
.contact_info{
clear:both;
float:left;
width:560px;
padding:20px 0 0 0;
}
/*---------------footer----------------*/
#footer{
width:960px;
height:87px;
clear:both;
color:#654982;
margin:0 0 20px 0;
background:url(sindromk-images/footer_bg.gif) no-repeat center;
}
img.footer_logo{
float:left;
padding:6px 0 0 15px;
}
.left_footer{
float:left;
width:300px;
padding:35px 0 0 10px;
}
.right_footer{
float:right;
color:#c2add8;
padding:35px 20px 0 0;
}
.right_footer a{
padding:0 0 0 7px;
text-decoration:none;
color:#c2add8;
}
.right_footer a:hover{
text-decoration:underline;
}


</style>


</head>
<body>
<div id="main_container">
  <div id="header">
    <div id="logo"><a href="http://www.free-css.com/"><img src="sindromk-images/logo.gif" alt="" border="0" /></a></div>
    <div id="menu_tab">
      <ul class="menu">
        <li><a href="index.html" class="nav_home"> HOME </a></li>
        <li><a href="about.html" class="nav_about"> ABOUT</a></li>
        <li><a href="projects.html" class="nav_services"> PROJECTS</a></li>
        <li><a href="contact.html" class="nav_contact"> CONTACT </a></li>
        <li><a href="http://www.free-css.com/" class="nav_help"> HELP</a></li>
      </ul>
    </div>
  </div>
  <div id="main_content">
    <div class="left_content">
      <h1>About Us</h1>
      <p> <img src="sindromk-images/icon_team.gif" alt="" class="left_img" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br  />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br  />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br />
      </p>
      <h1>What we do?</h1>
      <p> <img src="sindromk-images/icon_world.gif" alt="" class="left_img" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br  />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br  />
        <br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation <br />
      </p>
    </div>
    <!-- end of left content-->
    <div class="right_content">
      <div class="blog_title">from the blog</div>
      <div class="right_box">
        <div class="right_box_top"></div>
        <div class="right_box_center">
          <p class="text_box"> <span class="orange">Nemo enim ipsam voluptatem quia voluptas sit </span><br />
            <i>(13.07.09)</i><br  />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
          <p class="text_box"> <span class="orange">Nemo enim ipsam voluptatem quia voluptas sit </span><br />
            <i>(13.07.09)</i><br  />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
          <a href="http://www.free-css.com/" class="read_more">all news</a>
          <div class="clear"></div>
        </div>
        <div class="right_box_bottom"></div>
      </div>
      <div class="testimonials_title">clients testimonials</div>
      <div class="right_box">
        <div class="right_box_top"></div>
        <div class="right_box_center">
          <p class="text_box"> <span class="orange">Tommy Voluptatem </span><br />
            <i>(Enterprice Name)</i><br  />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
          <p class="text_box"> <span class="orange">Tommy Voluptatem</span><br />
            <i>(Enterprice Name)</i><br  />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
          <a href="http://www.free-css.com/" class="read_more">all news</a>
          <div class="clear"></div>
        </div>
        <div class="right_box_bottom"></div>
      </div>
    </div>
    <!-- end of left content-->
    <div class="clear"></div>
  </div>
  <!-- main_content-->
  <div id="footer"> <img src="sindromk-images/footer_logo.gif" alt="" class="footer_logo" />
    <div class="left_footer"> Website name &copy; 2009. All Rights Reserved. </div>
    <div class="right_footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Pivacy Policy</a> | <a href="http://www.free-css.com/">Contact</a> | <a href="http://indeziner.com">INDEZINER</a> </div>
  </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.SimpleSimple
2.simplestyle_1
3.simplestyle_2
4.simplestyle_3
5.simplestyle_4
6.simplestyle_5
7.simplestyle_6
8.pomodoro
9.portcentral
10.portfolio-extended
11.portfolio
12.postscriptum
13.powderpuff
14.power
15.precision
16.predilection
17.premiumseries
18.prepaid
19.presented
20.pressurized
21.prideandprejudice
22.primitiveelement
23.printing
24.pristine
25.private-lawyer-co
26.product-landing-page
27.production
28.ProductPackage
29.programme
30.progress
31.projection
32.proofing
33.Prosperity
34.province
35.purensimple
36.purgatory_shuffle
37.puzzled
38.quadrangle
39.quartz-istorage
40.quatrain
41.racetrackplaya
42.radiance
43.rainonleaves
44.ramblingsoul-2
45.ramblingsoul-9
46.ramblingsoul3
47.ramblingsoul4
48.ramblingsoul5
49.ramblingsoul7
50.ramblingsoul_2
51.ramblingsoul_3
52.random
53.rational
54.realize
55.realone
56.rebel-magazine
57.reckoning
58.recreations
59.reference
60.regeneracy
61.rehabilitation
62.reinvent
63.replenish
64.republic
65.resizeme
66.resplendissant
67.revolt-01
68.ridinghood
69.rockband
70.rogue
71.Rothko
72.route66
73.rust
74.safe-as-houses
75.sahara
76.sampling
77.Sapphire
78.schemermag
79.scotchmark
80.scribbled
81.secretlab
82.seduction
83.selcouth
84.sensa
85.settings
86.shallowgrunge
87.shalom-typo
88.shape
89.she
90.showcase
91.sifiso
92.silenceandharmony
93.SILK
94.Simpatico
95.singapore
96.sinorcaish
97.six-oh-six
98.sixpence
99.sixties_style
100.skipopia
101.skitemplate
102.sky
103.sliced
104.slight_amnesia
105.socialnet
106.softenedcells
107.solemnity
108.solitude
109.soloss
110.solutions
111.somewhere-peaceful
112.soniatemplate
113.space
114.spaced
115.spasaloon
116.spatter
117.speedracing
118.spheroids
119.spidercity
120.splash
121.splatt
122.spontaneous