Petpage Layouts

Rainbow: Blog Style

<style>
.bg {
	top: 0;
	left: 0;
	z-index: -1;
	width: 100% !important;
	height: 120%;
}
table {
	display: none;
}
.pg table {
	display: table;
}
#nav {
	top: 0;
	left: 0;
	background: #fff;
	height: 40px;
	width: 100%;
	text-align: center;
	padding: 10px;
}
#nav a {
	padding: 5px 10px;
	margin: 3px;
	text-decoration: none;
	font: 12pt arial;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
}
a.y, a.y:visited {
	border: 1px solid #f2ec45;
	color: #f2ec45;
}
a.y:hover {
	background: #f2ec45;
	color: #fff;
}
a.o, a.o:visited {
	border: 1px solid #eb9c50;
	color: #eb9c50;
}
a.o:hover {
	background: #eb9c50;
	color: #fff;
}
a.p, a.p:visited {
	border: 1px solid #e74c6d;
	color: #e74c6d;
}
a.p:hover {
	background: #e74c6d;
	color: #fff;
}
a.f, a.f:visited {
	border: 1px solid #cb13b6;
	color: #cb13b6;
}
a.f:hover {
	background: #cb13b6;
	color: #fff;
}
a.pu, a.pu:visited {
	border: 1px solid #b722e1;
	color: #b722e1;
}
a.pu:hover {
	background: #b722e1;
	color: #fff;
}
a.v, a.v:visited {
	border: 1px solid #b234fd;
	color: #b234fd;
}
a.v:hover {
	background: #b234fd;
	color: #fff;
}
a.bl, a.bl:visited {
	border: 1px solid #4c32fa;
	color: #4c32fa;
}
a.bl:hover {
	background: #4c32fa;
	color: #fff;
}
a.in, a.in:visited {
	border: 1px solid #2306e0;
	color: #2306e0;
}
a.in:hover {
	background: #2306e0;
	color: #fff;
}
#title {
	font: 72pt arial;
	color: #fff;
	letter-spacing: 10px;
	background: none;
	margin: auto;
	text-align: center;
	text-transform: uppercase;
}
.holder {
	background: url("https://i.imgur.com/7zMHH1B.png");
	padding: 10px;
	width: 70%;
	margin: 30px auto;
	display: block;
}
.pg {
	padding: 30px;
	background: #fff;
	text-align: justify;
	font: 8pt arial;
	color: #333;
}
h1 {
	font: bold 19pt arial;
	margin: 0;
	padding: 0 10px;
	line-height: 23pt;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	color: #fff;
}
h2 {
	font: 14pt arial;
	margin: 10px 0 15px 0;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: #000;
}
h3 {
	font: italic 12pt georgia;
	margin: 10px 0 15px 0;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: #b3b3b3;
}
b {
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
}
strong {
	padding: 0 3px;
	font-weight: normal;
}
.pg a {
	font: italic 9pt georgia;
	text-decoration: none;
	color: #000 !important;
}
.pg a:hover {
	font-weight: bold;
}
.yellow h1 {
	background: #f2ec45;
}
.yellow h2 {
	border-bottom: 2px solid #f2ec45;
}
.yellow strong {
	background: #faf8b7;
}
.yellow a, .yellow a:visited {
	border-bottom: 2px solid #f2ec45;
}
.orange h1 {
	background: #eb9c50;
}
.orange h2 {
	border-bottom: 2px solid #eb9c50;
}
.orange strong {
	background: #f2be8d;
}
.orange a, .orange a:visited {
	border-bottom: 2px solid #eb9c50;
}
.pink h1 {
	background: #e74c6d;
}
.pink h2 {
	border-bottom: 2px solid #e74c6d;
}
.pink strong {
	background: #f3a5b6;
}
.pink a, .pink a:visited {
	border-bottom: 2px solid #e74c6d;
}
.fuchsia h1 {
	background: #cb13b6;
}
.fuchsia h2 {
	border-bottom: 2px solid #cb13b6;
}
.fuchsia strong {
	background: #f8b9f1;
}
.fuchsia a, .fuchsia a:visited {
	border-bottom: 2px solid #cb13b6;
}
.purple h1 {
	background: #b722e1;
}
.purple h2 {
	border-bottom: 2px solid #b722e1;
}
.purple strong {
	background: #e9bcf6;
}
.purple a, .purple a:visited {
	border-bottom: 2px solid #b722e1;
}
.violet h1 {
	background: #b234fd;
}
.violet h2 {
	border-bottom: 2px solid #b234fd;
}
.violet strong {
	background: #e3b3fe;
}
.violet a, .violet a:visited {
	border-bottom: 2px solid #b234fd;
}
.blue h1 {
	background: #4c32fa;
}
.blue h2 {
	border-bottom: 2px solid #4c32fa;
}
.blue strong {
	background: #d4cdfe;
}
.blue a, .blue a:visited {
	border-bottom: 2px solid #4c32fa;
}
.scrollbox {
	height: 50px;
	overflow: auto;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 5px;
	border: 1px solid #efefef;
}
div.imagegrid, div.smallgrid {
	text-align: center;
}
table.imagegrid td, table.smallgrid td {
	padding: 4px;
	text-align: center;
	vertical-align: top;
	font: 7pt arial;
	color: #666;
	letter-spacing: 0;
}
table.imagegrid td img {
	width: 70px;
	height: 70px;
	padding: 5px;
	border: 1px solid #efefef;
	margin-bottom: 2px;
}
table.imagegrid td img:hover, table.smallgrid td img:hover {
	padding: 3px;
	border-width: 3px;
}
table.smallgrid td img {
	width: 50px;
	height: 50px;
	padding: 5px;
	border: 1px solid #efefef;
	margin-bottom: 2px;
}
.petleft {
	float: left;
	height: 200px;
	width: 200px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #efefef;
}
.petright {
	float: right;
	height: 200px;
	width: 200px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #efefef;
}
div.imglist {
	width: 25%;
	display: inline-block;
}
ul.imglist {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
}
ul.imglist li {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
ul.imglist li.img {
	width: 50px;
}
ul.imglist li.img img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	padding: 5px;
	border: 1px solid #efefef;
}
ul.imglist li.img img:hover {
	border: 1px solid #e9bcf6;
}
div.list {
	width: 25%;
	margin-left: 10px;
	text-transform: lowercase;
	display: inline-block;
}
ul.list {
	padding: 0px;
}
ul.list li {
	background: #eee;
	display: block;
	font: 8pt tahoma;
	font-weight: normal;
	padding: 4px;
	margin: 5px 0px;
	text-align: center;
}
ul.list li:hover {
	background: #e9bcf6;
}
#creds ul {
	list-style-type: none;
}
</style><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="bg" style="position: fixed;" data-lazy-src="https://i.imgur.com/SFIHAye.png"><noscript><img src="https://i.imgur.com/SFIHAye.png" class="bg" style="position: fixed;"></noscript><div id="nav" style="position: fixed;">
<a class="y" href="#one">one</a>
<a class="o" href="#two">two</a>
<a class="p" href="#three">three</a>
<a class="f" href="#four">four</a>
<a class="pu" href="#five">five</a>
<a class="v" href="#six">six</a>
<a class="bl" href="#creds">credits</a>
<a class="in" href="/">exit</a></div>

