neapolitan
<!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>Neapolitan</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
background: #FEEDA4 url('neapolitan-images/bg.jpg') repeat-x top left;
font: 400 1.0em arial,sans-serif;
color: #211000;
}
/*Universal Styles*/
a {
text-decoration: none;
}
p {
line-height: 1.5em;
font-size: 0.8em;
margin-bottom: 20px;
}
img {
padding: 0;
}
h2 {
font: 600 1.4em garamond,georgia,'times new romans',serif;
margin: 0;
color: #FF3399;
}
h3 {
font: 600 1.0em verdana,arial,sans-serif;
color: #513816;
margin: 0;
}
h4 {
font: 400 1.0em verdana,arial,sans-serif;
color: #FF3399;
padding: 27px 8px 12px 4px; margin: 0;
}
ul.null {
margin: 0;
padding: 0;
list-style-type: none;
}
/*Page Layout*/
#container {
width: 760px;
margin: 0 auto;
}
#side {
margin-top: 5px;
padding: 0;
float: right;
clear: none;
width: 202px;
}
#head {
height: 302px;
margin: 0px 202px 0 0;
}
#main {
margin: 0;
padding: 0 202px 50px 0;
background: #FEEDA4 url('neapolitan-images/faux.jpg') repeat-y right;
}
/*Sidebar Style*/
#sidebar {
background: url('neapolitan-images/sidetop.jpg') no-repeat top;
padding: 0 3px 40px 3px;
margin-top: 231px;
}
img.flower {
float: right;
margin-top: 0; padding: 0;
border: 0;
clear: none;
}
#sidebar li {
margin-bottom: 1px;
padding: 0px;
list-style-type: none;
display: inline;
}
#sidebar li a {
padding: 8px;
display: block;
margin: 0;
font-size: 0.8em;
color: #BD9A56;
text-decoration:none;
background-color: #211000;
border-bottom: 1px solid #100900;
}
#sidebar li a:hover {
background-color: #663300;
color:#FEEDA4;
}
/*Head and Nav Styles */
span.title {
display: block;
font: 400 2.0em Georgia,Garamond,'Times New Romans',serif;
color: #FF3399;
margin-bottom: 40px;
padding-top: 55px;
clear: none;
}
#nav {
margin-left: -15px;
list-style-type: none;
display: inline;
}
#nav li {
float: left;
margin: 0 25px 0 0;
padding: 0;
}
#nav li a {
display: block;
background: #2D1A06 url('neapolitan-images/box.jpg') no-repeat top center;
font: 400 1.0em verdana,arial,sans-serif;
color: #FEE682;
text-align: center;
}
#nav li a:hover {
display: block;
background: #2D1A06 url('neapolitan-images/boxhover.jpg') no-repeat top center;
font: 400 1.0em verdana,arial,sans-serif;
color: #FF3399;
}
span.big {
display: block;
font: 400 2.0em arial,sans-serif;
margin-bottom: 15px;
padding: 12px 25px;
text-decoration: none;
}
/*Main Content*/
.entry {
background: #ECDB96 url('neapolitan-images/corner.jpg') no-repeat top left;
margin: 20px 20px 0 0;
padding: 12px;
}
.entry img {
padding: 2px;
border: 2px solid #2D1A06;
}
a.main{
text-decoration: underline;
color: #533a18;
}
a.main:hover {
text-decoration: none;
color: #FF3399;
}
/*Main Content Tags*/
img.right {
float: right;
margin: 0 0 8px 8px;
}
img.left {
float: left;
margin: 0 8px 8px 0;
}
p.quote {
padding-left: 20px;
font: 400 1.2em garamond,georgia,'times new romans',serif;
background: #ECDB96 url('neapolitan-images/quote.jpg') no-repeat top left;
}
.comment {
display: block;
padding: 5px;
font-size: 0.6em;
background-color: #2D1A06;
color: #FFD57A;
text-align: right;
}
.comment a {
color: #FFD57A;
text-decoration: none;
}
.comment a:hover {
text-decoration: underline;
}
form label{
display:block;
}
form input.text, form textarea{
width:375px;
border:1px #87764B solid;
color:#211000;
padding:4px 5px;
font:12px Verdana,Arial,san-serif;
background-color: #F6EDCB;
}
form input.text:hover, form textarea:hover{
border:1px #87764B solid;
}
form input.text:focus, form textarea:focus{
border:1px #2D1A06 solid;
color:#211000;
}
form input.button{
margin-right:8px;
padding:3px 5px;
font:12px Verdana,Arial,san-serif;
}
* html form input.text,
* html form textarea{
border-color:#533a18;
color:#333;
}
/*Footer*/
#footer {
width: 100%;
background: #211000;
border-top: solid 4px #663300;
}
#footer .container {
width: 760px;
margin: 0 auto;
padding: 30px 0;
color: #BD9A56;
}
#footer a.credit {
color: #967740;
text-decoration: underline;
}
#footer a.credit:hover {
color: #FF3399;
text-decoration: none;
}
.links {
list-style-type: none;
width: 210px;
margin: 0 0 0 0;
padding: 0 10px 30px 10px;
background: #2D1A06 url('neapolitan-images/footcorner.jpg') no-repeat top left;
}
.linksright {
float: right;
width: 210px;
margin-left: 35px;
padding: 0 10px 30px 10px;
list-style-type: none;
background: #2D1A06 url('neapolitan-images/footcorner.jpg') no-repeat top left;
}
.linksright li {
display: inline;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 0.7em;
}
.linksright li a {
padding: 4px;
display: block;
margin: 0;
color: #BD9A56;
text-decoration:none;
background-color: #2D1A06;
border-bottom: 1px solid #211000;
}
.linksright li a:hover {
background-color: #211000;
color:#FEEDA4;
}
.links li {
display: inline;
margin: 0px;
padding: 0px;
list-style-type: none;
font-size: 0.7em;
}
.links li a {
padding: 4px;
display: block;
margin: 0;
color: #BD9A56;
text-decoration:none;
background-color: #2D1A06;
border-bottom: 1px solid #211000;
}
.links li a:hover {
background-color: #211000;
color:#FEEDA4;
}
p.foot {
color: #967740;
margin-top: 5px;
font-size: 0.7em;
line-height: 1.6em;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="side"> <img class="flower" src="neapolitan-images/flower.jpg" alt="" />
<div id="sidebar">
<h4>Recent Posts</h4>
<ul class="null">
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">CSS Check</a></li>
<li><a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a></li>
<li><a href="http://www.free-css.com/">DemusDesign</a></li>
<li><a href="http://www.free-css.com/">Random link to a Neapolitan Ice Cream Sandwich</a></li>
</ul>
<h4>Blogroll</h4>
<ul class="null">
<li><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor Sit</a></li>
<li><a href="http://www.free-css.com/">Amet</a></li>
<li><a href="http://www.free-css.com/">Consectetuer</a></li>
<li><a href="http://www.free-css.com/">Adipiscing Elit</a></li>
<li><a href="http://www.free-css.com/">Quisque Id</a></li>
<li><a href="http://www.free-css.com/">Massa Sed</a></li>
</ul>
</div>
</div>
<div id="head"> <span class="title">Neapolitan</span>
<div id="nav">
<ul class="null">
<li><a href="http://www.free-css.com/"><span class="big">1</span>About</a></li>
<li><a href="http://www.free-css.com/"><span class="big">2</span>Lorem</a></li>
<li><a href="http://www.free-css.com/"><span class="big">3</span>Ipsum</a></li>
<li><a href="http://www.free-css.com/"><span class="big">4</span>Dolor</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="entry">
<h2>A New Template</h2>
<h3>from DemusDesign</h3>
<p><img class="right" src="neapolitan-images/icecream.jpg" alt="" /> Neapolitan is a new fun template from DemusDesign. It took a lot of self-control to create it without constantly heading to the freezer for some ice cream. New colors for me and I successfully made a template without any gradients (yay). It validates as XHTML 1.0 Strict. If you scroll down you will see tags for blockquotes, images and forms.</p>
<p>Feel free to use the template, but please include the link back to my site in the footer. Thanks, enjoy.</p>
<div class="comment"><a href="http://www.free-css.com/">Comment (0)</a> | <a href="http://www.free-css.com/">Permalink</a></div>
</div>
<div class="entry">
<h2>Another post</h2>
<h3>with a Subheading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque id massa. Sed quis massa vel lorem tempus interdum. Donec bibendum nulla a tellus. Suspendisse arcu. Mauris tortor. Pellentesque sollicitudin euismod ante. Mauris vulputate. Aliquam luctus aliquet ante. Aliquam nec lorem ac ipsum vulputate sagittis. Nullam massa justo, ultrices ut, convallis ac, posuere sed, est.</p>
<div class="comment"><a href="http://www.free-css.com/">Comment (0)</a> | <a href="http://www.free-css.com/">Permalink</a></div>
</div>
<div class="entry">
<h2>Some Styled Tags</h2>
<br />
<h3>A Right Floated Image</h3>
<p><img class="right" src="neapolitan-images/icecream.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Quisque id massa. Sed quis massa vel lorem tempus interdum. Donec bibendum nulla a tellus. Suspendisse arcu. Mauris tortor. Pellentesque sollicitudin euismod ante. Mauris vulputate. Aliquam luctus aliquet ante. Aliquam nec lorem ac ipsum vulputate sagittis. Nullam massa justo, ultrices ut, convallis ac, posuere sed, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Quisque id massa. Sed quis massa vel lorem tempus interdum. Donec bibendum nulla a tellus. Suspendisse arcu.</p>
<h3>Now to the Left</h3>
<p><img class="left" src="neapolitan-images/icecream.jpg" alt="" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Quisque id massa. Sed quis massa vel lorem tempus interdum. Donec bibendum nulla a tellus. Suspendisse arcu. Mauris tortor. Pellentesque sollicitudin euismod ante. Mauris vulputate. Aliquam luctus aliquet ante. Aliquam nec lorem ac ipsum vulputate sagittis. Nullam massa justo, ultrices ut, convallis ac, posuere sed, est. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Quisque id massa. Sed quis massa vel lorem tempus interdum. Donec bibendum nulla a tellus. Suspendisse arcu.</p>
<h3>Blockquote</h3>
<p class="quote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Quisque id massa. Sed quis massa vel lorem tempus interdum.</p>
<h3>Time for a Form</h3>
<form action="http://www.free-css.com/" method="post">
<p>
<label>Name:</label>
<input type="text" class="text" name="name" />
</p>
<p>
<label>Email:</label>
<input type="text" class="text" name="email" />
</p>
<p>
<label>Your Message:</label>
<textarea rows="8" cols="30" name="message"></textarea>
</p>
<p>
<input type="submit" class="button" value="Submit" />
<input type="reset" class="button" value="Clear" />
</p>
</form>
<div class="comment"><a href="http://www.free-css.com/">Comment (0)</a> | <a href="http://www.free-css.com/">Permalink</a></div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="linksright">
<h4>Recent Updates</h4>
<ul class="null">
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Free Layouts</a></li>
<li><a href="http://www.free-css.com/">Free Menus</a></li>
<li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
<li><a href="http://www.free-css.com/">Commercial Templates</a></li>
</ul>
</div>
<div class="linksright">
<h4>Recent Comments</h4>
<ul class="null">
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Free Layouts</a></li>
<li><a href="http://www.free-css.com/">Free Menus</a></li>
<li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
<li><a href="http://www.free-css.com/">Commercial Templates</a></li>
</ul>
</div>
<div class="links">
<h4>Recent Posts</h4>
<ul class="null">
<li><a href="http://www.free-css.com/">Free Templates</a></li>
<li><a href="http://www.free-css.com/">Free Layouts</a></li>
<li><a href="http://www.free-css.com/">Free Menus</a></li>
<li><a href="http://www.free-css.com/">CSS Tutorials</a></li>
<li><a href="http://www.free-css.com/">Commercial Templates</a></li>
</ul>
</div>
<br />
<br />
<p class="foot"> Flower image courtesy of <a href="http://cultureinline.free.fr/dotclear/index.php" class="credit">Culture Inline</a><br />
Template by <a href="http://www.demusdesign.com" class="credit">DemusDesign</a><br />
© Your Site 2007 </p>
</div>
</div>
</body>
</html>
Related examples in the same category