Boppy got their homepage at Neopets.com

PETPAGES

Templates

CSS

Graphic

Click here to edit your petpages.

Templates top ↑

Double Nav

Navigation at the top for the Neopets stuff, and a sidebar one for your stuff :D
Sadly, I got lazy and used tables :( Shame on me!

<a href="#anchorname">your links</a>
<a href="#anchorname">around the</a>
<a href="#anchorname">page</a>
<a href="#anchorname">can go</a>
<a href="#anchorname">in here!</a>
<a href="/~Rhoark">credit</a><br>

Sidebar text.

</td>
<td valign="top" id="content">

<a name="anchorname"></a><h1>Header</h1>
<h2>Sub-Header</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt condimentum lorem. Proin ut ante dolor, sit amet <a href="/">link</a> massa. Quisque tempor dignissim dolor vitae pellentesque. Aenean fermentum, massa eu suscipit fermentum, lectus ipsum sagittis odio, porttitor tristique odio ligula id sem. Sed tristique ipsum id augue vulputate id malesuada sem hendrerit. Praesent non lectus nibh, ut luctus augue. Mauris egestas tellus et lectus egestas nec pulvinar nunc faucibus. Phasellus sagittis ullamcorper nisi a faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pellentesque mattis bibendum. Suspendisse potenti. Fusce mollis sodales lacus eu iaculis. Quisque malesuada purus quis ante vehicula sed hendrerit nisi mollis. Nulla nec est augue, id semper erat.
<br><br>
Ut faucibus aliquam lectus, in varius turpis tincidunt et. Donec iaculis elementum cursus. Mauris ultrices varius orci, eu condimentum justo dictum a. Vivamus non varius dui. Ut ut lectus magna. Proin rhoncus, nunc et lacinia vehicula, tortor nisi sollicitudin nisl, a tristique metus risus at urna. Nullam massa ante, congue quis suscipit quis, tempus varius sem. Nulla vitae velit ligula. Vestibulum quis nisl quam, vel ornare orci. Praesent a adipiscing mauris.

</td>
</tr>
</table>
<br><br><div style="font: 10px verdana; line-height: 14px; color: #2e2e2e;">template by mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</div>

</center>

Basic

Just a really simple banner, navigation and content space to edit until your heart is content :)

<img src="http://i51.tinypic.com/280tmkg.jpg" style="margin: 60px 0 0 0;"><br><div id="nav">
<a href="/myaccount.phtml">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>
<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>
<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
</div>
<div id="content">

<h1>Header</h1>
<h2>Sub-Header</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt condimentum lorem. Proin ut ante dolor, sit amet <a href="/">link</a> massa. Quisque tempor dignissim dolor vitae pellentesque. Aenean fermentum, massa eu suscipit fermentum, lectus ipsum sagittis odio, porttitor tristique odio ligula id sem. Sed tristique ipsum id augue vulputate id malesuada sem hendrerit. Praesent non lectus nibh, ut luctus augue. Mauris egestas tellus et lectus egestas nec pulvinar nunc faucibus. Phasellus sagittis ullamcorper nisi a faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras pellentesque mattis bibendum. Suspendisse potenti. Fusce mollis sodales lacus eu iaculis. Quisque malesuada purus quis ante vehicula sed hendrerit nisi mollis. Nulla nec est augue, id semper erat.
<br><br>
Ut faucibus aliquam lectus, in varius turpis tincidunt et. Donec iaculis elementum cursus. Mauris ultrices varius orci, eu condimentum justo dictum a. Vivamus non varius dui. Ut ut lectus magna. Proin rhoncus, nunc et lacinia vehicula, tortor nisi sollicitudin nisl, a tristique metus risus at urna. Nullam massa ante, congue quis suscipit quis, tempus varius sem. Nulla vitae velit ligula. Vestibulum quis nisl quam, vel ornare orci. Praesent a adipiscing mauris.

</div>
<br><center>
<div style="font: 10px verdana; line-height: 14px; color: #2e2e2e;">template by mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</div>

</center>
</center>

UFT Page

No tables for easy editing. Yay!
Don't put too much information in each pet's thing or it will look bad.

<div id="info">
You can put a little intro here or something. If you make it too long it will begin to scroll.
<br><br>
You can put a little intro here or something. If you make it too long it will begin to scroll.
</div>

