ultimateweb
<!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>UltimateWeb | 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: #f8f8f8;}
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;}
.header { width:960px; padding:0; margin:0 auto; border-bottom:1px dashed #c4c4c4; }
.header_blog { background:url(ultimateweb-images/header_blog_bg.gif) top center repeat-x; padding:0; margin:0;}
.header_blog h2 { font: normal 14px Arial, Helvetica, sans-serif; color:#6d6d6d; padding:20px 0 0 0; margin:0;}
.header_blog p { font: normal 11px Arial, Helvetica, sans-serif; color:#a2a2a2; padding:0 0 30px 0; margin:0;}
/* 2 */
.header_blog2 { width:960px; background: url(ultimateweb-images/header_block2_bg.gif) top center no-repeat; padding:0; margin:0 auto; height:96px;}
.header_blog2 h2 { font: normal 24px Arial, Helvetica, sans-serif; color:#fff; padding:30px 0 0 20px; margin:0; width:200px; float:left;}
.header_blog2 p { width:300px; float:right; font: normal 11px Arial, Helvetica, sans-serif; color:#afe5ec; padding:30px 0 0 0; margin:0;}
/* logo */
.logo {padding:0; margin:0; width:143px; float:left;}
/*menu*/
.menu { padding:40px 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:#9a9a9a; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { color:#4c909f;}
.menu ul li a.active { color:#4c909f;}
/* search */
.search { padding:20px 0 0 0; margin:0; width:260px; float:right;}
.search form { float:right; padding:0; margin:0;}
.search span { display:block; float:left; background: url(ultimateweb-images/search_bg.gif) left top no-repeat; width:146px; padding:1px 5px; height:31px;}
.search form .keywords { width:149px; line-height:14px; height:14px; float:left; background:none; border:0; padding:6px 2px; margin:0; font:normal 11px Arial, Helvetica, sans-serif; color:#acacac;}
.search form .button { float:left; margin:0; padding:0;}
/* body */
.body_resize { background: url(ultimateweb-images/body_bg.gif) top repeat-y; padding:0; width:960px; margin:0 auto;}
.body_resize_top { background:url(ultimateweb-images/body_top_bg.gif) top no-repeat;}
.body_resize_bottom { margin:0; width:960px; background:url(ultimateweb-images/body_bottom_bg.gif) bottom no-repeat; padding:10px 0px;}
/* BODY */
.body { padding:10px 0; margin:0 auto;}
.body h2 { font:normal 18px Arial, Helvetica, sans-serif; color:#2a2a2a; border-bottom:1px dashed #c4c4c4; padding:10px 5px; margin:0 0 10px 0;}
.body h3 { font: bold 12px Arial, Helvetica, sans-serif; color:#565656; padding:10px 5px; margin:0;}
.body p { font:normal 11px Arial, Helvetica, sans-serif; color:#6d6d6d; line-height:1.8em; padding:3px 5px; margin:0;}
.body p span { color:#4a8c9c; font: normal 14px Arial, Helvetica, sans-serif;}
.body a { color:#4a8c9c; text-decoration:none;}
.body img { margin:10px auto; padding:0;}
.body img.floated { float:right; margin:5px 5px; padding:0;}
.right { width:640px; margin:0; padding:10px 20px; float:right;}
.left {width:240px; margin:0; padding:10px 20px; float:left;}
.left_blog {width:200px; margin:0 4px; padding:0; float:left;}
.center { margin:0; padding:10px 20px;}
.center_resize { width:280px; float:left; padding:10px; margin:0;}
/*FBG*/
.FBG {margin:0; padding:0;}
.FBG_resize { width:970px; margin:0 auto; padding:20px 10px;}
.FBG_resize ul { list-style:none; margin:10px auto; padding:0;}
.FBG_resize li { padding:0; margin:0;}
.FBG_resize li a { font: normal 11px Arial, Helvetica, sans-serif; color:#989898; text-decoration:none;}
.FBG_resize li a:hover { color:#2a2a2a;}
.FBG_resize h2 { font: normal 14px Arial, Helvetica, sans-serif; color:#2a2a2a; padding:10px 0; margin:0; border-bottom:1px dashed #c4c4c4;}
.FBG_resize .left { width:120px; float:left; margin:10px 10px 10px 20px; padding:10px 5px;}
/********** 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:80px; display:block; padding:10px 0; color:#222222; font: normal 11px Arial, Helvetica, sans-serif; text-transform:capitalize; float:left; }
#contactform label span { color:#F00; }
#contactform input.text { width:500px; border:1px solid #eaeaea; margin:2px 0; padding:5px 2px; height:16px; background:#f8f8f8; float:left; }
#contactform textarea { width:500px; border:1px solid #eaeaea; margin:2px 0; padding:2px; background:#f8f8f8; float:left; }
#contactform li.buttons input { padding:3px 0 3px 0px; margin:10px 0 0 0; border:0; color:#FFF; float:left; }
/*************footer**********/
.footer_resize { width:960px; margin:0 auto; padding:0;}
.footer {padding:0; margin:0; background:url(ultimateweb-images/footer_bg.gif) top repeat-x;}
.footer img { float:left; margin:0; padding:0;}
.footer p { font:normal 11px Arial, Helvetica, sans-serif; color:#adadad;}
.footer a { font:bold 11px Arial, Helvetica, sans-serif; color:#8d8d8d; text-decoration:none; padding:5px; margin:0;}
.footer span { padding:10px 0 0 0; margin:0;}
.footer p.rightt { text-align:left; width:35%; margin:0; padding:20px 20px 0 0; float:right;}
p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { float:right; clear:both; border-top:1px solid #e1e1e1; width:100%; padding:0; margin:5px 0; background:none; line-height:0;}
/* Slider */
#slider { width:963px; padding:0 0 0 0; margin:0 auto;}
div#slideshow { float: left; width: 100%; height: 404px; }
.slider-item { width: 100% !important; height: 377px; }
.slider_content_inner img { border: none; }
.controls-center { width: 960px; margin-left: auto; margin-right: auto; }
#slider_controls { float: right; position: relative; background: url(ultimateweb-images/tabs_bg.gif) no-repeat top center; margin:0; z-index: 1000; width:960px; height:43px;}
#slider_controls ul { margin:0 auto; padding:15px 0 0 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('ultimateweb-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('ultimateweb-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="ultimateweb-images/logo.gif" width="143" height="97" border="0" alt="" /></a></div>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="active">About Us</a></li>
<li><a href="#">Gallery </a></li>
<li><a href="work.html">Work</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
<div class="header_blog">
<div class="resize">
<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="ultimateweb-images/search.gif" class="button" />
</form>
</div>
<h2>Your company's welcome message or slogan. Lorem ipsum dolor sit amet, consectur el.</h2>
<p>Donec metus lacus, porta id, auctor sit amet, aliquam eu, lacus. Quisque sagittis vulputate orci.</p>
</div>
<div class="header_blog2">
<h2>about us</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
Aenean commodo ligula eget dolor. Aenean massa. </p>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="body">
<div class="body_resize">
<div class="body_resize_top">
<div class="body_resize_bottom">
<div class="left">
<h2>News and Events</h2>
<p><a href="#">12 Dec 2015 | 0 comments</a><br />
<strong>Duis nec porttitor lorem</strong><br />
Mauris et nisi urna nonfaucibus lacus magna. </p>
<p><a href="#">18 Dec 2015 | 5 comments</a><br />
<strong>Aenean interdum</strong><br />
Vestibulum ante ipsum primis into faucibus orci luctus ultrices antene posuere.</p>
<p><a href="#">4 Jan 2015 | 2 comments</a><br />
<strong>Integer vitae nisl</strong><br />
Duis volutpat ligula laoreet orci lectus placerat <br />
Curabitur lectus malesuada pulvinar.</p>
<p><a href="#">More News </a><br />
</p>
</div>
<div class="right">
<h2>About us</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip exea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<h3>Our Mission</h3>
<p> <em>Sed tincidunt turpis posuere neque dictum quis faucibus felis tempus. Ut faucibus sem a nisi feugiat volutpat. Vivamus quis vulputate mauris. In suscipit sollicitudin mattis. Integer non nisl eu metus dapibus dapibus. </em></p>
<p>Sollicitudin vel sollicitudin qui facilisis non massaNam id jus nisl ullamcorper laoreet nec ut diam. <br />
Nam eget nisi dui, vita hendrerit risus. Nunc non mas neque, at rhoncus nulla.Vivamus in metus nisi, ut gravida dolor. Pellentesque fermentum aliquam interdum. Mauris ligula dui, gravida nec tempus mollis, tempor at odio. Ut porttitor, orci sagittis pretium varius, felis sapien pharetra eros, quis fermentum dui ligula eget justo. </p>
<h3>Our Philosophy</h3>
<p>Sollicitudin vel sollicitudin qui facilisis non massaNam id jus nisl ullamcorper laoreet nec ut diam. Nam eget nisi dui, vita hendrerit risus. Nunc non mas neque, at rhoncus nulla.Vivamus in metus nisi, ut gravida dolor. Pellentesque fermentum aliquam interdum. <br />
Mauris ligula dui, gravida nec tempus mollis, tempor at odio. Ut porttitor, orci sagittis pretium varius, felis sapien pharetra eros, quis fermentum dui ligula eget justo. </p>
</div>
<div class="clr"></div>
</div>
</div>
</div>
<div class="clr"></div>
</div>
<div class="FBG">
<div class="FBG_resize">
<div class="left">
<h2>About </h2>
<ul>
<li><a href="#">Overview</a></li>
<li> <a href="#">Another Link</a></li>
<li> <a href="#">Our Company</a></li>
<li> <a href="#">Our Staff</a></li>
<li> <a href="#">Mission </a></li>
<li> <a href="#">Statement</a></li>
</ul>
</div>
<div class="left">
<h2>Services</h2>
<ul>
<li><a href="#">First Service</a></li>
<li> <a href="#">Second Service</a></li>
<li> <a href="#">Another Service</a></li>
<li> <a href="#">A Fourth Service</a></li>
</ul>
</div>
<div class="left">
<h2>Media</h2>
<ul>
<li><a href="#">Image Gallery</a></li>
<li> <a href="#">Video Gallery</a></li>
<li> <a href="#">Audio Files</a></li>
<li> <a href="#">The Podcast</a></li>
</ul>
</div>
<div class="left">
<h2>Blog</h2>
<ul>
<li><a href="#">Category One</a></li>
<li> <a href="#">Category 2</a></li>
<li> <a href="#">Another Category</a></li>
<li> <a href="#">Category</a></li>
<li> <a href="#">A Fifth Category</a></li>
</ul>
</div>
<div class="left">
<h2>More Links</h2>
<ul>
<li><a href="#">Sign Up Now</a></li>
<li> <a href="#">We Are Hiring</a></li>
<li> <a href="#">Terms & Conditions</a></li>
<li> <a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="left">
<h2>Contact Us</h2>
<ul>
<li><a href="#">Email Sales</a></li>
<li> <a href="#">Email Support</a></li>
<li> <a href="#">Phone: 555-555-3211</a></li>
<li> <a href="#">Send Us Feedback</a></li>
</ul>
</div>
<div class="clr"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<div class="footer_resize"> <a href="#"><img src="ultimateweb-images/footer_logo.gif" alt="" width="270" height="60" border="0" /></a>
<p class="rightt"> Copyright YourSiteName.com. All Rights Reserved <br />
<a href="#">Home</a> | <a href="#">Contact</a> | <a href="#">RSS </a> (Blue) <a href="http://www.bluewebtemplates.com">Website Templates</a></p>
<div class="clr"></div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category