corporate-2.0
<!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>Corporate 2.0</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Design by ZhengDesign.com
http://www.zhengdesign.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/
* {
margin: 0;
padding: 0;
}
body {
margin: 30px 0px;
padding: 0px;
background: #36393E url(corporate-2.0-images/image01.jpg) repeat left top;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #767676;
}
p, ul, ol {
margin: 0px;
padding: 0px;
line-height: 23px;
}
h1, h2, h3 {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1em;
}
p, ul, ol {
margin-top: 1.5em;
}
ul, ol {
margin-left: 3em;
}
a {
color: #00BFF5;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
#header {
width: 900px;
height: 270px;
margin: 0 auto;
padding: 0px;
background: url(corporate-2.0-images/image05.jpg) no-repeat left top;
}
#navigation {
width: 900px;
height: 51px;
margin: 0px auto;
padding: 0px;
background: #212226;
}
#navigation ul {
margin: 0px;
list-style: none;
}
#navigation li {
display: inline;
}
#navigation a {
display: block;
float: left;
height: 49px;
background: url(corporate-2.0-images/image04.png) no-repeat right 18px;
margin-right: 2px;
padding: 12px 30px 0px 30px;
text-decoration: none;
color: #FFFFFF;
}
#navigation a:hover {
color: #00C6FF;
}
#navigation .first {
color: #00C6FF;
}
#logo {
width: 270px;
padding-top: 12px;
}
#logo h1 {
margin: 90px 0px 0px 0px;
padding: 0px;
letter-spacing: -3px;
text-align: center;
text-transform: uppercase;
font-weight: normal;
font-size: 34px;
color: #FFFFFF
}
#logo p {
margin: -8px;
padding: 0px 0px 0px 12px;
text-align: center;
text-transform: uppercase;
font-size: 11px;
font-weight: normal;
color: #FFFFFF
}
#logo span {
margin: 0px;
padding: 0px;
font-size: 16px;
}
#logo a {
text-decoration: none;
color: #FFFFFF
}
#splash {
width: 900px;
height: 300px;
margin: 0px auto;
padding: 30px 0px;
}
#content {
width: 900px;
margin: 0px auto;
padding: 40px 0px;
background: #FFFFFF;
}
#page {
width: 840px;
margin: 0px auto;
padding: 0px 30px;
}
#column1 {
float: left;
width: 520px;
padding-right: 30px;
}
#column1 h2 {
padding-bottom: 6px;
letter-spacing: -1px;
text-transform: capitalize;
font-size: 28px;
font-weight: normal;
color: #525250;
}
#column2 {
float: right;
width: 240px;
}
#column2 h2 {
padding: 6px 10px;
background: #00C6FF;
text-transform: capitalize;
font-size: 20px;
font-weight: normal;
color: #FFFFFF;
}
#column2 ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#column2 li {
margin: 0px 10px;
padding: 8px 0px;
background: url(corporate-2.0-images/image03.jpg) repeat-x left bottom;
}
#column2 li a {
padding-left: 15px;
text-decoration: none;
background: url(corporate-2.0-images/image02.jpg) no-repeat left 6px;
}
.separator {
}
.more {
padding: 3px 10px;
background: #474747;
text-decoration: none;
font-size: 10px;
color: #FFFFFF;
}
#footer {
width: 900px;
margin: 0px auto;
padding: 5px 0px;
}
#footer p {
text-transform: uppercase;
font-size: 10px;
color: #90908E;
}
#footer .links {
text-decoration: none;
color: #FFFFFF;
}
.image-left {
float: left;
padding: 0px 20px 0px 0px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Corporate 2.0</h1>
<p><a href="#">Free CSS Template</a></p>
</div>
</div>
<div id="navigation">
<ul>
<li><a href="#" class="first">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="page">
<div id="column1">
<div class="box1">
<h2>Welcome to my website </h2>
<p><strong><img src="corporate-2.0-images/image06.jpg" alt="" width="120" height="120" class="image-left" />This template </strong> is a free CSS web template. Thanks goes to <a href="#">Stock Exchange</a> for the free photo I used in this template. This design uses pure CSS and no tables for layout and is released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines License</a>, which basically says that:</p>
<ul>
<li>You <strong>CAN</strong> use this design for both personal or commercial purposes free of charge.</li>
<li>You <strong>CAN</strong> copy, distribute and transmit this template.</li>
<li>You <strong>CAN</strong> modify this template however you want.</li>
</ul>
<p>Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. </p>
</div>
</div>
<div id="column2">
<h2>Latest News</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>© Copyright 2009. All Rights Reserved | Design by <a href="http://www.zhengdesign.com" class="links">zhengdesign.com</a> </p>
</div>
</body>
</html>
Related examples in the same category