mlpdesign02
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html>
<head>
<title>mlpdesign02</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*/
body
{background:url(mlpdesign02-img/bg.gif) 0 0 repeat #eee; color:#333; margin:auto; font-family: Verdana,sans-serif; font-size:10pt;}
img {border:0;}
h1
{ font-weight:700; font-size:1.2em; background:inherit; color:inherit;}
h2
{ font-weight:500; font-size:1.2em;}
ul
{ list-style:none; margin-left:20px; padding:1px;}
li
{ line-height:1.5em;}
a:link, a:visited, a:active
{ background: inherit; text-decoration: none; color:#999;}
a:hover
{ background: inherit; text-decoration: underline; color:#000;}
blockquote
{ background:url(mlpdesign02-img/quo.gif) 0 0 no-repeat; background-color:inherit; color:#999; display:block; padding:0 0 0 50px; margin:15px 30px;
font-size:.90em; font-weight:normal;}
p
{ line-height:1.5em;}
input, textarea
{ background:#fff; color:inherit; border:1px solid #111;}
.buttons
{ background: #000; color:#fff; border: 1px solid #111;}
#wrapper
{ background:#fff; color:inherit; width:750px; margin:auto;}
#header
{ background:url(mlpdesign02-img/banner.gif) 50% 50% no-repeat #fff; color:inherit; width:750px; height:165px; margin: 0 auto;}
#body
{ background:#fff; color:inherit; width:750px; margin:auto;}
#bottom
{ background:url(mlpdesign02-img/top.gif) 50% 0 no-repeat #eee; color:inherit; width:750px; height:10px; margin:0;}
#midbottom
{ background:url(mlpdesign02-img/mid.gif) 50% 0 repeat-y #eee; color:#d50; width:750px; line-height:1em; margin:0;}
#btmbottom
{ background:url(mlpdesign02-img/btm.gif) 50% 100% no-repeat #eee; color:inherit; width:750px; height:20px; margin:0;}
.logo
{ width:450px; margin-top:4em; padding-left:25px; float:left;}
.search
{ width:250px; text-align:right; margin-top:6em; padding-right:25px; float:right;}
.menu
{ background:url(mlpdesign02-img/strip.gif) 50% 50% no-repeat #000; color:#fff; width:750px; height:40px; font-size:.92em; margin: 0 auto;}
.left
{ width:450px; padding:10px 0 0 25px; float:left;}
.right
{ width:250px; padding:12px 25px 0 0; text-align:right; float:right;}
.right a:link,.right a:visited,.right a:active
{ background: inherit; text-decoration: none; color:#fff;}
.right a:hover
{ background: inherit; text-decoration: none; color:#ddd;}
.column
{ width:215px; padding:0 0 0 25px; float:left;}
.column p
{font-size:.90em;}
.column a:link,.column a:visited,.column a:active
{ background:#eee; text-decoration: none; color:#d50; font-size:.89em; display: block; padding:8px 2px; border-bottom:#d51 1px dashed;}
.column a:hover
{ background:#eee; text-decoration: none; color:#777; border-bottom:#888 1px dashed;}
.left a:link,.left a:visited,.left a:active
{ background: inherit; text-decoration: none; color:#fff;}
.left a:hover
{ background: inherit; text-decoration: none; color:#ddd;}
.content
{ background:#fff; color:inherit; width:500px; padding:10px 5px 0 25px; text-align:justify; float:left;}
.sidebar
{ background:#fff; color:inherit; width:175px; padding:10px 20px 0 0; float:right;}
.sidebarcontent
{ border-bottom:#999 1px solid; margin-bottom:20px;}
.img
{ border:0; margin:0 1em 0 0; float:left;}
.spacer
{ height:2px; clear: both;}
</style>
</head>
<body>
<div id="wrapper">
<!--header-->
<div id="header">
<div class="logo">
<h1>TITLE OR LOGO HERE</h1>
...and tag line here</div>
<div class="search">
<input type="text" name="search" size="15" />
<input type="button" value="Search" name="searchbtn" class="buttons" />
</div>
</div>
<div class="menu">
<div class="left"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Menu 2</a> | <a href="http://www.free-css.com/">Menu 3</a> | <a href="http://www.free-css.com/">Menu 4</a></div>
<div class="right"> <a href="http://www.free-css.com/"><img src="mlpdesign02-img/home.gif" alt="home" /></a> <a href="http://www.free-css.com/"><img src="mlpdesign02-img/contact.gif" alt="contact" /></a> <a href="http://www.free-css.com/"><img src="mlpdesign02-img/map.gif" alt="sitemap" /></a></div>
</div>
<div class="spacer"> </div>
<!--body-->
<div id="body">
<div class="content">
<h1>About this template</h1>
<p>This template is released as an open source template under <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons
Non-Commercial</a>. If you use it, please retain the "Template Design by MLP Design" tag and link in place.</p>
<p>Please DO NOT use it in adult or adult-oriented websites!</p>
<p> For commercial use, please contact me.</p>
<h1>Reminders when editing</h1>
<p>To keep the design from messing up, change items in the index.html file only when they are outside the <tags>.
If you wish to edit the color, font, size, etc, do so within the stylesheet (mlpdesign.css) file. Otherwise, the code may not validate
or may not show up properly in other browsers.</p>
<h1>Space fillers, an image, and the blockquote</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend laoreet magna. Donec auctor libero id massa.</p>
<blockquote>
<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>
</blockquote>
<p><img class="img" src="mlpdesign02-img/adj.gif" alt="" />Proin congue risus eget eros. Morbi ornare, enim ac convallis pellentesque, metus arcu sagittis diam, nec fringilla nunc eros id arcu.
Nunc sagittis ligula id justo. Nam et pede a mi facilisis consequat.</p>
</div>
<div class="sidebar">
<h1>Unordered list</h1>
<div class="sidebarcontent">
<ul>
<li><a href="http://www.free-css.com/">Link list one</a></li>
<li><a href="http://www.free-css.com/">Link list two</a></li>
<li><a href="http://www.free-css.com/">Link list three</a></li>
<li><a href="http://www.free-css.com/">Link list four</a></li>
<li><a href="http://www.free-css.com/">Link list five</a></li>
</ul>
</div>
<h1>The ordered list</h1>
<div class="sidebarcontent">
<ol>
<li>Number one</li>
<li>Number two</li>
<li>Number three</li>
<li>Number four</li>
</ol>
</div>
<h1>Some more sidebar</h1>
<div class="sidebarcontent">
<p>Vivamus tellus augue, pretium quis, blandit sit amet, tincidunt non, justo. Ut tortor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<div class="spacer"> </div>
</div>
<!--bottom-->
<div id="bottom"> </div>
<div id="midbottom">
<div class="column">
<h2>Left content</h2>
<a href="http://www.free-css.com/">Suspendisse potenti</a> <a href="http://www.free-css.com/">Proin sed pede</a> <a href="http://www.free-css.com/">Nullam at metus</a> <a href="http://www.free-css.com/">Morbi fringilla imperdiet lorem</a> <a href="http://www.free-css.com/">Donec tempus aliquam orci</a> <a href="http://www.free-css.com/">Pellentesque ultricies nisi nec</a> </div>
<div class="column">
<h2>Middle content</h2>
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Ut tristique ullamcorper urna</li>
<li>Sed eleifend laoreet magna</li>
<li>Proin congue risus eget eros</li>
<li>Suspendisse potenti</li>
</ol>
</div>
<div class="column">
<h2>Right content</h2>
<p>Nunc sagittis ligula id justo. Nam et pede a mi facilisis consequat. Quisque tincidunt, turpis vel commodo lacinia, arcu odio bibendum metus, eget elementum ipsum eros sit amet velit.</p>
<p>Etiam ipsum diam, sodales blandit, accumsan vel, dictum eget, lectus.</p>
</div>
<div class="spacer"> </div>
</div>
<div id="btmbottom"> </div>
<!--footer-->
<div class="menu">
<div class="left"><a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 3.0</a></div>
<div class="right">Template design by <a href="http://www.mlpdesign.net">MLP Design</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category