communication-1.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>Communicaton 1.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;
}
html, body {
height: 100%;
}
body {
margin: 0;
background: #1B2430 url(communication-1.0-images/image01.jpg) repeat left top;
line-height: 20px;
text-align: justify;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
h1, h2, h3 {
margin-top: 1.5em;
}
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;
}
blockquote {
margin-left: 3em;
margin-right: 3em;
}
a {
color: #B6D434;
}
#wrapper {
width: 920px;
height: 100%;
min-height: 100%;
margin: 0 auto;
padding: 0px;
background: url(communication-1.0-images/image02.jpg) repeat-y left top;
}
html>body #wrapper {
height: auto;
}
#logo {
width: 920px;
height: 70px;
margin: 0 auto;
padding-top: 50px;
padding-left: 50px;
background: url(communication-1.0-images/image03.jpg) repeat-y left top;
}
#logo h1 {
margin: 0px;
padding: 0px;
letter-spacing: -3px;
text-transform: uppercase;
font-weight: normal;
font-size: 36px;
color: #DCECFB
}
#logo p {
margin: 0px;
padding: 5px 0px 0px 2px;
text-transform: uppercase;
font-size: 12px;
font-weight: normal;
color: #000000;
}
#logo span {
margin: 0px;
padding: 0px;
font-size: 16px;
}
#header {
width: 920px;
height: 270px;
margin: 0 auto;
background: url(communication-1.0-images/image05.jpg) no-repeat left top;
}
#menu {
width: 920px;
height: 90px;
margin: 0 auto;
background: url(communication-1.0-images/image04.jpg) no-repeat left top;
color: #FFFFFF;
}
#menu ul {
margin: 0px;
padding: 20px 55px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
margin-right: 3px;
padding: 6px 30px 6px 30px;
text-decoration: none;
color: #FFFFFF;
}
#menu .active {
background: #B6D434;
color: #000000;
}
#menu a:hover {
background: #B6D434;
color: #000000;
}
#page {
width: 920px;
margin: 0 auto;
padding: 20px 0px;
background: url(communication-1.0-images/image06.jpg) repeat-y left top;
}
#content {
float: left;
width: 476px;
padding: 0px 40px 0px 70px;
background: url(communication-1.0-images/image08.jpg) repeat-y right top;
}
#content h2 {
letter-spacing: -1px;
text-transform: uppercase;
font-weight: normal;
font-size: 24px;
color: #B6D434;
}
#content .byline {
margin: 0px;
padding: 0px;
letter-spacing: -1px;
text-transform: uppercase;
font-size: 24px;
}
#sidebar {
float: right;
width: 224px;
padding: 0px 70px 0px 40px;
}
#sidebar a {
}
#sidebar .more {
display: block;
width: 70px;
height: 22px;
padding: 0px 0px 0px 16px;
background: url(communication-1.0-images/image09.jpg) no-repeat left top;
text-decoration: none;
font-size: 10px;
color: #000000;
}
#sidebar h2 {
text-transform: uppercase;
font-size: 20px;
font-weight: normal;
}
#footer {
clear: both;
width: 920px;
margin: 0 auto;
padding: 20px;
background: url(communication-1.0-images/image07.jpg) no-repeat left top;
}
#footer p {
margin: 0px;
padding: 0px;
text-align: center;
text-transform: uppercase;
font-size: 10px;
color: #FFFFFF;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>Communicaton 1.0</h1>
<p>Free CSS Template</p>
</div>
<div id="menu">
<ul>
<li><a href="#" class="active">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="header"> </div>
<div id="page">
<div id="content">
<h2>Welcome to my website </h2>
<p class="byline">Lorem Ipsum Dolor Sit Amit</p>
<p><strong>Communication v1.0</strong> is a free CSS web 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>Thanks goes to <a href="#">Stock Exchange</a> for the free photo I used in this template. </p>
<p> </p>
</div>
<div id="sidebar">
<h2>Latest News</h2>
<p>Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus ac accumsan pede lacus sed nulla.</p>
<p><a href="#" class="more">Read More</a> </p>
<p>Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus ac accumsan pede lacus sed nulla.</p>
<p><a href="#" class="more">Read More</a> </p>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>© Copyright 2009. All Rights Reserved | Design by <a href="http://www.zhengdesign.com">zhengdesign.com</a> </p>
</div>
</div>
</body>
</html>
Related examples in the same category