A_Simple_Theme
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A Simple Theme</title>
<style type='text/css'>
/*
This CSS document was written by Caleb Pierce (ridgehkr.com)
This template is free for you to use and modify, etc. However, please insert a link on your site to
ridgehkr.com for design credits. thank you!
*/
*{
margin:0px;
padding:0px;
}
body{
background:rgb(180,180,180) url(A_Simple_Theme-images/bodybg.png) repeat-x center top;
font-family:Verdana,'Times New Roman',Times,serif;
font-size:11px;
color:#222;
line-height:18px;
}
a {
color:#394132;
text-decoration:none;
}
h1,h2,h3{
font-family:Georgia, "Times New Roman", Times, serif;
padding:5px 0px 5px 0px;
}
#mc_container h2
{
text-align:right;
font-weight:lighter;
color:#933B39;
margin-bottom:10px;
border-bottom:1px solid #8d8d8d;
font-size:3em;
padding-bottom:8px;
font-family:Georgia, serif;
}
h1{
padding-top:0px;
font-size:25px;
font-family:"Trebuchet MS", Georgia, "Times New Roman", Times, serif;
font-weight:lighter;
color:#8F8F8F;
border-bottom:1px solid #EDEDED;
text-align:right;
}
h2{
font-size:20px;
}
h3{
color:#373E51;
font-size:1.2em;
font-weight:lighter;
}
#nav_container h3{
font-size:1.6em;
font-family:Georgia,'Trebuchet MS', serif;
font-weight:lighter;
letter-spacing:.3em;
margin-top:51px;
padding-top:5px;
color:#222;
}
li span {
color:#8d8d8d;
}
p{
padding-top:8px;
padding-bottom:8px;
}
hr{
border:0;
background-color:#9D9DA1;
height:1px;
width:95%;
margin:0px auto;
text-align:center;
}
img{
border:none;
}
/*pre-set image classes*/
.right
{
float:right;
padding:5px;
background-color:#e8e8e8;
border:1px solid #8d8d8d;
margin:10px 0px 10px 10px;
}
.right-off
{
float:right;
}
.left
{
float:left;
padding:5px;
background-color:#e8e8e8;
border:1px solid #8d8d8d;
margin:10px 10px 10px 0px;
}
.left-off
{
float:left;
}
blockquote
{
width:400px;
margin-left:auto;
margin-right:auto;
background-color:#f5f5f5;
color:#222;
border-top:1px dashed #394132;
border-bottom:1px dashed #394132;
padding:10px;
margin-top:10px;
margin-bottom:10px;
}
blockquote a
{
text-decoration:underline;
}
blockquote span
{
color:#933B39;
font-size:1.2em;
letter-spacing:.2em;
}
#container{
margin-left:auto;
margin-right:auto;
width:768px;
border-right:6px solid #222;
}
* html #container{
padding-left:2px;
}
#c_container{
background:#FFFFFF url(A_Simple_Theme-images/cbg.png) repeat-y;
margin-top:-5px;
width:770px;
}
#close
{
text-align:right;
padding:10px;
color:#8d8d8d;
}
#close a
{
color:#222;
text-decoration:underline;
}
#header
{
width:770px;
height:100px;
background-color:#373737;
}
#header_text
{
width:300px;
color:#fff;
font-size:2em;
font-family:Georgia,Arial,'Trebuchet MS', serif;
margin-left:auto;
margin-right:auto;
padding-top:40px;
}
#header_text span
{
color:#8299AB;
letter-spacing:1em;
}
/**** Main Content ****/
#mc_container{
padding:20px 26px 20px 0px;
width:550px;
text-align:justify;
/*
background-image:url(A_Simple_Theme-images/mcbg.png);
background-position:center center;
background-repeat:no-repeat;
*/
}
#mc_container ul{
padding:3px 0px 3px 10px;
}
#mc_container ul li{
list-style-type:none;
background-repeat:no-repeat;
background-position:center left;
}
#location
{
margin-top:-10px;
margin-bottom:10px;
margin-left:0px;
color:#8d8d8d;
width:100%;
text-align:right;
}
#location a
{
color:#222;
text-decoration:none;
}
/**** Nav ****/
#nav_container{
background-color:white;
width:180px;
padding:10px 17px 0px 17px;
}
#nav_container ul{
margin-top:8px;
padding-bottom:12px;
}
#nav_container ul li{
list-style-type:none;
padding:10px 0px 5px 5px;
border-bottom:1px solid #EDEDED;
background-color:#4F6577;
}
#nav_container ul li.indent{
padding-left:30px;
}
#nav_container ul li a{
color:white;
font-weight:bold;
}
#nav_container ul li a:hover{
/*color:#007FBD;*/
text-decoration:none;
}
#nav_container ul li a.current{
font-weight:bold;
}
#footer
{
width:770px;
margin-left:auto;
margin-right:auto;
}
</style>
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="css/ie.css" />
<![endif]-->
</head>
<body>
<div id="container">
<table id="c_container" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id="top">
<td colspan="2">
<div id="header">
<!--header goes here-->
<div id="header_text">
a <span>simple</span>theme
</div>
</div>
</td>
</tr>
<tr>
<td id="nav_container" align="left" valign="top">
<h3></h3>
<ul>
<li><span>>></span> <a href="#" >Home</a></li>
<li><span>></span> <a href="#" >Pictures</a></li>
<li><span>></span> <a href="#" >Downloads</a></li>
<li><span>></span> <a href="#" >Links</a></li>
<li><span>></span> <a href="#" >Comments</a></li>
<li><span>></span> <a href="#" >Contact</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</td>
<td id="mc_container" align="left" valign="top">
<div id="location">
you can use this as intro text or page location info.
</div>
<h2>Welcome!</h2>
<p><img src="A_Simple_Theme-images/stamp.jpg" class="right" style="margin-top:0px;" alt="swirl" /></p>
<h3>Comments from the author:</h3>
<p>This template would work great as a personal site, a blog, or maybe for a small business.</p>
<p>Use your imagination - I dare you.</p>
<p>When you look at the code, you may be a little dissapointed that not only did
I use tables, but there are also a few cheap tricks (like a blank h3 for spacing).
These are in here because this site is on a code platform I wrote soon after i first
learned html. I just didn't feel like chaning much beyond colors, div locations, etc.
Obviously you can take these objectional elements out if you seriously have a problem with it.</p>
<h3>Blockquote:</h3>
<blockquote>
<p> Put something real special here that needs attention. Nam eget magna eget dui
consectetuer ullamcorper. <a href="#">Cras elementum</a> facilisis neque. Ut nec enim. Praesent ipsum
metus, vestibulum ac, auctor sed, hendrerit vitae, diam. Nullam nec ligula eu magna
vehicula commodo. <a href="#">Donec</a> vestibulum. Vivamus auctor. Donec elit. Donec in massa aliquam
neque ultrices aliquam. Praesent pede.</p>
</blockquote>
<h3>Image handling:</h3>
<p>
This theme comes with pre-set image classes to set border properties, positioning, and margins.
</p>
<ul>
<li><b>right:</b> floats an image to the right and adds a border.</li>
<li><b>right-off:</b> floats an image to the right and adds a border.</li>
<li><b>left:</b> floats an image to the right and adds a border.</li>
<li><b>left-off:</b> floats an image to the right and adds a border.</li>
</ul>
<p>
Proin ac tortor sed neque tincidunt imperdiet. Sed aliquet erat eu ante. Aliquam
erat volutpat. <a href="http://www.lipsum.com/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit. Vivamus
massa ipsum, <img src="A_Simple_Theme-images/swirl.jpg" class="left" alt="this image floats to the left" />convallis sed, accumsan ut, adipiscing a, nibh. Aliquam vestibulum
nonummy quam. Vestibulum convallis ante non ante. Donec blandit varius purus. Cras
sapien tellus, <a href="#">sagittis nec</a>, pellentesque ac, lacinia vel, augue. Donec posuere.
Quisque facilisis dui id odio. Etiam bibendum mauris nec diam. Donec vehicula egestas
risus. Morbi tristique odio vel mauris. Maecenas ac felis ac enim ullamcorper viverra.
Duis interdum imperdiet justo. Integer lobortis mi in leo.
</p>
</td>
</tr>
<tr>
<td colspan="2" id="close">
© your site 2006 | design by <a href="http://ridgehkr.com">ridgehkr</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="footer">
<img src="A_Simple_Theme-images/footer.png" alt="Footer" />
</div>
</body></html>
Related examples in the same category