<div id="title" style="margin-top: 300px;">title</div>


<div class="holder" style="margin-top: 200px; border-radius: 10px;" id="one">
<div class="pg" style="border-radius: 10px;">
<span class="yellow">
<h1>page one</h1>
<h2>introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus arcu ac augue feugiat egestas. Vivamus ac suscipit orci. Nulla viverra ornare mollis. Sed consectetur nulla et cursus scelerisque. Proin vel volutpat purus. Nullam lacinia dapibus eros sed sodales. Nulla eget iaculis ipsum, in congue nisl. In ut dolor nibh. Sed ut feugiat diam. Quisque a dui sit amet justo eleifend semper. Mauris venenatis enim non nisi blandit, vitae dapibus dolor elementum. Suspendisse tincidunt ullamcorper augue, id porta felis efficitur at.</p>

<h3>updates</h3>
<div class="scrollbox">
<p>Aenean ornare blandit feugiat. Pellentesque ultrices metus ipsum. Aliquam vestibulum orci non elit auctor tincidunt. Proin id imperdiet arcu. Fusce pellentesque ipsum dui, non pharetra metus dignissim sit amet. Duis vitae quam eget sapien aliquet placerat. Maecenas ultricies pretium urna sed dapibus. Cras sodales dictum velit eu cursus. Curabitur ultrices felis id odio scelerisque, ut convallis lectus suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam cursus commodo tellus, eu consectetur est dapibus id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vel dolor vitae mi aliquam tempor.</p>
</div>

<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="two">
<div class="pg" style="border-radius: 10px;">
<span class="orange">
<h1>page two</h1>
<h2>writing</h2>
<p>Quisque ornare mauris vitae sem vulputate egestas. Sed tincidunt pretium leo a interdum. Quisque mauris ligula, hendrerit nec ante sit amet, bibendum tincidunt augue. Aenean sagittis finibus tincidunt. Etiam libero nisi, porta ac nisl sed, facilisis condimentum lorem. Nullam lacus ex, vestibulum eu pellentesque at, dapibus sit amet turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>

<h3>hello wordsmiths</h3>
<p>Aenean eget imperdiet mauris. Aliquam pellentesque venenatis quam, consectetur feugiat dui tempus et. Sed pharetra ac eros nec vulputate. In hac habitasse platea dictumst. Integer condimentum lectus in dolor luctus pretium. Vestibulum hendrerit dui neque, quis sollicitudin velit aliquam a. Sed lectus urna, pharetra ac dui eu, scelerisque rutrum ipsum. Duis et dapibus nisl, ut convallis nibh. Nam sed est ac felis consequat semper eget sit amet nibh. Donec non libero eu est convallis tempus. Duis eu tortor non dui egestas placerat. Duis aliquam luctus augue non varius.</p>

<p>Ut vulputate est nec molestie rutrum. Ut ex magna, feugiat a condimentum non, semper sed risus. Vivamus consectetur sapien vel augue dictum egestas. Praesent dapibus consectetur nibh, eu vulputate est dictum in. Ut malesuada massa quis ante semper tempus. Nulla et hendrerit nisi. Curabitur imperdiet odio ac orci tristique aliquet. Fusce cursus gravida enim, sit amet ornare mi pellentesque et. Nam ac ex quis libero sollicitudin efficitur.</p>