<div class="pet">
<a href="/petlookup.phtml?pet=Pet+Name+Here"><img src="http://pets.neopets.com/cp/tv8gdm2g/1/2.png"></a>
<h1>Name</h1>
You can put something in here, like what you're seeking or whatever. Joyous.
</div>

<div class="pet">
<a href="/petlookup.phtml?pet=Pet+Name+Here"><img src="http://pets.neopets.com/cp/7xrj2q9n/1/2.png"></a>
<h1>Name</h1>
You can put something in here, like what you're seeking or whatever. Joyous.
</div>

<center>template by mel / neekoe - get it <a href="/~Rhoark">here</a>
</center>
</div>

CSS top ↑

Formal

Tried to go with a more mellow feel here.
Also trying to get out of my grey/white habit! Ick.
First new CSS petpage I've made in months, finally.

<h1>» Header</h1>
<h2>Sub-Header</h2>

</div>
<br><center><div style="font: 10px verdana; line-height: 14px; color: #8E5179;">css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</div></center>

Space

You can easily change the headers background image to an image of your own
The dimensions are 550x150, but you can have the height as whatever you like without wrecking the layout, though you will have to adjust the height in the code
All colour parts of the code are at the top for easy editing

<div id="header">header</div>
<div id="nav">
<a href="/myaccount.phtml">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>
<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>

<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
</div>
<div id="cont">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

</div>
<div id="cont"><center>
css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center></div>

Vertical

Wew! The lines down the side now continue as the page scrolls!
Colour changing codes located at the top.
Line codes are in order of how they are disaplayed on the page (the right line will be the last colour code etc.)

<br><div id="header">header</div>

<div id="nav">
<a href="/myaccount.phtml">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>

<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>
<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
</div>

<div id="cont">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

</div>

<div id="cont"><center>
css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center></div>

Gradient

This one is a bit tricky to edit if you can't make your own gradient.
Here is a grey gradient you can replace the pink one with. Once opened, replace neopets.com with imageshack.us. This will allow you to edit with any colours without the clash against the pink ;)

<div id="header">header</div>

<h1>header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<h1>credit</h1>
css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</div>

Simple Anchors

Links down the right link within the page
Once again, all colour changing codes at the top

<div id="links" style="position: fixed;">
<a href="#one">anchor 1</a>
<a href="#two">anchor 2</a>
<a href="#three">anchor 3</a>
<a href="#four">anchor 4</a>
<a href="#top">top</a>
</div>

<h1>title here</h1>

<a name="one"></a><h2>header 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.
<a name="two"></a><h2>header 2</h2>

Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.
<a name="three"></a><h2>header 3</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.
<a name="four"></a><h2>header 4</h2>

<br><br><center>css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center>
</div>

Fixed

Navigation is fixed, so no matter how long the page is or how far you scroll, the navigation will always be visible.
Navigation is also anchored for linking within the page.
Colour changing codes at the top... again.

<a name="top"></a><style>
body {
	background: #fff;
}
a:link, a:visited, h1 {
	color: #ababab;
}
#links a:hover {
	background: #6B6B6B;
}
#links {
	background: #212121;
	border-left: 60px solid #212121;
}
h2, #links a {
	background: #494949;
}
.sf, table {
	display: none;
}
#tbl {
	display: inline;
}
#main {
	font: 11px verdana;
	line-height: 18px;
	text-align: left;
	width: 700px;
	color: #5f5f5f;
	top: 0;
	left: 286px;
	background: #fff;
	padding: 16px;
	height: 1000px;
}
a:link, a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font: bold 60px "Century gothic";
	padding: 0;
	margin: 0 0 30px 0;
	text-align: center;
}
h2 {
	padding: 6px;
	font: normal 20px "century gothic";
	color: #fff;
	text-transform: lowercase;
	margin: 20px 0 8px 0;
}
#links {
	top: 0;
	left: 0;
	padding: 16px 0 16px 16px;
	width: 210px;
	height: 100%;
}
#links a {
	border: 0;
	display: block;
	padding: 16px;
	font: bold 10px verdana;
	text-transform: uppercase;
	text-decoration: none;
	margin-bottom: 4px;
	color: #fff;
}
</style>
<div id="links" style="position: fixed;">
<a href="#one">anchor 1</a>
<a href="#two">anchor 2</a>
<a href="#three">anchor 3</a>
<a href="#four">how to save</a>
<a href="#credit">credit</a>
<a href="#top">top</a>
</div>

