transition
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Title : Transition
Version : 1.0
Released : 20070703
Description: A two-column, fixed-width template with light color blend.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Transition by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0;
padding: 0;
background: #FFFFFF url(transition-images/img01.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #666666;
}
h1, h2, h3 {
margin: 0;
font-weight: normal;
color: #85C329;
}
h1 {
font-size: 197%;
}
h2 {
font-size: 167%;
}
h3 {
font-size: 100%;
font-weight: bold;
}
p, ol, ul {
line-height: 180%;
}
p {
}
ol {
}
ul {
}
blockquote {
margin: 0;
padding-left: 20px;
border-left: 10px solid #E6E6E6;
font-style: italic;
color: #999999;
}
blockquote * {
line-height: normal;
}
a {
color: #E06529;
}
a:hover {
text-decoration: none;
}
img {
border: none;
}
img.left {
float: left;
margin: 0 15px 0 0;
}
img.right {
float: right;
margin: 0 0 0 15px;
}
hr {
display: none;
}
/* Header */
#header {
width: 760px;
height: 90px;
margin: 0 auto;
}
/* Logo */
#logo {
float: left;
padding-top: 20px;
background: url(transition-images/img02.gif) no-repeat left bottom;
}
#logo h1, #logo h2 {
margin: 0;
padding-left: 60px;
font-weight: normal;
color: #E06529;
}
#logo h1 {
font-weight: bold;
}
#logo h2 {
font-size: 92%;
}
#logo a {
text-decoration: none;
}
/* Top Menu */
#topmenu {
float: right;
}
#topmenu ul {
margin: 0;
padding: 32px 0 0 0;
list-style: none;
line-height: normal;
}
#topmenu li {
display: inline;
}
#topmenu a {
padding: 0 20px;
border-left: 1px solid #E06529;
text-decoration: none;
font-size: 92%;
}
#topmenu a:hover {
text-decoration: underline;
}
#topmenu .first a {
border: none;
}
/* Header 2 */
#header2 {
width: 760px;
height: 200px;
margin: 0 auto;
}
/* Menu */
#menu {
float: left;
width: 200px;
height: 200px;
background: url(transition-images/img03.jpg);
}
#menu ul {
margin: 0;
padding: 20px 20px 0 20px;
list-style: none;
line-height: normal;
}
#menu li {
display: inline;
}
#menu a {
display: block;
padding: 8px 10px;
background: url(transition-images/img05.gif) repeat-x;
text-decoration: none;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
#menu .first a {
background: none;
}
/* Splash */
#splash {
float: right;
width: 560px;
height: 200px;
}
/* Page */
#page {
width: 760px;
margin: 0 auto;
padding: 30px 0;
}
/* Content */
#content {
float: left;
width: 480px;
padding-left: 20px;
}
#content ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
#content ul li {
padding-left: 15px;
background: url(transition-images/img08.gif) no-repeat 0 8px;
}
#content ol {
margin-left: 0;
padding-left: 0;
list-style: lower-alpha inside;
}
.title {
padding-top: 3px;
}
.content {
padding: 20px;
background: url(transition-images/img10.gif) no-repeat;
}
.twocols {
}
.twocols .col1 {
float: left;
width: 220px;
}
.twocols .col2 {
float: right;
width: 220px;
}
/* Sidebar */
#sidebar {
float: right;
width: 220px;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin-bottom: 20px;
background: #E6E6E6 url(transition-images/img07.gif) no-repeat right bottom;
}
#sidebar li ul {
padding: 10px 20px;
font-size: 92%;
}
#sidebar li li {
margin: 0;
padding: 5px 0;
background: none;
border-top: 1px dotted #CDCDCD;
}
#sidebar h2 {
height: 30px;
margin: 0;
padding: 6px 0 0 10px;
background: url(transition-images/img06.gif) no-repeat;
font-size: 100%;
font-weight: bold;
color: #145997;
}
#sidebar h3 {
margin: 0;
}
#sidebar p {
margin: 0;
line-height: normal;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
text-decoration: underline;
}
#sidebar .first {
border: none;
}
/* Footer */
#footer-wrapper {
height: 100px;
padding: 20px 0;
background: #E6E6E6;
border-top: 10px solid #CDCDCD;
}
#footer {
width: 760px;
margin: 0 auto;
}
#footer p {
margin: 0;
line-height: normal;
}
#footer a {
color: #666666;
}
#legal {
float: left;
padding: 10px 0 10px 60px;
background: url(transition-images/img11.gif) no-repeat left center;
}
#links {
float: right;
padding: 10px 0 0 0;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1><a href="http://www.free-css.com/">Transition</a></h1>
<h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<div id="topmenu">
<ul>
<li class="first"><a href="http://www.free-css.com/">Homepage</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Sitemap</a></li>
</ul>
</div>
</div>
<div id="header2">
<div id="menu">
<ul>
<li class="first"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<div id="splash"><a href="http://www.free-css.com/"><img src="transition-images/img04.jpg" alt="" width="560" height="200" /></a></div>
</div>
<hr />
<div id="page">
<div id="content">
<div>
<h1 class="title">Welcome to Our Website!</h1>
<div class="content">
<p><img src="transition-images/x.jpg" alt="" width="118" height="118" class="left" /></p>
<p><strong>Transition</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You"re free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.freecsstemplates.org/">my site</a> in some way. <em>Enjoy :)</em></p>
<h2>Praesent Scelerisque</h2>
<p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat:</p>
<blockquote>
<p>“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. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.”</p>
</blockquote>
</div>
</div>
<div class="twocols">
<div class="col1">
<h2 class="title">Lorem Ipsum Dolor</h2>
<div class="content">
<p>Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis.</p>
<p><a href="http://www.free-css.com/">Read more…</a></p>
</div>
</div>
<div class="col2">
<h2 class="title">Pellentesque Quis</h2>
<div class="content">
<ul class="list">
<li><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
<li><a href="http://www.free-css.com/">Vestibulum luctus dui</a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
<li><a href="http://www.free-css.com/">Etiam malesuada rutrum </a></li>
<li><a href="http://www.free-css.com/">Aenean elementum ligula</a></li>
<li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
<li><a href="http://www.free-css.com/">Sed quis odio sagittis leo </a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="sidebar">
<ul>
<li>
<h2>Recent Updates</h2>
<ul>
<li class="first">
<h3><span>6/25:</span> Semper vestibulum</h3>
<p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula…</a></p>
</li>
<li>
<h3><span>6/21:</span> Posuere eleifend odio</h3>
<p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum…</a></p>
</li>
<li>
<h3><span>6/17:</span> Vivamus fermentum</h3>
<p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh…</a></p>
</li>
</ul>
</li>
<li>
<h2>Sagittis Convallis</h2>
<ul>
<li class="first"><a href="http://www.free-css.com/">Ut semper vestibulum est</a></li>
<li><a href="http://www.free-css.com/">Vestibulum luctus venenatis </a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
<li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
<li><a href="http://www.free-css.com/">Aenean elementum facilisis </a></li>
<li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
<li><a href="http://www.free-css.com/">Sed quis odio sagittis leo </a></li>
<li><a href="http://www.free-css.com/">Integer rutrum nisl in mi</a></li>
<li><a href="http://www.free-css.com/">Etiam malesuada rutrum enim</a></li>
<li><a href="http://www.free-css.com/">Aenean elementum facilisis </a></li>
<li><a href="http://www.free-css.com/">Ut tincidunt elit vitae augue</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<hr />
<div id="footer-wrapper">
<div id="footer">
<p id="legal">Copyright © 2007 Transition. All Rights Reserved<br />
Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></p>
<p id="links"><a href="http://www.free-css.com/">Privacy Policy</a> | <a href="http://www.free-css.com/">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p>
</div>
</div>
</body>
</html>
Related examples in the same category