vivid
<!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>Vivid - About</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/***************************************************************
Vivid v1.0
By Ori Pearl
http://www.oripearl.com/
Instructions can be found in the attached Instructions.txt
***************************************************************/
/**********************************
Reset settings
**********************************/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
border:0;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
padding:0;
text-align:left;
vertical-align:baseline;
}
/**********************************
Basic elements
**********************************/
body {
background:url('vivid-images/top-bg.jpg') repeat-x #fff;
color:#383737;
font-family:Verdana, Arial, sans-serif;
font-size:13px;
}
h1 {
color:#587f29;
font-size:18px;
font-weight:400;
margin-bottom:8px;
}
h2 {
color:#e65a05;
font-size:16px;
font-style:italic;
font-weight:400;
margin-bottom:8px;
}
a {
color:#383737;
}
a:hover {
color:#000;
}
a img {
text-decoration:none;
}
p {
margin-bottom:18px;
text-align:left;
}
p img {
margin:6px;
}
blockquote {
color:#626262;
font-style:italic;
}
/* Table */
caption,th,td {
font-weight:400;
text-align:left;
}
table,td,th {
vertical-align:middle;
}
table {
margin-bottom:8px;
width:100%;
}
th {
background:#C3D9FF;
font-weight:700;
}
th,td {
padding:4px 10px 4px 5px;
}
tr td {
background:#E5ECF9;
text-align:center;
}
/* Lists */
ul,ol {
margin:0 16px 8px;
}
ul {
list-style-type:square;
}
li {
margin-left:14px;
}
.date {
font-size:12px;
font-style:italic;
}
/**********************************
Header settings
**********************************/
#header {
margin:140px auto 0;
width:900px;
}
#header #header-message {
color:#ef5400;
float:right;
font-size:16px;
}
#header #logo {
float:left;
}
/**********************************
Menu settings
**********************************/
#menu-strip {
background:#be370e;
float:left;
height:40px;
margin-top:50px;
width:100%;
}
#top-menu {
margin:8px auto;
width:900px;
}
#top-menu li {
display:inline;
float:left;
list-style-type:none;
margin-left:0;
margin-right:40px;
}
#top-menu a {
color:#fff;
font-size:17px;
text-decoration:none;
}
#top-menu a:hover {
color:#ffa46d;
}
/**********************************
Main content settings
**********************************/
#wrapper {
clear:both;
margin:0 auto;
padding-top:30px;
width:900px;
}
#main-content {
float:left;
margin-right:40px;
width:560px;
}
#main-content p {
line-height:20px;
}
.block {
margin-bottom:18px;
}
/**********************************
Sidebar settings
**********************************/
#sidebar {
float:left;
width:300px;
}
#sidebar img {
float:left;
}
/**********************************
Search form settings
**********************************/
.search-form {
margin-bottom:18px;
}
.search-form #searchterm {
height:17px;
width:146px;
}
.search-form #submitbutton {
background-color:#fff;
border:solid 1px #383737;
color:#383737;
font-size:13px;
}
/**********************************
Footer settings
**********************************/
#footer {
background:#be370e;
float:left;
height:24px;
margin-top:50px;
width:100%;
}
#footer-content {
color:#fff;
font-size:11px;
margin:5px auto;
width:900px;
}
#footer-content a {
color:#fff;
}
#footer-content p {
margin-bottom:0;
}
</style>
<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="shortcut icon" href="vivid-images/favicon.ico" />
</head>
<body>
<div id="header">
<!-- Logo image -->
<img id="logo" src="vivid-images/logo.jpg" alt="" />
<!-- Right header section -->
<div id="header-message"> <img src="vivid-images/testimonial.jpg" alt="" /> </div>
</div>
<div id="menu-strip">
<!-- Menu -->
<ul id="top-menu">
<li><a href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">showcase</a></li>
<li><a href="about.html">about</a></li>
<li><a href="http://www.free-css.com/">blog</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<div id="wrapper">
<!-- Content wrapper -->
<div id="main-content">
<div class="block">
<!-- Block class is used for adding space around a paragraph -->
<h1>Put your valubale information here</h1>
<h2>Paragraphs are designed for easy readability</h2>
<p> Lorem ipsum dolore ignota intellegat ut cum, accusam omnesque delectus in per. Utinam epicuri mea ut, tantas convenire cu has, eos solet fuisset cu. Modo facilisis vulputate in nec, ad has omittantur dissentiet contentiones, enim equidem intellegat has ne. Ex pri vidit vidisse mediocrem, eu quo aliquam bonorum noluisse. Vel eu esse constituam repudiandae, te pro doming prompta atomorum. Sit in prima oratio, in mel delectus senserit democritum, ius oporteat delicata eu. </p>
<p> Ius ei verterem voluptaria percipitur, et saperet feugait expetendis vis, audire molestiae conclusionemque eu per. Melius vocent petentium ad mel, ne congue mollis adipisci vel, ad ignota ridens tritani nec. Vix ponderum oportere ex, ad quo libris iriure diceret, postea quaeque perfecto vel ne. Probo aeque mandamus cum id, veniam labores patrioque ius at. Justo bonorum oporteat ea eos, no ius summo reformidans efficiantur. Sit cu falli labore blandit, mei brute nobis omnesque ad. </p>
<p> Ut nec viderer nusquam, mea ut nibh maluisset iracundia. Sed elit tota latine eu, habemus suavitate definitionem ut mel. Ut nam dolorum appareat deserunt, mei tation euripidis consectetuer no. Cu reque partiendo petentium ius, ea has libris euismod, qui no sint iudico postulant. Facete persius abhorreant ne mei, dicunt dolorem aliquando ex quo, quot brute vix ei. His at meliore facilisis conceptam, harum alterum mentitum ne cum. Quis wisi erroribus his et, populo graeco graecis per at, eu eum etiam integre. </p>
</div>
</div>
<div id="sidebar">
<!-- The sidebar wrapper -->
<h2>Latest news</h2>
<!-- News item sample -->
<p> <b>News item title here</b><br/>
<span class="date">March 18th, 2008</span><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis. </p>
<p> <b>News item title here</b><br/>
<span class="date">March 18th, 2008</span><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam a dolor id dolor elementum varius. Nunc auctor nunc ut nulla. Proin eget sapien at ante blandit lobortis. </p>
</div>
</div>
<div id="footer">
<div id="footer-content">
<p>© Vivid 2008 : All rights reserved | Designed and coded by <a href="http://www.oripearl.com">Ori Pearl</a> | This website is <a href="http://validator.w3.org/check?uri=referer">XHTML Valid</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category