<p>Ut nec nunc dignissim, sollicitudin lorem sit amet, porta dolor. Proin tempus, sapien eu sollicitudin rhoncus, nisl justo egestas elit, at vulputate diam nunc ut sapien. Duis id lobortis enim. Cras semper erat eu nisl gravida, eu imperdiet dolor efficitur. Mauris facilisis, nibh dictum pellentesque bibendum, purus mauris hendrerit purus, vitae bibendum ligula velit ut leo. Mauris in diam ut libero tempor malesuada. Aliquam viverra imperdiet velit id pharetra. Quisque molestie mi id quam mattis, eget dapibus neque tempor. Aliquam erat volutpat. Mauris consectetur augue nec consectetur porta. Mauris venenatis mattis placerat. Etiam commodo fringilla tempus. Suspendisse vestibulum, turpis malesuada rutrum pulvinar, mauris dui condimentum augue, in feugiat nisi risus a dui.</p>


<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="three">
<div class="pg" style="border-radius: 10px;">
<span class="pink">
<h1>page three</h1>
<h2>image grids</h2>

<h3>bigger images</h3>
<table class="imagegrid"><tr><td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript><br>item name</td>
</tr><tr><td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript><br>item name</td>
</tr></table><h3>smaller images</h3>
<table class="smallgrid"><tr><td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
</tr><tr><td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
<td><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript><br>item name</td>
</tr></table><p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="four">
<div class="pg" style="border-radius: 10px;">
<span class="fuchsia">
<h1>page four</h1>
<h2>pet descriptions</h2>
<p><strong><b>Note:</b> you will need to make sure the text is longer than the image size, or change the height/width of .petleft and .petright.</strong></p>

<h3>with image on the left</h3>
<img class="petleft" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"><noscript><img class="petleft" src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"></noscript><p>Mauris velit lacus, aliquet vitae interdum sed, gravida non mauris. Sed ultricies neque ut metus mollis, sit amet rutrum odio vehicula. Vivamus id sagittis ligula, et efficitur tortor. In quis semper arcu, sed maximus magna. Vivamus sit amet diam sit amet tortor facilisis auctor quis condimentum lorem. Proin luctus est diam, in aliquet quam posuere vel. Nunc non rutrum sem. Pellentesque pulvinar tellus ut sapien hendrerit venenatis. Sed cursus, urna et finibus gravida, mi dui accmsan lectus, eu rhoncus orci diam et lorem.</p>

<p>Ut at eleifend massa. Sed sollicitudin nisl felis, et euismod lectus maximus ut. Cras efficitur ipsum mauris, eget dapibus eros mattis ut. Nullam ornare, arcu cursus volutpat malesuada, ex sem lobortis ipsum, et semper lorem nisl sed augue. Etiam ac dui tempus, dignissim felis sit amet, pharetra nibh. Mauris quis quam eros. Proin sodales augue purus. Nulla lorem magna, tempor eu pretium id, volutpat quis quam. Aliquam hendrerit elementum massa at efficitur.</p>

<p>Mauris vitae tellus felis. Integer consectetur erat non sapien dictum scelerisque. Sed id feugiat nisl, sit amet tincidunt sapien. Cras id dapibus ante. Sed in quam fringilla, iaculis neque nec, tempus justo. Mauris iaculis, magna et scelerisque suscipit, leo tellus rutrum purus, ut pharetra elit diam ut justo. Vivamus quis dui ipsum. Fusce massa ipsum, feugiat at mattis a, hendrerit non lectus. Nam eget risus sit amet orci sodales ultrices. Vestibulum ac rhoncus justo. Nunc id finibus nibh, ut sodales elit. Curabitur arcu lacus, sollicitudin sed mi eu, fringilla tincidunt est. Cras sit amet facilisis elit. Sed ultricies luctus felis, ut imperdiet leo volutpat eget.</p>

<p>Suspendisse finibus turpis vel molestie dictum. Pellentesque tempus, lacus in placerat sollicitudin, diam dolor euismod diam, eget suscipit libero dolor sed sapien. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse tincidunt odio non imperdiet aliquet. Mauris laoreet eu mauris convallis rutrum. In tempor tempor odio eget fermentum. Sed pretium, quam sed placerat hendrerit, dolor lorem tristique felis, in pharetra quam massa at odio. Sed porttitor nisl id congue viverra. Nullam ornare odio nec commodo pharetra. Aenean tincidunt egestas volutpat.</p>


<h3>with image on the right</h3>
<img class="petright" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"><noscript><img class="petright" src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"></noscript><p>Mauris velit lacus, aliquet vitae interdum sed, gravida non mauris. Sed ultricies neque ut metus mollis, sit amet rutrum odio vehicula. Vivamus id sagittis ligula, et efficitur tortor. In quis semper arcu, sed maximus magna. Vivamus sit amet diam sit amet tortor facilisis auctor quis condimentum lorem. Proin luctus est diam, in aliquet quam posuere vel. Nunc non rutrum sem. Pellentesque pulvinar tellus ut sapien hendrerit venenatis. Sed cursus, urna et finibus gravida, mi dui accmsan lectus, eu rhoncus orci diam et lorem.</p>

