plain1
<!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>Plain 1.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
margin:0;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:0.74em;
color:#555555;
background-color:#FFFFFF;
text-align:left;
}
input {
background-color:#FFFFFF;
padding:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#ffffff;
border:1px solid #728c40;
background-color:#94ae62;
margin-bottom:2px;
}
input[type=submit] {
background-color:#FFFFFF;
padding:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#666666;
border:1px solid #728c40;
margin-bottom:2px;
}
a {
color:#4D87CE;
font-weight:bold;
text-decoration:none;
}
a:hover {
color:#2a65ad;
}
ol,ul {
}
li {
list-style-image:url(plain1-images/backgrounds/li.gif);
line-height:20px;
text-align:left;
}
#menu {
width:100%;
padding-top:20px;
padding-bottom:20px;
background-color:#94AE62;
margin-bottom:50px;
color:#FFFFFF;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-variant:small-caps;
background-image:url(plain1-images/backgrounds/menu.jpg);
}
#menu a {
color:#FFFFFF;
text-decoration:none;
padding:10px;
padding-top:20px;
padding-bottom:20px;
}
#menu a:hover {
border-bottom:1px solid #ffffff;
border-left:1px solid #728d40;
border-right:1px solid #e9ffb7;
padding-left:9px;
padding-right:9px;
color:#000000;
background-color:#FFFFFF;
background-image:url(plain1-images/backgrounds/a_hover.jpg);
}
#header {
width:750px;
margin:0 auto 0 auto;
margin-bottom:40px;
}
#header h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:30px;
text-transform:uppercase;
font-weight:normal;
margin:0;
padding:0;
padding-top:5px;
color:#736451;
margin-bottom:10px;
text-align:left;
}
#header h2 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:15px;
text-transform:uppercase;
text-align:right;
font-weight:normal;
margin:0;
padding:0;
color:#000000;
border-bottom:1px solid #eeeeee;
}
#content {
width:720px;
margin:0 auto 0 auto;
text-align:left;
}
.introduction {
font-family:Helvetica, Arial, sans-serif;
line-height:20px;
font-size:12px;
color:#99B198;
text-indent:25px;
background-image:url(plain1-images/backgrounds/desc.jpg);
background-position:bottom left;
padding-left:0;
padding-right:200px;
padding-bottom:35px;
padding-top:0;
background-repeat:no-repeat;
}
.logo {
float:right;
margin-right:30px;
}
.clearer {
clear:both;
}
#sidebar {
width:160px;
float:right;
font-size:95%;
color:#6C534A;
text-align:left;
}
#sidebar h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:20px;
text-transform:uppercase;
font-weight:normal;
border-bottom:1px solid #eeeeee;
color:#728c40;
text-align:right;
}
.submenu {
}
.submenu a {
display:block;
width:100%;
background-image:url(plain1-images/backgrounds/submenua.gif);
background-position:right;
background-repeat:no-repeat;
padding:5px;
padding-right:0;
}
.submenu a:hover {
background-color:#eeeeee;
background-image:url(plain1-images/backgrounds/submenua_hover.jpg);
background-repeat:repeat-y;
}
#mainbar {
margin-right:185px;
padding-right:35px;
background-image:url(plain1-images/backgrounds/mainbar.jpg);
background-position:top right;
background-repeat:no-repeat;
}
#mainbar h1 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-size:25px;
text-transform:uppercase;
font-weight:normal;
border-bottom:1px solid #eeeeee;
color:#728c40;
}
#mainbar p {
padding:15px;
line-height:20px;
}
#mainbar .articleimg {
float:right;
padding:5px;
border:1px solid #eeeeee;
margin-left:20px;
margin-top:20px;
margin-bottom:20px;
}
#footer {
width:100%;
background-color:#b6cf84;
border-top:1px solid #d8efa6;
border-bottom:5px solid #94ae62;
padding-top:5px;
padding-bottom:5px;
color:#FFFFFF;
}
#footer a {
color:#006600;
}
#footer a:hover {
color:#009900;
}
</style>
</head>
<body>
<a name="top" id="top"></a>
<center>
<div id="menu"> <a href="http://www.free-css.com/">home</a> <a href="#intro">introduction</a> <a href="#css">css & xhtml</a> <a href="#about">about the author</a> </div>
<div id="header">
<h1>plain v1.0</h1>
<h2>A simple CSS & XHTML web template focusing on whitespace and its importance </h2>
</div>
<div id="content"> <img src="plain1-images/logo.jpg" alt="Your Logo" class="logo" />
<p class="introduction"> Hello and welcome to Plain version 1.0. This is a simple web site template maximising the use of css and xhtml. Whitespace is used in abundance to really push its importance in web design. Navigate the page via the menu at the top of the page, or the links underneath this paragraph. </p>
<div id="sidebar">
<h1>Sub Menu</h1>
<div class="submenu"> <a href="http://www.free-css.com/">Home</a> <a href="#intro">Introduction</a> <a href="#css">CSS & XHTML</a> <a href="#about">About</a> </div>
<h1>Other </h1>
<div class="submenu"> <a href="http://www.free-css.com/">Stepping Stone</a> <a href="http://www.free-css.com/">Go Faster Red</a> <a href="http://www.free-css.com/">Seaside</a> <a href="http://www.free-css.com/">Light</a> </div>
<p> You can view more of my templates on my Templates Website: Pretty as a Picture</p>
<h1>Log In</h1>
<input value="Username" type="text" />
<br />
<input name="" value="Password" type="password" />
<br />
<input value="Log In" type="button" />
</div>
<div id="mainbar">
<h1><a name="intro" id="intro"></a>Introduction</h1>
<img src="plain1-images/backgrounds/menu.jpg" alt="AN EXAMPLE IMAGE" width="60" height="60" class="articleimg" title="AN EXAMPLE IMAGE" />
<p> Hello and welcome to Plain 1.0. As mentioned earlier this is a fairly simple template, powered entirely by css and xhtml. I am also trying to make as much use of whitespace as possible. Whitespace helps keep the page looking clean and easy on the eye, whilst improving readability also. As with all my templates, a limited number of images have been used, and when they have, they've been to aid the design. This results in an easily customisable template that can be used to an array of different sites. </p>
<h1><a name="css" id="css"></a>CSS & XHTML</h1>
<p> As anyone looking for a website template to use would expect - this template is of course, both <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a> 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 accessable 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. </p>
<h1><a name="about" id="about"></a>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 footer. Put all your copyright info here.<br />
Page designed by <a href="http://www.sixshootermedia.com/">6ix Shooter Media</a><br />
</div>
</center>
</body>
</html>
Related examples in the same category