Zoombeanie Designs

Black and Red
05/22/2004 // 2:29 a.m.

To check out this layout, click here. Link opens in new window.

This is an imageless layout. The background is black and there are red boxes. The entry section in an in scroll. It's simple but nice looking.

If you like this layout, here are the codes:

Entry page (opens in a new window. Must be logged in):

<html>
<title>Black and Red</title>
<head>
<style type="text/css">
A:link {text-decoration: none; color: #E06868;}
A:visited {text-decoration: line-through; color: #8C0000;}
A:active {text-decoration: none; color: #8C0000;}
A:hover {text-decoration: underline; color: #8C0000;}

body {background-color: #000000;
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #000000; 
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #000000; 
scrollbar-arrow-color: #000000;
}

.entry { position: absolute;
top: 20;
left: 250;
width: 500;
height: 500;
overflow: auto;
font-family: tahoma;
font-size: 11px;
color: #980C0C;
text-align: left;
padding: 3px;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
scrollbar-face-color: #000000; 
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #980C0C;
scrollbar-3dlight-color: #980C0C; 
scrollbar-darkshadow-color: #000000; 
scrollbar-track-color: #000000; 
scrollbar-arrow-color: #980C0C;
}

.navigate { position: absolute;
top: 10;
left: 50;
width: 150;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
background: #980C0C;
}

.navigate1 { position: absolute;
top: 30;
left: 50;
width: 150;
hieght: 100;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #980C0C;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
}

.contact { position: absolute;
top: 130;
left: 50;
width: 150;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
background: #980C0C;
}

.contact1 { position: absolute;
top: 150;
left: 50;
width: 150;
hieght: 100
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #980C0C;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
}

.about { position: absolute;
top: 250;
left: 50;
width: 150;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
background: #980C0C;
}

.about1 { position: absolute;
top: 270;
left: 50;
width: 150;
hieght: 100;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #980C0C;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
}

.extra { position: absolute;
top: 370;
left: 50;
width: 150;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
background: #980C0C;
}

.extra1 { position: absolute;
top: 390;
left: 50;
width: 150;
hieght: 100;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #980C0C;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
}

.thanks { position: absolute;
top: 490;
left: 50;
width: 150;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
background: #980C0C;
}

.thanks1 { position: absolute;
top: 510;
left: 50;
width: 150;
hieght: 100;
overflow: auto;
font-family: tahoma;
font-size: 11px;
text-align: center;
color: #000000;
border-left: 1px #980C0C solid;
border-right: 1px #980C0C solid;
border-top: 1px #980C0C solid;
border-bottom: 1px #980C0C solid;
padding: 5px;
}

</style>
</head>

<body>

<div class=entry>
<b>%%short_description%%</b><br>
%%date%% - %%time%%
<p></p>
%%entry%%

<p></p>
<p align="center"><a href="layouts.html">black</a> - <a href="fairytale.html">red</a></center>
</div>

<div class=navigate>
<b>Navigation</b>
</div>

<div class=navigate1>
<a href="index.html">new</a><br>
<a href="older.html">old</a><br>
<a href="http://members.diaryland.com/edit/profile.phtml?user=%%USERNAME%%">profile</a>
</div>

<div class=contact>
<b>Contact</b>
</div>

<div class=contact1>
<a href="http://members.diaryland.com/edit/notes.phtml?user=%%USERNAME%%">notes</a><br>
<a href="http://GUESTBOOKLINK.com">guestbook</a><br>
<a href="mailto:YOUREMAIL@WHATEVER.com?subject=what ever you want the subject bar to say">email</a>
</div>

<div class=about>
<b> About Me</b>
</div>

<div class=about1>
Anything about you that you wish to say.
</div>

<div class=extra>
<b>Extras Stuff</b>
</div>

<div class=extra1>
<a href="RINGSLINK.html">rings</a><br>
<a href="LINKTOWHATEVER">link</a><br>
<a href="LINKTOWHATEVER">to</a><br>
<a href="LINKTOWHATEVER">whatever</a>
</div>

<div class=thanks>
<b>Thanks</b>
</div>

<div class=thanks1>
<a href="http://zoombeanie.diaryland.com">design</a><br>
<a href="http://www.diaryland.com">home</a>
</div>

</body>
</html>

Older page (opens in a new window. Must be logged in):