<p>Ut at eleifend massa. Sed sollicitudin nisl felis, et euismod lectus maximus ut. Cras efficitur ipsum mauris, eget dapibus eros mattis ut. Nullam ornare, arcu cursus volutpat malesuada, ex sem lobortis ipsum, et semper lorem nisl sed augue. Etiam ac dui tempus, dignissim felis sit amet, pharetra nibh. Mauris quis quam eros. Proin sodales augue purus. Nulla lorem magna, tempor eu pretium id, volutpat quis quam. Aliquam hendrerit elementum massa at efficitur.</p>

<p>Mauris vitae tellus felis. Integer consectetur erat non sapien dictum scelerisque. Sed id feugiat nisl, sit amet tincidunt sapien. Cras id dapibus ante. Sed in quam fringilla, iaculis neque nec, tempus justo. Mauris iaculis, magna et scelerisque suscipit, leo tellus rutrum purus, ut pharetra elit diam ut justo. Vivamus quis dui ipsum. Fusce massa ipsum, feugiat at mattis a, hendrerit non lectus. Nam eget risus sit amet orci sodales ultrices. Vestibulum ac rhoncus justo. Nunc id finibus nibh, ut sodales elit. Curabitur arcu lacus, sollicitudin sed mi eu, fringilla tincidunt est. Cras sit amet facilisis elit. Sed ultricies luctus felis, ut imperdiet leo volutpat eget.</p>

<p>Suspendisse finibus turpis vel molestie dictum. Pellentesque tempus, lacus in placerat sollicitudin, diam dolor euismod diam, eget suscipit libero dolor sed sapien. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse tincidunt odio non imperdiet aliquet. Mauris laoreet eu mauris convallis rutrum. In tempor tempor odio eget fermentum. Sed pretium, quam sed placerat hendrerit, dolor lorem tristique felis, in pharetra quam massa at odio. Sed porttitor nisl id congue viverra. Nullam ornare odio nec commodo pharetra. Aenean tincidunt egestas volutpat.</p>
<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="five">
<div class="pg" style="border-radius: 10px;">
<span class="purple">
<h1>page five</h1>
<h2>goals & achievements</h2>
<p><strong><b>Note:</b> these are shown in triplicate to demonstrate that individual .imglist and .list divs can be displayed beside each other.</strong></p>

<h3>image list</h3>
<div class="imglist">
<ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript></li>
<li>want a paint brush</li>
</ul></div>

<div class="imglist">
<ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript></li>
<li>want a paint brush</li>
</ul></div>

<div class="imglist">
<ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><noscript><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></noscript></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/trophies/18_1.gif"><noscript><img src="https://images.neopets.com/trophies/18_1.gif"></noscript></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="https://images.neopets.com/items/babypaintbrush.gif"><noscript><img src="https://images.neopets.com/items/babypaintbrush.gif"></noscript></li>
<li>want a paint brush</li>
</ul></div>

<h3>text list</h3>
<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="six">
<div class="pg" style="border-radius: 10px;">
<span class="violet">
<h1>page six</h1>
<h2>miscellaneous</h2>
<h3>here’s another page</h3>
<p>Nullam euismod, augue vel auctor laoreet, lorem lacus gravida lectus, eget eleifend tortor risus ut lorem. Morbi leo velit, posuere aliquet luctus vitae, pharetra vel tellus. Vivamus cursus nec orci et ornare. Morbi consectetur sit amet leo et scelerisque. Nam tempor nibh nec sagittis tristique. Sed fermentum dapibus quam quis imperdiet. Suspendisse ut nulla non justo tincidunt euismod. Aenean gravida sem at magna dictum, in rhoncus risus convallis. Sed eu gravida ipsum. Vestibulum ipsum quam, dapibus ut mollis vel, lacinia luctus sem.</p>

<p>Fusce ornare lacinia lobortis. Nam bibendum ipsum augue, ut posuere est sollicitudin nec. Morbi vel interdum lectus. Aliquam erat volutpat. Mauris egestas varius posuere. Curabitur at pretium mauris. Donec vel ex urna. Proin consequat tempor lacinia. Nam vestibulum nunc quis interdum viverra. Nullam ornare facilisis nibh aliquet vehicula. Vivamus sit amet efficitur purus. Etiam porttitor sit amet nulla non efficitur. Sed ex erat, fringilla vel diam id, volutpat eleifend quam. Donec pretium ac elit nec condimentum. In hac habitasse platea dictumst. Nam sollicitudin leo dui, eget efficitur felis condimentum nec.</p>
<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>
</div>

<div class="holder" style="border-radius: 10px;" id="creds">
<span class="blue">
<div class="pg" style="border-radius: 10px;">
<h1>credits</h1>
<ul><li><b>Premade layout</b> by <a href="/userlookup.phtml?user=jhudorascupcake">Britt</a> exclusively for <strong>SketchedNeo.com</strong></li>
<li><b>Transparent backgrounds</b> from <a href="/~cecira">lolwat</a></li>
<li><b>Neopets</b> and all related indicia are trademarks of <strong>Neopets, Inc.</strong> © 1999-present.</li></ul></div>
</span></div>

Rainbow: Anchored Style