<h1>title goes here</h1>

<a name="two"></a><h2>header 2</h2>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<a name="three"></a><h2>header 3</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

<a name="four"></a><h2>how to save</h2>
In order to view the save changes button, you will need to zoom out. You can do this by pressing ctrl and scrolling backwards on your mouse's wheel or pressing the minus (-) key.

<a name="credit"></a><h2>credit</h2>
<center>css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center>
</div>

Alternating

Not even going to bother mentining colour changing codes are at the top anymore...
Remember to alternate between cont1 and cont2.

<font class="word1">title</font><font class="word2">goes</font><font class="word1">here</font>

<div id="cont1">
<h1>Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

<br><br>Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.
</div>
<br><div id="cont2">
<h1>Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

Faint

This one is pretty good for editing :)

<h1>title</h1>

<br><br><center>css © mel / neekoe<br>get it <a href="/~Rhoark">here</a>
</center>
</div>
</div>
<a href="/userlookup.phtml?user=neekoe"><img src="http://i56.tinypic.com/11kjdcj.png" border="0" style="position: fixed; right: 10px; bottom: 10px;"></a>
</center>

Sophisticated

You can pretty easily change the header into an image by making it's background an image rather than colour.

title

</h1></td></tr>
<tr>
<td valign="top" id="cont">
<div style="padding: 10px; width: 533px;">

<h2>Header</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

</div>
</td>
<td valign="top" id="nav">
<div style="padding: 5px; width: 180px;">

<a href="/" class="nav">Neopets</a>
<a href="/myaccount.phtml" class="nav">My Account</a>
<a href="/petcentral.phtml" class="nav">Pet Central</a>
<a href="/explore.phtml" class="nav">Explore</a>
<a href="/games/arcade.phtml" class="nav">Games</a>
<a href="/neoboards/index.phtml" class="nav">Boards</a>
<a href="/objects.phtml" class="nav">Shops</a>
<a href="/nf.phtml" class="nav">News</a>

</div>
</td>
</tr>
<tr width="750"><td colspan="2" style="padding: 6px;"><center>css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center></td></tr>
</table>
</div>
<a href="/userlookup.phtml?user=neekoe"><img src="http://i56.tinypic.com/11kjdcj.png" border="0" style="position: fixed; right: 10px; bottom: 10px;"></a>
</center>

Simple Grey

Has a handy second navigation, but you can easily delete it if you don't need it.

<div id="side">
<b>Navigation</b>
<a href="/">Link 1</a>
<a href="/">Link 2</a>
<a href="/">Link 3</a>
<a href="/">Link 4</a>
<a href="/">Link 5</a>
<a href="/">Link 6</a>
</div>

<h1>Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

<h1>Header</h1>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<h1>Credit</h1>
css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</div>

Dark

You have to manually alternate between h1 and h2.
Images with white background will look silly without a border ;D

<div id="nav">
<a href="/myaccount.phtml">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>
<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>
<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
</div>

<div id="content">
<h1>header one</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

<h2>header two</h2>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<h1>credit</h1>
<center>
css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center>
</div>

Block

This layout is a bit weird and I'm not particularly fond of it, but kudos if you can find a good use for it!

<h1>Heading</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.<br><br>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.
<hr>
<h1>Heading</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.<br><br>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.<hr>
<br><center>css © mel / neekoe<br>
get it <a href="/~Rhoark">here</a>
</center>
</div>

<div id="links" style="position: absolute;">
<font class="neekoe">page title</font>
<a href="/myaccount.phtml">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>
<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>
<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
<a href="/~Rhoark">CSS</a>

<font class="sidebar">
Sidebar text here. </font>
</div>

Borders

I have nothing to say about this one, really.

You can also write things in here, it doesn't only need to be a navigation.

</div>
<font color="#3f3f3f">.</font>
</div>
<div id="cont">

<h1>title</h1>

<h2>header</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.
<h2>header</h2>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

Miniature

