It's green!

Designer's Comments

Look carefully for specific instructions

omg so much green, ..I know -__-

But It took me awhile to finish it.

AND you can change the Banner/Header Pic...if you want, this one is only a place holder
( or you can leave it as it is ^.-)

PS: I had no time to view it in IE- but I think it will look all misaligned T_T

best view with Mozilla Firefox

(please leave a comment, if you use it ^^)

　／l、
ﾞ（ﾟ､｡７
　l、ﾞ ~ヽ
　じしf_, )ノ

Layout Code

Copy and paste to Template HTML

Help

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>green world</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background: #000;
margin: 40px;
text-align: center;
}
#wrapper {
color: #fff;
width: 1050px;
text-align:left;
position:center;
margin: auto;
}
#parent {
color: #fff;
width: 800px;
text-align:left;
position:center;
margin: 0;
float: left;
}
#head {
color: #000;
float: left;
width: 780;
height: 149px;
margin: 10px 0px 0px 20px;
}
#side-img {
color: #000;
font-size:25px;
font-family: arial;
line-height: 20px;
text-align: center;
font-weight: bold;
float: left;
width: 200px;
height: 44px;
background-image: url(http://cbimg6.com/layouts/09/09/35663ab.gif);
margin:0;
padding: 5px 0px 0px 0px;
}
#box {
width: 190px;
height: 200px;
background-image: url(http://cbimg6.com/layouts/09/09/35663ac.gif);
background-repeat:no-repeat;
color: #000;
font-family: arial;
font-size: 11px;
line-height: 13px;
text-align: left;
float:left;
margin: 5px 0px 0px 0px;
padding: 5px;
}
#box a { text-decoration: none;
color: #000;
font-family: arial;
font-size: 12px;
line-height: 16px;
font-weight: bold;
background-color: #4affe8;
}
#box a:hover { cursor: default;
color: #4affe8;
background-color: transparent;
text-decoration: line-through;
font-style: none;
background-color: #000;
}
#side {
color: #000;
float: left;
width: 200px;
}
#side a, #side a:link, #side a:active, #side a:visited { color: #caff4a;
font-size:11px;
font-family: arial;
line-height: 30px;
text-align: left;
text-transform: uppercase;
text-decoration: none;
border-bottom: 0.5px dashed #caff4a;
margin: 2px 5px;
padding: 0px 5px 0px 15px;
display: block;
}
#side a:hover, #side a:focus {
color:#69f1f9;
cursor: default;
text-decoration: none;
background-image: url(http://cbimg6.com/layouts/09/09/35663ad.gif);
border-bottom: 0.5px dashed #caff4a;
}
#banner {
color: #000;
position: right;
width: 100%;
height: 47px;
background-image: url(http://cbimg6.com/layouts/09/09/35663ae.gif);
margin: -40px 0px 0px 0px;
font-size:11px;
font-family: arial;
font-weight: bold;
line-height: 12px;
text-align: center;
}
#banner a, #banner a:link, #banner a:active, #banner a:visited { color: #000;
font-size:25px;
font-family: arial;
font-weight: bold;
line-height: 54px;
text-align: left;
text-transformation: uppercase;
text-decoration: none;
border-top: 15px solid #000;
border-bottom: 5px solid transparent;
margin: 2px 5px;
padding: 0px 5px 0px 5px;
}
#banner a:hover, #banner a:focus {
color:#000;
cursor: default;
text-decoration: none;
background-image: url(http://cbimg6.com/layouts/09/09/35663af.gif);
border-top: 15px solid #000;
border-bottom: 5px solid #000;
}
h3 { font-family: arial;
color: #000;
line-height: 20px;
text-transform: uppercase;
font-size: 14px;
letter-spacing: -1;
text-align: center;
letter-spacing: none;
background-image: url(http://cbimg6.com/layouts/09/09/35663ag.gif);
}
h2 { font-family: arial;
color: #dbdbdb;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2;
text-align: left;
letter-spacing: none;
border-bottom: 0.5px dashed #caff4a;
}
h1 { font-family: arial;
color: #000;
line-height: 18px;
font-size: 15px;
text-align: left;
font-weight: bold;
letter-spacing: none;
background-image: url(http://cbimg6.com/layouts/09/09/35663ah.jpg);
background-repeat: no-repeat;
margin: 2px;
padding: 0px 2px 5px 48px;
}
ul { font-family: arial;
font-size: 10px;line-height: 11px;
color: #e1c0b0;
background-color: transparent;
}
::-moz-selection {
background:#d6d6d6;
color:#000;
}
textarea { border: 1px solid #000;
background-color: transparent;
width: 200px;
height: 160px;
font-family: arial;
font-size: 8px;
line-height: 11px;
color: #000;
}
input { border: 1px solid #000;
background-color: transparent;
font-size: 8px;
line-height: 11px;
font-family: arial;
color: #000;
}
b, strong { font-family: arial;
font-size: 13px;
line-height: 16px;
color: #caff4a;
font-weight: bold;
}
i, em { font-family: arial;
color: #fff;
font-style: italic;
}
u { font-family: arial;
color: #fff;
text-decoration: overline;
border-bottom: 1px dotted #caff4a;
}
s, stroke { font-family: arial;
color: #caff4a;
text-decoration: line-through;
}
m { font-family: arial;
color: #000;
font-weight: bold;
text-decoration: none;
background-color: #caff4a;
padding: 0px 2px 0px 2px;
margin: 0px 2px 0px 2px;
}
#content-main {
width: 428px;
background-color: transparent;
font-size: 12px;
line-height: 16px;
padding: 0px 32px 0px 20px;
float:left;
margin: 0px 5px 0px 5px;
}
#content-side {
width: 300px;
background-color: transparent;
font-size: 12px;
line-height: 16px;
padding: 0px 0px 0px 0px;
float:left;
}
#content-side a { text-decoration: none;
color: #000;
font-family: arial;
font-size: 12px;
line-height: 16px;
font-weight: bold;
background-color: #4affe8;
}
#content-side a:hover { cursor: default;
background-color: transparent;
text-decoration: line-through;
font-style: none;
background-color: #caff4a;
}
#content {
width: 790px;
background-color: transparent;
color: #dbdbdb;
font-family: arial;
font-size: 12px;
line-height: 16px;
text-align: justify;
float:left;
padding: 65px 10px 10px 10px;
}
#content a { text-decoration: none;
color: #4affe8;
font-family: arial;
font-size: 12px;
line-height: 16px;
font-weight: bold;
background-color: transparent;
}
#content a:hover { cursor: default;
background-color: transparent;
text-decoration: line-through;
font-style: none;
}
::-moz-selection {
background:#000;
color:#fff;
}
blockquote {
margin: 15px;
padding: 15px;
border-bottom: 5px solid #caff4a;
border-top: 5px solid #caff4a;
}
blockquote:before { font-family: arial;
color: #caff4a;
content: open-quote;
font-weight: bold;
font-size: 20pt;
padding: 0px 2px 0px 0px;
}
.side-box
{
width: 150px;
height: 120px;
font-size: 10px;
font-family: arial;
color: #000;
line-height: 12px;
text-align: left;
padding: 2px 2px 2px 2px;
margin: 5px;
float: left;
background-image: url(http://cbimg6.com/layouts/09/09/35663ai.gif);
background-repeat: no-repeat;
}
#side-box a { text-decoration: none;
color: #fff;
font-family: arial;
font-size: 10px;
line-height: 12px;
font-weight: bold;
background-color: transparent;
}
#side-box a:hover { cursor: default;
background-color: transparent;
text-decoration: line-through;
font-style: none;
}
  </style>