<style>
.bg {
	top: 0;
	left: 0;
	z-index: -1;
	width: 100% !important;
	height: 120%;
}
table {
	display: none;
}
.pg table {
	display: table;
}
#nav {
	left: 675px;
	top: 200px;
	margin: auto;
	z-index: 4;
}
#nav a {
	padding: 5px;
	margin: 3px;
	text-decoration: none;
	font: 12pt arial;
	text-transform: uppercase;
	display: block;
	color: #fff;
	text-align: center;
	width: 30px;
}
#nav a:hover {
	width: auto;
}
#nav a:hover .n {
	display: none;
}
#nav .name {
	display: none;
}
#nav a:hover .name {
	display: inline-block;
}
a.y, a.y:visited, a.y:hover {
	background: #f2ec45;
}
a.o, a.o:visited, a.o:hover {
	background: #eb9c50;
}
a.p, a.p:visited, a.p:hover {
	background: #e74c6d;
}
a.f, a.f:visited, a.f:hover {
	background: #cb13b6;
}
a.pu, a.pu:visited, a.pu:hover {
	background: #b722e1;
}
a.v, a.v:visited, a.v:hover {
	background: #b234fd;
}
a.bl, a.bl:visited, a.bl:hover {
	background: #4c32fa;
}
a.in, a.in:visited, a.in:hover {
	background: #2306e0;
}
.holder {
	background: url("https://i.imgur.com/7zMHH1B.png");
	left: 700px;
	top: 100px;
	width: 600px;
	height: 450px;
	padding: 10px;
	overflow: hidden;
	z-index: 1;
}
.box {
	background: #fff;
	width: 600px;
	height: 450px;
	overflow: hidden;
	z-index: 2;
}
.pg {
	padding: 20px;
	text-align: justify;
	font: 8pt arial;
	color: #333;
	width: 560px;
	height: 420px;
	overflow: auto;
	z-index: 2;
}
h1 {
	font: bold 19pt arial;
	margin: 0;
	padding: 0 10px;
	line-height: 23pt;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	color: #fff;
}
h2 {
	font: 14pt arial;
	margin: 10px 0 15px 0;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: #000;
}
h3 {
	font: italic 12pt georgia;
	margin: 10px 0 15px 0;
	text-transform: lowercase;
	letter-spacing: 1px;
	color: #b3b3b3;
}
b {
	color: #000;
	text-transform: uppercase;
	letter-spacing: 1px;
}
strong {
	padding: 0 3px;
	font-weight: normal;
}
.pg a {
	font: italic 9pt georgia;
	text-decoration: none;
	color: #000 !important;
}
.pg a:hover {
	font-weight: bold;
}
.yellow h1 {
	background: #f2ec45;
}
.yellow h2 {
	border-bottom: 2px solid #f2ec45;
}
.yellow strong {
	background: #faf8b7;
}
.yellow a, .yellow a:visited {
	border-bottom: 2px solid #f2ec45;
}
.orange h1 {
	background: #eb9c50;
}
.orange h2 {
	border-bottom: 2px solid #eb9c50;
}
.orange strong {
	background: #f2be8d;
}
.orange a, .orange a:visited {
	border-bottom: 2px solid #eb9c50;
}
.pink h1 {
	background: #e74c6d;
}
.pink h2 {
	border-bottom: 2px solid #e74c6d;
}
.pink strong {
	background: #f3a5b6;
}
.pink a, .pink a:visited {
	border-bottom: 2px solid #e74c6d;
}
.fuchsia h1 {
	background: #cb13b6;
}
.fuchsia h2 {
	border-bottom: 2px solid #cb13b6;
}
.fuchsia strong {
	background: #f8b9f1;
}
.fuchsia a, .fuchsia a:visited {
	border-bottom: 2px solid #cb13b6;
}
.purple h1 {
	background: #b722e1;
}
.purple h2 {
	border-bottom: 2px solid #b722e1;
}
.purple strong {
	background: #e9bcf6;
}
.purple a, .purple a:visited {
	border-bottom: 2px solid #b722e1;
}
.violet h1 {
	background: #b234fd;
}
.violet h2 {
	border-bottom: 2px solid #b234fd;
}
.violet strong {
	background: #e3b3fe;
}
.violet a, .violet a:visited {
	border-bottom: 2px solid #b234fd;
}
.blue h1 {
	background: #4c32fa;
}
.blue h2 {
	border-bottom: 2px solid #4c32fa;
}
.blue strong {
	background: #d4cdfe;
}
.blue a, .blue a:visited {
	border-bottom: 2px solid #4c32fa;
}
.scrollbox {
	height: 50px;
	overflow: auto;
	margin-top: 0px;
	margin-bottom: 10px;
	padding: 5px;
	border: 1px solid #efefef;
}
div.imagegrid, div.smallgrid {
	text-align: center;
}
table.imagegrid td, table.smallgrid td {
	padding: 4px;
	text-align: center;
	vertical-align: top;
	font: 7pt arial;
	color: #666;
	letter-spacing: 0;
}
table.imagegrid td img {
	width: 70px;
	height: 70px;
	padding: 5px;
	border: 1px solid #efefef;
	margin-bottom: 2px;
}
table.imagegrid td img:hover, table.smallgrid td img:hover {
	padding: 3px;
	border-width: 3px;
}
table.smallgrid td img {
	width: 50px;
	height: 50px;
	padding: 5px;
	border: 1px solid #efefef;
	margin-bottom: 2px;
}
.petleft {
	float: left;
	height: 200px;
	width: 200px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #efefef;
}
.petright {
	float: right;
	height: 200px;
	width: 200px;
	margin: 5px;
	padding: 5px;
	border: 1px solid #efefef;
}
div.imglist {
	width: 25%;
	display: inline-block;
}
ul.imglist {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
}
ul.imglist li {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
ul.imglist li.img {
	width: 50px;
}
ul.imglist li.img img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
	padding: 5px;
	border: 1px solid #efefef;
}
ul.imglist li.img img:hover {
	border: 1px solid #e9bcf6;
}
div.list {
	width: 25%;
	margin-left: 10px;
	text-transform: lowercase;
	display: inline-block;
}
ul.list {
	padding: 0px;
}
ul.list li {
	background: #eee;
	display: block;
	font: 8pt tahoma;
	font-weight: normal;
	padding: 4px;
	margin: 5px 0px;
	text-align: center;
}
ul.list li:hover {
	background: #e9bcf6;
}
#creds ul {
	list-style-type: none;
}
</style><img src="https://i.imgur.com/SFIHAye.png" class="bg" style="position: fixed;"><div id="nav" style="position: fixed;">
<a class="y" href="#one" style="border-radius: 100px;"><span class="n">01</span> <span class="name">one</span></a>
<a class="o" href="#two" style="border-radius: 100px;"><span class="n">02</span> <span class="name">two</span></a>
<a class="p" href="#three" style="border-radius: 100px;"><span class="n">03</span> <span class="name">three</span></a>
<a class="f" href="#four" style="border-radius: 100px;"><span class="n">04</span> <span class="name">four</span></a>
<a class="pu" href="#five" style="border-radius: 100px;"><span class="n">05</span> <span class="name">five</span></a>
<a class="v" href="#six" style="border-radius: 100px;"><span class="n">06</span> <span class="name">six</span></a>
<a class="bl" href="#creds" style="border-radius: 100px;"><span class="n">07</span> <span class="name">credits</span></a>
<a class="in" href="/" style="border-radius: 100px;"><span class="n">08</span> <span class="name">exit</span></a></div>