Boxes to the side are the neopets navigation
Alternate between h1 and h2 for different coloured headings

<div id="cont">
<h1>Header</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.

<br><br><h2>Header</h2>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<br><br><center>css by mel / neekoe - get it <a href="/~Rhoark">here</a>
</center>
</div>

Graphic top ↑

Nostalgia

Just like the old Neopets layout, with the hover navigation and all.
I decided against making this into a lookup, because there is already a page of them here. How nifty :D
If enough people request it, I may also make this with the other sidebars, though the hover thing is effort so maybe I'll leave that part out on the others.

<a href="/~Rhoark"><img src="http://img692.imageshack.us/img692/3492/credit.gif" style="position: fixed; bottom: 5px; right: 5px; border: 0;"></a>
<style>
a, td, p, body {
	color: #000000;
	font-family: "Verdana","Arial","Helvetica";
	font-size: 10pt;
	text-decoration: none;
}
a:link, a:visited {
	color: #0000ab;
}
a:hover {
	color: #A51C1C;
}
table img, .sf {
	display: none;
}
#content table img {
	display: inline;
}
table {
	background: none;
	text-align: center;
}
#top {
	top: 0px;
	left: 0px;
	background: #fff url("http://images.neopets.com/t/hdr.gif");
	width: 728px;
	height: 44px;
}
#left {
	top: 44px;
	left: 0px;
	background: #ffcc00;
	width: 128px;
	height: 556px;
	border-right: 2px solid #000;
}
#bottom {
	top: 600px;
	left: 0px;
	background: url("http://images.neopets.com/t/1.gif");
	width: 130px;
	height: 20px;
}
#content {
	top: 60px;
	left: 138px;
	width: 560px;
}
#pets img {
	border: 1px solid #000;
	margin: 4px;
}
#spc img {
	margin: 2px 10px 2px 2px;
}
hr {
	border: none 0;
	border-top: 1px solid #ababab;
	border-bottom: 1px solid #efefef;
	width: 100%;
	height: 3px;
}
#limg {
	padding-right: 6px;
}
.credit {
	font: 10px verdana;
}
.credit a:link, .credit a:visited {
	font: 10px verdana;
}
hr {
	border: 0;
	border-bottom: 1px solid #ababab;
	height: 2px;
	background: #555;
	width: 90%;
	margin: 20px auto;
}
#create, #central, #explore, #games, #mail, #shops, #boards, #news, #stuff, #help, #login, #logout {
	width: 128px;
	border: 0px;
}
#create:hover, #central:hover, #explore:hover, #games:hover, #mail:hover, #shops:hover, #boards:hover, #news:hover, #stuff:hover, #help:hover, #login:hover, #logout:hover {
	background-position: bottom;
}
#create {
	background: #fff url("http://i54.tinypic.com/2zi6jqb.png") no-repeat;
	height: 52px;
}
#central {
	background: #fff url("http://i35.tinypic.com/15z5mc9.png") no-repeat;
	height: 53px;
}
#explore {
	background: #fff url("http://i53.tinypic.com/2qx5g1t.png") no-repeat;
	height: 32px;
}
#games {
	background: #fff url("http://i52.tinypic.com/20f451d.png") no-repeat;
	height: 33px;
}
#mail {
	background: #fff url("http://i54.tinypic.com/e827o4.png") no-repeat;
	height: 28px;
}
#shops {
	background: #fff url("http://i38.tinypic.com/25h1h7q.png") no-repeat;
	height: 32px;
}
#boards {
	background: #fff url("http://i56.tinypic.com/2z8c138.png") no-repeat;
	height: 37px;
}
#news {
	background: #fff url("http://i36.tinypic.com/300uog6.png") no-repeat;
	height: 33px;
}
#stuff {
	background: #fff url("http://i36.tinypic.com/nfk08x.png") no-repeat;
	height: 36px;
}
#help {
	background: #fff url("http://i33.tinypic.com/20f9etd.png") no-repeat;
	height: 33px;
}
#login {
	background: #fff url("http://i36.tinypic.com/n6qn1j.png") no-repeat;
	height: 30px;
}
#logout {
	background: #fff url("http://i55.tinypic.com/2kf1vl.png") no-repeat;
	height: 28px;
}
</style>
<div id="top" style="position: absolute;"><a href="/"><img src="http://images.neopets.com/transparent_spacer.gif" width="128" height="44" border="0"></a></div>
<div id="left" style="position: absolute;">
<a href="/addpet.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="create"></a>
<a href="/petcentral.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="central"></a>
<a href="/explore.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="explore"></a>
<a href="/gameroom.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="games"></a>
<a href="/neomessages.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="mail"></a>
<a href="/objects.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="shops"></a>
<a href="/neoboards/index.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="boards"></a>
<a href="/nf.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="news"></a>
<a href="/stuff.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="stuff"></a>
<a href="/help.phtml"><img src="http://images.neopets.com/transparent_spacer.gif" id="help"></a>
<a href="/login"><img src="http://images.neopets.com/transparent_spacer.gif" id="login"></a>
<a href="/"><img src="http://images.neopets.com/transparent_spacer.gif" id="logout"></a>
<br><br><center>
<a href="/~Rhoark"><img src="http://images.neopets.com/creatives/faerie_magic_120x60.gif" style="border: 1px solid #000;"></a>
<br><br><font class="credit">Layout by <a href="/userlookup.phtml?user=neekoe">Mel</a><br>Get it <a href="/~Rhoark"><b>here</b></a></font>
</center>
</div>
<div id="bottom" style="position: absolute;"></div>
<div id="content" style="position: absolute;">
<center><img src="http://images.neopets.com/new_headers/stuff.gif"></center>
<br><br><b>The old layout is back!</b><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<hr>

