Just thinking out loud

Designer's Comments

Look carefully for specific instructions

best view with Mozilla Firefox

*I hate IE >_<

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

Layout Code

Copy and paste to Template HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Just thinking out loud </title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">body { background: #1b2444; margin: 40px;
text-align: center;
}
#parent {
color: #ddc26e;
background-color: ebe4ca;
border: 10px solid #ebe4ca;
width: 663px;
text-align:left;
float: left;
margin: 0px 40px 40px 40px;
}
#header {
color: #ddc26e;
float: left;
width: 663px;
height: 250px;
background-image: url(http://cbimg9.com/layouts/08/07/29527aa.jpg);
margin: 0px 0px 0px 0px;
}
h3 { font-family: arial ;
color: #1b2444;
letter-spacing: none;
line-height: 20px;
font-size: 12px;
float: left;
margin: 5px 2px 0px 0px;
text-align: left;
font-weight: bold;
border: 1px solid #fff;
letter-spacing: none;
background-image: url(http://cbimg9.com/layouts/08/07/29527ab.gif);
padding: 5px 2px 5px 2px;
}
h2 { font-family: arial black;
color: #454e70;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: -1;
text-align: center;
letter-spacing: none;
background-color: #ddd5b9;
border-bottom: 10px solid #454e70;
}
h1 { font-family: georgia italic;
color: #1e9d93;
letter-spacing: none;
line-height: 16px;
font-size: 15px;
text-align: left;
font-weight: bold;
letter-spacing: none;
background-color: transparent;
border-bottom: 1px dotted #454e70;
}
ul { font-family: arial;
font-size: 10px;line-height: 11px;
color: #e1c0b0;
background-color: transparent;
}
::-moz-selection {
background:#000;
color:#fff;
}
textarea {border: 1px dotted #d77290;
background-color: transparent;
width: 180px;
height: 100px;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #1e9d93;
}
input { border: 1px dotted #d77290;
background-color: transparent;
font-size: 8px;
line-height: 11px;
font-family: arial;
color: #1e9d93;
}
b, strong { font-family: arial;
font-size: 11px;line-height: 15px;
color: #1e9d93;
font-weight: bold;
}
i, em { font-family: arial;
font-size: 10px;line-height: 11px;
color: #b6395e;
font-style: italic;
}
u { font-family: arial;
font-size: 9px;line-height: 11px;
color: #b6395e;
text-decoration: underline;
border-bottom: 1px dotted #00cbba;
}
s, stroke { font-family: arial;
font-size: 9px;line-height: 11px;
color: #b6395e;
text-decoration: line-through;
}
m { font-family: arial;
font-size: 9px;
line-height: 13px;
color: #000;
font-weight: bold;
text-decoration: none;
background-image: url(http://cbimg9.com/layouts/08/07/29527ab.gif);
padding: 0px 2px 0px 2px;
margin: 0px 2px 0px 2px;
}
#content {
background-color: ebe4ca;
width: 663px;
float: left;
color: #000;
font-family: arial;
font-size: 10px;
line-height: 14px;
text-align: justify;
}
#content-navi {
background-color: ebe4ca;
width: 200px;
float: left;
color: #000;
font-family: arial;
font-size: 10px;
line-height: 14px;
text-align: justify;
margin: 0px 5px 0px 5px;
}
#navi-box {
margin: 5px 0px 5px 0px;
background-color: #ddd5b9;
width: 180px;
float: left;
color: #000;
font-family: arial;
font-size: 10px;
line-height: 14px;
text-align: justify;
}
#navi-box a { text-decoration: none;
color: #45589b;
display: block;
padding: 4px 0px 4px 0px;
font-family: arial;
font-size: 10px;
line-height: 12px;
font-style: normal;
border-bottom: 1px dotted #45589b;
}
#navi-box a:hover { color:#4d88bf;
cursor: default;
background-color: transparent;
text-decoration: none;
font-style: none;
border-bottom: 1px dotted #c14174;
}
#content-main {
background-color: ebe4ca;
width: 440px;
margin: 0px 0px 5px 0px;
float: left;
color: #1b2444;
font-family: arial;
font-size: 10px;
line-height: 14px;
text-align: justify;
}
#content-main a { text-decoration: none;
color: #00598d;
font-family: arial;
font-size: 10px;
line-height: 11px;
font-style: normal;
border-bottom: 1px dashed #8b1675;
}
#content-main a:hover { color:#3c8180;
cursor: default;
background-color: transparent;
text-decoration: none;
font-style: none;
border-bottom: 1px dashed #c14174;
}
::-moz-selection {
background:#ddd5b9;
color:#454e70;
}
#down {
background-color: #ddd5b9;
font-size:9px;
font-family:arial;
color: #fff;
float: left;
width:663px;
height: 20px;
margin: 10px 0;
}
#down a, #down a:link, #down a:active, #down a:visited { color: #cc7200;
font-size:8px;
font-family: arial;
line-height:12px;
text-align: center;
margin: 5px 5px 5px 5px;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
font-style: normal;
padding: 2px 2px 2px 2px;
}
#down a:hover, #down a:focus {
color:#c000cc;
cursor: default;
background-color: transparent;
text-decoration: none;
border-bottom: 1px solid #cc7200;
}
blockquote {
margin: 15px;
padding: 15px;
background-color: #e9b8aa;
border: 1px dotted #d77290;
font-size: 10px;
line-height: 15px;
color: #fff;
text-align: left;
}
blockquote:before { font-family: georgia;
color: #d77290;
content: open-quote;
font-weight: bold;
font-size: 20pt;
padding: 0px 2px 0px 0px;
}
  </style>

