fword_three
<!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" xml:lang="en" lang="en">
<head>
<title>About - Your Website Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="Your description here" />
<meta name="keywords" content="put, your, keywords, here, seperated, by, commas" />
<meta name="author" content="Your Name Here" />
<style type='text/css'>
/*[fmt]1A90-1A0B-350*/
/*
Template Name: fword Three (Big Pastel Tabs)
Author: fword Design
Author URI: http://fworddesign.com/
Licence: <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a>
Heading styles*/
h1, h2, h3, h4, h5, h6 {
font-family: Verdana;
font-style: normal;
}
h1 {
font-size: 2.2em;
padding: 4px 0 12px;
}
h2 {
font-size: 2em;
padding: 4px 0 10px;
}
h3 {
font-size: 1.8em;
padding: 4px 0 8px;
}
h4 {
font-size: 1.6em;
padding: 4px 0 6px;
}
h5 {
font-size: 1.4em;
padding: 4px 0;
}
h6 {
font-size: 1.2em;
padding: 4px 0 2px;
}
/*Code styles*/
code {
display: block;
font-family: monospace;
font-size: 14px;
font-weight: bold;
margin: 0 70px 0 37px;
padding: 10px 20px;
border: 1px solid #C0C0C0;
background-color: #EEFFAA;
}
/*Blockquote styles*/
blockquote {
margin: 0 70px 0 37px;
padding: 0px 10px;
border: 1px solid #C0C0C0;
border-left: 16px solid #C0C0C0;
background-color: #F3F3F3;
}
/*List styles*/
ul {
margin: 0 0 0 50px;
}
ol {
margin: 0 0 0 56px;
}
ul li {
list-style: square;
padding: 2px 0 10px 10px;
}
ol li {
list-style-type: decimal;
padding: 2px 0 10px 4px;
}
/*Table styles*/
table {
border: 1px solid #000;
border-collapse: collapse;
width: 450px;
font-size: 0.8em;
}
td, th {
border: 1px solid #000;
border-collapse: collapse;
padding: 5px;
}
#one, #two, #three, #four, #five {
width: 140px;
}
caption {
background: #000;
font-size: 140%;
border: 1px solid #000;
border-bottom: none;
padding: 5px;
text-align: left;
color: #FFFFFF;
}
thead th {
background: #C0C0C0;
text-align: left;
}
tbody th {
text-align: left;
background: #47B;
}
tfoot td {
text-align: right;
font-weight: bold;
background: #369;
color: #FFF;
}
tbody td {
background: #EFA;
}
tbody tr.odd td {
background: #9CA0F7;
}
/*Image styles*/
img {
padding: 5px;
border: 1px solid #C0C0C0;
}
img.left {
float: left;
margin: 5px 10px 5px 0;
}
img.right {
float: right;
margin: 5px 0 5px 10px;
}
/*Search form style*/
form#search-form {
padding: 0 0 15px;
}
#search-form input.search {
width: 135px;
}
#search-form input.button {
background: #C0C0C0;
height: 22px;
width: 34px;
}
/*Note stylles*/
p.note {
border: 1px solid #9CA0F7;
padding: 10px;
margin: 10px 0 25px;
background-color: #F3F3F3;
text-align: justify;
font-style: italic;
font-size: 1em;
width: 155px;
}
p.note a:hover {
color: #54D42A;
}
/*fword link style*/
.fword-link {
font-family: Georgia;
font-style: italic;
font-weight: bold;
}
</style>
<link rel="stylesheet" type="text/css" href="fword_three-stylesheets/standard-style.css" />
<link rel="stylesheet" type="text/css" href="fword_three-stylesheets/main-style.css" />
<!--[if IE 5 ]>
<link rel="stylesheet" type="text/css" href="./fword_three-stylesheets/ie5-style.css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="outer">
<div id="header">
<h1><a href="#">Website Title</a></h1>
<p class="description">This is my super website.</p>
</div> <!-- header -->
<div id="menu">
<ul>
<li><a class="home" href="index.html">Home</a></li>
<li><a class="about" href="about.html">About</a></li>
<li><a class="blog" href="blog.html">Blog</a></li>
<li><a class="gallery" href="gallery.html">Gallery</a></li>
<li><a class="contact" href="contact.html">Contact</a></li>
</ul>
</div> <!-- menu -->
<div id="menu-bottom" class="bblue"> </div>
<div id="content" class="blue">
<div class="double left">
<h2>Box One</h2>
<p><a href="#">Lorem</a> ipsum dolor sit amet, consectetur adipiscing elit. Sed eu tortor quis tortor pretium volutpat nec vel metus. Vestibulum interdum elit quis lacus laoreet id dictum turpis tincidunt. Duis lacinia augue id orci bibendum ac porta enim suscipit. Praesent eget est turpis. Nunc lacinia ornare lectus, eget venenatis purus cursus at. Curabitur laoreet fringilla molestie! Curabitur dapibus, turpis non sagittis sagittis, dui elit convallis felis, ac mattis enim diam eget odio? Etiam at dui tortor. Sed sit amet augue tortor, a malesuada eros. Nullam convallis placerat ante ac adipiscing. Duis fringilla mollis velit, eu vulputate nulla placerat et. Integer mattis rhoncus vestibulum. Quisque sit amet tortor augue? Vivamus at imperdiet metus? Suspendisse condimentum ultricies gravida! Donec lobortis ipsum vel felis mattis eu ultrices nibh placerat.
</p>
</div> <!-- double left -->
<div class="double right">
<h2>Box Two</h2>
<p>Donec tincidunt pellentesque magna, in elementum sapien molestie nec. Etiam sit amet mauris et diam mattis congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae posuere erat. Curabitur consequat tincidunt pharetra. Donec auctor vehicula mi quis aliquet. In condimentum vulputate augue vitae porttitor. Aliquam congue mauris at lorem dictum vel suscipit magna auctor. Proin bibendum viverra facilisis. Praesent a tincidunt sapien. Vestibulum tempor, <a href="#">lorem</a> eget lobortis laoreet, risus turpis pharetra justo, tincidunt auctor orci turpis sed urna. Cras eget est in ante convallis fringilla. Aliquam erat volutpat. Aliquam eget dolor eu massa gravida tempor. Etiam vulputate massa vitae dolor mattis tempus. Cras eget est in ante convallis fringilla.
</p>
</div> <!-- double-right -->
<div class="clear-fix"> </div>
</div> <!-- content -->
<div id="bottom" class="fblue"> </div> <!-- bottom -->
<div id="footer">
<p>All rights reserved ©2010 - <a href="index.html">Your Name</a> - An <a class="fword-link" href="http://fworddesign.com">fword Design</a></p>
</div> <!-- footer -->
</div> <!-- outer -->
</div> <!-- wrapper -->
</body>
</html>
Related examples in the same category