About the Layout

Always wanted to make a fourth free layout but didn't have the idea for one, until now. In Episode 232, after Harmony puts Spat in that yellow bubble (once again) Harmony looks up at the angry Spat like she's thinking of something to do with Spat. And this layout gives an example of what Harmony could be thinking about.

Original Layout added on 7/8/10 - Remade on 1/11/22 l New Summary; Since I enjoyed the original I decided to remake it and since I remember it well. Though since I wanted it to be better, I made many changes. I don't remember how everything looks but I'm sure that I made it better. I edited the pastel gradient that is on Gimp by removing a few colors that didn't look good (on an image) with the pastel purple, pink, and blue look (with some white). I removed more of the background and Santa Ham on the image that I used for Harmony. Added a title to the banner, "If Only I Knew.." and learned a new way to make a border for the text by not bluring it (bluring it gave it that glowing effect). Added another header, added space around the headers and links in the navigation, changed one of the header's font to match the banner, made the text a little smaller in both the content and navigation. I also added borders to the whole layout, changed the color of the links (changed the color when the links are hovered as well), made the banner 10 times small in height, added "This layout is from Spat & Harmony Heartbreak" in the Disclaimer. I should've did something like that in the original. I obviously changed the coding where it can be copied and pasted in order to use it so all of these changes stay intact.

Layout Code

Copy the text area below and paste this on any site page.

<html>
<head>
<title>Your Title Here</title>

A:link 
{ text-decoration: none; color: #9966FF; }
A:visited 
{ text-decoration: none; color: #9966FF; }
A:hover 
{ text-decoration: none; color: #CC66FF;}

body
{ background-color: #CC66FF;
background-image: url('') ;
background-repeat: repeat-x;
text-align: justify;
margin-bottom: 0px; 
margin-right: 0px; 
margin-top: 5px;
}
#centerlayout
{ margin-left: -370px;
margin-right: 0px; 
margin-top: 0px; 
margin-bottom: 0px; 
width: 779px;
left: 50%;
top: 0%;
position: absolute;
}

#rightmenu
{ font-family: Comic Sans MS;
color: #9900CC;
font-size: 14px;
background-color: #CC99FF;
background-image: url('https://melon48.neocities.org/shh/content4.png') ;
text-align: right;
border: 0px;
width: 144px;
border-top: 0px solid #9966FF;
border-bottom: 0px solid #9966FF;
border-left: 0px solid #9966FF;
border-right: 2px solid #9966FF;
padding: 4px;
}

#content
{ font-family: Comic Sans MS;
color: #9900CC;
font-size: 13px;
background-color: #CC99FF;
background-image: url('https://melon48.neocities.org/shh/content4.png') ;
text-align: center;
width: 635px;
padding: 4px;
border-top: 0px solid #9966FF;
border-bottom: 0px solid #9966FF;
border-left: 2px solid #9966FF;
border-right: 2px solid #9966FF;
}

#banner
{ font-family: Comic Sans MS;
color: #333333;
font-size: 11px;
background-color: #;
background-image: url('https://melon48.neocities.org/shh/banner4.png');
width: 778px;
height: 570px;
border-top: 2px solid #9966FF;
border-bottom: 2px solid #9966FF;
border-left: 2px solid #9966FF;
border-right: 2px solid #9966FF;
}

h1 {
font-family: Balthazar; 
font-size: 21px; 
color: #9900CC; 
font-weight: bold; 
text-align: left;
background: #9966FF;
background-image: url('');
border-bottom: 0px solid
}

h2 {
font-family: Comic Sans MS; 
font-size: 15px; 
color: #9900CC; 
font-weight: bold; 
text-align: left;
background: #9966FF;
background-image: url('https://melon48.neocities.org/shh/header4.png');
border-bottom: 0px solid
}
</style>

<body leftmargin="0" rightmargin="0" topmargin="10" bottommargin="10">
<div id="centerlayout">
<table cellspacing="0" cellpadding="0" border="0">
<tr><td valign="top" align="center" id="banner" colspan="3"></td></tr>
<tr>
<td valign="top" id="content">
<div align="justify">
<h1>Header</h1>
Content goes here

</div>
</td>

<td valign="top" id="rightmenu">
<h2>Header</h2>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a>

<h2>Header</h2>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a><br>
<a href="#">Link</a>

<h2>Disclaimer</h2>
Layout from <a href="http://spat-harmony.byethost16.com/index.php">Spat and Harmony Heartbreak</a>

</td></tr>
<tr><td valign="top" align="center" id="disclaimer" colspan="3">
</td></tr></table>
</body>
</html>

Header

Link
Link
Link
Link
Link
Link

Header

Link
Link
Link
Link
Link
Link

Header

Link
Link
Link
Link
Link
Link

Disclaimer

Layout from Spat and Harmony Heartbreak