it-technologies
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>IT Technologies | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* TAGS */
* {margin:0;padding:0}
html {min-width:920px}
body {background:#2f373a;font-family:Arial,Helvetica,sans-serif;font-size:100%;line-height:1em;color:#4e4e4e;min-width:920px;border-top:10px solid #0c0e0e}
object {vertical-align:top;outline:none}
input, textarea, select {font-family:Arial,Helvetica,sans-serif;font-size:1em;vertical-align:middle;font-weight:normal}
fieldset {border:0}
p {margin:0;padding:0}
img {border:0;vertical-align:top;text-align:left}
ul, ol {list-style:none}
/* GLOBAL */
#header, #content, #footer {font-size:0.875em;width:920px;margin:0 auto}
.col-1, .col-2, .col-3 {float:left}
/* ALIGMENT */
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.alignright {text-align:right}
.aligncenter {text-align:center}
.wrapper {width:100%;overflow:hidden}
.container {width:100%}
/* TAILING */
.tail-top {background:url(it-technologies-images/tail-top.gif) left top repeat-x #fff}
.body-bg {background:url(it-technologies-images/body-bg.jpg) no-repeat center top}
.tail-bottom {background:url(it-technologies-images/tail-bottom.gif) left bottom repeat-x}
/* FORMS */
#search-form {padding-top:39px}
#search-form span {width:230px;height:52px;display:block;float:left;background:url(it-technologies-images/input-bg.gif) no-repeat left top}
#search-form input {background:none;border:0;color:#000;margin-left:20px;line-height:1em;vertical-align:top;width:185px;padding:18px 0 10px 0}
#search-form a {float:left}
#contacts-form {clear:right;width:100%;overflow:hidden}
#contacts-form fieldset {border:none;float:left}
#contacts-form .field {clear:both}
#contacts-form label {float:left;width:106px;line-height:18px;padding-bottom:8px}
#contacts-form input {width:246px;padding:1px 0 1px 3px;border:1px solid #e2e2e2;color:#70635b;background:#fff}
#contacts-form textarea {width:443px;height:403px;padding:1px 0 1px 3px;border:1px solid #e2e2e2;color:#4e4e4e;background:#fff;margin-bottom:15px;overflow:auto}
/* LISTS */
.list {margin-bottom:-11px}
.list li {padding:0 0 11px 98px;min-height:74px;height:auto!important;height:74px;background:url(it-technologies-images/icon.png) no-repeat left top;line-height:1.43em;position:relative}
.list li strong {display:block;font-size:.86em;padding-bottom:5px}
.list li a {color:#4e4e4e;text-decoration:none}
.list li a:hover {text-decoration:underline}
.list1 {margin-bottom:-20px}
.list1 li {padding:0 0 20px 0;line-height:1.43em;width:100%;overflow:hidden;vertical-align:top}
.list1 li img {float:left;margin:5px 21px 0 0}
.list1 li strong {display:block;font-size:.86em;padding-bottom:5px}
.list1 li a {color:#4e4e4e;text-decoration:none}
.list1 li a:hover {text-decoration:underline}
.list2 {padding-bottom:15px}
.list2 li {padding:0 0 4px 12px;background:url(it-technologies-images/arrow.gif) no-repeat left 5px}
.list2 li ul {padding-top:4px;margin-bottom:-4px}
/* OTHER */
p {margin-bottom:20px;line-height:1.43em}
.p0 {margin-bottom:0}
/* TXT, LINKS, LINES, TITLES */
a {color:#20b7c9;outline:none}
a:hover {text-decoration:none}
h3 {font-size:40px;line-height:1.2em;font-weight:normal;color:#000;letter-spacing:-2px;margin-bottom:12px}
h4 {font-size:30px;color:#000;letter-spacing:-2px;margin-bottom:16px}
/* HEADER */
#header {height:478px;background:url(it-technologies-images/header-bg.jpg) no-repeat left bottom;position:relative;z-index:2}
#header .extra {position:absolute;right:-24px;top:113px}
#header .row-1 {height:117px;width:100%;overflow:hidden}
#header .row-1 .fleft {padding:24px 0 0 26px}
#header .row-1 .fright {padding:27px 15px 0 0}
#header .row-2 {height:68px}
#header .row-2 ul {width:100%;overflow:hidden;position:relative;z-index:2}
#header .row-2 ul li {float:left;text-transform:uppercase;margin-right:4px}
#header .row-2 ul li a {color:#fff;text-decoration:none;display:block;text-align:center;padding:28px 0 24px 0;background-repeat:no-repeat;background-position:0 0}
/* button1 */
#header .row-2 ul li.m1 a {width:89px;background:url(it-technologies-images/m1.png)}
#header .row-2 ul li.m1 a:hover,
#header .row-2 ul li.m1 a.active {background:url(it-technologies-images/m1-act.png)}
/* button2 */
#header .row-2 ul li.m2 a {width:95px;background:url(it-technologies-images/m2.png)}
#header .row-2 ul li.m2 a:hover,
#header .row-2 ul li.m2 a.active {background:url(it-technologies-images/m2-act.png)}
/* button3 */
#header .row-2 ul li.m3 a {width:117px;background:url(it-technologies-images/m3.png)}
#header .row-2 ul li.m3 a:hover,
#header .row-2 ul li.m3 a.active {background:url(it-technologies-images/m3-act.png)}
/* button4 */
#header .row-2 ul li.m4 a {width:114px;background:url(it-technologies-images/m4.png)}
#header .row-2 ul li.m4 a:hover,
#header .row-2 ul li.m4 a.active {background:url(it-technologies-images/m4-act.png)}
/* button5 */
#header .row-2 ul li.m5 a {width:123px;background:url(it-technologies-images/m5.png)}
#header .row-2 ul li.m5 a:hover,
#header .row-2 ul li.m5 a.active {background:url(it-technologies-images/m5-act.png)}
/* button6 */
#header .row-2 ul li.m6 a {width:105px;background:url(it-technologies-images/m6.png)}
#header .row-2 ul li.m6 a:hover, #header .row-2 ul li.m6 a.active {background:url(it-technologies-images/m6-act.png)}
#header .row-3 {padding:62px 0 0 77px}
/* CONTENT */
#content {background:url(it-technologies-images/cont-tail.png) repeat-y left top;position:relative}
#content .tail-right {background:url(it-technologies-images/cont-tail-right.gif) repeat-y right top}
#content .col-1 {width:630px}
#content .col-2 {width:290px;padding:94px 0 170px 0}
#content .col-2 ul {padding:0 43px 0 41px}
#content .col-2 ul li {line-height:1.43em;padding-bottom:18px}
#content .col-2 ul li strong {display:block;font-size:.86em;padding-bottom:5px}
#content .col-2 ul li a {text-decoration:none}
#content .col-2 ul li a:hover {color:#000}
.inner_copy, .inner_copy a {border:0;float:right;background:#f00;color:#f00;width:35%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
#content .indent {padding:33px 33px 50px 37px}
#content .indent1 {padding-bottom:33px}
/* FOOTER */
#footer {height:110px;color:#fff}
#footer .indent {padding:47px 34px 0 37px}
#footer a {color:#fff;text-decoration:none}
#footer a:hover {text-decoration:underline}
#footer img {position:relative;top:-4px}
</style>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_300.font.js" type="text/javascript"></script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">ie_png.fix('.png, #header .row-2 ul li a, #content, .list li');</script>
<![endif]-->
</head>
<body id="page2">
<div class="tail-top">
<div class="tail-bottom">
<div class="body-bg">
<!-- HEADER -->
<div id="header">
<div class="extra"><img src="it-technologies-images/header-img.jpg" alt="" /></div>
<div class="row-1">
<div class="fleft"><a href="#"><img src="it-technologies-images/logo.gif" alt="" /></a></div>
<div class="fright"><img src="it-technologies-images/phone.gif" alt="" /></div>
</div>
<div class="row-2">
<ul>
<li class="m1"><a href="index.html">Home</a></li>
<li class="m2"><a href="about-us.html" class="active">About</a></li>
<li class="m3"><a href="services.html">Services</a></li>
<li class="m4"><a href="support.html">Support</a></li>
<li class="m5"><a href="contact-us.html">contacts</a></li>
<li class="m6"><a href="sitemap.html">Sitemap</a></li>
</ul>
</div>
<div class="row-3"><img src="it-technologies-images/slogan.gif" alt="" />
<form action="#" method="post" id="search-form">
<fieldset>
<div><span>
<input type="text" value="Enter keyword here" onfocus="if(this.value=='Enter keyword here'){this.value=''}" onblur="if(this.value==''){this.value='Enter keyword here'}" />
</span><a href="#"><img src="it-technologies-images/button.gif" alt="" /></a></div>
</fieldset>
</form>
</div>
</div>
<!-- CONTENT -->
<div id="content">
<div class="inner_copy">More <a href="#">Website Templates</a> @ Templates.com!</div>
<div class="tail-right">
<div class="wrapper">
<div class="col-1">
<div class="indent">
<div class="indent1">
<h3>About Your Website</h3>
<p class="p0">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p>
</div>
<h4>About Your Team</h4>
<ul class="list1">
<li><img src="it-technologies-images/2page-img1.jpg" alt="" /><strong><a href="#">Team Member One</a></strong>He is supposed to be the most important member of your team. Usually this is the person who has started the website. Maybe it is worth to write why he made has such a decision.</li>
<li><img src="it-technologies-images/2page-img2.jpg" alt="" /><strong><a href="#">Another Team Member</a></strong>We are completly lost on what he's responsible for, but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
<li><img src="it-technologies-images/2page-img3.jpg" alt="" /><strong><a href="#">Another Team Member</a></strong>We are completly lost on what he's responsible for, but we hope that you know it ;) We also hope that you will tell it to the rest of the world including us by placing some real text here.</li>
</ul>
</div>
</div>
<div class="col-2">
<ul>
<li><strong><a href="#">February 15, 2010</a></strong>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</li>
<li><strong><a href="#">January 31, 2010</a></strong>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</li>
<li><strong><a href="#">January 22, 2010</a></strong>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugitd quia.</li>
<li><strong><a href="#">January 14, 2010</a></strong>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div class="indent">
<div class="fleft">Designed by: <a href="http://www.templates.com"><img alt="" src="it-technologies-images/templates-logo.gif" /></a> Your <a href="http://russian.templates.com/product/3d-models/">3D Models</a> Marketplace</div>
<div class="fright">Copyright - Type in your name here</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>
Related examples in the same category