AYU

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>AYU            </title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style type="text/css">html, body {
text-align: center; font: normal normal 12px Arial, Verdana; background-color: #d4c4aa;
}
#parent {
text-align: left; width:800px; margin: 20px auto; border: 3px solid #fff;
}
#header {
height:324px;
background-image: url(http://cbimg6.com/layouts/08/01/15/24677ab.jpg);
color: #ead7b7;
border-bottom: 2px solid #fff;
}
#header img {
border: 0;
}
div#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#fff; font-size:9px;
font-family:arial;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-style: normal;
padding: 1px 5px 10px 5px;
border-right: 1px dashed transparent;
border-left: 1px dashed transparent;
margin: 0px 10px 0px 0px;
cursor: help;
height: 60px;
margin: 5px 2px 0px 2px;
}
div#navi a:hover, #navi a:focus {
color:#a79079;
background-color:#edddbc;
text-decoration: none;
font-style: normal;
border-top: 2px solid #a79079;
border-right: 1px solid #a79079;
border-left: 1px solid #a79079;
cursor: help;
}
div#content {
margin: 10px 0px 0px 0px;
text-align: left;
background-color: #decebe;
margin 10px 0px 10px 0px;
border-top: 2px solid #fff;
}
#content-left {
text-align: left;
float: left; width: 150px; margin: 5px 5px 5px 5px; display:inline; font: normal 9px Arial; color:#887f72;
letter-spacing: 0;
line-height:12px;
padding: 2px 2px 2px 2px;
}
#content-left a, #content-left a:link, #content-left a:active, #content-left a:visited { color:#fff;font-size:9px;
font-family:arial;
line-height:14px;
text-transform: uppercase;
text-decoration: none;
font-style: normal;
}
#content-left a:hover, #content-left a:focus {
color: #000000;
cursor: default;
background-color: transparent;
text-decoration: none;
}
#content-middle {
text-align: left;
float:left; font: normal 10px Verdana, Arial; color:#866b50;
margin: 0px 5px 5px 5px; padding: 0px 8px 0px 8px;
font: 10px Verdana, Arial;
width: 440px;
}
#content-right {
text-align: left;
float: left; width: 150px; margin: 5px 5px 5px 5px; display:inline; font: normal 9px Arial; color:#887f72;
letter-spacing: 0;
line-height:12px;
padding: 2px 2px 2px 2px;
}
#box {
text-align: left;
float: left; width: 150px; margin: 5px 5px 5px 5px; display:inline; font: normal 9px Arial; color:#887f72;
border:1px solid #fff;
letter-spacing: 0;
line-height:12px;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
}
#box a, #box a:link, #box a:active, #box a:visited { color:#fff;
font-size:10px;
font-family:georgia;
line-height:12px;
display:block;
text-align: left;
border-left: 15px solid #fff;
text-transform: uppercase;
letter-spacing: 1;
text-decoration: none;
font-style: normal;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
#box a:hover, #box a:focus {
color:#d6ac82;
border-left: 15px solid #ffba59;
cursor: default;
background-color:#e7dfd5;
text-decoration: none;
}
#content a
{
color:#cd4f36; text-decoration: none; font: bold 10px Arial
}
#content a:hover
{
color:#fff;
text-decoration: underline; font: bold 10px Arial
} div#content div#abschluss {
clear:both; visibility:none;
text-align: left;
border-bottom: 10px solid #a79079;
background-color: #fff;
color: #ead7b7;
font-size:9px;
font-family:arial;
}
div#content div#abschluss a
{ color: #ead7b7;
font-size:9px;
font-family:arial;
text-align: left;
text-transform: uppercase;
text-decoration: none;
}
div#content div#abschluss a:hover
{ color: #ead7b7;
font-size:9px;
font-family:arial;
text-align: left;
text-transform: uppercase;
text-decoration: none;
}
h1 { color: #fff;
font-family: arial;
font-size: 14px;
line-height: 14px;
text-align: left;
letter-spacing: 0;
}
h2 { font-family: arial;
color: #b7b8b8;
letter-spacing: none;
line-height: 14px;
text-transform: uppercase;
font-size: 12px;
text-align: center;
letter-spacing: none;
background-color: #e7dfd5;
}
h3 { font-family: verdana;
color: #006789;
letter-spacing: -5;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
text-align: left;
background-color: trasnparent;
border-left: 5px solid #006789;
border-bottom: 2px solid #006789;
}
textarea { border-left: 5px solid #006789;
background-color: #f3f1f1;
width: 255px;
font-family: georgia;
font-size: 9px;
line-height: 11px;
color: #294f4f;
}
m
{
color:#006789;
background-color: transparent;
text-decoration: none;
font-style: normal;
border-bottom: 2px solid #006789;
cursor: help;
}
b, strong { font-family: arial;
font-size: 11px;line-height: 12px;
color: #562b1a;
font-weight: bold;
}
i, em { font-family: arial;
font-size: 10px;line-height: 11px;
color: #fff;
font-style: italic;
boder-bottom: 1px dashed ##FF80FF;
}
u { font-family: arial;
font-size: 10px;line-height: 11px;
color: #bb9274;
text-decoration: underline;
border-bottom: 1px solid #fff;
}
s, stroke { font-family: arial;
font-size: 10px;line-height: 11px;
color: #bb9274;
text-decoration: line-through;
}
m { font-family: arial;
font-size: 10px;
line-height: 13px;
color: #003547;
text-decoration: none;
background-color: #ead8be;
padding: 0px 2px 0px 2px;
}
#titel {
width: 600px;
background-color: transparent;
color: #fff;
font-family: arial italic;
font-size: 20px;
line-height: 14px;
text-align: left;
letter-spacing: -1;
}
  </style>
