Winter Song

Designer's Comments

Look carefully for specific instructions

best view with Mozilla Firefox

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

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

Layout Code

Copy and paste to Template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Winter Song</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background-img:transparent;
margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
}
h2 { font-family: arial black;
color: #0a048b;
line-height: 16px;
font-variant:small-caps;
font-size: 15px;
text-align: left;
letter-spacing: -1;
background-color: #fff;
opacity: 0.5;
padding: 2px 2px 2px 2px;
border-bottom: 4px double #a5ccd3;
}
h1 { font-family: georgiai;
color: #0a048b;
font-style: italic;
line-height: 14px;
font-size: 15px;
text-align: left;
border-bottom: 4px double #a5ccd3;
}
ul { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c677ce;
background-color: transparent;
}
#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#c4689d;
font-size:10px;
font-family:arial;
line-height:15px;
display:block;
text-align: left;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
font-style: normal;
background-color: #fff;
opacity: 0.5;
padding: 0px 0px 2px 2px;
border-left: 2px solid #bdde2c;
}
#navi a:hover, #navi a:focus {
color:#fe0093;
cursor: default;
text-decoration: none;
font-style: none;
opacity: 1.0;
border-left: 2px solid #fe0093;
}
#navi2 a, #navi2 a:link, #navi2 a:active, #navi2 a:visited { color:#1a8396;
font-size:10px;
font-family:arial;
line-height:15px;
display:block;
text-align: left;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
font-style: normal;
background-color: #f8fdd5;
opacity: 0.5;
padding: 0px 0px 2px 2px;
border-left: 2px solid #8de6f6;
}
#navi2 a:hover, #navi2 a:focus {
color:#1a8396;
cursor: default;
text-decoration: none;
font-style: none;
opacity: 1.0;
border-left: 2px solid #fe0093;
}
#title {
width: 315px;
background-color: transparent;
font-family: century gothic;
font-size: 12px;
line-height: 13px;
font-style: normal;
color: #f3dbea;
}
#content {
width: 315px;
background-image: url(http://cbimg9.com/layouts/08/12/32909ab.gif);"
font-size:12px;
font-family: arial;
line-height:16px;
text-align: justify;
padding: 0px 5px 0px 5px;
color: #797a7b;
}
#content a, #content a:link, #content a:active, #content a:visited { color:#dc0064;
font-size:10px;
font-family:georgia;
line-height:11px;
text-align: left;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
background-color: #fdacbf;
font-style: normal;
padding: 0px 2px 0px 2px;
opacity: 0.5;
}
#content a:hover, #content a:focus {
color:#701e3b;
cursor: default;
background-color: #fdacbf;
text-decoration: none;
font-style: none;
opacity: 1.0;
}
::-moz-selection {
background:#dbeff3;
color:#06bbe2;
}
textarea { border: 1px solid #e4d2a0;
background-color: #58495c;
width: 250px;
height: 200px;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #e6e5e3;
}
input { border: 1px solid #ffffff;
background-color: #58495c;
font-size: 10px;
font-family: georgia;
line-height: 11px;
color: #e6e5e3;
}
b, strong { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #14b9de;
font-weight: bold;
}
m { font-family: arial;
font-size: 10px;
line-height: 11px;
background:#f3dbea;
color:#e20690;
padding: 0px 2px 0px 2px;
}
i, em { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #4f5d60;
font-style: italic;
}
u { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #68bfd2;
text-decoration: none;
border-bottom: 1px solid #df14a1;
}
s, stroke { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #4f5d60;
text-decoration: line-through;
} blockquote {
margin: 15px;
padding: 15px;
background-color: #dbf2f3;
border-bottom: 2px solid #36adbb;
}
blockquote:before { font-family: georgia;
color: #36a7bb;
content: open-quote;
font-weight: bold;
font-size: 15pt;
padding: 0px 2px 0px 2px;
}
#box
{
background-color: transparent;
border-top: 4px solid #d1d6dd;
border-bottom: 4px solid #d1d6dd;
border-left: 2px solid #d1d6dd;
border-right: 2px solid #d1d6dd;
fo1nt-family: arial;
font-size: 10px;
line-height: 11px;
color: #676767;
text-align: justify;
padding: 2px 5px 0px 5px;
}
#box a
{
text-transform: uppercase;
background-color: transparent;
text-decoration: underline; font-family: arial;
font-size: 9px;
color: #06bdb0;
}
#box a:hover
{
text-transform: uppercase;
color:#06bdb0;
font-family: arial;
font-size: 9px;
background-color:#fff;
}
#box-in
{
background-color: transparent;
border: 1px solid #fff;
background-color: #c1ccd2;
fo1nt-family: arial;
font-size: 10px;
line-height: 11px;
color: #fff;
text-align: justify;
padding: 2px 5px 0px 5px;
}
#box-in a
{
text-transform: uppercase;
background-color: transparent;
text-decoration: underline; font-family: arial;
font-size: 9px;
color: #06bdb0;
}
#box-in a:hover
{
text-transform: uppercase;
color:#06bdb0;
font-family: arial;
font-size: 9px;
background-color:#fff;
}
  </style>
