plain1 : Effect 2 « Templates « HTML / CSS






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 &amp; xhtml</a> <a href="#about">about the author</a> </div>
  <div id="header">
    <h1>plain v1.0</h1>
    <h2>A simple CSS &amp; 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 &amp; 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 &amp; 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

1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain2
6.plastic-surgery
7.plastics
8.overdose
9.outlined
10.optimism
11.optimistic
12.Modern_Theme
13.MultiStrangeColor
14.modern
15.minimalistic
16.primitive
17.sparkle
18.sparkling
19.spotlight
20.simplyfluid
21.slider
22.pragmatic
23.popular
24.primitif
25.pure-web-2.0
26.pure
27.reflection
28.reflections
29.royal-cyan
30.royal_policy
31.smalltown
32.smallwindow
33.smartdesign
34.smarttouch
35.splendid
36.workfire
37.webtile
38.Wide_Side
39.zionnarrow
40.zionnarrows
41.xtreme
42.ZEN
43.zenlike
44.wondrous
45.stonewalled
46.tattoopatt
47.tattoopattern
48.tastelessly
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness