Zeebra!!!

Website Templates / 3+ Columns

View preview

Designer's Comments

Look carefully for specific instructions

zebra!!! XD

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>zeebra</title>

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">

<style type="text/css">body {
background:url(http://cbimg6.com/layouts/09/07/35175ab.gif);
margin:0px;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #fff;
text-decoration: none;
}
#header2 {
color: #ae8f72;
width: 160px;
text-align:left;
background-color: transparent;
margin: 0px 0px 1px 0px;
}
#header2 a{
text-decoration:none;
text-align:left;
font:1px Verdana, Arial, sans-serif;
color:#000;
display:block;
width: 28px;
height: 24px;
}
div#header2 a:hover {color:#000;}
div#header2 a.link{background:url(http://cbimg6.com/layouts/09/07/35175ac.gif) no-repeat bottom;}
div#header2 a.link:hover{background:url(http://cbimg6.com/layouts/09/07/35175ad.gif) no-repeat bottom;}
#header {
color: #ae8f72;
width: 160px;
text-align:left;
background-color: transparent;
margin: 0px 0px 1px 0px;
}
#header a{
text-decoration:none;
text-align:right;
font:1px Verdana, Arial, sans-serif;
color:#000;
display: block;
width: 160px;
height: 44px;
}
div#header a:hover {color:#000;}
div#header a.one{background:url(http://cbimg6.com/layouts/09/07/35175ae.gif) no-repeat bottom;}
div#header a.one:hover{background:url(http://cbimg6.com/layouts/09/07/35175af.gif) no-repeat bottom;}
div#header a.two{background:url(http://cbimg6.com/layouts/09/07/35175ag.gif) no-repeat bottom;}
div#header a.two:hover{background:url(http://cbimg6.com/layouts/09/07/35175ah.gif) no-repeat bottom;}
div#header a.three{background:url(http://cbimg6.com/layouts/09/07/35175ai.gif) no-repeat bottom;}
div#header a.three:hover{background:url(http://cbimg6.com/layouts/09/07/35175aj.gif) no-repeat bottom;}
div#header a.four{background:url(http://cbimg6.com/layouts/09/07/35175ak.gif) no-repeat bottom;}
div#header a.four:hover{background:url(http://cbimg6.com/layouts/09/07/35175al.gif) no-repeat bottom;}
div#header a.five{background:url(http://cbimg6.com/layouts/09/07/35175am.gif) no-repeat bottom;}
div#header a.five:hover{background:url(http://cbimg6.com/layouts/09/07/35175an.gif) no-repeat bottom;}
#navi { width:175px;
background:transparent;
text-align:left;
left: 167px;
right: 300px;
}
a:link { text-decoration: none;
color: #fff;
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: #fff;
font-style: normal;
text-transform: none;
background-color: transparent;
}
a:visited { text-decoration: none;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #fff;
font-style: normal;
text-transform: none;
background-color: transparent;
}
a:hover { text-decoration: line-through;
font-size: 10px;
line-height: 11px;
font-family: georgia;
color: #fff;
font-style: normal;
text-decoration: none;
background-color: transparent;
}
h3 { font-family: arial black;
color: #3e0579;
line-height: 12px;
text-transform: uppercase;
font-size: 12px;
text-align: right;
letter-spacing: 2;
background-color: transparent;
border-bottom: 2px solid #3e0579;
}
h2 { font-family: arial;
color: #fff;
line-height: 12px;
font-size: 16px;
text-align: left;
letter-spacing: -1;
font-weight: bold;
background:url(http://cbimg6.com/layouts/09/07/35175ao.gif);
text-align: center;
text-transform: uppercase;
}
h1 { font-family: Arial;
color:#ff0000;
line-height: 15px;
text-transform: uppercase;
font-size: 14px;
text-align: center;
letter-spacing: -1px;
background-color: transparent;
font-style: bold;
text-decoration: none;
border-bottom: 2px dotted #d5d500;
}
ul { font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #000000;
background-color: transparent;
}
#navi1 a, #navi1 a:link, #navi1 a:active, #navi1 a:visited {color:#00cbdc;
font-size:10px;
font-family:courier new,arial;
line-height:17px;
text-align: center;
text-transform: uppercase;
letter-spacing: none;
text-decoration: none;
padding: 2px 5px 2px 5px;
}
#navi1 a:hover, #navi1 a:focus {
cursor: default;
color:#fff;
background:url(http://cbimg6.com/layouts/09/07/35175ao.gif);
text-decoration: none;
}
#navi2 a, #navi2 a:link, #navi2 a:active, #navi2 a:visited { color:#000;
font-size:9px;
font-family: georgia;
line-height:17px;
float: left;
text-align: left;
margin: 0 0 1px;
padding: 2px 2px 2px 2px;
text-transform: uppercase;
border-bottom: 2px dashed transparent;
letter-spacing: none;
text-decoration: none;
font-style: normal;
font-weight: normal;
background-color: transparent;
}
#navi2 a:hover, #navi2 a:focus {
color: #ff0000;
float: left;
cursor: default;
border-bottom: 2px dashed #ff0000;
background-color: transparent;
text-decoration: underline;
font-style: normal;
font-weight: normal;
}
#content {
width: 376px;
color: #5b5b51;
font-family: arial;
font-size: 11px;
line-height: 13px;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
overflow: auto;
height: 206px; width: 314px;
}
#content a { text-decoration: none;
border: 1px solid transparent;
color: #050b6e;
font-family: arial;
font-size: 10px;
line-height: 11px;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
}
#content a:active { text-decoration: none;
border: 1px solid transparent;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #eee;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
}
#content a:visited { text-decoration: none;
border: 1px solid transparent;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #050b6e;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
}
#content a:hover { border: 1px solid transparent;
color:#050b6e;
cursor: default;
background-color:#fff;
text-decoration: none;
font-style: none;
}
#content2 {
width: 376px;
color: #c2c202;
font-family: arial;
font-size: 11px;
line-height: 13px;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
text-align: justify;
padding: 0px 2px 0px 2px;
overflow: auto;
}
#content2 a { text-decoration: none;
border: 1px solid transparent;
color: #050b6e;
font-family: arial;
font-size: 10px;
line-height: 11px;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
height: 172px; width: 140px;
}
#content2 a:active { text-decoration: none;
border: 1px solid transparent;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #eee;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
}
#content2 a:visited { text-decoration: none;
border: 1px solid transparent;
font-family: arial;
font-size: 10px;
line-height: 11px;
color: #050b6e;
font-style: normal;
text-transform: lowercase;
background-color: transparent;
}
#content2 a:hover { border: 1px solid transparent;
color:#050b6e;
cursor: default;
background-color:#fff;
text-decoration: none;
font-style: none;
}
::-moz-selection {
background:#e41b38;
color:#000000;
}
textarea { border: 1px solid #e41b38;
background-color: transparent;
width: 250px;
height: 140px;
font-family: arial;
font-size: 11px;
line-height: 12px;
color: #e41b38;
}
#box
{
background-color:#fff;
width: 342px;
height: 165px;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #959595;
}
#box a
{
color:ff006c; text-decoration: none; font: 10px Verdana, Arial
}
#box a:hover
{
color:#00c0ff;
background-fff:#
}
input { border: 1px solid #e41b38;
background-color: transparent;
font-size: 10px;
line-height: 11px;
font-family: arial;
color: #e41b38;
}
b, strong { font-family: arial;
font-size: 12px;
line-height: 13px;
color: #ff0000;
font-weight: bold;
}
i, em { font-family: arial;
font-size: 11px;
line-height: 11px;
color: #1c9ba8;
font-style: italic;
}
u { font-family: arial;
font-size: 11px;
line-height: 11px;
color: #000;
text-decoration: underline;
border-bottom: 1px dashed #e41b38;
}
s, stroke { font-family: arial;
font-size: 11px;
line-height: 11px;
color: #ff0000;
text-decoration: line-through;
}
m{ font-family: arial;
font-size: 11px;
line-height: 12px;
color: #000;
background-color:#ff0000;
padding: 0px 2px 0px 2px;
}
  </style>
</head>
<body style="background-color: rgb(0, 0, 0);">

<img src="http://cbimg6.com/layouts/09/07/35175aa.gif" alt="Layout by ZeBiii">
<div id="header" style="position: absolute; overflow: auto; z-index: 3; text-align: left; height: 241px; width: 160px; top: 345px; left: 11px;"><a class="one" href="#">.</a><a class="two" href="#">.</a><a class="three" href="#">.</a><a class="four" href="#">.</a><a class="five" href="#">.</a>
</div>

<div id="header2" style="position: absolute; overflow: auto; z-index: 3; text-align: left; width: 34px; left: 746px; top: 327px; height: 234px;"><a class="link" href="#">.</a><br>

<a class="link" href="#">.</a><br>

<a class="link" href="#">.</a>

</div>

<div id="content2" style="position: absolute; z-index: 3; text-align: justify; top: 72px; height: 170px; left: 541px; width: 171px;">Lorem
ipsum in nec eirmod iudicabit, dicta civibus mnesarchum
at vix.
Cum an soleat detraxit constituto, cu euismod detraxit consulatu nam.
<b>Ad tollit graeco adipisci duo!</b> Ut duo harum nihil
sanctus, ne liber
scripserit mea? His id exerci tempor minimum, <m>pro an justo
maluisset.</m>
Labore eripuit inermis no pri, his error affert placerat eu, per
viderer suscipiantur ut? Ne cum lorem atomorum persequeris. <u>Qui
mundi
</u></div>