<div class="holder" style="border-radius: 10px; position: absolute;">
<div class="box" style="border-radius: 10px; position: relative;">

<div class="pg" id="one">
<span class="yellow">
<h1>page one</h1>
<h2>introduction</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus arcu ac augue feugiat egestas. Vivamus ac suscipit orci. Nulla viverra ornare mollis. Sed consectetur nulla et cursus scelerisque. Proin vel volutpat purus. Nullam lacinia dapibus eros sed sodales. Nulla eget iaculis ipsum, in congue nisl. In ut dolor nibh. Sed ut feugiat diam. Quisque a dui sit amet justo eleifend semper. Mauris venenatis enim non nisi blandit, vitae dapibus dolor elementum. Suspendisse tincidunt ullamcorper augue, id porta felis efficitur at.</p>

<h3>updates</h3>
<div class="scrollbox">
<p>Aenean ornare blandit feugiat. Pellentesque ultrices metus ipsum. Aliquam vestibulum orci non elit auctor tincidunt. Proin id imperdiet arcu. Fusce pellentesque ipsum dui, non pharetra metus dignissim sit amet. Duis vitae quam eget sapien aliquet placerat. Maecenas ultricies pretium urna sed dapibus. Cras sodales dictum velit eu cursus. Curabitur ultrices felis id odio scelerisque, ut convallis lectus suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam cursus commodo tellus, eu consectetur est dapibus id. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vel dolor vitae mi aliquam tempor.</p>
</div>

<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="two">
<span class="orange">
<h1>page two</h1>
<h2>writing</h2>
<p>Quisque ornare mauris vitae sem vulputate egestas. Sed tincidunt pretium leo a interdum. Quisque mauris ligula, hendrerit nec ante sit amet, bibendum tincidunt augue. Aenean sagittis finibus tincidunt. Etiam libero nisi, porta ac nisl sed, facilisis condimentum lorem. Nullam lacus ex, vestibulum eu pellentesque at, dapibus sit amet turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>

<h3>hello wordsmiths</h3>
<p>Aenean eget imperdiet mauris. Aliquam pellentesque venenatis quam, consectetur feugiat dui tempus et. Sed pharetra ac eros nec vulputate. In hac habitasse platea dictumst. Integer condimentum lectus in dolor luctus pretium. Vestibulum hendrerit dui neque, quis sollicitudin velit aliquam a. Sed lectus urna, pharetra ac dui eu, scelerisque rutrum ipsum. Duis et dapibus nisl, ut convallis nibh. Nam sed est ac felis consequat semper eget sit amet nibh. Donec non libero eu est convallis tempus. Duis eu tortor non dui egestas placerat. Duis aliquam luctus augue non varius.</p>

<p>Ut vulputate est nec molestie rutrum. Ut ex magna, feugiat a condimentum non, semper sed risus. Vivamus consectetur sapien vel augue dictum egestas. Praesent dapibus consectetur nibh, eu vulputate est dictum in. Ut malesuada massa quis ante semper tempus. Nulla et hendrerit nisi. Curabitur imperdiet odio ac orci tristique aliquet. Fusce cursus gravida enim, sit amet ornare mi pellentesque et. Nam ac ex quis libero sollicitudin efficitur.</p>

