Petpage Layouts

Petpage Layouts are used for Neopets Petpages only. They can be used on normal websites, but it is not advised as it is designed for displaying all information from one page. To copy a code, highlight everything and press ctrl c on your keyboard, then press ctrl v to paste.

Version Baby

<head><style type="text/css">
body {background-color: #EED2EE; background-image: url('http://i5.photobucket.com/albums/y160/neoreality4/petpage/baby.gif'); background-repeat: no-repeat; cursor: url('http://home.comcast.net/~whitedreamwolf/ndrbabybr.cur'); scrollbar-arrow-color:#FFFFFF; 
scrollbar-track-color:#EED2EE; 
scrollbar-face-color:#A46DA4; 
scrollbar-highlight-color:#CE89CE; 
scrollbar-3dlight-color:#A46DA4; 
scrollbar-darkshadow-color:#814281; 
scrollbar-shadow-color:#A46DA4;
font-family: arial; font-size: 10 pt; color: #8B4789;} a:link,a:visited,a:active {text-decoration: none; color:#683A5E;} 
a:hover {text-decoration: underline; color:#F7B3DA;}</style></head>

<center><h4>Navigation</h4></center>

</div>

<center><h4>Links</h4></center>
<p>

</div>

<center><h4><a name="1">Welcome to my petpage!</a></h4></center><p>

Hi! Looks like you've stumbled upon my secret page. Or maybe it was just that link in my user lookup *lol* Well, if you wanted to know more about me, then you've come to the right place.
<p>

I've been playing Neopets for 2 years now, going on and off. As you can see, Baby is my favorite pet color. I've been saving up for a baby paintbrush so I can paint my uni baby to match my chomby.
<p>

<center><h4><a name="2">Heading 2</a></h4></center><p>

Content 2 - make sure #2 link is directed to this heading.

<center><h4><a name="3">Heading 3</a></h4></center><p>

Content 3 - make sure #3 link is directed to this heading.
<p>

<center><h4><a name="4">Heading 4</a></h4></center><p>

Content 4 - make sure #4 link is directed to this heading.
<p>

<center><h4><a name="5">Heading 5</a></h4></center><p>

Content 5 - make sure #5 link is directed to this heading.
<p>

</p><br><br><br>

</div><div style="visibility: hidden">

Version Bori

<div class="nav">Navigation</div><br>

- <a href="#1">Your Link 1</a><br>
- <a href="#2">Your Link 2</a><br>
- <a href="#3">Your Link 3</a><br>
- <a href="#4">Your Link 4</a><br>
- <a href="#5">Your Link 5</a><br>
- <a href="#6">Your Link 6</a><br>
- <a href="#7">Your Link 7</a><br>
<br>

<div class="nav">Heading</div><br>

- <a href="#">Other Link 1</a><br>
- <a href="#">Other Link 2</a><br>
- <a href="#">Other Link 3</a><br>
- <a href="#">Other Link 4</a><br>
- <a href="#">Other Link 5</a><br>
- <a href="#">Other Link 6</a><br>
<br>

<div class="nav">Links</div><br>

</td><td width="508" height="40" style="padding-left:5px; padding-right:10px; padding-top:5px; padding-bottom:0px;"><div style="overflow:auto; padding:5px; width:490px; height:35px;"><div class="nr">

your petpage title

</div></td></tr><tr><td width="508" height="460" valign="top" style="padding-left:18px; padding-right:16px; padding-top:170px; padding-bottom:18px;"><div style="overflow:auto; padding:5px; width:465px; height:270px;">

<a name="#1"><div class="jk">About this Petpage</div></a><br>

For all you Bori lovers out there, here's a petage dedicated to this Neopets species. This layout is a combination of blogs and tables, so it might be a bit hard for newbies to understand what's coding what. But hopefully, the example text within the layout will be of use.
<p>

<a name="#2"><div class="jk">Using this Layout</div></a><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 8' then link it with the url "#8". This will drop you down to wherever heading 8 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links on the side to link to other petpages if you wish, it's completely up to you.
<p>

<a name="#3"><div class="jk">Credits and Copyrights</div></a><br>

You are not allowed to change any part of this layout aside from the content. You may not use our coding as a template for your own customized layout. You may not 'borrow' our images for your own layout. Please keep the credit on the image exactly where it is. I have created this layout to give you as much customization power as possible so editing images should not be necessary to begin with.
<p>

<a name="#4"><div class="jk">Heading 4</div></a><br>

Content 4
<p>

<a name="#5"><div class="jk">Heading 5</div></a><br>

Content 5
<p>

<a name="#6"><div class="jk">Heading 6</div></a><br>

Content 6
<p>

<a name="#7"><div class="jk">Heading 7</div></a><br>

Content 7
<p>

</div></td></tr></table><p>

Version Easter

</td></tr>

<h1><a name="1">:About this Layout:</a></h1>

This layout was made for easter, and the form is ment to remind a bit to an egg (I know, its pretty abstract, but even if its not egg-like, I like the form anyways!). This layout took a good while to make and I hope you'll enjoy using it. I tried to keep it from becoming too extremely pink and colorful, sorry about that xD. 
<p>
Thank you to Jen for letting me use her coding on this one.
<br>
~ Kathrin
<h1><a name="2">:Using this Layout:</a></h1>

The only thing you need to learn before using this layout is the link system for petpages. It's all good and dandy to put separate content on separate petpages, but what if you only have one pet and don't plan to create more?
<p>

Well you have to then understand how to use links on one page. Basically, you want a link that looks like <i>http://www.neopets.com/~yourpetname#heading</i> with the heading as whatever you set your content heading as. It can be "about" or "pets" or whatever.
<p>
The links at the top have been set to #1, #2, #3 and so on and the headings have been set to that as well. You can change it so it makes more sense to you but it should work fine as it is. 
<P>
If you add too many links, the image might look "messed up". Try to keep it under 6 links and you should be fine.
<br>
~ Jen

<h1><a name="3">:Heading here:</a></h1>

Content 3 here
<p>

</td></tr><tr><td width="600" height="119" background="http://img.photobucket.com/albums/v110/pneopia/petpages/easterfooter.gif"> </td></tr></table><p>

Version Faeries

Petpage Title

</div><div class="jk">

</div>

</td></tr>
<tr><td width="600" bgcolor="#FFFFFF" style="padding:10px;">

<a name="#1"><h1>About this Petpage</h1></a>

A remake of the old faerie petpage, this layout is now structured using tables. I've tried to include as many faeries as possible in the top banner, but due to the lack of space, certain faeries are missing. I might make individual layouts for these missing faeries, such as Jhudora and Taelia, sometime in the future, but for now, this general faeries petpage should do the trick.
<p>

<a name="#2"><h1>Using this Layout</h1></a>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 7' then link it with the url "#7". This will drop you down to wherever heading 7 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<a name="#3"><h1>Credits and Copyrights</h1></a>

<a name="#4"><h1>Links</h1></a>

<a name="#5"><h1>Heading 5</h1></a>

Content 5
<p>

<a name="#6"><h1>Heading 6</h1></a>

Content 6
<p>

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

Version Faerie Pets

<head><style type="text/css">body {background-color: #DFA6DC; background-image: url(http://i83.photobucket.com/albums/j305/Neoreality6/PP/FaerieP.png); background-repeat: no-repeat; scrollbar-face-color : #FD98FE; scrollbar-highlight-color : #FFFFFF; scrollbar-3dlight-color : #FFC6FF; 
scrollbar-shadow-color : #FFFFFF; scrollbar-darkshadow-color : #FFC6FF; scrollbar-track-color : #FFC6FF; scrollbar-arrow-color : #FF7EFF; font-family: arial;
font-size: 10pt; color: #D481D2 ;} A:link,A:visited,A:active {text-decoration: none; color:#DB43D6; } A:hover { text-decoration: dashed; color:#FFFFFF;} </style></head><div style="position:absolute; top:115; left:400; height:90; width:200; overflow:auto; padding:5px;">

Links

</h2></center>

</div><div style="position:absolute; top:275; left:360; height:200; width:510; overflow:auto; padding:5px;">

<center><h4><a name=1>
About Me
</a></h4></center><p>

Talk about your pet here (you can change 'about me' to anything you like -- same goes for the rest of the headings

</p>

<center><h4><a name=2>
My Gallery
</a></h4></center><p>

Before you start editing I want to make you aware: By useing the cute lil layout your agreeing to Neo-Reality's terms of use. You may take down the banner-link, but it is asked that you please dont :)

<p>

</p>
<center><h4><a name=3>
Heading 3
</a></h4></center><p>

Content 3

</p>
<center><h4><a name=4>
Heading 4
</a></h4></center><p>

Content 4

</p>
<center><h4><a name=5>
Heading 5
</a></h4></center><p>

Content 5

</p><br><br><br>
</div><div style="visibility: hidden">

</div><div style="position:absolute; top:115; left:640; height:90; width:230; overflow:auto; padding:5px;">

<B>Name: </b>#NAME<br> 
<B>Age: </b>#HOURS<br> 
<B>Geneder: </b>#GENDER<br> 
<B>Level: </b>#LEVEL <br> 
<B>Strength: </b>#STRENGTH<br> 
<B>Move: </b>#MOVE<br> 
<B>Defense: </b>#DEFENCE<br> 
<B>Max HP: </b>#MAX_HP<br> 
<B>Current HP: </b>#CURRENT_HP<br> 
<B>My smartness: </b>#INTELLIGENCE<br>

Version Grey

</td></tr>
<tr><td width="550" background="http://img.photobucket.com/albums/v285/neoreality1/petpages/greymid.gif" style="padding:5px; padding-right:55;" valign="top">

<h1><a name="1">-[About this Layout]-</a></h1>

Grey is a sad color, and yet people seem to love it, so is grey the new baby? Supposedly so, which is why I made this petpage in dedication to this melancholy yet popular color.
<p>
The top banner emphasises the sadness with the torn edges in the middle, showing how our lives can just as easily be ripped apart. Too philosophical? Basically I put it in to show sadness. The end. Lol.
<p>

<h1><a name="2">-[Using this Layout]-</a></h1>

<h1><a name="3">-[Heading Three]-</a></h1>

Content 3 here
<p>

<h1><a name="3">-[Heading Four]-</a></h1>

Content 4 here

</td></tr><tr><td width="550" height="2" background="http://img.photobucket.com/albums/v285/neoreality1/petpages/greybottom.gif"> </td></tr></table><p>

Version Harris

your petpage title

</div></td></tr><tr><td width="800" height="392" style="padding-left:195px; padding-right:38px; padding-top:15px; padding-bottom:2px;"><div style="overflow:auto; padding:5px; width:530px; height:375px;">

<a name="#1"><div class="jk">About this Petpage</div></a><br>

This is a cross between a tropical layout and a harris layout, so lets just rename it the tropical harris layout =P<br>I think the colors blend in quite well, and the gradient effect in the main image creates a complimenting gradient in the background, which was a nice visual surprise when I was coding it.
<p>
Speaking of coding, this petpage is a blog-style layout, although some table codes are used as well. Try not to play around with the codes if you are unfamiliar with tables and CSS.
<p>

<a name="#2"><div class="jk">Using this Layout</div></a><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 8' then link it with the url "#8". This will drop you down to wherever heading 8 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<a name="#3"><div class="jk">Credits and Copyrights</div></a><br>

<a name="#4"><div class="jk">Links</div></a><br>

<a name="#5"><div class="jk">Heading 5</div></a><br>

Content 5
<p>

<a name="#6"><div class="jk">Heading 6</div></a><br>

Content 6
<p>

<a name="#7"><div class="jk">Heading 7</div></a><br>

Content 7
<p>

</div></td></tr><tr><td width="800" height="85" style="padding-left:227px; padding-right:50px; padding-top:15px; padding-bottom:5px;"><div style="padding:5px; width:430px; height:40px;">
<center>

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

Version Illusen

<div class="nr">your petpage title</div><br><div style="padding-right:30px;">

</div></div></td></tr><tr><td width="700" height="470" style="padding-left:315px; padding-right:37px; padding-top:12px; padding-bottom:33px;"><div style="overflow:auto; padding:5px; width:345px; height:417px;">

<a name="#1"><div class="jk">About this Petpage</div></a><br>

This layout features an Illusen theme and uses a blog-style format. The background is actually a photograph of a forest, but I guess it's kind of hard to tell after I pushed it through all those filters. I was planning to use another image of Illusen but then decided against it because that image was too over-used. I think the image I opted for still does the trick.
<p>

<a name="#2"><div class="jk">Using this Layout</div></a><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 8' then link it with the url "#8". This will drop you down to wherever heading 8 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<a name="#3"><div class="jk">Links</div></a><br>

<a name="#4"><div class="jk">Credits and Copyrights</div></a><br>

<a name="#5"><div class="jk">Heading 5</div></a><br>

Content 5
<p>

<a name="#6"><div class="jk">Heading 6</div></a><br>

Content 6
<p>

<a name="#7"><div class="jk">Heading 7</div></a><br>

Content 7
<p>

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

Version Kauvara

Your Petpage Title

</div></td></tr><tr><td width="600" height="30" bgcolor="#523271" style="padding:5px; text-align:center;"><div class="jk">

</div></td></tr><tr><td width="600" bgcolor="#e4d8ef" style="padding:10px;">

<a name="#1"><h1>About this Petpage</h1></a>

This layout features Kauvara, the kau who runs the Neopian Magic Shop. Originally this layout was pretty basic, and when I attempted to remake it, I remembered why the old version seemed so dull - there were barely any usable images.
<p>
Hopefully I've used what little images I could find in an effective way on this table layout. To find out how to use the navigation system, just read below.
<p>

<a name="#2"><h1>Using this Layout</h1></a>

<a name="#3"><h1>Credits and Copyrights</h1></a>

<a name="#4"><h1>Links</h1></a>

<a name="#5"><h1>Heading 5</h1></a>

Content 5
<p>

<a name="#6"><h1>Heading 6</h1></a>

Content 6
<p>

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

Version Maraqua

<head><style type="text/css">body {background-color: #FFFFFF; background-image: url(http://i83.photobucket.com/albums/j305/Neoreality6/PP/Maraqua.png); background-repeat: no-repeat; scrollbar-face-color : #B7D968; scrollbar-highlight-color : #FFFFFF; scrollbar-3dlight-color : #7DAF58; 
scrollbar-shadow-color : #FFFFFF; scrollbar-darkshadow-color : #7DAF58; scrollbar-track-color : #D3E5A1; scrollbar-arrow-color : #FFFFFF; font-family: arial;
font-size: 10pt; color: #7DAF58 ;} A:link,A:visited,A:active {text-decoration: none; color#B7D968; } A:hover { text-decoration: dashed; color:#FFFFFF;} </style></head>

</div><div style="position:absolute; top:95; left:510; height:300; width:320; overflow:auto; padding:5px;">

<center><h4><a name=1>
About Me
</a></h4></center><p>

Talk about your pet here (you can change 'about me' to anything you like -- same goes for the rest of the headings

</p>

<center><h4><a name=2>
My stuff
</a></h4></center><p>

<p>

</p>
<center><h4><a name=3>
Heading 3
</a></h4></center><p>

Content 3

</p>
<center><h4><a name=4>
Heading 4
</a></h4></center><p>

Content 4

</p>
<center><h4><a name=5>
Heading 5
</a></h4></center><p>

Content 5

</p><br><br><br>
</div><div style="visibility: hidden">

</div><div style="position:absolute; top:90; left:30; height:145; width:430; overflow:auto; padding:5px;">

Put all extra text and funky stuff here :D

</div><div style="position:absolute; top:825; left:810; height:1; width:1; overflow:auto; padding:5px;">

Version Moehog

</div></td></tr>
<tr><td width="700" height="247" style="padding-left:58px; padding-right:26px; padding-top:5px; padding-bottom:5px;"><div style="overflow:auto; padding:5px; width:616px; height:237px;">

<a name="#1"><div class="jk">About this Petpage</div></a><br>

This simple little layout is based on a Moehog theme. The area isn't very big, so I would recommend this for a smaller petpage. The coding is based on Jen's (with permission) and uses tables / divs. Enjoy :-).

<a name="#2"><div class="jk">Using this Layout</div></a><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 8' then link it with the url "#8". This will drop you down to wherever heading 8 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links at the bottom to link to other petpage if you wish, it's completely up to you.
<p>

<a name="#3"><div class="jk">Credits and Copyrights</div></a><br>

<a name="#4"><div class="jk">Links</div></a><br>

<a name="#5"><div class="jk">Heading 5</div></a><br>

Content 5
<p>

<a name="#6"><div class="jk">Heading 6</div></a><br>

Content 6
<p>

<a name="#7"><div class="jk">Heading 7</div></a><br>

Content 7
<p>

</div></td></tr><tr><td width="700" height="59" style="padding-left:55px; padding-right:55px; padding-top:3px; padding-bottom:27px;"><div style="padding:5px; width:590px; height:20px;">
<center>

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

Version Nightsteed

<head><style type="text/css">body {background-color: #FFFFFF; background-image: url(http://i83.photobucket.com/albums/j305/Neoreality6/PP/nightsteed.png); background-repeat: no-repeat; scrollbar-face-color : #374E3F; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; 
scrollbar-shadow-color : #FFFFFF; scrollbar-darkshadow-color : #7DAF58; scrollbar-track-color : #837E7B; scrollbar-arrow-color : #89B1A5; font-family: arial;
font-size: 10pt; color: #FFFFFF ;} A:link,A:visited,A:active {text-decoration: none; color#FFFFFF; } A:hover { text-decoration: dashed; color:#FFFFFF;} </style></head>
<div style="position:absolute; top:355; left:30; height:200; width:220; overflow:auto; padding:5px;">

<center><h4><a name=1>
About Me
</a></h4></center><p>

Talk about your pet here (you can change 'about me' to anything you like -- same goes for the rest of the headings
</p>

<center><h4><a name=2>
My stuff
</a></h4></center><p>

Before you start editing I want to make you aware: By useing the cute lil layout your agreeing to Neo-Reality's terms of use. Redistributeing, editing or useing the codeing is strictly against the rules.

<p>

</p>
<center><h4><a name=3>
Heading 3
</a></h4></center><p>

Content 3

</p>
<center><h4><a name=4>
Heading 4
</a></h4></center><p>

Content 4

</p>
<center><h4><a name=5>
Heading 5
</a></h4></center><p>

Content 5

</p><br><br><br>
</div><div style="visibility: hidden">
</div><div style="position:absolute; top:120; left:280; height:145; width:250; overflow:auto; padding:5px;">

Put all extra text and funky stuff here :D

</div>
<div style="position:absolute; top:825; left:810; height:1; width:1; overflow:auto; padding:5px;">

Version Peophin

<h1>Navigation</h1>

<h1>More Links</h1>

</div></td></tr><tr><td style="padding-right:5px; text-align:right; font-size:20px; font-family: georgia, times, tahoma; color:#aab69e; font-weight:bold; text-transform:uppercase;" bgcolor="#56655e">

Your.Petpage.Title

</td></tr><tr><td style="padding:5px;" bgcolor="#FFFFFF">

<div class="jk"><a name="heading1">About this Layout</a></div><br>

There weren't many pretty pictures of peophins (alliteration! lol) so I decided to make a petpage layout that was more tough than sweet.
<p>
<marquee><img src='http://images.neopets.com/template_images/peophin_red_swimming.gif'> <img src='http://images.neopets.com/template_images/peophin_yellow_swimming.gif'> <img src='http://images.neopets.com/template_images/peophin_green_swimming.gif'></marquee>
<p>
Please respect my copyright when you are using this petpage layout. I did spend a lot of time making and coding it so the least you can do is give credit where credit is due. This means that I won't allow any editing except for the text and links. You certainly may not use this petpage as a template for your own custom layout.
<p>

<div class="jk"><a name="heading2">Using this Layout</a></div><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading called 'heading6' then link it with the url "#heading6". This will drop you down to wherever heading6 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<div class="jk"><a name="heading3">Heading 3</a></div><br>

Content 3
<p>

<div class="jk"><a name="heading4">Heading 4</a></div><br>

Content 4
<p>

<div class="jk"><a name="heading5">Heading 5</a></div><br>

Content 5
<p>

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

Version Petpets

<a href="#1">Link One</a> | <a href="#2">Link Two</a> | <a href="#3">Link Three</a> | <a href="#4">Link Four</a> | <a href="#5">Link Five</a>

</b></div></div> </td><td width="135" height="24"> </td></tr>
<tr><td width="800" height="17" colspan="3"> </td></tr>
</table></center></td></tr>
<tr><td width="200" height="300"><center><img src="http://img.photobucket.com/albums/v285/neoreality1/petpages/petpetside.gif" width="200" height="300"></center></td><td width="600">
<center><table border="0" cellpadding="0" cellspacing="0" width="600" height="300" background="http://img.photobucket.com/albums/v285/neoreality1/petpages/petpetblog.gif">
<tr><td width="600" height="60" colspan="3"> </td></tr>
<tr><td width="155" height="225"> </td><td width="320" height="225"> <div style="width: 320; height: 225; overflow: auto; font-family: Verdana, Tahoma, Helvetica, sans-serif; font-size: 11px; color: #000000; text-align:center; scrollbar-arrow-color:#FFFFFF; scrollbar-track-color:#F0F8FF; scrollbar-face-color:#A46DA4; scrollbar-highlight-color:#CE89CE; scrollbar-3dlight-color:#A46DA4; scrollbar-darkshadow-color:#814281; scrollbar-shadow-color:#A46DA4;"><div style="padding-left: 17px; padding-right:2px;">
	
Welcome to my petpage! I really hope you enjoy your time as you read all the wonderful things about the petpets of Neopia. My favourite is petpet has to be the faellie because it reminds me of the little squirrel that used to live in the tree outside my bed room window. But back to the point...
<p>

<h4><a name="1">Using this Layout</a></h4>
<p>
To use the heading and link tags on a petpage, you have to put your petpage address, ie. http://www.neopets.com/~your_pets_name in from of #1 (or whatever you decide to put after the hash). So to link to this heading, you put the following address:
<p>
http://www.neopets.com/~your_pets_name#1
<p>
Or you don't even have to link to the content, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<h4><a name="2">About this Layout</a></h4>
<p>
The text in here is all centered, and so is the links blog. This whole thing is made up of sliced images and blogs so it should be firefox friendly. If not, please contact us about it and we will see what we can do.
<p>

<h4><a name="3">Heading 3</a></h4>
<p>
Content 3
<p>

<h4><a name="4">Heading 4</a></h4>
<p>
Content 4
<p>

<h4><a name="3">Heading 5</a></h4>
<p>
Content 5
<p>

Version Pteri

</td></tr>

<h1><a name="1">:About this Layout:</a></h1>

Even though the image is a little bit overused, it is still one of the prettiest Neopets images out there. This layout is simple and kind to the eye. At the same time it still uses a lot of colors.
<p>
Thank you to Jen for letting me use her coding on this one.
<br>
~ Kathrin
<h1><a name="2">:Using this Layout:</a></h1>

<h1><a name="3">:Heading here:</a></h1>

Content 3 here
<p>

<h1><a name="4">:Heading here:</a></h1>

Content 4 here
<p>

</td></tr><tr><td width="600" height="2" background="http://i9.tinypic.com/29zqv79.png"> </td></tr></table><p>

Version Snowbunny

<div class="nr">your petpage title</div>

</div></td></tr><tr><td width="693" height="303" style="padding-left:210px; padding-right:5px; padding-top:5px; padding-bottom:5px;"><div style="overflow:auto; padding:5px; width:475px; height:290px;">

<a name="#1"><div class="jk">About this Petpage</div></a><br>

This layout holds a snowbunny theme. It's simplicity is due largely to the fact that I couldn't find any suitable snowbunny pictures, so I had to settle with the one image that seemed somewhat unique.
<p>
The coding itself is a blog-style layout. It uses tables and divs, but no positioning so the blog will always stay in the middle of the page, regardless of the screen size.
<p>

<a name="#2"><div class="jk">Using this Layout</div></a><br>

To use the heading and link tags on this petpage, just follow the pattern of the links in the navigation. If you decide to create another heading, say 'heading 8' then link it with the url "#8". This will drop you down to wherever heading 8 is on your page.
<p>
Or if you don't want to link within this petpage, you can use the links up top to link to other petpage if you wish, it's completely up to you.
<p>

<a name="#3"><div class="jk">Credits and Copyrights</div></a><br>

<a name="#4"><div class="jk">Links</div></a><br>

<a name="#5"><div class="jk">Heading 5</div></a><br>

Content 5
<p>

<a name="#6"><div class="jk">Heading 6</div></a><br>

Content 6
<p>

<a name="#7"><div class="jk">Heading 7</div></a><br>

Content 7
<p>

</div></td></tr><tr><td width="693" height="31" style="padding-left:190px; padding-right:10px; padding-top:3px; padding-bottom:3px;"><div style="padding:5px; width:475px; height:20px;">
<center>

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

Version Tyrannia

<head>
<style type="text/css">
body {background-color: #9C661F; 
background-image: url('http://i5.photobucket.com/albums/y160/neoreality4/petpage/tyrannia.gif'); background-repeat: no-repeat; 
scrollbar-arrow-color: #C7915C;
scrollbar-face-color:#604021;
scrollbar-highlight-color:#7C5835; 
scrollbar-3dlight-color:#604021; 
scrollbar-darkshadow-color:#3E250E; 
scrollbar-shadow-color:#604021;
scrollbar-track-color: #9C661F; 
font-family: tahoma, verdana; font-size: 10pt; color: #5C4033;}
a:link, a:visited, a:active {font-weight:bold; text-decoration: none; color:#5C4033;} 
a:hover {font-weight:bold; text-decoration: underline; color:#E3A869;}
</style>
</head>

<b>#</b> <a href="http://www.neopets.com/~Your-URL#1">About Me</a>
<br><b>#</b> <a href="http://www.neopets.com/~Your-URL#2">Link 2</a>
<br><b>#</b> <a href="http://www.neopets.com/~Your-URL#3">Link 3</a>
<br><b>#</b> <a href="http://www.neopets.com/~Your-URL#4">Link 4</a>
<p>

Feel free to add as many links as you want.
<p>

</div><div style="position:absolute; top:60; left:282; height:270; width:245; overflow:auto; padding:5px;">

<center><h4><a name="1">About Me</a></h4></center><p>

Welcome #VISITOR to my little Tyrannian page! As you can see, I'm all about the ugga ugga, nothing faerie about me about all ^^
<p>
I have a total obession with Tyrannia, especially Tyrannian spardels because they are just so cute! If I had loads of neopoints, the first thing I would do is to paint my spardel tyrannian. In fact, he would look like this:
<p>
<center><img src="http://images.neopets.com/new_shopkeepers/t_1282.gif"></center>
<p>
Isn't he just so adorable? This is totally my dream goal, once I reach it, I'm going to play with him everyday!
<p>

<center><h4><a name="2">Heading 2</a></h4></center><p>

Text here. Make sure this is linked to Link 2, or you can change the name for both this heading and that link.
<p>

<center><h4><a name="3">Heading 3</a></h4></center><p>

Text here. Make sure this is linked to Link 3, or you can change the name for both this heading and that link.
<p>

<center><h4><a name="3">Heading 4</a></h4></center><p>

Text here. Make sure this is linked to Link 4, or you can change the name for both this heading and that link.
<p>

<center><a href="http://www.neopets.com/~FantaFanta140"><img src="http://img.photobucket.com/albums/v287/neoreality2/images/fullbutton.gif" border="0" alt="Neo-Reality"></a></center>
<center>Thanks Neo-Reality for this petpage!</center>
<p>

</div>