mlpdesign04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>mlpdesign04</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* MLP Design (http://www.mlpdesign.net) */
/* Global Style Settings */
body
{ background:url(mlpdesign04-images/bodybg.gif) top center repeat-y #EEE;
color:#666;
font:normal 12px Arial,sans-serif;
text-align:center;
padding:0;
margin:0; }
h1 { font-size:20px; text-align:left; margin:0; }
h2 { font-size:11px; text-align:left; margin:0; }
h3 { font-size:10px; text-align:left; margin:0; }
input,textarea
{ background-color:inherit;
color:#AAA;
border:1px solid #F9C;
padding:2px;
margin:0 0 2px 0;}
blockquote
{ background:url(mlpdesign04-images/quote.gif) no-repeat;
color:#AAA;
padding:0 0 0 45px;
margin:15px 30px;
display:block; }
strong { font-weight:bold; }
img { border:0; padding:0; margin:0; }
.img { border:0; margin:0 1em 0 0; float:left;}
.button { border:0; padding:0; margin:0;}
.commentform { margin:0 0 0 25px; }
.clear { clear:both; }
/* Wrappers */
#wrapper1
{ background:url(mlpdesign04-images/borderbottom.gif) bottom center no-repeat #FFF;
color:inherit;
width:730px;
padding:0 0 35px 0;
margin:0 auto; }
#wrapper2
{ background:url(mlpdesign04-images/banner.gif) top center no-repeat;
width:730px;
padding:0;
margin:0 auto; }
/* Header Items */
#header
{ width:710px;
height:140px;
margin:0 auto;}
#title
{ background-color:inherit;
color:#FFF;
width:180px;
font-size:24px; font-weight:bold;
text-align:center;
padding:0;
margin:1.25em 0 0 0;
float:right; }
#title a
{ background-color:inherit;
color:#FFF;
text-decoration: none;}
#tagline
{ background-color:inherit;
color:#AAA;
width:350px;
font-size:12px;
padding:10px 0 0 0;
margin:0 auto;
clear:right;}
#navbar ul
{ width: 510px;
height:30px;
font-size:14px;
padding: 0;
margin:2.75em 0 0 0;
float:left;}
#navbar ul li
{ text-align:center;
border-left:1px solid #EEE;
padding:0 5px;
display: inline;
float: left;}
#navbar a
{ background-color:inherit;
color:#FFF;
text-decoration: none;}
#navbar ul li.first
{border:0; }
#navbar a:hover,#navbar a.current-cat
{ background-color:inherit;
color:#666;
text-decoration: none;}
/* Content Items */
#maindiv
{ width:700px;
padding:0;
margin:0 auto; }
#maindiv ul
{ list-style:none;
text-align:left;
padding:0;
margin:0 0 10px 30px;}
#maindiv ul li
{ background: url(mlpdesign04-images/bullet.gif) 0 4px no-repeat;
padding:2px 0 2px 18px;
display:block; }
#content
{ width:475px;
text-align:left;
padding:0;
margin:0;
float:left;}
#content span
{ background-color:inherit;
color:#999;
font-size:11px;
word-spacing:1px; }
#content a
{ background-color:inherit;
color:#F9C;
text-decoration:none; }
#content a:hover
{ text-decoration:underline; }
#content .item
{ padding:15px 15px 0 15px;
margin:0; }
/* Sidebar Items */
#sidebar
{ width:210px;
padding:30px 0 0 0;
margin:0;
float:right; }
#sidebar .heading
{ background:url(mlpdesign04-images/heading.gif) no-repeat;
background-color:inherit;
color:#FFF;
width:205px;
height:25px;
text-align:center;
font-size:12px; font-weight:bold;
line-height:1.75em;
padding:0;
margin:5px auto 10px auto; }
#sidebar a
{ background-color:inherit;
color:#666;
text-decoration:none; }
#sidebar a:hover
{ background-color:inherit;
color:#F9C; }
/* Footer Items */
#footer
{ background-color:#FFF;
color:#CCC;
width:700px;
font-size:11px;
padding:8px 0;
margin:0 auto; }
#footer a
{ background-color:inherit;
color:#CCC;
text-decoration:none; }
#footer a:hover
{ background-color:inherit;
color:#F9C; }
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
<!--Header Items -->
<div id="header">
<div id="title"> <a href="http://www.free-css.com/">mlpdesign04</a></div>
<div id="navbar">
<ul>
<li class="first"><a href="http://www.free-css.com/">Home</a></li>
<li><a class="current-cat">About</a></li>
<li><a href="http://www.free-css.com/">Page 3</a></li>
<li><a href="http://www.free-css.com/">Page 4</a></li>
<li><a href="http://www.free-css.com/">Page 5</a></li>
</ul>
</div>
<div id="tagline">
<p>This could be your tagline, or a brief description of your website. Or you could leave it blank. It's all up to you.</p>
</div>
</div>
<!-- Main Body Items -->
<div id="maindiv">
<!-- Articles -->
<div id="content">
<div class="item">
<h1>About this template</h1>
<span>Posted on 11 April 2007, 2:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">0 Comment(s)</a>.</span>
<p>This template, mlpdesign04 (a.k.a. "pink"), 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. For commercial use, please contact me.</p>
<p>Please DO NOT use it in adult or adult-oriented websites!</p>
</div>
<div class="item">
<h1>Reminders when editing</h1>
<span>Posted on 11 April 2007, 2:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">0 Comment(s)</a>.</span>
<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 (default.css) file. Otherwise, the code may not validate or may not show up properly in other browsers.</p>
</div>
<div class="item">
<h1>Space fillers, an image, and the blockquote</h1>
<span>Posted on 11 April 2007, 2:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">0 Comment(s)</a>.</span>
<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="mlpdesign04-images/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>
<!-- Sidebar -->
<div id="sidebar">
<div class="heading">Search</div>
<form action="POST">
<p>
<input type="text" name="search" value="Enter search term..." size="20" />
<input type="" name="submit" src="mlpdesign04-images/submit.gif" class="button" />
</p>
</form>
<div class="heading">Categories</div>
<ul>
<li><a href="http://www.free-css.com/">Category One</a></li>
<li><a href="http://www.free-css.com/">Category Two</a></li>
<li><a href="http://www.free-css.com/">Category Three</a></li>
<li><a href="http://www.free-css.com/">Category Four</a></li>
</ul>
<div class="heading">Archives</div>
<ul>
<li><a href="http://www.free-css.com/">March 2007</a></li>
<li><a href="http://www.free-css.com/">February 2007</a></li>
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
</ul>
<div class="heading">Links</div>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link Two</a></li>
<li><a href="http://www.free-css.com/">Link Three</a></li>
<li><a href="http://www.free-css.com/">Link Four</a></li>
<li><a href="http://www.free-css.com/">Link Five</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<p>© Copyright 2007 Yout Name. All rights reserved. <br />
Template design & code by <a href="http://www.mlpdesign.net" title="Template by mlpdesign.net">MLP Design</a>.</p>
</div>
</body>
</html>
Related examples in the same category