:: 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.

Note: I did not draw these anime pictures. If you did, please contact me so I can add your credit. I will only give credit to the rightful owner, not to any distributers or copycats.

Daring to Fly
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://i101.photobucket.com/albums/m80/neoreality7/websites/airbg.gif'); background-repeat: repeat-y; font-family: tahoma; font-size: 11px; color: #000000; background-color: #87CEFF;
	scrollbar-face-color: #A4D3EE;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #A4D3EE;
	scrollbar-darkshadow-color: #A4D3EE;
	scrollbar-track-color: #87CEFF;
	scrollbar-arrow-color: #FFFFFF;}
h1 {font-family: times; font-size: 20px; color: #5D92B1; font-weight:bold;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#26466D; text-decoration:none;} 
A:hover{color: #FFFFFF; text-decoration: none; font-weight: bold; background-color:#22316C;cursor: ne-resize;}
</style>
</head>

<h1>Navigation_______</h1>
<p>
♥ <a href="http://">Your Link Here</a><br>
♥ <a href="http://">Your Link Here</a><br>
♥ <a href="http://">Your Link Here</a><br>
♥ <a href="http://">Your Link Here</a><br>
♥ <a href="http://">Your Link Here</a><br>

<h1>Credits_______</h1>
<p>

♥ Site Content by YOU<br>
♥ Layout by <a target="_blank" href="http://www.neo-reality.org">Neo-Reality</a><br>
♥ Hosted by Your Host<br>
♥ Any other credits

<h1>About the Layout__________</h1>
<p>
I have to say, I really do love anime pictures, especially how easily they blend into each other. This one features the element of Air, with wings to signify such. I was actually going to name it 'the air that I breathe' but I thought that it was a bit too romantic so I 
changed it to something else instead.
<p>
I love the blue in this layout, everything about it reminds me of tranquillity and peace. It also makes me think of friendship because the two characters look like they're answering each other or something.
<p>

<h1>Using the Layout__________</h1>
<p>
Same thing as every Div layer layout, try not to edit the div tags if you don't need to, they are positioned as is for a reason.
<p>
If you need more help with Div layer layouts, please read the tutorial in the Webmasters section before contacting me because I hate repeating myself.
<p>

<h1>Credits and Copyrights__________</h1>
<p>
I could go on and on about respecting my copyrights but you should all know the drill by now. You may edit this layout as much as you want but the link back to Neo-Reality must stay on every page that the layout is used on.
<p>
Because I was in a rush, I don't remember where I got the above images from. If you are the rightful owner of the above images (meaning that you drew them and did not take them from another person/site), please contact me so I can add your credit.
<p>

Admiring Nature's Paradise
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://i101.photobucket.com/albums/m80/neoreality7/websites/earthbg.gif'); background-repeat: repeat-y; font-family: verdana; font-size: 11px; color: #000000; background-color: #FFE1FF;
	scrollbar-face-color: #78AB46;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #629632;
	scrollbar-darkshadow-color: #629632;
	scrollbar-track-color: #FFE1FF;
	scrollbar-arrow-color: #FFFFFF;}
h1 {font-family: garamond; font-size: 20px; color: #629632; text-align: right; letter-spacing: 3px;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#586949; text-decoration:none;} 
A:hover{color: #F6A4D5; text-decoration: underline; cursor: ne-resize;}
</style>
</head>

<h1>... About the Layout</h1>
<p>
I absolutely adore the color scheme in this layout. Quite obviously, this layout is earth-based and I think it would look great as a layout during springtime. The girl's eyes used to be pink, but I thought that looked quite disturbing so I changed it to something more normal; green.
<p>
Unfortunately, this layout only suits sites that have directory pages like for the part under "You", there would be links to pages that have links to other pages. It will scroll if more content is added to it, but it looks really really bad so I wouldn't suggest it.
<p>

<h1>... Using the Layout</h1>
<p>
Same thing as every Div layer layout, try not to edit the div tags if you don't need to, they are positioned as is for a reason.
<p>
If you need more help with Div layer layouts, please read the tutorial in the Webmasters section before contacting me because I hate repeating myself.
<p>

<h1>... Credits and Copyrights</h1>
<p>
I could go on and on about respecting my copyrights but you should all know the drill by now. You may edit this layout as much as you want but the link back to Neo-Reality must stay on every page that the layout is used on.
<p>
Because I was in a rush, I don't remember where I got the above image from. If you are the rightful owner of the above image (meaning that you drew it and did not take it from another person/site), please contact me so I can add your credit.
<p>

<br><br><center><b>Site Content by YOU | Layout by <a href="http://www.neo-reality.org" target="_blank">Neo-Reality</a></b></center><br></div>
</body>
</html>

A teardrop to add to my Ocean
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://i101.photobucket.com/albums/m80/neoreality7/websites/waterbg.gif'); background-repeat: repeat-y; font-family: verdana; font-size: 11px; color: #000000; background-color: #A4D3EE;
	scrollbar-face-color: #6CA6CD;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #A4D3EE;
	scrollbar-darkshadow-color: #A4D3EE;
	scrollbar-track-color: #A4D3EE;
	scrollbar-arrow-color: #FFFFFF;}
h1 {font-family: brush script MT; font-size: 30px; color: #5D92B1; text-align: center; border-bottom: 1px dotted #5D92B1;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#26466D; text-decoration:none;} 
A:hover{color: #FFFFFF; text-decoration: none; font-weight: bold; cursor: help;}
</style>
</head>

<h1>Navigation</h1>
<p>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>

<h1>Credits</h1>
<p>

Site Content by YOU<br>
Layout by <a target="_blank" href="http://www.neo-reality.org">Neo-Reality</a><br>
Hosted by Your Host<br>
Any other credits

<h1>About the Layout</h1>
<p>
I love this layout so much! There's practically no blending and yet the top image looks soooo good! The image of the girl wasn't originally sad, I just added tears and re-shaped her mouth a little to show sadness and now every time I look at it, I feel like there's tears brimming to my eyes.
<p>
As for the heading, you need to have the font Brush Script MT to be able to view it properly. It might not be the best choice in font, but I couldn't think of another one that was more common, but if you can, edit away.
<p>

<h1>Using the Layout</h1>
<p>
Same thing as every Div layer layout, try not to edit the div tags if you don't need to, they are positioned as is for a reason.
<p>
If you need more help with Div layer layouts, please read the tutorial in the Webmasters section before contacting me because I hate repeating myself.
<p>

<h1>Credits and Copyrights</h1>
<p>
I could go on and on about respecting my copyrights but you should all know the drill by now. You may edit this layout as much as you want but the link back to Neo-Reality must stay on every page that the layout is used on.
<p>
Because I was in a rush, I don't remember where I got the above image from. If you are the rightful owner of the above image (meaning that you drew it and did not take it from another person/site), please contact me so I can add your credit.
<p>

Please don't let go
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://i101.photobucket.com/albums/m80/neoreality7/websites/firebg.gif'); background-repeat: repeat-x; font-family: verdana; font-size: 11px; color: #000000; background-color: #FEE5AC;
	scrollbar-face-color: #C76114;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #993300;
	scrollbar-darkshadow-color: #993300;
	scrollbar-track-color: #FEE5AC;
	scrollbar-arrow-color: #FFFFFF}
h1 {font-family: mistral; font-size: 25px; color: #993300; text-align: justify; padding-left: 5; border-bottom: 1px dashed #993300;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#B13E0F; text-decoration:none;} 
A:hover{color: #EE7600; text-decoration: underline; cursor: crosshair;}
</style>
</head>

<h1>Partners</h1>
<p>
<center>button here</center>
<center>button here</center>

<h1>Affiliates</h1>
<p>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>
<center>button here</center>

<h1>Heading</h1>
<p>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>
<a href="http://">Your Link Here</a><br>

<h1>Credits</h1>
<p>

Site Content by YOU<br>
Layout by <a target="_blank" href="http://www.neo-reality.org">Neo-Reality</a><br>
Hosted by Your Host<br>
Any other credits

<h1>About the Layout</h1>
<p>
I completely went against my usual even nature and created this almost-lopsided layout. The height of the navigation bars along with the content box all depends on the amount of stuff you write in each div section.
<p>
As for the actual theme of the layout, it's fire, quite obviously, and it's heading feature the font Mistral. I was originally going to make it into a tables layout but something about anime just goes with div layers in my head.

</div>
</body>
</html>

The Light inside my Shadows
Type: Div Layers

<html>
<head>
<title>// Title Here \\</title>
<style type="text/css">
body {background-image: url('http://i101.photobucket.com/albums/m80/neoreality7/websites/lightbg.gif'); background-repeat: repeat-y; font-family: tahoma; font-size: 11px; color: #F0FFFF; background-color: #000000;
	scrollbar-face-color: #2F2F4F;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-3dlight-color: #000000;
	scrollbar-darkshadow-color: #000000;
	scrollbar-track-color: #000000;
	scrollbar-arrow-color: #FFFFFF;}
h1 {font-family: verdana; font-size: 10px; color: #8F8FBC; font-weight:bold; letter-spacing: 3px;}
.nrjk {font-family: veranda; font-weight: none; font-size: 10px; color: #000000; text-align: justify}
A:link, A:visited, A:active {color:#F0F8FF; text-decoration:none;} 
A:hover {color: #CCCCFF; text-decoration: none; font-weight: bold; cursor: crosshair;}
</style>
</head>

<h1>Navigation</h1>
<p>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>
* <a href="http://">Your Link Here</a><br>

<h1>Credits</h1>
<p>

* Site Content by YOU<br>
* Layout by <a target="_blank" href="http://www.neo-reality.org">Neo-Reality</a><br>
* Hosted by Your Host<br>
* Any other credits

<h1>About the Layout</h1>
<p>
This is basically like a Light vs. Darkness sort of layout. It was too hard not to get an image featuring darkness without some form of light inside so I thought I would combine the two.
<p>
The ledge thing that the girl is sitting on was made into the navigation bar. If you think this is not enough, you can always use the extra space on the side (you have another 200px to go before you reach the smallest common screen resolution).
<p>

<h1>Credits and Copyrights</h1>
<p>
I could go on and on about respecting my copyrights but you should all know the drill by now. You may edit this layout as much as you want but the link back to Neo-Reality must stay on every page that the layout is used on.
<p>
Because I was in a rush, I don't remember where I got the above images from. If you are the rightful owner of the above images (meaning that you drew them and did not take them from another person/site), please contact me so I can add your credit.
<p>

It's the season
Type: Div Layers

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

<h1>About this Layout</h1>
I thought I'd branch out into something Non-Neopets for the winter holidays and when I came across this picture I knew I had to make a website layout with it. The right hand side and lower bottom sections were actually added on by me since the original image was cut off and a bit smaller than the actual image you see here.
<p>
Since it's anime themed, I thought it would be appropriate to make it div-layered. This type of layout is suitable for smaller personal sites, or blogs, as opposed to large Neopets based sites who are looking to have a whole list of links to attract people. I think only sites who are more open to other stuff, like anime, celeb and abstract art should use this layout - sites that are more neopets oriented should look in the neopets website layout sections instead.
<p>

<h1>Using this Layout</h1>

This layout is basically comprised of a top banner, a background and several div blogs. Even the CSS is short for once. You can add anything to the navigation bar, you don't need to stick to the original links. The space was made long for you to experiment with.
<p>
To make a new heading, just use the appropriate heading tags (h1 or h2). You can easily copy the previous heading code and paste it wherever you need it. Please note that the heading for the navigation is not the same as the heading for the main content, so do not mix them around.
<p>

<h1>Credis and Copyright</h1>

If you decide to use this layout, please keep the link back to Neo-Reality on every page that you decide to use it on. If you're using it with frames, credit to Neo-Reality is only necessary on the index page. Failure to put credit on the layout will be taken as copyright infringement and consequences will be severe.
<p>
If you are the original artist of this picture, please contact me. I got this image off a google image search so am not sure who the rightful copyright holder is.
<p>

<p></div><div style="position: absolute; top:20px; left:680px; width: 170px; height: 537px;">

<h2>Title</h2>
<div class="nav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div><br>

<h2>Credits</h2>
<div class="nav">
<a href="#">Site by You</a>
<a href="http://www.neo-reality.org" target="_blank">Layout by Neo-Reality</a>
<a href="#">Hosted by Your Host</a>

</div><br>