</head>
<body leftmargin="0" topmargin="0"
 style="background-image: url(http://cbimg9.com/layouts/08/12/32909ac.gif);">

<div style="left: 0px; width: 850px; top: 0px; height: 700px;"
 id="http://cbimg9.com/layouts/08/04/17/26917aa.jpg"><img
 style="width: 800px; height: 600px;"
 src="http://cbimg9.com/layouts/08/12/32909aa.gif"
 alt="Layout by ZeBiii"></div>


<div id="content"
 style="position: absolute; overflow: auto; z-index: 3; text-align: justify; top: 397px; height: 100%; left: 400px; width: 509px;">
<h1>Header - here comes the Headline</h1>
<div style="text-align: center;">One more lonely winter<br>
To share with me
<br>
That is all I have
<br>
A lonesome me <br>
</div>
<h1>Basic Codes</h1>
<div style="text-align: center;">A Link looks like that <a
 href="#">Linkage</a>
in
the content. <br>
</div>
<br>
<blockquote><b>Bold</b>
â€¢ <i>Italic</i>
â€¢ <u>Underline</u>
â€¢ <s>Stroke</s>
â€¢ <m>Mark</m></blockquote>
<p></p>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum in nec eirmod iudicabit, dicta civibus mnesarchum
at vix.Cum an soleat <b>detraxit constituto,</b> cu
euismod detraxit consulatu
nam.
<u>Ad tollit graeco adipisci duo! Ut duo harum nihil sanctus</u>,
ne liber
scripserit mea? His id exerci tempor minimum, pro an justo maluisset.
Labore eripuit inermis no pri, his<m> error affert placerat eu</m>,
per
viderer suscipiantur ut? Ne cum lorem atomorum persequeris. Qui mundi
delenit imperdiet no. Mei ut corpora invenire instructior. Ut cum
libris equidem, ut omnium laoreet mei! Definiebas cotidieque eam id, no
mei invidunt platonem interesset, pro
<i>unum aliquam concludaturque et?</i> Debet nostro vim at,
veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei <s>vidisse accusata theophrastus.</s>
Lucilius expetenda ei vix, ut mea malis legimus torquatos. </p>
</div>


<div
 style="position: absolute; overflow: auto; z-index: 4; text-align: justify; width: 239px; height: 100%; top: 398px; left: 110px;"
 id="box">
<h2>Newsbox</h2>
Feed me with some new and stuff ^^<br>
A <a href="#">Link in the box </a>looks like that.<br>
<br>
<div id="box-in">Thix is a box in a box.<br>
[Something like a seconde Blockquote]<br>
<br>
</div>
<br>
<br>
<br>
<h2>Friends</h2>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a> ...
</div>


<div id="navi2"
 style="position: absolute; overflow: visible; z-index: 4; text-align: left; width: 200px; height: 181px; top: 151px; left: 274px;">
<h2>Index</h2>
<a href="#">Reload</a>
<a href="#">About</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<a href="#">Guest</a>
<a href="#">RRS Feed</a>
</div>
<br>
<div id="navi"
 style="position: absolute; overflow: visible; z-index: 4; text-align: left; width: 200px; height: 163px; top: 151px; left: 496px;">
<h2>Goodies</h2>
<a href="#">Sweet</a>
<a href="#">Honey</a>
<a href="#">Ice</a>
<a href="#">Cream</a>
<a href="#">Taste</a>
<a href="#">Good</a>
</div>
<div id="navi2"
 style="position: absolute; overflow: visible; z-index: 4; text-align: left; width: 200px; height: 181px; top: 151px; left: 716px;">
<h2>Credits</h2>
<a href="http://zebiii.createblog.com/">Design&Code</a>
<a href="http://www.sweetandtalented.com/">Images</a>
</div>

</body>
</html>