my.story

Designer's Comments

Look carefully for specific instructions

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

[ best view with Mozilla Firefox]

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%;
margin: 0 auto;
background-color: transparent;
}
#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: #893c49;
font-family: georgia;
font-size: 10px;
line-height: 11px;
font-style: italic;
font-weight: bold;
letter-spacing: 2;
text-transform: none;
background-color: transparent;
}
a:active { text-decoration: none;
color: #893c49;
font-family: georgia;
font-size: 10px;
line-height: 11px;
font-style: italic;
font-weight: bold;
letter-spacing: 2;
text-transform: none;
background-color: transparent;
}
a:visited { text-decoration: none;
color: #893c49;
font-family: georgia;
font-size: 10px;
line-height: 11px;
font-style: italic;
font-weight: bold;
letter-spacing: 2;
text-transform: none;
background-color: transparent;
}
a:hover { text-decoration: none;
color: #03656b;
font-family: georgia;
font-size: 10px;
line-height: 11px;
font-style: italic;
font-weight: bold;
letter-spacing: 2;
text-transform: none;
background-color: transparent;
}
h4 { font-family: georgia;
color: #ae6c73;
line-height: 10px;
font-size: 10px;
text-align: right;
letter-spacing: none;
font-style: italic;
background-color: #fff;
}
h3 { font-family: georgia;
color: #fff;
line-height: 17px;
font-variant: small-caps;
font-size: 12px;
text-align: right;
letter-spacing: none;
font-style: italic;
}
h2 { font-family: georgia;
color: #456a96;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
text-align: left;
letter-spacing: none;
background-color: #000;
opacity: 0.2;
border-left: 2px dotted #fff;
border-right: 2px dotted #fff;
}
h1 { font-family: georgia;
color: #456a96;
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:#000;
font-size:9px;
font-family:arial;
line-height:15px;
text-align: center;
margin: 0 0 1px;
text-transform: lowercase;
text-decoration: none;
background-color: transparent;
font-style: normal;
cursor: help;
opacity: 0.4;
}
#navi a:hover, #navi a:focus {
color:#fff;
cursor: default;
text-decoration: none;
font-style: normal;
cursor: help;
opacity: 1.0;
}
#navi2{
color:#530000;
font-size:10px;
font-family:georgia;
line-height:12px;
text-align: right;
text-decoration: none;
text-transform: lowercase;
letter-spacing: 2;
cursor: help;
}
#navi2 a, #navi2 a:link, #navi2 a:active, #navi2 a:visited {
color:#01352f;
font-size:9px;
font-family:georgia;
display: block;
line-height:15px;
text-align: right;
text-decoration: none;
font-style: italic;
text-transform: lowercase;
border-bottom: 2px solid #fff;
letter-spacing: -1;
cursor: help;
}
#navi2 a:hover, #navi a:focus {
color:#16869f;
font-size:10px;
cursor: default;
background-color: transparent;
text-decoration: none;
cursor: help;
font-weight: bold;
letter-spacing: 2;
border-bottom: 2px solid #aa2841;
}
#content {
font-size:10px;
font-family:georgia;
width: 376px;
background-color: transparent;
color: #654837;
overflow: visible;
}
::-moz-selection {
background:#fff;
color:#616161;
opacity: 0.5;
}
::-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: #01352f;
font-style: italic;
font-weight: bold;
}
u { font-family: arial;
font-size: 9px;line-height: 11px;
color: #000;
text-decoration: underline;
border-bottom: 1px solid #0c1054;
}
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: #5c5332;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
padding: 2px 2px 2px 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;
}
#box2
{
background-color: transparent;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #fff;
border: 1px solid #fff;
padding: 2px 2px 2px 2px;
}
#box2 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;
}
#box2 a:hover
{
text-transform: uppercase;
color:#fff;
font-family: arial;
font-size: 9px;
text-decoration: none;
background-color: transparent;
border-bottom: 1px solid #578c78;
}
span {
float: left; color: rgb(170, 40, 65); background-color: transparent; font-size: 12px; line-height: 15px; font-family: georgia;
margin: 2px 2px 2px 2px;
}
blockquote {
padding:10px;
background: transparent url(http://cbimg6.com/layouts/08/02/28/25844ah.png) repeat-x left bottom;
font-size: 9px; line-height: 10px; font-family: georgia; font-style: italic; color: #fff;
letter-spacing: 2;
margin:11px 25px;
padding:20px;
overflow: visible;
border-top: 1px dotted #654837;
}
  </style>
</head>
<body
 style="background-image: url(http://zebii.ze.funpic.de/blog/layouts/flower/bg.jpg);">

<div id="parent">
<div id="header"><img
 src="http://cbimg6.com/layouts/08/02/28/25844aa.jpg"
 alt="Layout by ZeBiii"></div>


<div id="content"
 style="position: absolute; height: 180px; right: 260px; top: 20pt; left: 542px; width: 435px;">
<h1> Heal My Broken Heart:
</h1>
<span>H</span>ow
long will it last? How long before that empty feeling fades away?<br>
<br>
<span>Y</span>ou
try to go about your daily routine, try not to think about it too much.
But it keeps coming back, sweeping over you like a wave - that feeling
in the pit of your stomach [...]<br>
<br>
<span>W</span>
elcome to Heal My Broken Heart. Here's the harsh reality of it -
nothing really works - not completely anyway. There's no easy fix. But,
in an attempt to help [...]<br>
<center>
<blockquote>So this is one of my favorite Layouts ... I love the
coding from the Navi.<br>
You can highlight the capital letters with the "span" code ^^</blockquote>
</center>
<h1>Basic Codes</h1>
A Link looks like that <a href="#">Linkage</a> in
the content.<br>
<br>
... <b>Bold<br>
</b> <br>
... <i>
Italic</i><br>
<br>
... <u>Underline</u><br>
<br>
... <s>Stroke<br>
</s><br>
... <m>Mark</m>
</div>


<div id="box"
 style="position: absolute; z-index: 3; overflow: visible; text-align: left; height: 138px; width: 326px; top: 504px; left: 176px;">
<h4>the story continues ...</h4>
<p>Mein Puls beschleunigte seine Frequenz. Wieder wollte ich Dich
berühren. Und konnte kaum den Windstoss erwarten, der meine
Textseite zu Dir zurückblies. Was nur sollte ich sagen,
während Du mich mit Deinen ausdrucksvollen As ansahst?
Vielleicht zunächst ein sachliches Gespräch
über die Vorzüge der Links- oder
Rechtsbündigkeit mit Dir beginnen.</p>
</div>
<div id="box2"
 style="position: absolute; z-index: 3; overflow: visible; text-align: left; left: 6px; width: 142px; top: 504px; height: 147px;">
Mein Puls beschleunigte seine Frequenz. Wieder wollte ich Dich
berühren. Und konnte kaum den Windstoss erwarten, der meine
Textseite zu Dir zurückblies. Was nur sollte ich sagen,
während Du mich mit Deinen ausdrucksvollen As ansahst?
Vielleicht zunächst ein sachliches Gespräch
über die Vorzüge der Links- oder
Rechtsbündigkeit mit Dir beginnen.
</div>


<div id="navi"
 style="position: absolute; z-index: 3; text-align: left; height: 25px; width: 368px; top: 26px; left: 34px;"><a
 href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844ab.jpg"
 border="0"></a><a href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844ac.jpg"
 border="0"></a><a href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844ad.jpg"
 border="0"></a></div>
<div id="navi"
 style="position: absolute; z-index: 3; text-align: left; height: 25px; width: 368px; top: 353px; left: 32px;"><a
 href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844ae.jpg"
 border="0"></a><a href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844af.jpg"
 border="0"></a><a href="#"><img
 src="http://cbimg6.com/layouts/08/02/28/25844ag.jpg"
 border="0"></a></div>
</div>


<div id="navi2"
 style="position: absolute; height: 180px; right: 0px; width: 194px; top: 20pt;">
<h2>Navigation No.2</h2>
<a href="#">My Heart is splitted ...</a>
<a href="#">I taked the wrong way ...</a>
<a href="#">crieng out loud ...</a>
<a href="#">I taked the wrong way ...</a>
<h3>Love.Letter</h3>
Wie beiläufig, beim Umblättern der Buchseiten, habe
ich <b>Dein B berühr</b>t. Man hatte Dich mir als
Type geschildert,
der man in allen Bibliotheken begegnet: sehr belesen, doch eher
unscheinbar, von etwas altmodelnder Art. <u>Mir aber gefiel</u>
Deine
Anmutung, kleine Antiqua. Nicht zu verschweigen Deine weiblichen
Rundungen, Deine Os und <i>Dein verlockendes V</i>, das
sich mit deutlichem
Duktus durch das feine Dünndruckpapier wie in seidenen Dessous
abdrückte.
<a href="http://www.zebeya.myblog.de">DESIGNER</a>
<a href="http://www.sweetandtalented.com/">MATERIALS</a>
<h3>Rules</h3>
Do not change anything in the [Code]!<br>
</div>

</body>
</html>