<div id="content" style="position: absolute; z-index: 3; text-align: left; top: 347px; left: 418px;">
<h1>Header - here comes the Headline</h1>

<p><This is="" the="" content=""><br>

Write whatever you want.<br>

<u>Do not remove the Copyright and credits!!!</u></This></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>

<p></p>

</div>

<div id="navi1" style="position: absolute; z-index: 3; text-align: left; height: 159px; top: 68px; left: 426px; width: 121px;">
<table style="text-align: center; top: 193px; height: 122px; left: 426px; width: 109px;" border="0" cellpadding="2" cellspacing="2">

<tbody>

<tr>

<td>

<h2>Navi</h2>

</td>

<td>
      <h2>Navi</h2>

</td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

<tr>

<td><a href="#">moments</a></td>

<td><a href="#">moments</a></td>

</tr>

</tbody>
</table>

</div>

</body>
</html>

Layout Comments

Showing latest 10 of 19 comments

Oh zebras are my favorite!

By didtech on Jul 5, 2010 12:37 pm

justin timberlake right?

By emmijane on Mar 6, 2010 12:01 pm

cool

By x-cherries-x on Jul 26, 2009 2:08 pm

this is so awesome! definately one of the best layouts i have EVER seen. the coding is so amazing

By xi0mara on Jul 17, 2009 7:54 pm

Amazing colours(:

By aliiicimo on Jul 16, 2009 7:24 pm

this is nicee

By xii3 on Jul 16, 2009 3:57 pm

creative,

By x-one2three on Jul 16, 2009 1:15 pm

nice and colorful! love the rollovers! great job!

By mystiicdesigns on Jul 16, 2009 12:49 pm

amazing.

By futura on Jul 16, 2009 8:48 am

the colors are awesome. My absolute favorite.

By none345678 on Jul 16, 2009 7:26 am

View all »

Layout Details

Designer	ZeBiii
Submitted on	Jul 15, 2009
Page views	6,701
Favorites	42
Comments	19
Reviewer	manny-the-dino
Approved on	Jul 15, 2009

Layout Colors

Layout Tags

celebrities, colorful, music, stripes, zebra, grunge, boy

Layout Tools

Layout Affiliates

Here I Stand Layouts