Winter.Moon

Designer's Comments

Look carefully for specific instructions

This is the first time I did a horizontal Website Template^^

note me (or leave a comment), if you use it!

Layout Code

Copy and paste to Template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Winter･Moon  寒月</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background: #acacac;
margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #e1c0b0;
text-decoration: none;
}
#parent{
left: 0px;
width: 100%;
border: 3px solid #ff0054;
margin: 150px 0px 0px -1px;
background-color: #acacac;
}
#header {
width: 500px;
height: 200px;
}
#navi { width:175px;
background:transparent;
text-align:left;
left: 167px;
right: 300px;
cursor: help;
}
a:link { text-decoration: none;
color: #4a8aab;
font-family: georgia;
font-size: 10px;
line-height: 11px;
font-style: normal;
text-transform: none;
background-color: transparent;
}
a:active { text-decoration: none;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #4a8aab;
font-style: normal;
text-transform: none;
background-color: transparent;
}
a:visited { text-decoration: none;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #4a8aab;
font-style: normal;
text-transform: none;
background-color: transparent;
}
a:hover { text-decoration: none;
font-size: 10px;
line-height: 11px;
font-family: georgia;
color: #00deff;
font-style: normal;
text-transform: none;
background-color: transparent;
cursor: help;
}
h3 { font-family: georgia;
color: #080832;
line-height: 17px;
font-variant: small-caps;
text-transform: uppercase;
font-size: 14px;
text-align: left;
letter-spacing: none;
background-image: url(http://cbimg6.com/layouts/07/11/30/23498ac.jpg);
border-left: 12px solid transparent;
}
h2 { font-family: georgia;
color: #456a96;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
font-variant: small-caps;
text-align: left;
letter-spacing: none;
background-color: transparent;
border-left: 12px solid transparent;
}
h1 { font-family: verdana;
color: #f5e3cb;
letter-spacing: -1;
line-height: 17px;
text-transform: uppercase;
font-size: 12px;
text-align: left;
letter-spacing: none;
background-color: transparent;
border-bottom: 2px solid #fff;
}
ul { font-family: arial;
font-size: 10px;line-height: 11px;
color: #e1c0b0;
background-color: transparent;
}
#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#fff;
font-size:9px;
font-family:arial;
line-height:15px;
text-align: center;
margin: 0 0 1px;
text-transform: lowercase;
text-decoration: none;
background-color: #acacac;
font-style: normal;
padding: 5px 5px 5px 5px;
border-right: 1px dashed #fff;
cursor: help;
}
#navi a:hover, #navi a:focus {
color:#fff;
background-color: #ff0054;
cursor: default;
text-decoration: none;
font-style: normal;
border-right: 1px dashed transparent;
cursor: help;
}
#navi2 a, #navi2 a:link, #navi2 a:active, #navi2 a:visited { color:#fff;
font-size:14px;
font-family:verdana;
line-height:15px;
text-align: right;
border-left: 12px solid transparent;
text-decoration: none;
font-style: normal;
font-weight: bold;
letter-spacing: -1;
cursor: help;
}
#navi2 a:hover, #navi a:focus {
color:#000;
cursor: default;
background-color: transparent;
border-left: 12px solid transparent;
text-decoration: none;
cursor: help;
}
#content {
width: 376px;
background-color: transparent;
border-left: 1px dashed #fff;
border-right: 1px dashed #fff;
color: #fff;
padding: 2px 5px 2px 5px;
}
::-moz-selection {
background:#080832;
color:#fff;
}
textarea { border: 1px solid #fff;
background-color: #fff;
width: 260px;
height: 160px;
font-family: arial;
font-size: 10px;line-height: 11px;
color: #0c1054;
}
input { border: 1px solid #fff;
background-color: #fff;
font-size: 10px;
line-height: 11px;
font-family: arial;
color: #0c1054;
}
b, strong { font-family: arial;
font-size: 10px;line-height: 12px;
color: #0c1054;
font-weight: bold;
}
i, em { font-family: arial;
font-size: 9px;line-height: 11px;
color: #fff;
font-style: italic;
}
u { font-family: arial;
font-size: 9px;line-height: 11px;
color: #fff;
text-decoration: underline;
}
s, stroke { font-family: arial;
font-size: 9px;line-height: 11px;
color: #fff;
text-decoration: line-through;
}
m { font-family: arial;
font-size: 9px;
line-height: 13px;
color: #0c1054;
text-decoration: none;
background-color: #fff;
padding: 2px 2px 2px;
margin: 0px 2px 0px 2px;
}
#box
{
background-color: transparent;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #0c1054;
border-bottom: 1px solid #fff;
margin: 2px 2px 5px 2px;
}
#box a
{
text-transform: uppercase;
line-height: 17px;
color:fff; background-color: transparent;
text-decoration: underline; border-bottom: 1px dashed #ff0024;
padding: 2px 2px 2px 2px;
margin: 1px 1px 0px 1px
font-family: arial;
font-size: 9px;
}
#box a:hover
{
text-transform: uppercase;
color:#fff;
font-family: arial;
font-size: 9px;
text-decoration: none;
background-color: transparent;
border-bottom: 1px solid #578c78;
}
  </style>
