modernclassic
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MODERN CLASSIC</title>
<style type='text/css'>
/* ------------------------------------ reset ---------------------------- */
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 {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body { line-height: 2; background: #fff; margin:0; }
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none; }
/*----------------------[ Typography ]-----------------------------*/
/*
The line-heights and vertical margins are automatically calculated from this.
The percentage is of 16px (0.75 * 16px = 12px). */
body { font-size: 75%; } /* IE width*/
html>body{ font-size:12px;}/* Other browsers*/
body {
color: #222;
font-family: Verdana, sans-serif;
}
h1,h2,h3,h4,h5,h6 {
color: #111;
font-family: Georgia, Arial, sans-serif;
}
/* Headings
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { font-weight: normal; }
h1 { font-size: 2.4em; line-height: 1; margin-bottom: 0.4em; }
h2 { font-size: 1.8em; margin-bottom: 0.5em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 0.5em; }
h4 { font-size: 1.6em; line-height: 1; margin-bottom: 0.2em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 0.5em; }
h6 { font-size: 1em; font-weight: bold; }
/* Text elements
-------------------------------------------------------------- */
p { margin: 0 0 1em; line-height:1.5; }
p.last { margin-bottom: 0; }
p img { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.top { margin-top: 0; } /* Use this if the image is at the top of the <p>. */
img { margin: 0 0 0.5em; }
ul, ol { margin:0 1.5em 0.5em 1.5em; }
ul { list-style-type: square; }
ol { list-style-type: decimal; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd { margin-left: 1.5em;}
abbr,
acronym { border-bottom: 1px dotted #666; }
address { margin-top: 1.5em; font-style: italic; }
del { color:#666; }
a:focus,
a:hover { color: #009; border-bottom:1px solid #009; }
a { color: #009; text-decoration: none; border-bottom:1px dashed #009; }
blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em,dfn { font-style: italic; background: #ffc; }
dfn { font-weight: bold; }
pre,code { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; }
/* Tables
-------------------------------------------------------------- */
table { margin-bottom: 1.4em; }
th { border-bottom: 2px solid #ccc; font-weight: bold; }
td { border-bottom: 1px solid #ddd; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }
caption { background: #ffc; }
/* Some default classes
-------------------------------------------------------------- */
.small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet { color: #666; }
.hide { display: none; }
.highlight { background:#ff0; }
.added { color:#060; }
.removed { color:#666; text-decoration:line-through; }
.top { margin-top:0; padding-top:0; }
.bottom { margin-bottom:0; padding-bottom:0; }
.left { float:left; }
.right { float:right; }
/*----------------------------------------------------------------------------*/
body{
background-color: #8f8e8e ;/*#fff;#e2e2e2;*/
margin-top:10px;
margin-bottom:10px;
}
#wrap {
width:790px;
text-align:left;
background:#fff;
margin:0px auto;
padding:10px;
border:1px solid #111;
padding-bottom:0;
}
.clearfix {
clear:both;
margin-bottom:55px;
}
/* header , logo + navigation*/
#header {
height:121px;
background-color:#CCCCCC;
background:url(modernclassic-images/head-bg.png) repeat;
position:relative;
}
#logo{
position:absolute;
top:37px;
left:25px;
}
#logo a{
color:#fff;
text-decoration:none;
border:none;
}
#nav {
position:absolute;
top:35px;
right:10px;
padding:10px;
background-color:#060e38;
border:1px solid #535a7a;
list-style-type:none;
}
#nav ul{
margin:5px;
list-style:none;
}
#nav li {
float:left;
font-weight:700;
}
#nav a {
display:block;
text-align:center;
color:#fff;
font-family: Arial, sans-serif;
text-decoration:underline;
border:none;
margin-right:10px;
margin-left:10px;
}
#nav a:hover {
color:#7b83a5;
}
#nav .current {
color:#7b83a5;
}
/* content */
#content {
margin:0 auto;
}
.main-col{
width:580px;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:right;
padding:5px;
}
.side-col{
width:190px;
padding:5px;
float:left;
}
img{
border:1px solid #999;
padding:5px;
background-color:#ccc;
margin:10px;
margin-top:0;
}
/* footer */
#footer {
margin:0px auto;
color:#000;
border-top:1px solid #111;
height:25px;
padding-top:5px;
}
/* Special*/
/* Success, error & notice boxes for messages and errors. */
.error,
.notice,
.success { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error { background: #FBE3E4; color: #D12F19; border-color: #FBC2C4; }
.notice { background: #FFF6BF; color: #817134; border-color: #FFD324; }
.success { background: #E6EFC2; color: #529214; border-color: #C6D880; }
.error a { color: #D12F19; }
.notice a { color: #817134; }
.success a { color: #529214; }
/**/
</style>
</head>
<body>
<div id="wrap">
<!-- start header -->
<div id="header">
<!-- Insert website name here-->
<div id="logo"><h1 style="color:#fff; font-size:40px;"><a href="#">ModernClassic</a></h1></div>
<!-- Simple add another navigation element by adding another <li></li>-->
<ul id="nav">
<li><a href="index.html" class="current">HOME</a></li>
<li><a href="index.html">PORTOFOLIO</a></li>
<li><a href="index.html">BLOG</a></li>
<li><a href="index.html">ABOUT ME</a></li>
<li><a href="index.html">CONTACT</a></li>
</ul>
</div>
<!-- end header -->
<div id="content">
<p>You are here: <a href="index.html">home</a> » <a href="index.html">Topic</a> » <a href="index.html">SUBTopic</a> » article</p>
<!-- Start Side Column-->
<div class="side-col">
<h2>Local Navigation</h2>
<ul>
<li class="grey"><a href="index.html">Vestibulum bibendum</a></li>
<li><strong>Maecenas egestas</strong></li>
<li class="grey"><a href="index.html">volutpat ante</a></li>
<li><a href="#">Curabitur rhoncus</a></li>
<li class="grey"><a href="index.html">Nulla fringilla</a></li>
<li><a href="#">Integer euismod</a></li>
<li class="grey"><a href="index.html">Aenean viverra</a></li>
</ul>
<h2>Testimonials</h2>
<p>
<q>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt.</q><br />
<a href="index.html">joel madden</a>
</p>
<p>
<q>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt.</q><br />
<a href="index.html">joel madden</a>
</p>
<p>
<q>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt.</q><br />
<a href="index.html">joel madden</a>
</p>
</div>
<!-- finish side content -->
<div class="main-col">
<h2>Free CSS Template</h2>
<p> ModernClassic is a free and fully standards compliant css template designed by <strong>trif_m.</strong> <br/>
<br/>
This template is allowed for all uses, <a href="index.html">including commercial use</a>, as it is released under the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!</p>
<h2>Our Services</h2>
<div class="right"><img src="modernclassic-images/spectacles.gif" alt="example of picture placement"/></div>
<p>Lorem ipsum dolor sit <span class="removed">amet, consectetuer adipiscing</span> <span class="added">elit</span> consectetuer. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt. Aliquam eros eros, imperdiet vitae, volutpat id, semper sed, lorem. Praesent ullamcorper quam eget dolor. Suspendisse potenti. </p><p>Proin et nunc ac metus adipiscing pretium. Phasellus eu erat. Curabitur nisl tortor, ornare nec, dictum at, vehicula eu, arcu. Ut nec est. Sed rutrum lacinia nisl. Duis at tellus. Quisque dignissim sodales odio. Quisque quam. Pellentesque tortor. Proin dictum.</p>
<h2>About Us</h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis porttitor odio. Etiam lacinia viverra ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin tincidunt. Aliquam eros eros, imperdiet vitae, volutpat id, semper sed, lorem. Praesent ullamcorper quam eget dolor. Suspendisse potenti. Proin et nunc ac metus adipiscing pretium. Phasellus eu erat. Curabitur nisl tortor, ornare nec, dictum at, vehicula eu, arcu. Ut nec est. Sed rutrum lacinia nisl. Duis at tellus. Quisque dignissim sodales odio. Quisque quam. Pellentesque tortor. Proin dictum.</p>
<table border="0" cellspacing="0" cellpadding="0">
<caption>Example of a a table</caption>
<tr>
<th >Test page</th>
<th>Description</th>
<th>Example</th>
</tr>
<tr>
<td><a href="#">Sample</a></td>
<td>Ei ludus dolorum denique mea.</td>
<td> accumsan appellantur, simul facete cum at. Mei ne iusto placerat, ei deser)</td>
</tr>
<tr>
<td><a href="#">Sample</a></td>
<td>Ei ludus dolorum denique mea.</td>
<td> accumsan appellantur, simul facete cum at. Mei ne iusto placerat, ei deser)</td>
</tr>
<tr>
<td><a href="#">Sample</a></td>
<td>Ei ludus dolorum denique mea.</td>
<td> accumsan appellantur, simul facete cum at. Mei ne iusto placerat, ei deser)</td>
</tr>
<tr>
<td><a href="#">Sample</a></td>
<td>Ei ludus dolorum denique mea.</td>
<td> accumsan appellantur, simul facete cum at. Mei ne iusto placerat, ei deser)</td>
</tr>
<tr>
<td><a href="#">Sample</a></td>
<td>Ei ludus dolorum denique mea.</td>
<td> accumsan appellantur, simul facete cum at. Mei ne iusto placerat, ei deser)</td>
</tr>
</table>
<!-- example of errors, al;erts and notices-->
<p> Example of alert, error and notices</p>
<div class="error">
This is a <div> with the class <strong>.error</strong>.
</div>
<div class="notice">
This is a <div> with the class <strong>.notice</strong>.
</div>
<div class="success">
This is a <div> with the class <strong>.success</strong>.
</div>
</div>
<!-- finish main colomn-->
<div class="clearfix">
</div></div>
<!--Start Footer-->
<div id="footer">
<!--Copyright Notice-->
<p style="float:left;">
2008. All Rights Reserved. _write-your-name-here_
</p>
<!-- Footer links-->
<p style="float:right;">
| <a href="index.html">Terms of Use</a> | <a href="index.html">Privacy Policy</a>|
<a href="index.html">Sitemap</a>|
</p>
</div>
<!-- /footer -->
<!-- finish wrap-->
</div>
<!-- I kindly ask you to not remove the following link. I worked hard to make this theme for you. A link back to my sponsor is the least you can do for me in return. Thanks!--><br />
<div style="width:800px; margin:-20px auto; text-align:right;font-size:80%;">| <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> | Designed by <strong>trif_m</strong>, Thanks to <a href="http://www.orice-mures.ro/" title="catalog firme mures">Orice Mures</a></div>
<div style="display:none;"><a href="http://free-templates.ru">free-templates.ru</a></div>
</body>
</html>
Related examples in the same category