mlpdesign03
<!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" lang="en" xml:lang="en">
<head>
<title>mlpDesign03</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* MLP Design (http://www.mlpDesign.net). All Rights Reserved */
/* Global Style Settings */
body { background:url(mlpdesign03-img/bg.gif) 50% 0 repeat-y #555; color:#ccc; text-align:center; font:normal 90% "Trebuchet MS",sans-serif; margin:0;}
img { border:0;}
h1 { background:#000; color:#9c3; font-weight:bold; font-size: 1.4em; margin:0; padding-top: 6px;}
h2 { background:#000; color:#9c6; font-weight:bold; font-size:1em; margin:0; padding-top:4px;}
h3 { border-bottom:#ccc 1px solid; padding-bottom:10px; font-size: 1em; font-weight: lighter; letter-spacing:.1em; clear:both;}
a:link, a:visited, a:active { background-color:inherit; text-decoration: none; color:#9c3;}
a:hover { background-color:inherit; text-decoration: none; color:#9f3;}
form ul { list-style:none; margin-left:75px; padding:1px;}
strong { background:#000; text-decoration: none; color:#9c6; font-weight:normal;}
.button { text-align:center; padding:10px 0;}
.spacer { height:2px; clear:both;}
/* End of Global Settings */
/* header-*/
#header-
{ width:699px; height:160px; margin:auto; background:url(mlpdesign03-img/logo.gif) 0 50% no-repeat;}
#header-h1
{ background-color:#9c3; color:#333; width:175px; margin:50px 0 0 8px; text-align:center; float:left;}
/* Content and Sidebar Settings */
#main
{ width:725px; margin:auto; clear: both; }
* html body #main
{ width:751px;}
#content
{ padding-top:12px; float:left; width: 62%; font-size:.95em; text-align:left;}
#content p
{ line-height:1.35em; word-spacing:.2em; text-align:justify;}
#content ul
{ list-style:none; margin-left:30px; padding:1px; text-align:left;}
#content ul li
{ padding-left:15px; background: url(mlpdesign03-img/arw.gif) 0 3px no-repeat #000; color:inherit; text-align:left;}
#content ol
{ margin-left:20px; text-align:left;}
* html body #content ol
{ margin-left:60px; text-align:left;}
#sidebar
{ float:left; margin:0 25px 0 13px; width:198px; text-align:left;}
#sidebar h1
{ background:url(mlpdesign03-img/menu.gif) 50% 0 no-repeat #9c3; color:#fff; font-weight:600; font-size:1.1em; line-height:30px; margin:0; padding-left:10px; text-align:left;}
#sidebar h2
{ background:#9c3; color:#fff; font-weight:600; font-size:1.1em; line-height:30px; margin:0; padding-left:10px; text-align:left;}
#sidebar ul
{ margin:0; padding:0; text-align:left;}
#sidebar li
{ border-bottom:1px solid #cdc; display:block; border-top:1px solid #fff; list-style: none; text-align:left;}
#sidebar li a, #sidebar li a:link, #sidebar li a:visited
{ background:#dec; color: #666; display:block; padding:8px 4px 8px 15px; text-decoration: none; font-size:.75em; text-align:left;}
#sidebar li a:hover
{ background:#efd; color: #000; display:block; text-align:left;}
#sidebar .off, #sidebar .off a
{ background:#dec; color: #666; padding:0 8px; text-align:center; line-height:1.6em; font-size:8pt;}
/* Portfolio Settings */
.gallery
{ width:430px; margin:10px 0 10px 15px; text-align:left;}
.thumb
{ margin:10px 20px 10px 0; float:left; width:120px; text-align:center; font-size:.9em;}
.thumb .img
{ display: inline; border:1px solid #777; width:120px; height:90px;}
.desc
{ width:295px; margin:0; float:right; text-align:justify; font-size:.9em; word-spacing:-.25em; }
/* ie fix */
* html body .thumb
{margin:5px 15px 5px 0;}
* html body .desc
{ margin:5px 8px 0 0;}
/* Footer Settings */
#footer
{ width:700px; height:40px; background:url(mlpdesign03-img/footertop.gif) 50% 0 no-repeat #000; color:#333; font-size:.75em;
margin:0 auto; padding-top:25px; text-align:center; clear:both;}
#footer a:link,#footer a:visited,#footer a:active
{ background:#9c3; text-decoration: none; color:#333;}
#footer a:hover
{ background:#9c3; text-decoration: none; color:#fff;}
</style>
</head>
<body>
<div id="main">
<div id="header">
<h1>Put your Name or Logo Here</h1>
</div>
<div id="sidebar">
<h1>Navigation</h1>
<ul>
<li><a class="active">Link</a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="http://www.free-css.com/">Page 5</a></li>
<li><a href="http://www.free-css.com/">Page 6</a></li>
</ul>
<h2>Partners</h2>
<p class="off"> Put anything here such as links, ads, or buttons. </p>
</div>
<div id="content">
<h1>About this template</h1>
<p>This template contains three pages, with sample <a href="services.html">Services</a> and <a href="portfolio.html">Portfolio</a> pages. This is another older Design for own my site, which I have also decided to release as an open source template under Creative Commons Non-Commercial.</p>
<p>If you use the template, please retain the "Template Design by MLP Design" tag and link in place. For commercial use, please contact me.</p>
<p>Please DO NOT use the template in adult or adult-oriented websites!</p>
<h2>The Unordered List</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend laoreet magna. Donec auctor libero id massa.</p>
<ul>
<li>Unordered list without a link</li>
<li>Unordered list with <a href="http://www.free-css.com/">a link</a></li>
<li><a href="http://www.free-css.com/">Linked unordered list</a></li>
</ul>
<h2>The Ordered List</h2>
<p>Aenean sit amet enim ac urna dictum lobortis. Praesent convallis sapien eu tortor. Phasellus eros tortor, lacinia ut, pellentesque in, venenatis in, elit.</p>
<ol>
<li>Numbered List One</li>
<li>Numbered List Two</li>
<li>Numbered List Three</li>
<li>Numbered List Four</li>
</ol>
<p><strong>Note: Do not mind us. We are just space fillers</strong>. Suspendisse potenti. Proin sed pede. Suspendisse elementum, augue et
venenatis malesuada, nisl pede commodo eros, id faucibus purus arcu vel risus. Nullam at metus. Donec non dui.</p>
</div>
<div class="spacer"></div>
<div id="footer">2007 © Copyright Your Name. All Rights Reserved. <br />
Template Design by <a href="http://www.mlpDesign.net">MLP Design</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer/">CSS 2.0</a> </div>
</div>
</body>
</html>
Related examples in the same category