</head>
<body>

<div id="parent">
<div id="header">.</div>
<div id="content">

<div id="content-navi">
<div id="navi-box">
<h2>Navigation</h2>
<a href="#">I just thinking out loud !</a>
<a href="#">Walking at night</a>
<a href="#">and searching for ...</a>
</div>


<div id="navi-box">
<h2>Navigation</h2>
<a href="#">I see, hear & feel broken hearts</a>
<a href="#">take back their lonliness</a>
<a href="#">at night...</a>
</div>


<div id="navi-box">
<h2>Credits</h2>
<a href="http://zebeya.myblog.de/">design & code
by ZeBiii</a>
<a href="http://nana-nana.net/">Images by nana-nana.net</a>
<a href="http://www.deviantart.com/">resources by DA</a>
</div>


<div id="navi-box">
<div style="text-align: center;">
<blockquote>you can also write      
   something
in the navi-boxes.</blockquote>
</div>

</div>
</div>

<div id="content-main">
<h1>Broken hearts, citylights and me just thinking out loud</h1>
<div style="text-align: center;">Take a deep breath and
catch the sun<br>
Jump up to the sun
<br>
With your fingertips, catch the sun
<br>
Today for sure I’ll be reborn
<br>
Open your eyes and catch the sun<br>
Catch the friendly sun
<br>
With your whole body, catch the sun
<br>
Today for sure will shine
<br>
</div>
<br>
<h3>Lorem Ipsum</h3>
Lorem ipsum in nec eirmod iudicabit, dicta civibus <b>mnesarchum</b>
at vix.
Cum an soleat detraxit constituto, cu euismod detraxit consulatu nam.
Ad tollit graeco adipisci duo! <m>Ut duo harum nihil sanctus</m>,
ne
liber
scripserit mea? His id exerci tempor minimum, pro an justo
maluisset.
Labore eripuit inermis no pri, his error affert placerat eu, per
viderer suscipiantur ut? <u>Ne cum lorem atomorum persequeris.</u>
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, <s>pro unum aliquam
concludaturque et</s>?
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 vidisse
accusata theophrastus. Lucilius expetenda ei <i>vix,ut mea malis
legimus</i>
torquatos.
<blockquote>A Link
looks like that <a href="#">Linkage</a>
in
the content.<br>
    - <b>Bold</b><br>
    - <i>Italic</i><br>
    - <u>Underline</u><br>
    - <s>Stroke</s><br>
    - <m>Mark</m><br>
  <u>Do not remove the Copyright and credits!!!</u>
</blockquote>
</div>


<div id="down"><a href="#">001.</a> || <a
 href="#">002.</a>
|| <a href="#">003.</a> || <a href="#">004.</a>
|| <a href="#">005.</a> || <a href="#">006.</a>
|| <a href="#">007.</a> || <a href="#">008.</a>
|| <a href="#">009.</a> || <a href="#">010.</a>
|| <a href="#">011.</a> || <a href="#">012.</a>
|| <a href="#">013.</a> || <a href="#">014.</a>
<a href="#">Give me a link!</a> <a href="#">[......]</a>
</div>

</div>
</div>

</body>
</html>

Layout Comments

Showing latest 10 of 21 comments

super cute

By deathendroad on Nov 21, 2014 11:36 pm

I love it; very creative:] Love the drawings!

By Butterface89 on Sep 15, 2010 10:39 pm

I love this - p.s. it looks perfect in IE and firefox for this. Going to use this on my brand new website! I'm super excited. :D Favoriting.

By FAIL on Sep 18, 2009 12:35 am

awwww this is SO kute!
everythings so neat; :]

By meggyBEAR on Jul 29, 2009 2:47 pm

I love this. Is there a way to center it a little bit more. I never understood that. :p Thanks!

By RoxxyBabe on Mar 15, 2009 7:25 pm

is there anyway i can change the code to make it a myspace layout because i really really want to use it

By miszmani on Jan 18, 2009 5:40 pm

Really cute, and nicely done! ^_^

I'm using it. :]

By AkiraDays on Dec 30, 2008 2:37 am

i luuurv this

By paper99pad on Nov 1, 2008 11:22 pm

I like the colors, but I think there might be too many things going on with the different colors for italics, bold, underline, etc. I got confused! (Hey, I'm old!! :P)

By tehmiminator on Sep 29, 2008 12:16 am

i lurv it >3<
using it!

By SweetCandyPie on Aug 4, 2008 2:14 pm

View all »

Layout Details

Designer	ZeBiii
Submitted on	Jul 14, 2008
Page views	15,096
Favorites	112
Comments	21
Reviewer	Relentless
Approved on	Jul 14, 2008

Layout Colors

Layout Tags

anime, colorful, cute, emotions, love, music, nana, manga, bonnie pink, song, vintage, collage, boxstyle

Layout Tools

Layout Affiliates

Here I Stand Layouts