unite : Design 8 « Templates « HTML / CSS






unite

   

<!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>Unite | 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: url(unite-images/main_bg.gif);}
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(unite-images/header_bg.gif) top repeat-x;}
.header { width:960px; padding:0; margin:0 auto; border-bottom:1px solid #484848;}
/* 2 */
.header_blog2 { background:url(unite-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:233px; float:left;}
/*menu*/
.menu { padding:38px 0 0 0; margin:0 ; width:380px;  float:left; }
.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:12px 0; color:#939393; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase;}
.menu ul li a:hover { color:#ddd;}
.menu ul li a.active { color:#ddd;}
/* search */
.search { padding:41px 0 0 0; margin:0 auto; width:200px; float:right; }
.search form { padding:0; margin:0 auto;}
.search span { display:block; float:left; background: url(unite-images/search_bg.gif) left top no-repeat; width:146px; padding:0 5px; height:27px;}
.search form .keywords { width:146px; line-height:13px; height:13px; float:left; background:none; border:0; padding:7px 0; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;}
.search form .button { float:left; margin:0; padding:0;}
/* body */
.body_resize {padding:0; width:960px; margin:0 auto;}
/* */
.body { padding:0; margin:0 auto; border-bottom:1px solid #111;}
.body h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#c1c1c1;  padding:20px 5px; margin:0 0 10px 0;}
.body p { font:normal 12px Arial, Helvetica, sans-serif; color:#6b6b6b; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { color:#6d6d6d; font: normal 11px Arial, Helvetica, sans-serif;}
.body a { color:#801e14; 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; padding:0;}
.right { width:680px; margin:0; padding:0 10px; float:right;}
.left {width:240px; margin:0; padding:0 10px; float:left;}
.right_blog {width:312px; margin:0; padding:0 10px; float:left;}
.right_port {width:300px; margin:0; padding:0 10px; float:left;}
/*FBG*/
.FBG {margin:0; padding:0; background: #111; border-top:1px solid #1e1e1e;}
.FBG_resize { width:960px; margin:0 auto; padding:0;}
.FBG_resize ul { margin:0; padding:0; list-style:none;}
.FBG_resize li { padding:3px; margin:0; font: bold 11px Arial, Helvetica, sans-serif; color:#444;}
.FBG_resize li a { font: normal 11px Arial, Helvetica, sans-serif; color:#444; text-decoration:none;}
.FBG_resize li a:hover { color:#fff;}
.FBG_resize img { float:left; margin:5px; padding:0;}
.FBG_resize p { font: normal 11px Arial, Helvetica, sans-serif; color:#444; text-decoration:none; padding:5px; margin:0; line-height:1.8em;}
.FBG_resize h2 { font: bold 14px Arial, Helvetica, sans-serif; color:#9f9f9f; padding:10px 5px; margin:0;}
.FBG_resize .left { width:220px; float:left; margin:0; padding:10px;}
/********** 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:#c1c1c1; 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 #000; margin:2px 0; padding:5px 2px; height:16px; background:#282828; float:left; }
#contactform textarea { width:450px; border:1px solid #000; margin:2px 0; padding:2px; background:#282828; float:left; }
#contactform li.buttons input { padding:3px 0 3px 455px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }

/*************footer**********/
.footer {padding:0;  margin:0; border-top:1px solid #1a1a1a; background:#0e0e0e;}
.footer_resize { width:940px; margin:0 auto; padding:5px 10px;}
.footer p { font:normal 11px  Arial, Helvetica, sans-serif; color:#3e3e3e;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#3e3e3e; 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;}
.header_blog { background: url(unite-images/slider_bg.gif) top center repeat-x; padding:0; margin:0; }
.header_blog_resize { width:960px; margin:0 auto; padding:0;}
.header_blog_resize h2 { font: normal 30px Arial, Helvetica, sans-serif; color:#fff; padding:30px 10px; margin:0;}
.header_blog_resize .menu2 { border-top:1px solid #232323; background:#101010; padding:15px 0; margin:0 auto;}
.header_blog_resize .menu2 ul { text-align: left;  padding:0; margin:0; list-style:none; border:0; float:left;}
.header_blog_resize .menu2 ul li { float:left; margin:0; padding:0; border:0;}
.header_blog_resize .menu2 ul li a {  border-right:1px solid #575757; float:left; margin:0; padding:0 15px; color:#575757; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.header_blog_resize .menu2 ul li a:hover { color:#939393; text-decoration:underline;}
.header_blog_resize .menu2 ul li a.active { color:#939393; text-decoration:underline;}
/* Slider */
#slider {  width:960px; padding:20px 0 0 0; margin:0 auto;}
div#slideshow { width: 100%; height:337px; padding:0; }
.slider-item { width: 100% !important; }
.slider-item img { float:right; margin:0; padding:0;}
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin:0 auto; padding:5px 0; background:#101010;}
#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:#525252; padding:5px 0 0 20px; margin:0;}
#slider_controls ul { margin:0; padding:0 20px 0 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:17px; height: 8px; background:url('unite-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('unite-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="unite-images/logo.gif" width="233" height="97" border="0" alt="" /></a></div>
      <div class="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Services </a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="about.html" class="active">About Us</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
      </div>
      <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="unite-images/search.gif" class="button" />
        </form>
      </div>
      <div class="clr"></div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="header_blog">
    <div class="header_blog_resize">
      <h2>About Us</h2>
      <div class="menu2">
        <ul>
          <li><a href="#">History</a></li>
          <li><a href="#">Finances </a></li>
          <li><a href="#" class="active">Partnership</a></li>
          <li><a href="#"> Our clients</a></li>
        </ul>
        <div class="clr"></div>
      </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></div>
  </div>
  <div class="clr"></div>
  <div class="body">
    <div class="body_resize">
      <div class="left">
        <h2>Our News</h2>
        <p><span>12 Dec 2015 | <a href="#">0 comments</a></span><br />
          <strong>Duis nec porttitor lorem</strong><br />
          Mauris et nisi urna nonfaucibus magna. Integer lacus ante then ullamcorper ut vulputate..</p>
        <p>&nbsp;</p>
        <p><span>18 Dec 2015 | <a href="#">5 comments</a></span><br />
          <strong>Aenean interdum</strong><br />
          Vestibulum ante ipsum primis in faucibus orci luctus ultrices ante posuere.</p>
        <p>&nbsp;</p>
        <p><span>4 Jan 2015 | <a href="#">2 comments</a></span><br />
          <strong>Integer vitae nisl</strong><br />
          Duis volutpat ligula laoreet orci lectus placerat Curabitur lectus malesuada pulvinar.</p>
        <p><a href="#">More News</a></p>
      </div>
      <div class="right">
        <h2>About Company</h2>
        <img src="unite-images/about_img.jpg" alt="" width="680" height="101" />
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <br />
          It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br />
          Why do we use it?</p>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br />
          <br />
          There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. </p>
      </div>
      <div class="clr"></div>
    </div>
  </div>
  <div class="clr"></div>
  <div class="FBG">
    <div class="FBG_resize">
      <div class="left">
        <h2>About</h2>
        <ul>
          <li> <a href="#">Lorem ipsum dolor sit amet</a></li>
          <li> <a href="#">Nunc interdum dictum bibendum</a></li>
          <li> <a href="#">Aliquam scelerisque</a></li>
          <li> <a href="#">Pellentesque id est velit</a></li>
          <li> <a href="#">Maecenas accumsan</a></li>
          <li> <a href="#">Maecenas a odio id arcu</a></li>
        </ul>
      </div>
      <div class="left">
        <h2>Tweets</h2>
        <p>Lorem ipsum dolor sit amet<br />
          <strong>August 18th, 2015</strong><br />
          Lorem ipsum dolor sit amet<br />
          <strong>August 18th, 2015</strong><br />
          Lorem ipsum dolor sit amet<br />
          <strong>August 18th, 2015</strong></p>
      </div>
      <div class="left">
        <h2>Our Services</h2>
        <p><strong>Web Design</strong><br />
          Concept designs to XHTML/CSS.<br />
          <strong>Identity</strong><br />
          Logos designs to Business Cards.<br />
          <strong>Graphics</strong><br />
          Photos to Poster Designs</p>
      </div>
      <div class="left">
        <h2>Contact</h2>
        <p><strong>+1 215.676.7876<br />
          contact@mycompany.com</strong><br />
          123 Pine Street<br />
          Mycity, ST 19000</p>
        <a href="#"><img src="unite-images/rss_1.gif" alt="" width="18" height="16" border="0" /></a> <a href="#"><img src="unite-images/rss_2.gif" alt="" width="18" height="16" border="0" /></a> <a href="#"><img src="unite-images/rss_3.gif" alt="" width="18" height="16" border="0" /></a> </div>
      <div class="clr"></div>
    </div>
    <div class="clr"></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.sprayedstrokes
2.Square
3.squarely
4.st-valentines-day
5.stacko
6.stamp
7.standardissue
8.standardized
9.starburst
10.stardust
11.stargazer
12.stark
13.steppingstone
14.stichy
15.stickybud
16.stickynotes
17.Stock
18.streetclock
19.strict
20.strockes
21.students-site
22.stygian
23.stylevantage1-0
24.stylish
25.stylized
26.subdued
27.subordinate
28.substance
29.substantial
30.superior
31.supplementary
32.surpris
33.surreal
34.sweatbee
35.swift
36.switchr
37.sworm
38.Symisun_01
39.symphonic
40.symphonyofhorror
41.synchronize
42.Synergy
43.systematized
44.tabbed
45.tangular
46.tardy
47.tcm
48.tealzine
49.team_three
50.templatika
51.Tenebrific
52.terje1_winter
53.terrafirma
54.terrafirma2
55.The-Carbon
56.the-dark-one
57.the-island
58.the-mmozine
59.the-music-studio
60.the-new-audi
61.the-synopsis
62.the-themepod
63.the-web-news
64.theacmegroup
65.thechosenone
66.thelatest
67.themanor
68.tinytemplate
69.themissing-piece
70.thermal
71.thesite
72.thetechies
73.thewall
74.the_gig
75.thisistext
76.throughout
77.thunder
78.ticktocklight
79.time
80.Timeless Template
81.timeless
82.timemanager
83.toolkit
84.tooplain
85.topbusiness
86.topgadgets
87.topworks
88.tornpaperdocom
89.totaltouch
90.towers
91.traditionalist
92.transient
93.transition
94.transport
95.trialservices
96.trikea-static
97.trinityinstitute
98.tropical-evening
99.tropical
100.truenature
101.turn-out-mag
102.Turnesol
103.turnitup
104.turrion-development
105.tv-archade
106.twirling
107.twisted
108.Typography
109.ultimateweb
110.unbound-1.0
111.uncomplicated
112.undefined
113.Underground
114.undertaking
115.UnderWraps
116.undiscovered
117.unembellished
118.unilluminated
119.uniq
120.universal
121.unknown
122.unlink
123.unnamed
124.unqualified
125.urbanartist
126.usabilityreport
127.variety
128.vectorlover1-0
129.vegetable
130.veggie
131.ventix
132.vertical
133.verticals
134.vertigo
135.VeryGreen
136.VIBE
137.vibrant
138.Village
139.vintage-style
140.violetrays
141.visioninc
142.visions
143.vitruvius
144.vivid
145.Viziora
146.voodoo-dolls
147.voodoodollyv2.0
148.voyage
149.WaiveLive
150.walls
151.wanderer
152.warmblue
153.warped
154.watchthis
155.watercolored-portfolio
156.waterfactory
157.waterfall
158.waterfalls
159.WaterPool
160.we think
161.web-application
162.web-design-studio
163.web-design
164.web-hosting
165.web-shop
166.web2
167.webdesign
168.webdesigninfo
169.webmob
170.websitedesignx
171.webvision
172.Web_Application
173.wellness
174.whatsyoursolution
175.wickedred
176.widecommerce
177.widget
178.widgetlike
179.wildgoose
180.wing-the-air
181.winglobal
182.wiremesh
183.world-of-warcraft
184.xenlog
185.xgallery
186.xhtmldesign
187.xhtmldev_rainbow
188.xhtmldev_RealEstate
189.xodafields0.2
190.ynt
191.yosemite
192.your-blazing-app
193.yourhost
194.yourministry
195.zillanine