</head>
<body>
<div id="parent">
<div id="header">.</div>
<div id="navi"><a href="#">Home</a>
<a href="#">Site</a>
<a href="#">About</a> <a href="#">Contact</a><a
 href="#">Guestbook</a><a href="#">Whatever</a>
</div>
<div id="content">
<div id="content-left">
<div id="box">
<h2>News.Box</h2>
<p>Here is a <b>Box</b>.<br>
Use it for hatever you want!</p>
<h2>Quick navi</h2>
<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="box">
<h2>Friends</h2>
space space space space space space
space space space</div>
</div>
<div id="content-middle"><br>
<h1>Header - here comes the Headline</h1>
This is the content...<br>
Write whatever you want.<br>
<u>Do not remove the Copyright and credits!!!</u>
<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><br>
Lorem ipsum in nec eirmod iudicabit, dicta civibus mnesarchum at vix.
Cum an soleat detraxit constituto, cu euismod detraxit consulatu nam.
Ad tollit graeco adipisci duo! Ut duo harum nihil sanctus, 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? 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
unum aliquam concludaturque et? 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 vix, ut mea malis legimus torquatos. Ut quo quis
nonumy ubique, liber putent ad pro. Eam rebum possim in, indoctum
liberavisse reprehendunt eu has. Pri an inani interpretaris, ad simul
laudem numquam duo. An platonem tractatos assentior nam, saepe dicunt
petentium mea et.
An his omnesque eligendi. Cum tractatos adipiscing ad, per et putent
deseruisse. </div>
<div id="content-right">
<div id="box">
<h2>Space filler</h2>
<p>Here is a <b>Box</b>.<br>
Use it for hatever you want!</p>
<h2>Quick navi</h2>
<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="box">
<h2>Profil</h2>
<img src="http://cbimg6.com/layouts/08/01/15/24677aa.gif"
 align="left" border="0">
WRITE YOUR PROFIL !
</div>
</div>
<div id="abschluss">© by ZeBiii
  <a href="http://zebiii.createblog.com/">Designer</a>  <a
 href="http://www.outgrow.hk.ms">Website</a>
</div>
<div id="titel"
 style="position: absolute; overflow: visible; z-index: 3; height: 61px; top: 270px; left: 365px; width: 263px;">Your
Titel / Motto
</div>
</div>
</div>
</body>
</html>

Layout Comments

Showing latest 10 of 10 comments

love iiiit. i'm usin.(:

By msbig1 on Aug 29, 2009 12:17 am

Beautiful.Favourite.

By Sweetascandy on May 5, 2008 7:43 pm

Nice mirror effect :) Personally I think if it was blurred or bordered around the repeated face it would have looked more evened out, but everything else looks great.

By umbreon on Jan 15, 2008 8:28 pm