steppingstone
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Stepping Stone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
background-color:#FFFFFF;
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#bbbbbb;
/* OPTIONAL BACKGROUND IMAGE
background-image:url(steppingstone-images/backgrounds/main.jpg);
background-position:center;
background-repeat:repeat-y;
*/
}
a {
color:#999999;
}
a:hover {
text-decoration:none;
}
textarea,input,submit {
background-color:#eeeeee;
color:#666666;
padding:5px;
border:none;
margin:3px;
}
h1 {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:200%;
color:#000000;
font-weight:normal;
}
/* THE AREA THAT CONTAINS THE STONE IMAGE AND THE WEBSITE TITLE */
#title {
margin:0 auto 0 auto;
text-align:center;
margin-bottom:25px;
}
#title p {
font-variant:small-caps;
letter-spacing:2px;
}
/* PROPERTIES OF THE HEADER IMAGE */
#title img {
border:none;
}
/* THE AREA THAT CONTAINS ALL THE CONTENT OF THE WEBSITE */
#container {
width:600px;
margin:0 auto 0 auto;
}
/* THE SIDEBAR WITHIN THE CONTAINER */
#sidebar {
width:200px;
float:right;
}
#sidebar h1 {
font-family:"Trebuchet MS", Arial, Verdana;
text-align:right;
font-size:200%;
color:#626477;
border-bottom:1px dashed #eeeeee;
}
#sidebar p {
line-height:20px;
}
/* THE MENU */
#menu {
text-align:right;
}
#menu a {
color:#999999;
background-image:url(steppingstone-images/backgrounds/a.jpg);
background-position:right;
background-repeat:no-repeat;
padding-right:10px;
line-height:15px;
text-decoration:none;
}
#menu a:hover {
color:#cccccc;
background-image:url(steppingstone-images/backgrounds/a_hover.jpg);
}
/* THE AREA NEXT TO THE SIDEBAR */
#content {
margin-right:220px;
padding-right:20px;
border-right:1px solid #cccccc;
background-image:url(steppingstone-images/backgrounds/content.jpg);
background-position:right;
background-repeat:repeat-y;
}
#content h1 {
font-family:"Trebuchet MS", Arial, Verdana;
text-align:left;
font-size:200%;
color:#626477;
border-bottom:1px dashed #eeeeee;
padding-top:15px !important;
padding-top:0;
background-image:url(steppingstone-images/stone.gif);
background-position:top right;
background-repeat:no-repeat;
}
#content p {
line-height:20px;
text-indent:15px;
}
#content ol,ul {
line-height:25px;
}
#content li {
list-style-image:url(steppingstone-images/backgrounds/li.gif);
}
/* THE FOOTER */
#footer {
width:580px;
margin:0 auto 0 auto;
padding:10px;
text-align:center;
border-top:1px dashed #cccccc;
}
</style>
</head>
<body>
<div id="title"> <a href="http://www.free-css.com/"><img src="steppingstone-images/stone.gif" alt="" border="0" /></a><br />
<h1>Stepping Stone</h1>
<p> A css & xhtml compliant web template </p>
</div>
<div id="container">
<div id="sidebar">
<h1>Main Menu</h1>
<div id="menu"> <a href="http://www.free-css.com/">Home</a><br />
<a href="http://www.free-css.com/">Link Here</a><br />
<a href="http://www.free-css.com/">Link Here</a><br />
<a href="http://www.free-css.com/">Link Here</a><br />
<a href="http://www.free-css.com/">Link Here</a><br />
<a href="http://www.free-css.com/">Link Here</a><br />
</div>
<h1>Another Header</h1>
<p> Some general information about the site maybe? A counter maybe? Anything you want that isn't supposed to be housed in the content area to the left of this paragraph, stick it here, or in under another header underneath this one - the choice is yours. </p>
<h1>Log In</h1>
<p>
<input type="text" value="Password" />
<br />
<input name="" type="text" />
<br />
<input type="button" value="Log In" />
</p>
<h1>Search</h1>
<p>
<input type="text" value="Search" />
</p>
</div>
<div id="content">
<h1>Introduction</h1>
<p> Hello and welcome to Stepping Stone, another web template designed by James Koster. The inspiration for this template came from some really nice photographs of objects on white surfaces that I saw earlier today. I took a look around for something to photograph to get this effect and decided to use this stone. From there I decided that the template would extremely light and easy on the eyes - trying to uphold the feel of this photograph. </p>
<p> Another nice feature of this template is the ability to change the image at the top to somethign more suiting to your site (your logo maybe), whilst still keeping the overall feel of the page. I find that alot of web templates are too reliant on the images they contain and thus only appeal to a small market. I try to make my templates uable by anyone. </p>
<h1>CSS & XHTML</h1>
<p> As anyone looking for a website template to use would expect - this template is of course, both CSS and XHTML valid according to the w3c. The benfits of this include; </p>
<ul>
<li>The website rendering correctly in a wide range of browser platforms</li>
<li>Since CSS is used to maximise the aesthetics of the website the load times are extremely low making for an extremely excessable website.</li>
<li>Low use of images saves bandwidth and improves load times</li>
</ul>
<p> For more information regarding this, and lots of other usefull web design related stuff, follow this link. </p>
<h1>About the Author</h1>
<p> Hi there. My names Jay and I'm an 18 Year old web designer from the United Kingdom. My company; Six Shooter Media provides a wide range of web design possibilities to a wide range of clients. I specialise in CSS and XHTML coding but can also install and modify PHP scripts such as Counters and Content Management Systems. </p>
<p> I also run my own personal website, which I use as a blog, a place to upload my photographs/drawings, do a bit of writing, and post news about my web design capers now and again. Along side this website, I've just opened another website which I use to host my templates and write tutorials for web design beginners. </p>
<p> I make these web templates in my spare time as a kind of hobby, plus I like 'giving something back' to the web design community. Feel free to download and use this template as you wish - for you site or just for education purposes, but please leave the link to my website in at the bottom of the page, thanks. </p>
</div>
</div>
<div id="footer"> This is the area for the footer text and all that other boring stuff.<br />
Valid: <a href="http://validator.w3.org/check?uri=referer">xhtml</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">css</a><br />
Designed by: <a href="http://www.sixshootermedia.com">Six Shooter Media</a> </div>
</body>
</html>
Related examples in the same category