I know, it's not that fancy, but I tried to get it as close to the original layout as possible, and that was rather plain after all. Anyways, please don't remove or alter any of the credit, thank you :)</div>

Autumn Leaves

You can use this for anything, and create your own title for the page.
You need to zoom out in order to see the save changes button.

<a href="/~Rhoark"><img src="http://img692.imageshack.us/img692/3492/credit.gif" style="position: fixed; bottom: 5px; right: 5px; border: 0;"></a><style>
.sf {
	display: none;
}
table {
	background: none;
}
table img {
	float: left;
}
body {
	background: #f2f2f2 url("http://i53.tinypic.com/30lpjyp.jpg") repeat-y;
	margin: 0;
}
#head {
	top: 0;
	left: 0;
	width: 694px;
	height: 147px;
	padding: 235px 0 0 400px;
	background-image: url("http://img836.imageshack.us/img836/7698/headerfj.jpg");
	font: 90px "Lucida Sans Unicode";
	color: #f60;
}
#head b {
	font-weight: normal;
	color: #c80000;
}
#cont {
	top: 350;
	left: 180;
	width: 680px;
	padding: 10px;
	font: 11px verdana;
	line-height: 16px;
	color: #555;
}
h1, h2 {
	font: 18px "Lucida Bright";
	color: #c80000;
	padding: 0;
	margin: 10px 5px;
	text-align: left;
}
h2 {
	color: #f60;
}
a:link, a:visited {
	color: #f60;
	text-decoration: none;
}
a:hover {
	color: #c80000;
}
</style>
<div id="head" style="position: absolute;">
<b>title</b>  here</div>

<h2>saving</h2>
In order to save the changes to this layout, you must zoom out until the save changes button is visible. To do this, you can hold ctrl and scroll with your mouse wheel, or hold ctrl and press them inus (-) button.

<h1>header 1</h1>
Lorem ipsum dolor sit <b>bold</b>, consectetur adipiscing elit. Etiam et erat ultrices nisl commodo imperdiet sed a est. Curabitur ac pulvinar sem. Pellentesque rutrum, leo eget posuere mattis, quam nisi underlined ante, vitae elementum arcu justo quis sem. Praesent vestibulum nisl nec felis hendrerit feugiat. Mauris cursus nibh vitae ipsum consequat ornare. Vivamus id mi vel ipsum venenatis tristique eu ut quam. Fusce sagittis, est eget iaculis pulvinar, nisl nunc lobortis elit, non viverra magna felis non felis. <i>Italic</i> vel dolor at magna imperdiet consectetur. Phasellus varius sollicitudin velit sed scelerisque. Cras dapibus dictum magna, id consequat est hendrerit venenatis.