</head>
<body>


<div id="banner"><a href="#">reload</a><a
 href="#">about</a><a href="#">contact</a><a
 href="#">exit</a></div>


<div id="wrapper">
<div id="side">
<div id="box">
<h3>My Site my world</h3>
Introduce your self!<br>
But don't write too much ( leave a [more?] link to your profil side).<br>
<br>
NOTE: You can replace the header with another pic if you like! (Must be
the same size)!
</div>


<div id="side-img">Index</div>
<a href="#">blog</a><a href="#">music</a><a
 href="#">friends</a><a href="#">daily
drugs</a><a href="#">links out</a><a
 href="#">whatever</a>
</div>

<div id="parent">
<div id="head">Your Titel or Pic<img
 style="width: 800px; height: 149px;" alt=""
 src="http://cbimg6.com/layouts/09/09/35663aa.jpg"></div>


<div id="content">
<div id="content-main">
<h1>It's just green - love it or hate it!</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. <a href="#">a link between
words</a> Aenean
massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetla
consequat massa quis enim. <b>Donec pede</b> justo,
fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam <s>dictum</s> felis eu pede
mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate <u>eleifend tellus.</u> Aenean leo ligula,
porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Phasellus <i>viverra nulla ut</i>
ur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. Nul
<h2>Subline</h2>
<blockquote>Don't forget to credit back!</blockquote>
</div>
<div id="content-side">
<h1>Latest Trash</h1>
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
<div class="side-box">Got something new?<br>
Share it!<br>
Leave a link  or/with a pic,<br>
but don't write too much, this box can't  take much
weight ^.-</div>
Donec pede justo, fringilla vel, aliquet
nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat
vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
feugiat a, tellus. Phasellus viverra nulla ut
ur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis, sem. </div>
</div>

</div>

</div>

</body>
</html>

Layout Comments

Showing latest 10 of 17 comments

I really love this style a lot, but you really should fix the incompatibility with 16:9 resolutions. \o/

By rumms on Dec 20, 2010 3:18 am

I'm not usually a fan of green, but it fits well on this layout. Adorable layout =]

By xDarkHope on Nov 8, 2010 12:27 pm

Very nice! I'd love to see a reverse of this with cyan the main color and lime the rollover. But I still might use it regardless. Keep up the good work!

By reitachuu on Sep 22, 2009 5:23 pm

I love how this is set up so much, but I don't like the green, is there any way you could make a red version, with this color code of red: BB0000 please? I would love to use this for my site until I can manage to learn how to code one myself.

By Weathered on Sep 10, 2009 11:15 pm