bestwebdesign : Design 4 « Templates « HTML / CSS






bestwebdesign

     

<!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>BestWebdesign | About</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:#fafafa;}
html { padding:0; margin:0;}

.main { margin:0 auto; padding:0;}
.resize { width:960px; padding:0; margin:0 auto;}
/********** header **********/
.header_resize {background: url(bestwebdesign-images/header_bg.gif) top repeat-x; margin:0; padding:0;}
.header { width:960px; padding:0; margin:0 auto; }
.header_blog { background: url(bestwebdesign-images/header_block_bg.jpg) top center repeat-x; padding:20px 0 0 0; margin:0; height:380px;}
.header_blog2 { background: url(bestwebdesign-images/header_bglog2_bg.gif) top center repeat-x; padding:20px 0 0 0; margin:0; height:105px;}
.header_blog2 h2 { width:350px; float:left; font: bold 36px Arial, Helvetica, sans-serif; color:#292929; padding:10px 0 0 15px; margin:0;}
.header_blog2 p { font: italic 12px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:10px 0 0 0; margin:0; width:300px; float:right;}
.header_blog h2 { font: normal 18px Arial, Helvetica, sans-serif; color:#1d1d1d; padding:10px 0 0 0; margin:0;}
.header_blog p { font: normal 11px Arial, Helvetica, sans-serif; color:#fff; padding:0 0 30px 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:148px; float:left;}
/*menu*/
.menu { padding:13px 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 5px; border:0;}
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fffefe; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;}
.menu ul li a span { padding:12px 9px; background:none;}
.menu ul li a:hover {  background: url(bestwebdesign-images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span {   background:url(bestwebdesign-images/l_menu.gif) no-repeat left;}
.menu ul li a.active {  background:url(bestwebdesign-images/r_menu.gif) no-repeat right;}
.menu ul li a.active span {   background:url(bestwebdesign-images/l_menu.gif) no-repeat left;}
/* body */
.body_resize  { padding:0; width:960px; margin:0 auto;}
.body { padding:20px 0; margin:0 auto; background:#fafafa; border-top:none; }
.body h2 { font:normal 20px Arial, Helvetica, sans-serif; color:#171717; padding:10px 5px 20px 5px; margin:0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#898989; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { color:#247ca4; font: normal 11px Arial, Helvetica, sans-serif; line-height:1.8em; padding:5px 0; margin:0;}
.body a { color:#247ca4; text-decoration:none; font: bold 12px Arial, Helvetica, sans-serif;}
.body img { margin:5px auto; padding:0;}
.body img.floated { float:left; margin:10px 10px; padding:0;}
.full { margin:0; padding:10px;}
.right { width:300px;margin:0; padding:10px; float:right;}
.left {width:620px;margin:0; padding:10px; float:left;}
.blog_port { width:281px; margin:0 5px; padding:15px 10px; float:left; border:1px solid #ddd; background:#fefefe;}
.blog_port img { margin:0; padding:0 5px 10px 5px; float:none;}
.butons { width:50px; margin:10px auto; padding:0;}
/*.body_bottom */
.body_bottom { background:#f8f8f8; padding:0; margin:0; border-bottom:1px solid #e9e9e9;}
.body_bottom .block { width:300px; float:left; padding:15px 10px; margin:0;}
.body_bottom h2 { font: normal 20px Arial, Helvetica, sans-serif; color:#171717; padding:15px 10px; margin:0;}
.body_bottom h2 span { font: italic 11px Arial, Helvetica, sans-serif; color:#247ca4;}
.body_bottom p { font: normal 12px Arial, Helvetica, sans-serif; color:#9a9a9a; padding:10px 5px; margin:0; line-height:1.8em;}
.body_bottom img { float:left; margin:10px 10px 10px 0; padding:0;}
.body_bottom_resize { width:960px; padding:0; margin:0 auto;}
/********** 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:#898989; font: normal 12px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:450px; border:1px solid #e1e1e1; margin:2px 0; padding:5px 2px; height:16px; background:#fff; float:right; }
#contactform textarea { width:450px; border:1px solid #e1e1e1; margin:2px 0; padding:2px; background:#fff; float:right; }
#contactform li.buttons input { padding:3px 0 3px 480px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer {padding:0;  margin:0; border-top:1px solid #e9e9e9; background:#ececec;}
.footer_resize { width:940px; margin:0 auto; padding:20px 10px;}
.footer p { font:normal 12px  Arial, Helvetica, sans-serif; color:#777;}
.footer a { font:bold 12px Arial, Helvetica, sans-serif; color:#777; text-decoration:none; padding:5px; margin:0;}
.footer p.right { text-align:right; width:350px; margin:0; padding:15px 0 0 0; float:right;} 
.footer p.leftt { text-align:left; width:550px; margin:0; padding:15px 0 0 0; float:left;}

p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e2e2e2; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}

/* Slider */
#slider {  width:960px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 341px; }
.slider-item { width: 100% !important; height: 341px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; margin:10px 0 0 0; z-index: 1000; width:960px; height:23px;}
#slider_controls ul { margin:0 auto; padding:2px 23px 2px 0; width:54px;}
#slider_controls ul li { margin: 0; padding: 0; list-style: none; }
#slider_controls ul li { float: left; display: block; }
#slider_controls ul li a { width: 10px; height: 10px; background:url('bestwebdesign-images/tabs_2.gif') no-repeat center center; display: block; float: left; padding: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 { background:url('bestwebdesign-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="bestwebdesign-images/logo.gif" width="338" height="70" border="0" alt="" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.html"><span>Home</span></a></li>
          <li><a href="portfolio.html"><span>Portfolio </span></a></li>
          <li><a href="about.html" class="active"><span> About Us </span></a></li>
          <li><a href="contact.html"><span> Contact Us</span></a></li>
        </ul>
      </div>
      <div class="clr"></div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="header_blog2">
    <div class="header">
      <h2>About Us</h2>
      <p>Your company's welcome message or slogan. <br />
        Lorem ipsum dolor sit amet, consectur el.</p>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>
  <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>About Us</h2>
        <p>Donec varius, lorem ac euismod lobortis, dui tortor vehicula massa, a consectetur nisi sem consectetur urna. Duis mollis tempus nunc sit amet hendrerit. Aliquam sem nisl, pharetra hendrerit scelerisque et, ornare eget dui. Nunc gravida rhoncus diam, vestibulum dignissim</p>
        <p>Etiam in nisi at metus sagittis iaculis nec ut diam. Sed in enim quis metus ullamcorper pulvinar. Mauris aliquet blandit lobortis. Vivamus accumsan semper dui sit amet semper.</p>
        <h2>Our mission</h2>
        <p>Mauris et tellus lobortis tellus fringilla faucibus. Vestibulum quis dictum ante. Proin dui est, tincidunt eget mollis in, dictum vitae elit. Nunc eu tortor purus, ac volutpat ligula. Pellentesque nisl neque, tempor eget euismod et, tempor eu urna. Curabitur vulputate condimentum ullamcorper. Vivamus interdum euismod nisi, at fringilla arcu dapibus quis.</p>
        <img src="bestwebdesign-images/about_1.jpg" alt="" width="581" height="136" />
        <h2>Who We Are ?</h2>
        <p>Fusce vehicula dignissim ligula. Vestibulum sit amet neque eu neque suscipit consequat quis vel risus. <br />
          Vestibulum vehicula purus nec dui accumsan fermentum. Suspendisse potenti. Ut dapibus est id odio pretium blandit in eget leo. Aliquam erat volutpat. Curabitur blandit odio eget odio eleifend vel mattis augue convallis. Praesent fringilla, eros et tristique tempus, libero metus porttitor velit, at ultrices eros dolor placerat nunc. Fusce ac egestas ante.</p>
      </div>
      <div class="right">
        <h2>Our Team</h2>
        <img src="bestwebdesign-images/team_1.gif" alt="" width="54" height="55" class="floated" />
        <p><strong>Many desktop publishing </strong><br />
          packages and web page editors now use Lorem Ipsum [...] </p>
        <p>&nbsp;</p>
        <img src="bestwebdesign-images/team_1.gif" alt="" width="54" height="55" class="floated" />
        <p><strong>Many desktop publishing </strong><br />
          packages and web page editors now use Lorem Ipsum [...] </p>
        <p>&nbsp;</p>
        <img src="bestwebdesign-images/team_2.gif" alt="" width="54" height="55" class="floated" />
        <p><strong>Many desktop publishing </strong><br />
          packages and web page editors now use Lorem Ipsum [...] </p>
        <p>&nbsp;</p>
        <img src="bestwebdesign-images/team_2.gif" alt="" width="54" height="55" class="floated" />
        <p><strong>Many desktop publishing </strong><br />
          packages and web page editors now use Lorem Ipsum [...] </p>
        <p>&nbsp;</p>
        <h2>What Our Client says...</h2>
        <p> <img src="bestwebdesign-images/test.gif" alt="" width="18" height="13" />Aenean id justo eu est sodales rhoncus ac et sem. Nunc aliquam, magnaa placerat congue, ante urna tincidunt.<br />
          <strong>Jason, Founder, www.website.com </strong></p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="footer">
    <div class="footer_resize">
      <p class="leftt"> Copyright websitename . All Rights Reserved<br />
        <a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">RSS</a></p>
      <p class="right">(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.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.beta
29.beyond
30.bigdeal
31.BigSpaceLove
32.bioessence
33.Biru_Manteb
34.bittersweet
35.Black
36.chamberlandsrestaurant
37.chara
38.characterized
39.charcoal
40.charitable-organization
41.chary
42.chasmogamous
43.chesspiece
44.chic
45.chicanery
46.chromz
47.churchsitev.2
48.citrus-island1-1
49.clementine
50.clicker
51.modernclassic
52.modernmagic
53.modernworld
54.A_Simple_Theme
55.minimalistica
56.miniseries
57.mint-idea
58.minty
59.mirax
60.miscellaneous
61.mistybud
62.mlpdesign02
63.mlpdesign03
64.mlpdesign04
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year