<p>Ut nec nunc dignissim, sollicitudin lorem sit amet, porta dolor. Proin tempus, sapien eu sollicitudin rhoncus, nisl justo egestas elit, at vulputate diam nunc ut sapien. Duis id lobortis enim. Cras semper erat eu nisl gravida, eu imperdiet dolor efficitur. Mauris facilisis, nibh dictum pellentesque bibendum, purus mauris hendrerit purus, vitae bibendum ligula velit ut leo. Mauris in diam ut libero tempor malesuada. Aliquam viverra imperdiet velit id pharetra. Quisque molestie mi id quam mattis, eget dapibus neque tempor. Aliquam erat volutpat. Mauris consectetur augue nec consectetur porta. Mauris venenatis mattis placerat. Etiam commodo fringilla tempus. Suspendisse vestibulum, turpis malesuada rutrum pulvinar, mauris dui condimentum augue, in feugiat nisi risus a dui.</p>


<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="three">
<span class="pink">
<h1>page three</h1>
<h2>image grids</h2>

<h3>bigger images</h3>
<table class="imagegrid"><tr><td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
<td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
<td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
<td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
<td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
<td><img src="https://images.neopets.com/trophies/18_1.gif"><br>item name</td>
</tr><tr><td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
<td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
<td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
<td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
<td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
<td><img src="https://images.neopets.com/items/babypaintbrush.gif"><br>item name</td>
</tr></table><h3>smaller images</h3>
<table class="smallgrid"><tr><td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
</tr><tr><td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
<td><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"><br>item name</td>
</tr></table><p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="four">
<span class="fuchsia">
<h1>page four</h1>
<h2>pet descriptions</h2>
<p><strong><b>Note:</b> you will need to make sure the text is longer than the image size, or change the height/width of .petleft and .petright.</strong></p>

<h3>with image on the left</h3>
<img class="petleft" src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"><p>Mauris velit lacus, aliquet vitae interdum sed, gravida non mauris. Sed ultricies neque ut metus mollis, sit amet rutrum odio vehicula. Vivamus id sagittis ligula, et efficitur tortor. In quis semper arcu, sed maximus magna. Vivamus sit amet diam sit amet tortor facilisis auctor quis condimentum lorem. Proin luctus est diam, in aliquet quam posuere vel. Nunc non rutrum sem. Pellentesque pulvinar tellus ut sapien hendrerit venenatis. Sed cursus, urna et finibus gravida, mi dui accmsan lectus, eu rhoncus orci diam et lorem.</p>

<p>Ut at eleifend massa. Sed sollicitudin nisl felis, et euismod lectus maximus ut. Cras efficitur ipsum mauris, eget dapibus eros mattis ut. Nullam ornare, arcu cursus volutpat malesuada, ex sem lobortis ipsum, et semper lorem nisl sed augue. Etiam ac dui tempus, dignissim felis sit amet, pharetra nibh. Mauris quis quam eros. Proin sodales augue purus. Nulla lorem magna, tempor eu pretium id, volutpat quis quam. Aliquam hendrerit elementum massa at efficitur.</p>

<p>Mauris vitae tellus felis. Integer consectetur erat non sapien dictum scelerisque. Sed id feugiat nisl, sit amet tincidunt sapien. Cras id dapibus ante. Sed in quam fringilla, iaculis neque nec, tempus justo. Mauris iaculis, magna et scelerisque suscipit, leo tellus rutrum purus, ut pharetra elit diam ut justo. Vivamus quis dui ipsum. Fusce massa ipsum, feugiat at mattis a, hendrerit non lectus. Nam eget risus sit amet orci sodales ultrices. Vestibulum ac rhoncus justo. Nunc id finibus nibh, ut sodales elit. Curabitur arcu lacus, sollicitudin sed mi eu, fringilla tincidunt est. Cras sit amet facilisis elit. Sed ultricies luctus felis, ut imperdiet leo volutpat eget.</p>

<p>Suspendisse finibus turpis vel molestie dictum. Pellentesque tempus, lacus in placerat sollicitudin, diam dolor euismod diam, eget suscipit libero dolor sed sapien. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse tincidunt odio non imperdiet aliquet. Mauris laoreet eu mauris convallis rutrum. In tempor tempor odio eget fermentum. Sed pretium, quam sed placerat hendrerit, dolor lorem tristique felis, in pharetra quam massa at odio. Sed porttitor nisl id congue viverra. Nullam ornare odio nec commodo pharetra. Aenean tincidunt egestas volutpat.</p>


<h3>with image on the right</h3>
<img class="petright" src="https://pets.neopets.com/cp/oxbvf4gq/1/4.png"><p>Mauris velit lacus, aliquet vitae interdum sed, gravida non mauris. Sed ultricies neque ut metus mollis, sit amet rutrum odio vehicula. Vivamus id sagittis ligula, et efficitur tortor. In quis semper arcu, sed maximus magna. Vivamus sit amet diam sit amet tortor facilisis auctor quis condimentum lorem. Proin luctus est diam, in aliquet quam posuere vel. Nunc non rutrum sem. Pellentesque pulvinar tellus ut sapien hendrerit venenatis. Sed cursus, urna et finibus gravida, mi dui accmsan lectus, eu rhoncus orci diam et lorem.</p>

<p>Ut at eleifend massa. Sed sollicitudin nisl felis, et euismod lectus maximus ut. Cras efficitur ipsum mauris, eget dapibus eros mattis ut. Nullam ornare, arcu cursus volutpat malesuada, ex sem lobortis ipsum, et semper lorem nisl sed augue. Etiam ac dui tempus, dignissim felis sit amet, pharetra nibh. Mauris quis quam eros. Proin sodales augue purus. Nulla lorem magna, tempor eu pretium id, volutpat quis quam. Aliquam hendrerit elementum massa at efficitur.</p>

