NeoFaerie.net | Neopets Petpages

User Lookups

Petpages

Guild Layouts

Subdomains

My Favourite

Topsites

Stats

Neopets-themed Petpage Designs

Here you can find some webpage layouts I have made specifically for Neopets Petpages. To use them, simply copy and paste the code and edit the appropriate parts. To see a preview of the design, click on the thumbnail image.

The Darkest One

The Darkest Faerie (The Sleeper) petpage design

Type: neopets
Format: divs
Theme: The Darkest Faerie (The Sleeper)
Compatibity check: yes*

#nf_container {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	background: url('http://www.neofaerie.net/petpages/001/BG.jpg') repeat;
}

#nf_container-header {
	width: 100%;
	margin: 0;
	padding: 0;
	background: url('http://www.neofaerie.net/petpages/001/header.jpg') 0 0 no-repeat;
}

#nf_main {
	width: 800px;
	padding: 300px 0 0 0;
	text-align: left;
}

#nf_content-container{
	width: 510px;
	margin: 0 0 0 30px;
	padding: 0;
	float: left;
	display: inline;
	text-align: left;
}

#nf_sidebar-container {
	width: 230px;
	margin: 66px 30px 0 0;
	padding: 0;
	float: right;
	display: inline;
}

.nf_title {
	width:494px; 
	height:30px; 
	background: url('http://www.neofaerie.net/petpages/001/Subheader.png') 0 0 no-repeat;
	opacity:0.6;
	filter:alpha(opacity=40);
}

h1,h2 {
	font:14px tahoma;
	color:#990000;
	letter-spacing:3px;
	font-weight:bold;
	text-transform:uppercase;
	margin: 0 auto auto 26px;
	padding: 8px 0 0 0;
}

h1 {
	color: #ffcc99;
	font: 16px verdana;
	font-weight: bold;
}

.nf_content {
	width: 480px;
	margin: auto auto 10px 10px;
}

.nf_content p {
	margin: 0 0 14px 0;
	padding: 0;
	text-align: justify;
}

.nf_sidebar-header {
	width: 200px; 
	height: 30px; 
	background: url('http://www.neofaerie.net/petpages/001/Subheader.png') 0 0 no-repeat;
	opacity:0.6;
	filter:alpha(opacity=60);
	margin: 10px auto 0 30px;
}

.nf_sidebar-body {
	width: 190px;
	margin: 0 auto 10px 40px;
	padding-left: 2px;
	opacity:0.6;
	filter:alpha(opacity=60);
	font:11px arial;
}

.nf_sidebar-body a {
	background-color:#660000;
	border-left: 4px solid #993333;
	color:#cc6666;
	display:block;
	width:170px;
	padding-left:4px;
	padding-top:1px;
	padding-bottom:1px;
	margin-bottom:2px;
	text-decoration:none;
	font:11px verdana;
	filter:alpha(opacity=60);
}

.nf_sidebar-body a:hover {
	background-color:#993333;
	color:#ffcc99;
	border-left: 4px solid #ff6666;
}

#nf_footer {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	background: url('http://www.neofaerie.net/petpages/001/footer.jpg') 0 0 no-repeat;
	height: 4px;
}

#nf_finish {
	width: 800px;
	margin: 0 auto;
	padding: 0;
	background: #330000; 
	border: 1px solid #000000;
}

b {
	color:#cc3300;
	font-weight: bold;
}

u {
	color:#993333;
	text-decoration: underline;
}

i {
	color:#ffcc66;
}

a {
	cursor:crosshair;
	font-family: verdana;
	color:#ffcc99;
	font-weight:bold;
	text-decoration:none;
}

a:hover {
	color:#cc6666;
}

.sf {
	color: #cc6633 !important;
	font: 11px arial;
}
</style />

<body>
	<div id="nf_container"><div id="nf_container-header">
		<div id="nf_main">
			<div id="nf_content-container">
<div class="nf_title"><h1>Title 1</h1></div>
<div class="nf_content">
CONTENT GOES HERE
</div>
				
<div class="nf_title"><h1>Title 2</h1></div>
<div class="nf_content">
CONTENT GOES HERE
</div>
								
<div class="nf_title"><h1>Title 3</h1></div>
<div class="nf_content">
CONTENT GOES HERE
</div>
		
			</div>
			<div id="nf_sidebar-container">
				<div class="nf_sidebar-header"><h2>Header</h2></div>
				<div class="nf_sidebar-body">
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
				</div>

<div class="nf_sidebar-header"><h2>Header</h2></div>
				<div class="nf_sidebar-body">
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
					<a href="#here">Test Link</a>
				</div>
				
				<div class="nf_sidebar-header"><h2>Credits</h2></div>
				<div class="nf_sidebar-body">
					Layout and design by <b>NeoFaerie.net</b><br />
					Content by <b>#OWNER</b>
				</div>		
						
			</div>
		</div>
		<div id="nf_footer"></div>
	</div></div>
	<br />
	<div id="nf_finish">

Posted: 2007-12-28 19:02:57

* Yes means that this layout has been updated to be usable with the new filters TNT put in place that removed the ability to use position properties in user code.

neopets Petpages

Neopets-themed Petpage Designs

The Darkest One

Posted: 2007-12-28 19:02:57