plain2 : Effect 2 « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Effect 2 




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: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 !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: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 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:auto 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 &amp; 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 &amp; 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"> &copy; You 2005<br />
    Web template (Plain 2.0designed by <a href="http://www.sixshootermedia.com">James Koster</a>. </div>
</div>
</body>
</html>

   
    
    
  














Related examples in the same category
1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.