</head>
<body
 style="background-image: url(http://cbimg6.com/layouts/07/11/30/23498ad.jpg);">

<div id="parent">
<div id="header2="
 style="position: absolute; z-index: 3; text-align: left; width: 600px; height: 712px; left: 515px; top: 6px;"><img
 src="http://cbimg6.com/layouts/07/11/30/23498aa.png"
 alt="Layout by ZeBiii"></div>
<div id="header"><img
 src="http://cbimg6.com/layouts/07/11/30/23498ab.jpg"
 alt="Layout by ZeBiii"></div>


<div id="content"
 style="position: absolute; overflow: auto; z-index: 3; text-align: left; left: 205px; width: 298px; top: 154px; height: 195px;">
<h1>Here comes the Headline</h1>
Here comes the Content......
<br>
<br>
<p></p>
<h1>Basic Codes</h1>
A Link looks like that <a href="#">Linkage</a> in
the content.<br>
<br>
<b>Bold</b> • <i>Italic</i>
• <u>Underline</u> • <s>Stroke</s>
• <m>Mark</m>
</div>


<div id="box"
 style="position: absolute; z-index: 3; text-align: left; top: 155px; height: 138px; left: 519px; width: 92px;">
<p>Here is space...<br>
But for what?<br>
Tell me!!!<br>
<a href="#">LINKAGE</a><br>
<a href="#">LINKAGE</a><br>
<a href="#">...more?</a>
</p>
</div>


<div id="navi"
 style="position: absolute; z-index: 3; text-align: left; width: 427px; height: 17px; top: 132px; left: 199px;"><a
 href="#">LINKAGE</a>
<a href="#">LINKAGE</a>
<a href="#">LINKAGE</a>
<a href="#">LINKAGE</a>
<a href="#">LINKAGE</a>
<a href="#">LINKAGE</a>
</div>


<div id="navi2"
 style="position: absolute; overflow: visible; z-index: 3; height: 112px; width: 98px; top: 306px; left: 511px;"><a
 href="index.html">Home</a>
<br>
         
<a href="http://designbox.myblog.de">Designer</a>
</div>

</div>
</body>
</html>

Layout Comments

Showing latest 3 of 3 comments

i used this one for my site it ended up looking really good.

By LadyLBlack on Jun 26, 2008 8:19 pm

I love this... the set up is awesome

By IVIike on Dec 1, 2007 6:41 pm

very nice ^^

By lostinLDN on Nov 30, 2007 3:16 pm

Layout Details

Designer	ZeBiii
Submitted on	Nov 30, 2007
Page views	5,558
Favorites	24
Comments	3
Reviewer	digitalfragrance
Approved on	Nov 30, 2007

Winter.Moon

Designer's Comments

Layout Code

Layout Comments

Layout Details

Layout Tags

Layout Tools

Layout Affiliates