:: 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 (link back to Neo-Reality) is visible on every single page.

That Summer Afternoon
Type: Tables

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

Your Site Name Here

</td></tr><tr><td width="14" bgcolor="#426A75"> </td><td width="100" bgcolor="#CAE6FB" valign="top">

<p class="title">Title</p>

<p class="title">Title</p>

<p class="title">About this Layout</p>

This is the first ever non-neopets layout (apart from anime) that Neo-Reality has ever created. I made it for the people who are no longer interested in Neopets, but still want to keep up a site for personal reasons, like displaying their art, or making their website completely tutorial-based.
<p>
This was originally a photograph I had taken when I went over to New Zealand a couple of years ago. It was the most gorgeous summer waether and the places up north that I visited were so amazing. It's not really my style to add brushes and modify the pictures like this, but I think it turned out quite nicely regardless.
<p>
I've allowed you to write your own site name on the top banner just to give you that extra customized feel to the layout.
<p>

<p class="title">Using this Layout</p>

This is pretty much a normal table layout with my usual CSS tags. The only difference is the table cell construction. Because the top banner connects with the tables, they have been moved around to give the exact positioning that I want. Try not to disrupt the positioning by adding any more padding, margin or borders to any of the table coding.
<p>
For headings, just copy the previous heading. They are the same for the navigation and main content so if you accidentally delete all the headings in the main content section, you can still get the code from the navigation.
<p>
The navigation is a bit tricky. You will not need any paragraph or break tags to make a new link. You may want to put it in separate lines in case you get confused though.
<p>

<p class="title">Credits and Copyright</p>

This layout is completely copyrighted to <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a>. The image for the top banner is property of me, Jen, photographed in 2005 and edited in 2007 - steal it and you <i>will</i> be reported. The coding was written by me 29th September 2007 - all rights reserved.
<p>
You may NOT remove the credit from this layout, both in the coding and on the image. If you do, I will take this as theft and you will suffer the consequences. You may edit this layout to your liking but you MUST keep a link back to Neo-Reality on every page that you use the layout on (unless you have switched to frames, in which case only the index page requires crediting).
<p>
If you decide to alter the image above (that means not replacing it with your own but modifying it instead), you MUST keep the credit to Neo-Reality on the image. Any attempts at covering the credit or making the credit unreadable will be taken as art and property theft, and you can and will be persecuted under national and international law.

Site & Content by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank"><font color="white">Neo-Reality</font></a> | Hosted by YOUR HOST

</b></font></center></td></tr></table>
</body>
</html>

When you left me
Type: Tables

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

<div class="head">About this Layout</div><br><div style="width:480px;">
Gosh, what can I say about this layout? I was listening to this really sweet love song when I thought of the theme of isolation. When I think about isolation I think of feeling cold and seeing nothing around you. Hopefully I've captured that in this layout.
<p>
I spent ages debating on whether I should put this in the anime section or the non-neopets section. I decided to put it in non-neopets since the space of non-neopets images exceed the space of the anime picture. Besides, there's already a snowy anime web layout in that section.
<p>
</div>

<div class="head">Using this Layout</div><br><div style="width:480px;">
I admit, I took a few shortcuts so I didn't measure the layout properly when I was aligning the tables. So, this means that when you copy and paste a heading, you'll also have to copy and paste the div blog after the heading as well because they're included as a whole. I advise that you practise before using the layout publicly.
<p>
I seriously advise against changing this layout to iframes. If you are really sick of having to update every single page when you want to make an adjustment to the layout, make the navigation an iframe. But that is only if you're familiar with iframes. If you're still adament on using iframes on the man section, tags have been added to indicate where it would be appropriate.
<p>
</div>

<div class="head">Credits and Copyrights</div><br><div style="width:480px;">
This layout can not be used without a link back credit to Neo-Reality on every page that you intend to display it on. If you are using frames, only a link back on the index page is necessary. Failure to credit will be taken as copyright infringement and consequent actions will be taken.
<p>
If you are the copyright holder of the images in the top banner, please contact Jen.
</div>

<div class="nav">Heading</div><div style="padding:10px;">
-- <a href="#">Your link here</a><br>
-- <a href="#">Your link here</a><br>
-- <a href="#">Your link here</a><br>
-- <a href="#">Your link here</a><br>
-- <a href="#">Your link here</a><br>
</div>

<br></td></tr><tr><td colspan="2"><center><div style="background-color:#F0F8FF; width: 698px; padding:5px;"><b>
Site by YOU -- Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> -- Hosted by Your Host
</div></center><p>

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

Night Sky
Type: Tables

<title>Your title here</title>

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

|| <a href="http://">Put link here</a><br>
|| <a href="http://">Put link here</a><br>
|| <a href="http://">Put link here</a><br>
|| <a href="http://">Put link here</a><br>
|| <a href="http://">Put link here</a><br>

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

<center><h1>Your Site Name</h1>
<b><font color="white">Neopets, Graphics and Tutorials</font></b></center>

</td></tr><tr><td valign="top" bgcolor="#FFFFFF" style="border-left:1px solid #000000; border-right:1px solid #000000; border-top:1px solid #000000;padding:5px;filter: alpha(opacity=80);">

<p class="nav">About this Layout</p>

Aurora Borealis, also known as the Northern Lights, commonly occurs in the pole. If you're lucky enough to witness this amazing natural, make sure you take a million photos!
<p>
This layout is dedicated to the night sky, the part that shines anyway. It features an aurora borealis in the background, with the Altador Constellations (from Neopets) on the front.

<p class="nav">Using this Layout</p>

This layout is made up of tables within tables. If you're unfamiliar with tables, don't touch anything! The headings are easy to use, they're just one line, and that's pretty much it.
<p>
I have also left a space at the top for you to write your site's name on. You can customize the bottom line to say whatever you want, such as what your site contains, your site's address etc.

<p class="nav">Credits and Copyrights</p>

Constellation image from Neopets. Northern Lights image from Wikipedia. Background stars brushes from Brusheezy.
<p>
This layout was made and coded by Neo-Reality. Please leave the credit at the bottom alone, otherwise you will be violating our terms of use. You may edit the layout to your liking provided that our credit is on every page that you use the layout on, or only on the index page if the layout has been changed to iframes.

Site by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a> | More credits here

</b></font></center></td></tr></table></td><td width="10"> </td><td width="140" bgcolor="#FFFFFF" valign="top" style="border-left:1px solid #000000; border-right:1px solid #000000; padding:5px;filter: alpha(opacity=80);">

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

button here<br>
button here<br>
button here<br>
button here<br>
button here<br>

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

button here<br>
button here<br>
button here<br>
button here<br>
button here<br>

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

</td><td width="10"> </td></tr></table></td></tr></table>