<h2>header 2</h2>
Nulla eu lacus nisi. Etiam suscipit pharetra fermentum. Ut vel rutrum lorem. Integer quis est at elit tincidunt semper quis non enim. Praesent lectus nunc, vehicula eget ornare vel, imperdiet et enim. Nam nec nulla ac tortor pulvinar facilisis. Nulla malesuada, augue ut pulvinar malesuada, turpis quam facilisis diam, eget dapibus elit ipsum in enim. Sed scelerisque turpis vel libero cursus ut tincidunt massa fringilla. Pellentesque eleifend tempus tellus, eu sagittis nibh convallis sed. Vestibulum sapien leo, rhoncus quis molestie sed, venenatis a quam. Nunc eget libero lectus. Proin ornare, nisi suscipit dignissim eleifend, eros lorem commodo mauris, eget porttitor leo metus ut neque. Etiam tempus gravida convallis. Suspendisse tortor justo, lacinia vel interdum ut, pharetra id leo.

<h1>credit</h1>
<center>
Layout by Mel [neekoe]<br>
Get it <a href="/~Rhoark">here</a>.
</center>
</div>

Robot Ixi

Nifty fixed graphic.
Customizable title.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.<br><br>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.
<h1>Heading</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh.<br><br>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<center>
<br><br>Layout by Mel (neekoe)<br>
Get it <a href="/~Rhoark">here</a>
</center>
</div>

Harris

Yep, you can have your very own title for this one too.

<a href="/~Rhoark"><img src="http://img692.imageshack.us/img692/3492/credit.gif" style="position: fixed; bottom: 5px; right: 5px; border: 0;"></a>
<style>
.sf, table {
	display: none;
	background: transparent;
}
table img {
	display: none;
}
body {
	background: #C7E7FF url("http://img23.imageshack.us/img23/9360/62863476.jpg") repeat-y;
}
a, a:visited {
	font-weight: bold;
	color: #A4D1EF;
}
a:hover {
	color: #5f5f5f;
}
#header {
	top: 0;
	left: 0;
	width: 548px;
	height: 263px;
	background-image: url("http://img213.imageshack.us/img213/9462/headerjo.jpg");
}
#header h1 {
	font: bold 90px "Trebuchet MS";
	color: #A4D1EF;
	text-transform: lowercase;
	padding: 0;
	margin: 80px 0 0 20px;
}
#nav {
	top: 210px;
	left: 500px;
	width: 150px;
	z-index: 99;
	padding: 0 3px 3px 0;
	background: #B7E0FE;
}
#nav a, #nav a:visited {
	display: block;
	text-decoration: none;
	background: #fff;
	font: 16px tahoma;
	padding: 4px;
	margin: 0;
	border: 4px solid #D1ECFF;
	border-top: 0;
}
#nav a:hover {
	color: #B7E0FE;
	font-weight: bold;
	letter-spacing: 2px;
}
#content {
	top: 190px;
	left: 0;
	width: 437px;
	padding: 10px;
	font: 11px verdana;
	line-height: 18px;
	color: #ababab;
}
h1 {
	font: bold 20px arial;
	padding: 4px;
	margin: 2px;
	text-transform: lowercase;
}
h1 b {
	color: #E1F1FE;
}
</style>
<div id="nav" style="position: fixed;">
<a href="/myaccount.phtml" style="border-top: 4px solid #D1ECFF;">account</a>
<a href="/customise/">customise</a>
<a href="/games/arcade.phtml">games</a>
<a href="/explore.phtml">explore</a>
<a href="/nf.phtml">news</a>
<a href="/petcentral.phtml">central</a>

<a href="/neoboards/index.phtml">boards</a>
<a href="/objects.phtml">shops</a>
<a href="/~rhoark">premades</a>
</div>

<div id="header" style="position: absolute;">
<h1>Title</h1>
</div>

