plain2
<!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 2.0</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body {
background-color:#fff;
font-family:"Trebuchet MS", Arial, Verdana;
font-size:12px;
color:#444444;
margin:0;
}
#header {
background-image:url(plain2-images/backgrounds/menu.jpg);
background-position:top;
background-repeat:repeat-x;
}
#header-container {
width:765px;
margin:0 auto;
padding:29px 0 0 0;
}
#header h1 {
font-family:Garamond, Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size:46px;
color:#000;
padding:0!important;
padding:16px 0 0 0;
margin:15px 0 0 0;
}
#header h1 a {
text-decoration:none;
color:#000;
}
#header h1 a:hover {
border:none;
}
#header img {
float:left;
margin:0 30px 0 0;
}
#header ul {
margin:53px 0 60px 0 !important;
margin:52px 0 60px 0;
padding:0;
float:right;
}
#header p {
float:right;
border-left:1px solid #ccc;
padding:25px 0 15px 20px;
margin:-27px 0 0 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
#sidebar input {
width:200px;
background-color:#f6f6f6;
border-top:1px solid #eee;
border-right:1px solid #f9f9f9;
border-bottom:1px solid #f9f9f9;
border-left:1px solid #eee;
font-family:"Trebuchet MS", Tahoma, Verdana;
color:#ccc;
padding:4px;
margin:3px;
}
#sidebar input:hover {
border:1px solid #ccc;
color:#666;
}
#sidebar input:focus {
border:1px solid #999;
color:#333;
}
#content input {
width:300px;
background-color:#f6f6f6;
border-top:1px solid #eee;
border-right:1px solid #f9f9f9;
border-bottom:1px solid #f9f9f9;
border-left:1px solid #eee;
font-family:"Trebuchet MS", Tahoma, Verdana;
color:#ccc;
padding:4px;
margin:3px 3px 3px 50px;
}
#content input:hover {
border:1px solid #ccc;
color:#666;
}
#content input:focus {
border:1px solid #999;
color:#333;
}
#content textarea {
width:300px;
background-color:#f6f6f6;
border-top:1px solid #eee;
border-right:1px solid #f9f9f9;
border-bottom:1px solid #f9f9f9;
border-left:1px solid #eee;
font-family:"Trebuchet MS", Tahoma, Verdana;
color:#ccc;
padding:4px;
margin:3px 3px 3px 50px;
}
#content textarea:hover {
border:1px solid #ccc;
color:#666;
}
#content textarea:focus {
border:1px solid #999;
color:#333;
}
.articlemenu {
border-top:1px solid #eee;
margin:50px 0 0 0;
padding:0;
text-align:right;
}
#header a {
color:#43CBAE;
text-decoration:none;
}
#header a:hover {
border-bottom:1px dotted #333;
}
#header li {
float:left;
display:block;
list-style:none;
}
#header li a {
display:block;
width:92px;
text-align:center;
color:#fff;
text-decoration:none;
background-image:url(plain2-images/backgrounds/menua.jpg);
background-repeat:no-repeat;
padding:5px 0 9px 0;
}
#header li a:hover {
background-image:url(plain2-images/backgrounds/menuahover.jpg);
border:none;
padding:6px 0 8px 0;
}
.clear {
clear:both;
}
#container {
width:765px;
margin:0 auto;
}
#sidebar {
float:left;
width:220px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#777;
line-height:20px;
border-bottom:1px solid #eee;
}
#sidebar h1 {
color:#CB43A5;
font-size:16px;
font-family:"Trebuchet MS", Arial, Verdana;
}
#sidebar ul {
margin:0;
padding:0;
}
#sidebar li {
margin:0;
padding:0;
list-style:none;
}
#sidebar li a {
display:block;
padding:5px 5px 5px 10px;
margin:0 0 1px 0;
background-color:#f6f6f6;
border-right:10px solid #fff;
color:#666;
text-decoration:none;
border-left:2px solid #ddd;
}
#sidebar li a:hover {
background-color:#eee;
color:#333;
border-right:10px solid #eee;
}
#sidebar p {
padding: 0 30px 0 5px;
margin:20px 0 20px 0;
}
#content {
margin:0 0 0 220px;
border-left:1px solid #eee;
}
#content h1 {
font-family:Garamond, Georgia, "Times New Roman", Times, serif;
font-size:34px;
font-weight:normal;
color:#000;
letter-spacing:-1px;
background-image:url(plain2-images/backgrounds/h1.jpg);
background-position:left;
background-repeat:no-repeat;
padding:50px 10px 10px 30px;
border-top:2px solid #eee;
}
#content h2 {
font-family:Garamond, Georgia, "Times New Roman", Times, serif;
font-size:24px;
font-weight:normal;
color:#000;
letter-spacing:-1px;
padding:15px 15px 15px 40px;
}
#content h3 {
font-family:"Trebuchet MS", Tahoma, Verdana;
font-size:14px;
font-weight:normal;
color:#008CBA;
letter-spacing:-1px;
padding:0px 15px 0px 40px;
margin:0;
}
#content p {
padding:20px 50px 20px 50px;
line-height:20px;
}
#content ul {
margin: 10px 10px 10px 30px;
}
#content li {
list-style:none;
background-image:url(plain2-images/backgrounds/li.jpg);
background-position:top left;
background-repeat:no-repeat;
padding:0px 5px 0px 20px;
margin:15px 0 15px 0;
}
#sidebar img {
padding:5px;
border:5px solid #eee;
float:left;
margin:10px 10px 0px 0px;
}
#description {
width:720px;
background-color:#FFFFFF;
padding:20px 20px 10px 20px!important;
padding:30px 20px 10px 20px;
margin:-35px auto 0 auto !important;
margin:-35px auto 50px auto;
font-size:16px;
color:#32C601;
font-family:"Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
background-image:url(plain2-images/backgrounds/description.jpg);
background-position:top;
background-repeat:repeat-x;
border:1px solid #fff;
line-height:25px;
}
#description a {
font-weight:bold;
color:#21b500;
text-decoration:none;
}
#content a {
color:#333;
background-color:#eee;
border-bottom:1px solid #ccc;
padding:0 4px 0 4px;
text-decoration:none;
}
#content a:hover {
background-color:#ddd;
border-bottom:1px solid #bbb;
color:#000;
}
#content img {
float:right;
border:none;
margin:10px 10px 10px 20px;
padding:5px;
background-color:#fff;
border:3px solid #eee;
}
#footer {
padding:15px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
margin:50px 0 50px 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#999;
clear:both;
}
#footer a {
color:#666;
}
#footercontent {
width:700px;
margin:0 auto 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div id="header-container">
<p>Get in touch: 0800 112233 | <a href="http://www.free-css.com/">email@email.com</a><br />
<a href="#container" style="padding-right:10px; background-image:url(plain2-images/backgrounds/downarrow.gif); background-position:right; background-repeat:no-repeat;">Skip to Content</a></p>
<img src="plain2-images/logo.jpg" alt="Your Logo" title="Your Logo" />
<h1><a href="http://www.free-css.com/">Plain 2.0</a></h1>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#css">css & xhtml</a></li>
<li><a href="#author">The Author</a></li>
</ul>
<br class="clear" />
</div>
</div>
<div id="description">
<p>This is where the description of your web site will go. This element of the web page is easily removed if you don't want to have it on any page besides the homepage. Just delete it! Heres an <a href="http://www.free-css.com/">Example Link</a>.</p>
</div>
<div id="container">
<div id="sidebar">
<h1>Example Header</h1>
<p> Here's some links, you can use this space for whatever you want, I suppose! </p>
<ul>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">Six Shooter Media</a></li>
<li><a href="http://www.free-css.com/">JK.co.uk</a></li>
<li><a href="http://www.free-css.com/">Buy a Button</a></li>
</ul>
<p> Think of anything else useful to put here? GREAT! Then put it here and make it happy! </p>
<h1>Your Logo</h1>
<img src="plain2-images/logo.jpg" alt="" />
<p>This is, of course just a sample logo. Use it if you want! That's no problem. You can change the colour easily if you do want to use it by opening it in a graphics program and adjusting the Hue/Saturation. If you don't want to use it, just stick your own logo in there!</p>
<h1>Log In</h1>
<input type="text" value="User Name" />
<input type="password" value="Password" />
<input name="" type="submit" />
</div>
<div id="content">
<h1><a name="intro" id="intro" style="visibility:hidden"></a>Introduction</h1>
<h3>Just some descriptive text</h3>
<p> Hello and welcome to Plain 2.0. This template being the follow up to my previous template "Plain 1.0". It adheres to the same main ideas as the original: Lots of white space while still being visually appealing and readable.<br />
Since so many people seemed to enjoy Plain 1.0 I thought I should provide users with an alternative to that template. Something of the same style that looks a bit different.<br />
The template works fine in all browsers and resolutions although it does look a bit tight in 800x600. For me 800x600 is just too small to fit readable content into that isnt a pain to read in any resolution above that. If the "tightness" bugs you, the layout is easily slimmed by adjusting a few values in the css. </p>
<div class="articlemenu"> <a href="http://www.free-css.com/">Read More</a> <a href="http://www.free-css.com/">12 Comments</a> </div>
<h1><a name="css" id="css" style="visibility:hidden"></a>CSS & XHTML</h1>
<h3>Because it's important!</h3>
<p> As anyone looking for a web site 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 benefits of this include; </p>
<ul>
<li>The web site rendering correctly in a wide range of browser platforms</li>
<li>Since CSS is used to maximise the aesthetics of the web site the load times are extremely low making for an extremely accessible web site.</li>
<li>Low use of images saves bandwidth and improves load times</li>
</ul>
<p> For more information regarding this, and lots of other useful web design related stuff, follow this link. </p>
<div class="articlemenu"> <a href="http://www.free-css.com/">Read More</a> <a href="http://www.free-css.com/">12 Comments</a> </div>
<h1><a name="author" id="author" style="visibility:hidden"></a>About the Author</h1>
<h3>About Me!</h3>
<p> My name's Jay and I work as a web designer! You can view my work on my web site; Six Shooter Media. Like 5.9 billion other people on this planet I also run my own blog. Lovely eh!? </p>
<div class="articlemenu"> <a href="http://www.free-css.com/">Read More</a> <a href="http://www.free-css.com/">12 Comments</a> </div>
</div>
</div>
<div id="footer">
<div id="footercontent"> © You 2005<br />
Web template (Plain 2.0) designed by <a href="http://www.sixshootermedia.com">James Koster</a>. </div>
</div>
</body>
</html>
Related examples in the same category