:: Neo-Reality :: Website Layouts

Website Layouts

To copy the coding, simply press the "ctrl" key and the "C" key on the keyboard at the same time. Do not ask us to email you the code as we are not very likely to do so.

These website layouts can be used for your guild website, neopets help site or even just a random personal site. To use them, copy and paste the code into your web host and voila! You are allowed to alter some images to your liking as long as our credit (full link back to Neo-Reality) is visible on every single page.

Version: Babaa
Type: Div Layers

<html>
<head>
<title>Title Here</title>
<style>
body {scrollbar-base-color: #FFFFFF; scrollbar-face-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color: #484848; scrollbar-darkshadow-color: #959899; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #FFFFFF; scrollbar-3dlight-color: #959899; overflow-x: hidden; background: url('http://img.photobucket.com/albums/v63/Kathrin433/Backgrounds/Neoreality/Website/babaa2.jpg');}
a {text-decoration: none; color: #02336B; cursor: crosshair;}
a:hover {text-decoration: underline overline; color: #02336B; cursor: crosshair;} 
p {color: #000000; font-family: tahoma; font-size: 11px; text-align: justify;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
.header {font-family: Arial; font-weight: bold; font-size: 11px; color: #003269;; height: 20px; text-align: center}
</style>
</head>

<p class="header">The Layout</p>
<p>
You can change the layout around a *little* bit as LONG as our credit remains visible on EVERY page. If you fail to do so, we WILL catch you and you WILL land on the wall of shame and reported to your host. Stealing is ILLEGAL and will be treated as such. Takeing the codeing is also stealing and will also be treated as such. 
<p class="header">Heading</p>
<p>
Put your content here :)
</p>

</div>
<div style="position:absolute; top:355; left:80; width:120;">
<p class="header">Heading</p>
<P>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>

<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>

<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>
<p class="header">Credits</p>
<p>
Site Content by You<br>
Website Layout by<a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
</p>
</div>
<div style="position:absolute; top:355; left:610; width:120;">
<p class="header">Heading</p>
<P>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>
<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>
<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>
<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>
<p class="header">Heading</p>
<p>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
<a href="link.htm">Link</a><br>
</p>

<p class="header">Credits</p>

<p>
Site Content by You<br>
Website Layout by<a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
</p>

Version: Candychan
Type: Tables

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

<body>

<p class="nav">Navigation</p>

<p class="nav">Navigation</p>

<p class="main">About this Layout</p>
You have no idea how much I'm in love with this layout! Lol, the colors are sooooo cute! I spent about 2 hours doing the border background alone, and about another hour perfecting the top banner and bottom image.
<p>
There weren't many Candychan pictures so I had to make do with a snow background and a faded swirly brush (alreay installed when I purchased Photoshop), but overall, I think the effect is quite nice.
<p>
The font may be too small on some browsers so make sure that you change the font size if people are complaining about not being able toread it. But other than that, I think the font is so small and cute! ^^

<p class="main">Using this Layout</p>
As you can see, there are 2 headings for the layout. One is the navigation heading, the other is the content heading. Qhen you copy the previous code, please make sure you're copying it from the right one. This is not like my other layouts so beware...
<p>
The other thing you might notice is that <b>bolded</b> text are a different color. To change this so that it remains the same color as normal text when bolded, delete the 'B' function in the CSS. Otherwise, leave it alone.

<p class="main">Credits and Copyrights</p>
This literally took me hours and I would be so peeved if someone stole this layout. In fact, I would give no warning and freeze your site immediately. Web hosts generally take abuse reports from domain sites more seriously as we have a paid hosting, therefore reports are less likely to be fake. One email from me will make sure that your IP number is banned from just about every reliable web host there is. I really doubt you want to take that risk.
<p>
But you may edit this layout to customize your site. But doing so, you agree to our terms of service and must give us credit - <b>a full link back</b> to Neo-Reality on every page that this layout is displayed on. No credit will be taken as theft and will lead to harsh consequences for you and your site.

<center><b>| Site content by You | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Some Images from Neopets.com|</b></center>

</td></tr></table>
</td></tr>
</table>

</body>
</html>

Version: Kadoatie
Type: Tables

<title>- Your title here</title>

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;">
<tr><td class="top">About this Layout</td></tr>
<tr> <td class="content">

There wasn't enough petpet web layouts and it just didn't seem fair to the under-represented minority of petpets, so I made a new Kadoatie layout. I'm totally in love with the pink and blueness of the layout, it's currently my favorite pair of colors at the moment ^^
<p>
For those who are wondering about the top banner, it's supposed to be a contrast between 'nobility' (as shown by the flowing curtain border) and the 'street-wise' (as shown by the font). All in all, it conveys quite an interesting variety of elements, especially with the kadoaties falling out of the sky in the background.

</td></tr>
</table><br>

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;">
<tr><td class="top">Using this Layout</td></tr>
<tr> <td class="content">

This layout might be a little difficult to use because of all the table tags everywhere. Unlike some of my previous layouts, I didn't want to stuff everything into the CSS, so I left it as HTML instead.
<p>
To use this layout, you must be familiar with table codes as you will need to copy and paste previous boxes for more content boxes. You'll need to know when one cell ends and another begins.
<p>
The starting and ending tags are here to help you differentiate between the content cell and the navigation cell.

</td></tr>
</table><br>

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;">
<tr><td class="top">Credits and Copyrights</td></tr>
<tr> <td class="content">

The link to Neo-Reality is NOT allowed to be removed, ever. You have taken the code from us so therefore you MUST credit us otherwise you are violating international copyright laws. Just because you are on the internet does not justify theft. Our graphics and coding are <u>copyrighted</u> and we reserve our rights to every part of this layout.
<p>
You are allowed to edit to your liking <i>as long as</i> our credit remains intact. If you have edited it for your site but have not given credit, that will be taken as theft and actions will be taken against you and your site. No excuses will be accepted. Leave the credit there, end of story. Got it?

</td></tr>
</table><br>

</td><td valign="top" width="145">

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;">
<tr><td class="top">Heading</td></tr>
<tr><td class="content">
*// <a href="http://">Link Here</a><br>
*// <a href="http://">Link Here</a><br>
*// <a href="http://">Link Here</a><br>
*// <a href="http://">Link Here</a><br>
*// <a href="http://">Link Here</a></td>
</tr>
</table><br>

<center><b>- Site by Your Name | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Some images from Neopets.com -</b></center>

</td></tr></table>

</body>
</html>

Version: Meepit
Type: Tables

<title>Your title here</title>

</td></tr>
<tr><td valign="top" width="145">

<table width="140" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;">
<tr><td class="top">Heading</td></tr>
<tr><td class="content">
|| <a href="http://">Link Here</a><br>
|| <a href="http://">Link Here</a><br>
|| <a href="http://">Link Here</a><br>
|| <a href="http://">Link Here</a><br>
|| <a href="http://">Link Here</a>

</td></tr></table><br>

</td><td width="400" valign="top">

<table width="395" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;"><tr><td class="top">About this Layout</td></tr><tr><td class="content">

*meep* ---> You just can't get enough of those evil pink things! This layout is the final number to the ongoing series of Meepit graphics. It is similar in coding to the Kadoatie layout because I was feeling lazy and didn't want to think of a whole new style.
<p>
I have added a space for you to put your site name on just to give it that extra customized feel. You can change the color of that title by going to "h1" in the CSS and adding a new hex color code. You can also underline/bold/italicise that title if you wish.

</td></tr></table><br>

<table width="395" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;"><tr><td class="top">Using this Layout</td></tr><tr><td class="content">

</td></tr></table><br>

<table width="395" border="0" cellspacing="0" cellpadding="0" style="border: 1px solid #8B4789; padding: 3;"><tr><td class="top">Credits and Copyrights</td></tr><tr><td class="content">

</td></tr></table><br>

</td></tr><tr><td style="border: 1px solid #936B68; padding: 3; background-color: #ce7dad; color: #FFFFFF;" colspan="2">

<center><b>- Site by Your Name | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Some images from Neopets.com -</b></center>

</td></tr></table></td></tr></table>
</body></html>

Version: Slorg
Type: Div Layers

<html>
<title>Your site title</title>
<style type="text/css">
body {background: url('http://img.photobucket.com/albums/v285/neoreality1/websites/slorgbg.gif'); background-repeat: repeat-y; color:#003300; font-family: tahoma, verdana; font-size:10pt; background-color:#A6D785;
  scrollbar-arrow-color: #7DA828;
  scrollbar-track-color: #A6D785;
  scrollbar-face-color: #527709;
  scrollbar-highlight-color: #7DA828;
  scrollbar-3dlight-color: #527709;
  scrollbar-darkshadow-color: #334A07;
  scrollbar-shadow-color: #527709;}
a:link, a:active, a:visited {color: #003300; text-decoration: none;}
a:hover {color: #CDD704; text-decoration: none; font-weight:bold; cursor: hand;}
.header {border: 3pt solid #215E21; background:#CDE472; color:#556B2F; font-size:10pt; font-family: Comic Sans MS; font-weight:bold; text-align:center;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
.content {padding:7;}
table, td {background:#659D32;color:#003300;font-family: tahoma, verdana;font-size:10pt;}
</style>
</head>
<body margin="0">
<img src="http://img.photobucket.com/albums/v285/neoreality1/websites/slorgtop.gif" style="position:absolute;top:0;left:0" width="600" height="330">
<div style="position:absolute;left:13;top:285;width:161">

<p class="header">Heading</p><div class="content">

~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
</div>

<p class="header">Heading</p><div class="content">

~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
</div>

<p class="header">Heading</p><div class="content">

~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
~ <a href="http://">link here</a><br>
</div>

<p class="header">Credits</p><div class="content">

~ Site by You<br>
~ Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a><br>
~ Images from <a href="http://www.neopets.com">Neopets</a><br>
~ Hosted by Your Host

</div>

<p class="header">About this Layout</p><div class="content">

Too slimey for words, I must say =P Well, obviously this layout is a Slorg theme, and the slimey creatures deserves its own layout, after all, it has it's own day too ^^
<p>
Very simple div layout, although the top banner took me about 2 hours to make up. If you look closely, 48% of the background was hand-drawn by me, and I didn't use any special effects - just the pencil and paint bucket tool =D
</div>

<p class="header">Using this Layout</p><div class="content">

You have no idea how simple I've made it. It's practically stripped of all fancy coding and it's just plain HTML and CSS. To make a new heading, just copy the code before and you should be all set.
</div>

<p class="header">Credits and Copyrights</p><div class="content">

I'm very edgy when it comes to this part. If you steal ANY part of this layout, take a long hard look at yourself in the mirror because you won't be able to do it ever again. I will hunt you down and make it my personal duty to make sure that you never see daylight again. Got it?
<p>
Redistribution of this layout is prohibited. You may edit this layout to your liking, as long as our credit remains intact. This means a visible full link back, none of that text stuff - I want a LINK! No link will be taken as theft and you will be persecuted.
</div>

Version: Tropical Hasee
Type: Tables

<html>
<head>
<title>~ Title Here ~</title>
<style type="text/css">
body {font-family: tahoma, verdana, sans-serif; font-size:11px;
   scrollbar-face-color:#93DB70;
   scrollbar-shadow-color:#FFFFFF;
   scrollbar-highlight-color:#FFFFFF; 
   scrollbar-3dlight-color:#61B329 ; 
   scrollbar-darkshadow-color:#61B329;
   scrollbar-track-color:#F0FFF0;
   scrollbar-arrow-color:#61B329;}
td {font-family: verdana, sans-serif; font-size:11px;}
a:link, a:active, a:visited {color: #003366; text-decoration:none;}
a:hover	{color: #0066cc;text-decoration: underline;}
h1{text-align:center; font-size:12px; line-height: 22px; font-weight: 400; margin: 0px; margin-top:10px;background-color: #61B329; border: solid 1px;}
h2{text-align:center; font-size:12px; line-height: 22px; font-weight: 400; margin-bottom: 0px; margin-left: 10px; margin-right: 10px; margin-top: 10px;background-color: #61B329; border: 1px solid #000000;}
.nav {display: block; padding: 0px; margin-top: 0px; margin-right: 10px; margin-left: 10px; margin-bottom: 10px;}
.nav li{line-height: 22px;background-color: #93DB70;border: solid 1px;border-top: solid 0px; padding: 0px; padding-left:6px;}		
.nrjk {border: solid 1px;border-color: #FFFFFF;background-color: #000000;}
.top{background-color: #93DB70;font-size: 12px;height: 20px;text-align:center; font-size: 10px;}
.content {background-color: #FFFFFF; border: 1px solid #000000; border-top: 0px; margin: 0px; padding: 5px;}
</style>
</head>
<body bgcolor="#F0FFF0">
<table align="center" width="750" cellspacing="1" cellpadding="0" class="nrjk">
<tr><td colspan="7" bgcolor="#E0EEE0"><p align="right"> 
<table border="0" width="100%" cellspacing="0" cellpadding="3" align="center"><tr>
<td colspan="1" align="center">
<center><img  src="http://i5.photobucket.com/albums/y160/neoreality4/websites/haseetop.gif" width="750" height="150" border="0"></center></td>
</td></tr></table>
</td></tr>

<tr><td colspan="9" bgcolor="#E0EEE0">
<table width="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="170">
<h2>:: Heading ::</h2>
<ul class="nav">
<li><a href="http://www.neopets.com">Link 1</a></li>
<li><a href="http://www.neopets.com">Link 2</a></li>
<li><a href="http://www.neopets.com">Link 3</a></li>
<li><a href="http://www.neopets.com">Link 4</a></li>
<li><a href="http://www.neopets.com">Link 5</a></li>
<li><a href="http://www.neopets.com">Link 6</a></li>
</ul>

<h2>:: Heading ::</h2>
<ul class="nav">
<li><a href="http://www.neopets.com">Link 1</a></li>
<li><a href="http://www.neopets.com">Link 2</a></li>
<li><a href="http://www.neopets.com">Link 3</a></li>
<li><a href="http://www.neopets.com">Link 4</a></li>
<li><a href="http://www.neopets.com">Link 5</a></li>
<li><a href="http://www.neopets.com">Link 6</a></li>
</ul>

</td>
<td width="410">

<h1>About this layout</h1>
<div class="content">
I made this a Tropical Hasee theme since most of the Hasee pictures I found had a tropical background anyway ^^
<br><br>
I know, I know, the CSS is so long, but bear with it. Most of the coding is pretty simple if you grasp a good understanding of how CSS class tags work. If not, then I suggest reading a tutorial on CSS and maybe experiment a little.
</div>

<h1>Using this layout</h1>
<div class="content">
The best advice you're going it get is probably to copy the previous code. It would be extremely hard to explain what every single code meant so just go with the flow and copy the previous navigation or text box if that's what you need. If you're planning to change the color scheme then I suggest looking out the for # symbol because all colors have been set as hex color codes.
</div>

<h1>Credits</h1>
<div class="content">
You must keep a full link back to Neo-Reality on every page that this layout is displayed on. If no credit is shown, then that will be taken as theft.
</div>

<br></td><td width="170">
<h2>:: Heading ::</h2>
<ul class="nav">
<li><a href="http://www.neopets.com">Link 1</a></li>
<li><a href="http://www.neopets.com">Link 2</a></li>
<li><a href="http://www.neopets.com">Link 3</a></li>
<li><a href="http://www.neopets.com">Link 4</a></li>
<li><a href="http://www.neopets.com">Link 5</a></li>
<li><a href="http://www.neopets.com">Link 6</a></li>
</ul>

</td></tr></table>
</td></tr><tr><td colspan="9" bgcolor="61B329" height="20">
<center>Site Content (c) Your Site | Layout (c) <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | Some images from Neopets.com</center>
</td></tr>
</table>

</body>
</html>