corporattica
<!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">
<head>
<title>Corporattica | About</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Arial.font.js"></script>
<script type="text/javascript">Cufon.replace('h1,h2,h3,h4,h5,#menu,.blog-date');</script>
<script type="text/javascript" src="js/fancyzoom.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('div.photo a').fancyZoom({
scaleImg: true,
closeOnClick: true
});
});
</script>
<style type='text/css'>
@charset "utf-8";
/* reset */
* {
margin:0;
padding:0;
outline:0;
}
img {
border:0;
}
.clear {
clear:both;
}
.line {
clear:both;
padding:15px 0 0;
margin:0 0 25px;
border-bottom:1px solid #ddd;
}
body {
font:.8em Arial, Verdana, Tahoma, Sans-Serif;
background:#f4f4f4 url(corporattica-images/bgtile.jpg) repeat-x;
color:#555;
}
/* typography and links */
a {
text-decoration:none;
color:#333;
}
p {
margin:0 0 17px;
line-height:1.6em;
}
/* headings */
h1, h2, h3, h4, h5 {
font-weight:normal;
}
h1 {
float:left;
font-size:2.1em;
color:#fff;
letter-spacing:-1.4px;
margin:0 0 30px 0;
padding:34px 0 0 10px;
}
h1 a {
color:#fff;
}
h2 {
margin:0 0 15px;
font-size:1.9em;
color:#000;
}
h2.inner {
border-bottom:1px solid #ddd;
margin:0 0 25px;
padding:0 0 10px;
}
h3 {
margin:0 0 7px;
font-size:1.3em;
clear:both;
color:#000;
line-height:1.3em;
}
h4 {
margin:0 0 10px;
font-size:1.2em;
color:#000;
}
h5 {
font-size:1em;
color:#eee;
margin:0 0 14px;
}
#bg {
background:url(corporattica-images/bg.jpg) no-repeat center top;
}
/* content holder */
.wrap {
margin:0 auto;
width:960px;
}
/* menu */
#mainmenu {
float:right;
padding:39px 0 0;
}
#menu ul {
float:right;
}
#menu li {
display:inline;
float:left;
margin:0 0 0 18px;
}
#menu li a {
display:block;
color:#999;
padding:7px;
font-size:1.1em;
border:1px solid transparent;
}
#menu a:hover, #menu li.current a {
border-color:#444;
}
#menu li ul {
top:98px;
background:url(corporattica-images/dot.png);
padding:3px;
font-size:.92em;
position:absolute;
display:none;
z-index:100;
}
#menu li ul li {
float:none;
display:inline;
margin:0;
padding:0;
clear:left;
}
#menu li ul li a {
color:#fff;
margin:4px;
white-space:nowrap;
padding:8px;
}
#menu li ul li a:hover {
background:#2C2D2F;
border-color:#2C2D2F;
}
/* pitch slideshow */
#pitch {
clear:both;
height:296px;
background:url(corporattica-images/shadow.png) no-repeat left bottom;
margin:0 0 25px;
}
#slideshow {
position:relative;
height:310px;
}
#slideshow img {
float:left;
}
#slideshow div {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow div.active {
z-index:10;
}
#slideshow div.last-active {
z-index:9;
}
#zoom {
z-index:11;
}
/* pitch overlay */
.overlay {
clear:both;
float:left;
z-index:100;
position:relative;
margin:100px 0 0;
}
.overlay h2 {
color:#fff;
font-size:2em;
background:url(corporattica-images/dot.png);
padding:16px;
margin:0;
float:left;
width:300px;
}
.overlay p {
clear:both;
background:#fff;
padding:16px;
width:300px;
}
#slideshow:hover .arrow {
background:url(corporattica-images/dot.png);
}
.arrow {
float:right;
position:relative;
width:65px;
height:63px;
margin:-180px 0 0;
z-index:100;
}
.arrow a {
float:left;
background:url(corporattica-images/pitcharrow.gif) no-repeat center center;
width:15px;
height:24px;
padding:19px 25px;
}
/* inner pitch */
#inner-pitch {
clear:both;
}
#inner-pitch .overlay {
margin:0;
width:920px;
}
/* main content */
#main {
clear:left;
float:left;
width:680px;
border-right:1px dotted #ddd;
padding:0 30px 0 0;
margin:0 0 30px;
}
#intro {
padding:0 0 20px;
margin:0 0 25px;
border-bottom:1px dotted #ddd;
}
/* holder for page content */
#page {
}
.justify {
text-align:justify;
}
/* images align */
.left {
float:left;
margin:0 15px 5px 0;
}
.right {
float:right;
margin:0 0 5px 15px;
}
/* tables */
.table {
border-collapse:collapse;
width:100%;
margin:0 0 30px;
}
.table td {
padding:10px;
border-bottom:1px solid #ddd;
}
.table thead td {
font-weight:bold;
border-bottom:3px double #ddd;
border-top:1px solid #ddd;
background:#fff;
}
.table .odd td {
background:#fff;
}
/* blog posts */
.blog-post {
border-bottom:1px solid #ddd;
margin:0 0 30px;
}
.blog-date {
float:left;
width:40px;
text-align:right;
font-size:.9em;
padding:4px 0 0;
}
.blog-date span {
font-size:1.8em;
}
.blog-body {
float:right;
width:590px;
border-left:1px solid #ddd;
padding:0 0 0 22px;
}
/* lists */
#page ul, #page ol {
margin:0 0 25px 27px;
}
#page li {
padding:6px 0;
list-style:square;
}
/* boxes */
.half, .third {
float:left;
width:292px;
background:#fff;
padding:15px;
margin:0 30px 30px 0;
}
.third {
width:175px;
}
.last {
margin-right:0;
}
/* home page bits */
#bits {
clear:both;
margin:0 0 25px;
}
.bit {
float:left;
width:203px;
padding:0 35px 0 0;
}
.bit h4 {
margin:0 0 18px;
}
.bit img {
margin:0 0 8px;
}
.bit p {
font-size:.9em;
}
.bit.last {
padding-right:0;
}
.more {
margin:0;
}
/* sidebar */
#side {
float:right;
width:220px;
font-size:.9em;
}
#side h4 {
margin:0 0 23px;
font-size:1.3em;
}
.news {
border-bottom:1px dotted #ddd;
margin:0 0 11px;
}
.news h5 {
margin:0 0 5px;
font-size:1.2em;
}
.news p {
margin:0 0 11px;
}
#quote {
margin:0 0 30px;
padding:20px 0 0 0;
font-size:.94em;
}
/* side menu */
.side-menu li {
list-style:none;
padding:10px 4px;
border-bottom:1px solid #ddd;
}
/* forms */
fieldset {
border:0;
}
label {
display:block;
color:#444;
padding:0 0 2px;
}
input.text, textarea.text {
width:250px;
padding:5px;
border:0;
border:1px solid #ddd;
margin:0 0 3px;
}
textarea.text {
width:400px;
height:120px;
}
input.submit {
color:#fff;
padding:7px 10px;
border:0;
font-weight:bold;
background:#777;
}
/* footer */
#footer {
clear:both;
color:#999;
background:url(corporattica-images/footertile.jpg) repeat-x;
font-size:.9em;
}
#footerbg {
padding:35px 0 15px 0;
background:url(corporattica-images/footer.jpg) no-repeat center top;
}
#footer p {
margin:0 0 12px;
padding:6px 0;
}
#footer_menu {
float:right;
padding:4px 0 0;
}
#footer a {
color:#999;
margin:0;
padding:6px 0;
}
#fleft {
clear:both;
padding:25px 0 0;
}
#copy {
float:left;
color:#777;
}
</style>
</head>
<body>
<!-- START PAGE SOURCE -->
<div id="bg">
<div class="wrap">
<h1><a href="index.html">corporattica</a></h1>
<div id="mainmenu">
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="inner.html">Drop-Down Menu</a>
<ul>
<li><a href="#">Link Example</a></li>
<li><a href="#">Link Example</a></li>
<li><a href="#">Link Example</a></li>
</ul>
</li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a class="current" href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
<div id="pitch">
<div id="slideshow">
<div class="active"> <img src="corporattica-images/pitch/pitch1.jpg" alt="" />
<div class="overlay transparent">
<h2>Professional Approach</h2>
<p>Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
</div>
<p class="arrow"><a href="#"></a></p>
</div>
<div> <img src="corporattica-images/pitch/pitch2.jpg" alt="" />
<div class="overlay transparent">
<h2>Precise Methods</h2>
<p>Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
</div>
<p class="arrow"><a href="#"></a></p>
</div>
<div> <img src="corporattica-images/pitch/pitch3.jpg" alt="" />
<div class="overlay transparent">
<h2>Mesurable Results</h2>
<p>Aliquam erat volutpat. Donec a sem consequat tortor posuere dignissim sit amet at ipsum.</p>
</div>
<p class="arrow"><a href="#"></a></p>
</div>
</div>
</div>
<div id="main">
<h2 class="inner">About Us</h2>
<img src="corporattica-images/thumb1.png" alt="" class="left" />
<p>Nunc eget nunc libero. Nunc commodo euismod massa quis vestibulum. Proin mi nibh, dignissim a pellentesque at, ultricies sit amet sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lorem eu libero laoreet facilisis. Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue.</p>
<h3>Subtitle</h3>
<img src="corporattica-images/thumb2.png" alt="" class="right" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lorem eu libero laoreet facilisis. Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue.</p>
<h4>Subtitle</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel lorem eu libero laoreet facilisis. Aenean placerat, ligula quis placerat iaculis, mi magna luctus nibh, adipiscing pretium erat neque vitae augue. Quisque consectetur odio ut sem semper commodo. Maecenas iaculis leo a ligula euismod condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim risus, rhoncus sit amet ultricies vel, aliquet ut dolor. Duis iaculis urna vel massa ultricies suscipit. Phasellus diam sapien, fermentum a eleifend non, luctus non augue.</p>
</div>
<div id="side">
<h4>Latest News</h4>
<div class="news">
<h5><a href="#">News title</a></h5>
<p>Nunc commodo euismod massa quis vestibulum, proin mi nibh, dignissim.</p>
</div>
<div class="news">
<h5><a href="#">News title</a></h5>
<p>Nunc commodo euismod massa quis vestibulum, proin mi nibh, dignissim.</p>
</div>
<div class="news">
<h5><a href="#">News title</a></h5>
<p>Nunc commodo euismod massa quis vestibulum, proin mi nibh, dignissim.</p>
</div>
<div id="quote">
<h4>Request a Free Quote</h4>
<p>Phasellus diam sapien, fermentum a eleifend non, luctus non augue.</p>
</div>
</div>
</div>
<div id="footer">
<div id="footerbg">
<div class="wrap">
<p id="copy">Copyright © 2010 <a href="#">Domain Name</a> - All Rights Reserved</p>
<p id="footer_menu"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.solucija.com">Solucija</a></p>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- END PAGE SOURCE -->
</body>
</html>
Related examples in the same category