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> </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> </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