The Fountain of Youth

[date] - [title]

I absolutely love this layout. It features a Romanesque pool with the Roman columns and all between which the entry is placed and the links underneath are the tiles that lead a pathway to the pool. It took a while to get everything placed correctly, but I love what it looks like now. It also has a space for your journal name at top, simply change the USERNAME in the code to your username and voila!

Directions are found in the Rules page. That's my trick to make sure you read the rules first.

Here is the HTML for this layout:

<HTML>
<TITLE>The Fountain of Youth</TITLE>
<META NAME="GENERATOR" CONTENT="Sothink HTML Editor">

<HEAD>
<style type="text/css">
body
{scrollbar-base-color: #0286e8; 
   scrollbar-face-color: #0286e8; 
   scrollbar-track-color: #0286e8; 
   scrollbar-arrow-color: #fefff4;
   scrollbar-highlight-color: #ffffff; 
   scrollbar-3dlight-color: #ffffff; 
   scrollbar-shadow-color: #FFFFFF;
   scrollbar-darkshadow-color: #FFFFFF;
   
   font-family: Georgia, arial, sans-serif;
   font-size: 12pt}
   
.entry
{background-color: #FFFFFF;
z-index:1;
filter:
progid:dXimagetransform.microsoft.alpha(opacity=65); 
overflow: auto}

.name
{background-color: #0286e8;
z-index:1;
filter:
progid:dXimagetransform.microsoft.alpha(opacity=65); 
font-family: french script MT;
font-size: 18pt;
font-weight: bold}

.menu
{background-color: #800000;
z-index:1;
filter:
progid:dXimagetransform.microsoft.alpha(opacity=65)}
a
{color: #ffffff;
text-decoration: underline}

</style>
</HEAD>

<BODY>
<div STYLE="position: absolute; top:0px; left: 350px">
<img src="http://prod.bsis.bellsouth.net/coDataImages/p/Groups/115/115081/folders/83626/552091pool.jpg" width="450"

height="650"> 
</div>

<div CLASS="NAME" STYLE="position: absolute; width: 115px; height: 25px; top: 5px; left: 520px">
USERNAME
</DIV>

<div CLASS="entry" style="position: absolute; top: 45px; left: 450px; width: 275px; height: 400px" z-index="1">
<b>[date] - [title]</b>
<p>
[body]
</div>

<div CLASS="menu" STYLE="position: absolute; top: 555px; left: 455px; width: 25px; height: 25px">
<a [prev HREF]>Last</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 555px; left: 505px; width: 25px; height: 25px">
<a [curr href]>Current</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 555px; left: 575px; width: 25px; height: 25px">
<a [next href]>Next</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 555px; left: 630px; width: 50px; height: 25px">
<a href="mailto:USERNAME@diary-x.com">E-mail</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 555px; left: 690px; width: 25px; height: 25px">
<a HREF="https://colombianita03.tripod.com/design.html">Design</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 590px; left: 710px; width: 25px; height: 25px">
<a HREF="http://www.freefoto.com">Image</a>
</div>
<div CLASS="menu" STYLE="position: absolute; top: 620px; left: 725px; width: 65px; height: 25px">
<a HREF="http://www.diary-x.com">Diary-X</a>

</body>
</HTML>