design-company
<!DOCTYPE html>
<html lang="en">
<head>
<title>Design Company | About</title>
<meta charset="utf-8">
<style type='text/css'>
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {
display:block;
}
mark, rp, rt, ruby, summary, time {
display:inline;
}
body {
background:#212222;
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
line-height:1.125em;
color:#242424;
}
html {
min-width:1000px;
}
html, body {
height:100%;
}
.container {
margin:0 auto;
position:relative;
width:1000px;
font-size:.8125em;
}
header {
height:72px;
overflow:hidden;
background:url(design-company-images/header-bg.gif) 0 0 repeat-x;
}
#gallery {
height:496px;
overflow:hidden;
background:url(design-company-images/gallerry-bg.gif) 0 0 repeat-x;
}
#content {
float:left;
width:572px;
}
aside {
float:left;
width:302px;
margin-right:52px;
}
.fleft {
float:left;
}
.fright {
float:right;
}
.clear {
clear:both;
}
.col-1, .col-2, .col-3 {
float:left;
}
.alignright {
text-align:right;
}
.aligncenter {
text-align:center;
}
.wrapper {
width:100%;
overflow:hidden;
}
.inside {
padding:32px 37px 50px 37px;
}
input, select, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
vertical-align:middle;
font-weight:normal;
}
figure {
margin-bottom:18px;
}
.img-indent {
margin:0 20px 0 0;
float:left;
}
.img-box {
width:100%;
overflow:hidden;
padding-bottom:15px;
}
.img-box figure {
float:left;
margin:0 20px 0 0;
padding:0;
}
.extra-wrap {
overflow:hidden;
}
p {
margin-bottom:18px;
}
.p1 {
margin-bottom:9px;
}
.p2 {
margin-bottom:18px;
}
.p3 {
margin-bottom:27px;
}
a {
color:#f27f02;
outline:none;
}
a:hover {
text-decoration:none;
}
h1 {
font-size:34px;
line-height:1.2em;
color:#fff;
font-weight:normal;
background:url(design-company-images/logo.jpg) no-repeat 0 0;
padding:6px 0 8px 69px;
position:absolute;
left:39px;
top:6px;
}
h1 a {
color:#fff;
text-decoration:none;
}
h2 {
font-size:30px;
line-height:1.2em;
font-weight:normal;
color:#212222;
margin-bottom:22px;
}
h2 span {
color:#8a8a8a;
}
h3 {
font-size:1em;
margin-bottom:6px;
}
h3 a {
color:#242424;
}
h3 a:hover {
text-shadow:1px 1px 1px #888;
}
.main-box {
border-top:5px solid #eaeaea;
background:#fff;
width:100%;
}
.contacts {
padding-bottom:20px;
}
.contacts li {
width:100%;
overflow:hidden;
}
.contacts li strong {
float:left;
width:95px;
}
.list1 {
margin-left:12px;
padding-bottom:18px;
}
.list1 li {
background:url(design-company-images/arrow1.gif) no-repeat 0 6px;
padding:0 0 0 12px;
}
header nav {
float:right;
}
header nav ul li {
float:left;
}
header nav ul li a {
font-size:22px;
color:#fff;
height:67px;
line-height:67px;
text-decoration:none;
width:101px;
text-align:center;
float:left;
background:#433b8f;
background-image:gradient(top, #383282, #484095);
background-image:-moz-linear-gradient(top, #383282, #484095);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #383282), color-stop(1, #484095));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#383282', EndColorStr='#484095')";
}
header nav ul li a.current, header nav ul li a:hover {
padding-bottom:5px;
}
header nav ul li:nth-of-type(2) a {
background:#0184cd;
background-image:-moz-linear-gradient(top, #017bc8, #018ed3);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #017bc8), color-stop(1, #018ed3));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#017bc8', EndColorStr='#018ed3')";
}
header nav ul li:nth-of-type(3) a {
background:#7cbc19;
background-image:-moz-linear-gradient(top, #73b515, #86c31d);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #73b515), color-stop(1, #86c31d));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#73b515', EndColorStr='#86c31d')";
}
header nav ul li:nth-of-type(4) a {
background:#ffbc00;
background-image:-moz-linear-gradient(top, #ffb500, #ffc300);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ffb500), color-stop(1, #ffc300));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffb500', EndColorStr='#ffc300')";
}
header nav ul li:nth-of-type(5) a {
background:#f07502;
background-image:-moz-linear-gradient(top, #ee6c01, #f27f02);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #ee6c01), color-stop(1, #f27f02));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee6c01', EndColorStr='#f27f02')";
}
header nav ul li:nth-of-type(6) a {
background:#d00110;
background-image:-moz-linear-gradient(top, #d00110, #da0116);
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #d00110), color-stop(1, #da0116));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116');
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d00110', EndColorStr='#da0116')";
}
.roundabout-holder {
width:850px;
height:496px;
margin:0 auto;
}
.roundabout-moveable-item {
width:646px;
height:416px;
cursor:pointer;
border:3px solid #ccc;
border:3px solid rgba(0, 0, 0, 0.08);
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
.roundabout-moveable-item img {
width:100%;
}
.roundabout-in-focus {
border:3px solid rgba(0, 0, 0, 0.2);
}
#content {
}
#content img, aside img {
border:3px solid #ebebeb;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#content img:hover {
border-color:#bbb;
}
.news li {
overflow:hidden;
position:relative;
padding:0 0 26px 84px;
}
.news li:last-child {
padding-bottom:0;
}
.news li figure {
width:59px;
height:59px;
background:url(design-company-images/date-bg1.gif) no-repeat 0 0;
position:absolute;
left:0;
top:0;
text-align:center;
border:3px solid #ebebeb;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
font-size:10px;
color:#fff;
text-transform:uppercase;
}
.news li figure strong {
display:block;
font-size:30px;
line-height:1.2em;
margin-bottom:-7px;
padding-top:4px;
}
.news li:nth-of-type(4n+2) figure {
background:url(design-company-images/date-bg2.gif) no-repeat 0 0;
}
.news li:nth-of-type(4n+3) figure {
background:url(design-company-images/date-bg3.gif) no-repeat 0 0;
}
.news li:nth-of-type(4n+4) figure {
background:url(design-company-images/date-bg4.gif) no-repeat 0 0;
}
.team-list li {
width:100%;
overflow:hidden;
padding-bottom:43px;
}
.team-list li:last-child {
padding-bottom:0;
}
.team-list li figure {
float:left;
margin:0 20px 0 0;
padding:0;
}
#loopedSlider .wrap {
width:295px;
height:295px;
overflow:hidden;
position:relative;
}
#loopedSlider .slides {
position:absolute;
top:0;
left:0;
}
#loopedSlider .slides div {
position:absolute;
top:0;
width:295px;
display:none;
}
#loopedSlider {
width:295px;
position:relative;
clear:both;
}
#loopedSlider .nav-controls {
width:100%;
overflow:hidden;
padding-top:10px;
}
#loopedSlider li {
display:inline;
}
#loopedSlider li a.previous {
float:left;
}
#loopedSlider li a.next {
float:right;
}
#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:110px;
line-height:18px;
padding-bottom:6px;
font-weight:bold;
}
#contacts-form input {
width:205px;
padding:1px 0 1px 3px;
background:none;
border:1px solid #e5e5e5;
color:#616161;
float:left;
}
#contacts-form input:invalid {
border-color:red;
}
#contacts-form textarea {
width:450px;
height:215px;
padding:1px 0 1px 3px;
background:none;
border:1px solid #e5e5e5;
color:#616161;
margin-bottom:12px;
overflow:auto;
float:left;
}
#contacts-form div:last-child {
padding-left:110px;
}
footer {
padding:20px 0 22px 0;
border-top:5px solid #eee;
color:#ccc;
}
.footerlink {
width:100%;
overflow:hidden;
}
.footerlink p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
color:#ccc;
}
.footerlink a {
color:#ccc;
font-weight:normal;
margin:0;
padding:0;
border:none;
text-decoration:underline;
background-color:transparent;
}
.footerlink a:hover {
color:#ccc;
background-color:transparent;
text-decoration:none;
}
.footerlink .lf {
float:left;
margin-left:40px;
}
.footerlink .rf {
float:right;
margin-right:40px;
}
a {
outline:none;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
<script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/roundabout.js"></script>
<script type="text/javascript" src="js/roundabout_shapes.js"></script>
<script type="text/javascript" src="js/gallery_init.js"></script>
<!--[if lt IE 7]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<script type="text/javascript" src="js/IE9.js"></script>
<![endif]-->
</head>
<body>
<!-- START PAGE SOURCE -->
<header>
<div class="container">
<h1><a href="#">Design Company</a></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html" class="current">About</a></li>
<li><a href="privacy.html">Privacy</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contacts.html">Contact</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
</nav>
</div>
</header>
<section id="gallery">
<div class="container">
<ul id="myRoundabout">
<li><img src="design-company-images/slide3.jpg" alt=""></li>
<li><img src="design-company-images/slide2.jpg" alt=""></li>
<li><img src="design-company-images/slide5.jpg" alt=""></li>
<li><img src="design-company-images/slide1.jpg" alt=""></li>
<li><img src="design-company-images/slide4.jpg" alt=""></li>
</ul>
</div>
</section>
<div class="main-box">
<div class="container">
<div class="inside">
<div class="wrapper">
<aside>
<h2>About <span>Your Website</span></h2>
<div class="img-box">
<figure><img src="design-company-images/img1.jpg" alt=""></figure>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam. </div>
<p>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.</p>
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. 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. </aside>
<section id="content">
<article>
<h2>About <span>Your Team</span></h2>
<ul class="team-list">
<li>
<figure><img src="design-company-images/img2.jpg" alt=""></figure>
<h3><a href="#">Team Member One</a></h3>
Accurabitae tellus sem sagittis ac cum elit tempus quis ris gravida. Eleritsemper tincidunt quis id nam lacingillamcorper hendimenteger intesque enim integet sed. Netusorci ut id orci accum at a curabitae <a href="#">...</a> </li>
<li>
<figure><img src="design-company-images/img3.jpg" alt=""></figure>
<h3><a href="#">Another Team Member</a></h3>
Accurabitae tellus sem sagittis ac cum elit tempus quis ris gravida. Eleritsemper tincidunt quis id nam lacingillamcorper hendimenteger intesque enim integet sed. Netusorci ut id orci accum at a curabitae <a href="#">...</a> </li>
<li>
<figure><img src="design-company-images/img4.jpg" alt=""></figure>
<h3><a href="#">Another Team Member</a></h3>
Accurabitae tellus sem sagittis ac cum elit tempus quis ris gravida. Eleritsemper tincidunt quis id nam lacingillamcorper hendimenteger intesque enim integet sed. Netusorci ut id orci accum at a curabitae <a href="#">...</a> </li>
</ul>
</article>
</section>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="footerlink">
<p class="lf">Copyright © 2010 <a href="#">Domain Name</a> - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.templatemonster.com/">TemplateMonster</a></p>
<div style="clear:both;"></div>
</div>
</div>
</footer>
<script type="text/javascript"> Cufon.now(); </script>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category