<div id="content" style="position: absolute;">
<h1>
<b>➔</b> Header</h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Bold text</b> a ullamcorper nunc. Quisque viverra bibendum augue et egestas. Nunc et ipsum leo, leo. Fusce sodales consectetur tellus. Donec <i>italic text</i> augue in sagittis. Aliquam euismod neque eu turpis convallis a suscipit felis consectetur. In eu sem felis. Morbi id lorem elit, sit amet tempor diam. Mauris augue arcu, underlined text placerat at placerat et, gravida et nibh. <br><br>
Vivamus fringilla arcu id nunc imperdiet non fermentum ante ornare. In tempus <a href="/">linked text</a> hendrerit. Fusce odio justo, mattis a luctus quis, convallis eget massa. Donec et tincidunt orci. Nulla egestas adipiscing tellus, sit amet condimentum dui pharetra et. Suspendisse ac erat quis ipsum accumsan laoreet. Aliquam erat volutpat. Donec accumsan viverra mi eu pulvinar.

<h1>
<b>➔</b> Credit</h1>

</div>

Chomby Adoption Agency

You don't have to use this as an adoption agency, just remove the stuff you don't need and it's whatever you need it to be.

<h1>Name's Adoption Agency</h1>

You can put some sort of introduction to your agency here. You don't even need to use this as an adopting agency, if you don't want too. Not that they are special, but this is <b>bold</b>, this is <i>italic</i>, this is underlined and this is <a href="/~Rhoark">a link</a>. With the images, replace <i>Rhoark</i> with your pets name.

<h2>Rules</h2>
Here you can put some rules or whatever.<br><ol>
<li> Rule here
</li>
<li> Just add another {li} tag for every new rule
</li>
<li> like...
</li>
<li> this
</li>
</ol>
<h2>Pets Up For Adoption</h2>

<table>
<tr>
<td>
<div id="petbox">
<a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/Rhoark/1/2.png"></a> <h3>Pet Name</h3>
<b>Species:</b> Species<br><b>Color:</b> Color<br><b>Gender:</b> <font color="blue">Male</font>/<font color="red">Female</font><br><b>Battle Pet:</b> Yes/No<br><b>Clothing:</b> Yes/No<br><b>Petpet:</b> Yes/No<br><b>Deadline:</b> 00/00/00
</div>
</td>
<td>
<div id="petbox">
<a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/Rhoark/1/2.png"></a> <h3>Pet Name</h3>
<b>Species:</b> Species<br><b>Color:</b> Color<br><b>Gender:</b> <font color="blue">Male</font>/<font color="red">Female</font><br><b>Battle Pet:</b> Yes/No<br><b>Clothing:</b> Yes/No<br><b>Petpet:</b> Yes/No<br><b>Deadline:</b> 00/00/00
</div>
</td>
</tr>
<tr>
<td>
<div id="petbox">
<a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/Rhoark/1/2.png"></a> <h3>Pet Name</h3>
<b>Species:</b> Species<br><b>Color:</b> Color<br><b>Gender:</b> <font color="blue">Male</font>/<font color="red">Female</font><br><b>Battle Pet:</b> Yes/No<br><b>Clothing:</b> Yes/No<br><b>Petpet:</b> Yes/No<br><b>Deadline:</b> 00/00/00
</div>
</td>
<td>
<div id="petbox">
<a href="/petlookup.phtml?pet=PETNAME"><img src="http://pets.neopets.com/cpn/Rhoark/1/2.png"></a> <h3>Pet Name</h3>
<b>Species:</b> Species<br><b>Color:</b> Color<br><b>Gender:</b> <font color="blue">Male</font>/<font color="red">Female</font><br><b>Battle Pet:</b> Yes/No<br><b>Clothing:</b> Yes/No<br><b>Petpet:</b> Yes/No<br><b>Deadline:</b> 00/00/00
</div>
</td>
</tr>
</table>
<h2>Adopted Pets</h2>
<center>
<div id="adopted">
<img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png"><img src="http://pets.neopets.com/cpn/Rhoark/1/3.png">
</div>
</center>
<h2>Credit</h2>
<center>
Layout © Mel / neekoe<br>
Get it <a href="/~Rhoark">here</a>.
</center>
</div>

PETPAGES

Templates top ↑

Double Nav

Basic

UFT Page

CSS top ↑

Formal

Space

Vertical

Gradient

Simple Anchors

Fixed

Alternating

Faint

Sophisticated

Simple Grey

Dark

Block

Borders

Miniature

Graphic top ↑

Nostalgia

Autumn Leaves

Robot Ixi

Harris

Chomby Adoption Agency

Coming Soon!