<p>Mauris vitae tellus felis. Integer consectetur erat non sapien dictum scelerisque. Sed id feugiat nisl, sit amet tincidunt sapien. Cras id dapibus ante. Sed in quam fringilla, iaculis neque nec, tempus justo. Mauris iaculis, magna et scelerisque suscipit, leo tellus rutrum purus, ut pharetra elit diam ut justo. Vivamus quis dui ipsum. Fusce massa ipsum, feugiat at mattis a, hendrerit non lectus. Nam eget risus sit amet orci sodales ultrices. Vestibulum ac rhoncus justo. Nunc id finibus nibh, ut sodales elit. Curabitur arcu lacus, sollicitudin sed mi eu, fringilla tincidunt est. Cras sit amet facilisis elit. Sed ultricies luctus felis, ut imperdiet leo volutpat eget.</p>

<p>Suspendisse finibus turpis vel molestie dictum. Pellentesque tempus, lacus in placerat sollicitudin, diam dolor euismod diam, eget suscipit libero dolor sed sapien. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse tincidunt odio non imperdiet aliquet. Mauris laoreet eu mauris convallis rutrum. In tempor tempor odio eget fermentum. Sed pretium, quam sed placerat hendrerit, dolor lorem tristique felis, in pharetra quam massa at odio. Sed porttitor nisl id congue viverra. Nullam ornare odio nec commodo pharetra. Aenean tincidunt egestas volutpat.</p>
<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="five">
<span class="purple">
<h1>page five</h1>
<h2>goals & achievements</h2>
<p><strong><b>Note:</b> these are shown in triplicate to demonstrate that individual .imglist and .list divs can be displayed beside each other.</strong></p>

<h3>image list</h3>
<div class="imglist">
<ul class="imglist"><li class="img"><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/trophies/18_1.gif"></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/items/babypaintbrush.gif"></li>
<li>want a paint brush</li>
</ul></div>

<div class="imglist">
<ul class="imglist"><li class="img"><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/trophies/18_1.gif"></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/items/babypaintbrush.gif"></li>
<li>want a paint brush</li>
</ul></div>

<div class="imglist">
<ul class="imglist"><li class="img"><img src="https://images.neopets.com/neoboards/avatars/avatarcollector.gif"></li>
<li>want an avatar</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/trophies/18_1.gif"></li>
<li>got a trophy</li>
</ul><ul class="imglist"><li class="img"><img src="https://images.neopets.com/items/babypaintbrush.gif"></li>
<li>want a paint brush</li>
</ul></div>

<h3>text list</h3>
<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<div class="list"><ul class="list"><li>get an award</li>
<li>win a spotlight</li>
<li>got published in NT</li>
</ul></div>

<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="six">
<span class="violet">
<h1>page six</h1>
<h2>miscellaneous</h2>
<h3>here's another page</h3>
<p>Nullam euismod, augue vel auctor laoreet, lorem lacus gravida lectus, eget eleifend tortor risus ut lorem. Morbi leo velit, posuere aliquet luctus vitae, pharetra vel tellus. Vivamus cursus nec orci et ornare. Morbi consectetur sit amet leo et scelerisque. Nam tempor nibh nec sagittis tristique. Sed fermentum dapibus quam quis imperdiet. Suspendisse ut nulla non justo tincidunt euismod. Aenean gravida sem at magna dictum, in rhoncus risus convallis. Sed eu gravida ipsum. Vestibulum ipsum quam, dapibus ut mollis vel, lacinia luctus sem.</p>

<p>Fusce ornare lacinia lobortis. Nam bibendum ipsum augue, ut posuere est sollicitudin nec. Morbi vel interdum lectus. Aliquam erat volutpat. Mauris egestas varius posuere. Curabitur at pretium mauris. Donec vel ex urna. Proin consequat tempor lacinia. Nam vestibulum nunc quis interdum viverra. Nullam ornare facilisis nibh aliquet vehicula. Vivamus sit amet efficitur purus. Etiam porttitor sit amet nulla non efficitur. Sed ex erat, fringilla vel diam id, volutpat eleifend quam. Donec pretium ac elit nec condimentum. In hac habitasse platea dictumst. Nam sollicitudin leo dui, eget efficitur felis condimentum nec.</p>
<p><b>bold</b> <strong>strong</strong> <i>italics</i> <a href="/">link</a></p>
</span></div>

<div class="pg" id="creds">
<span class="blue">
<h1>credits</h1>
<ul><li><b>Premade layout</b> by <a href="/userlookup.phtml?user=jhudorascupcake">Britt</a> exclusively for <strong>SketchedNeo.com</strong></li>
<li><b>Transparent backgrounds</b> from <a href="/~cecira">lolwat</a></li>
<li><b>Neopets</b> and all related indicia are trademarks of <strong>Neopets, Inc.</strong> © 1999-present.</li></ul></span></div>
</div></div>

Neopets Time

Quick Links

Neopets News

Faerie Crossword

October 29

Daily Puzzle

October 29

Affiliates

Quick Links

Petpage Layouts

Rainbow: Blog Style

Rainbow: Anchored Style