Squezhy got their homepage at Neopets.com

about

This is Empyrean. It's a premade CSS site by me, Siddey of Siddey's CSS Help. I always loved coding and recently became very good at it, creating styles no one has ever seen before.

Empyrean originally opened March of 2009 but there was problems with my coding and I had to go on hiatus while I fixed my coding and learned new tricks.

I encourage you to take a look around, try a few layouts, request one or even check out my affiliates. The possibilities are endless.

You may find what you've been looking for all along.

rules

No one likes rules. I don't even like having rules, but I have to.

1. Do not remove my credit! All I ask is that you leave my credit on. Which is the link to Empyrean. That's all you have to do and I won't set my ninja muffins on you.

2. You may edit my layouts any way you want as long as you link back to me. I don't care what you do with my layouts. You can use it as base coding for an image layout and change the colors or move stuff around. I don't care. All I ask is that you link back to me.

3. Do not bug me if you don't like a layout I made for you. I did my best and I took time out of my day to make it. If you dislike it that much go request somewhere else.

Those are my only rules. Pretty simple, huh?

style one

My first style! I really like the simplicity of this one. It's a wide one-column centered layout and can be used for almost anything! Like I said, everything is really simple but it looks really nice.

style two

This style is like Empyrean's original layout. It has two columns: a sidebar and main content box. Both columns scroll so the whole page doesn't scroll with it.

style three

This style is a very simple three columned layout. Perfect for a new site.

style four

This style was created for someone who said my layouts were simple. I really like this style. It has three boxes, two scroll and one extends with the page. The navigation is also really neat. I really like how it turned out so USE IT!!

style five

I had a spark of inspiration and... alakazam! Style Five was born. This style is really different than any style I've made before. The numbers across the top are navigation and there's a scroll box connected to it! I really love this style.

body {background-color:#F8D995; font: 12px tahoma;}

#timetodance {width:800px; position:relative; top:25px; left:-8px; height:auto;}

#nav {width:550px; height:100px; position:absolute; top: 0px; left:0px;padding:4px; border-top: 5px solid #AF6666; border-bottom: 5px solid #AF6666; border-right: 10px solid #AF6666; background-color: white; text-align:center;}

#main {width:500px;  padding:4px; background-color: white; border-left: 5px solid #AF6666; border-right: 5px solid #AF6666; border-bottom: 5px solid #AF6666;position:absolute; top:113px; left:20px; height: 400px; overflow:auto; text-align:center; }

h1{font:40px tahoma; color:#6E9296; border-bottom:5px solid #965F69; text-align:left;}

h2 {background-color:#965F69; color:white; font: 20px georgia; line-height:13px; text-transform: uppercase;}
h2:hover {color:#F7C88A;}

a.nav:link, a.nav:active, a.nav:visited {text-decoration: none; font: 70px georgia; color: #6E9296; }
a.nav:hover {font-style: italic; color:#965F69;}

b {color:#AF6666;}
u {color:#965F69;}
i {color:#6E9296; font:12px georgia; font-style: italic;}

a:link, a:active, a:visited {text-decoration:none; color:#965F69;}
a:hover {letter-spacing: 3px;}

</style />

<div id="main">
<h1>v. very berry cheesecake</h1>

<h2>this is a header!</h2>
Color scheme name by <a href="/userlookup.phtml?user=butterfree197357">Hannah!</a><br><br>
Pretty awesome layout, eh?<br>
<b>bold!</b> <i>italic!</i> <u>underline!</u> <a href="/~squezhy">link!</a><br>
type your stuff here! type your stuff here! type your stuff here!

<h2>this is a header!</h2>
Pretty awesome layout, eh?<br>
<b>bold!</b> <i>italic!</i> <u>underline!</u> <a href="/~squezhy">link!</a><br>
type your stuff here! type your stuff here! type your stuff here!

body {background-color:#FBE6FF ; font: 12px tahoma;}

#timetodance {width:800px; position:relative; top:25px; left:-8px; height:auto;}

#nav {width:550px; height:100px; position:absolute; top: 0px; left:0px;padding:4px; border-top: 5px solid #817783; border-bottom: 5px solid #817783; border-right: 10px solid #817783; background-color: white; text-align:center;}

#main {width:500px;  padding:4px; background-color: white; border-left: 5px solid #817783; border-right: 5px solid #817783; border-bottom: 5px solid #817783; position:absolute; top:113px; left:20px; height: 400px; overflow:auto; text-align:center; }

h1{font:40px tahoma; color:#86505B; border-bottom:5px solid #CC8599; text-align:left;}

h2 {background-color:#CC8599; color:white; font: 20px georgia; line-height:13px; text-transform: uppercase;}
h2:hover {color:#817783;}

a.nav:link, a.nav:active, a.nav:visited {text-decoration: none; font: 70px georgia; color: #86505B; }
a.nav:hover {font-style: italic; color:#817783;}

b {color:#86505B;}
u {color:#CC8599 ;}
i {color:#817783; font:12px georgia; font-style: italic;}

a:link, a:active, a:visited {text-decoration:none; color:#CC8599 ;}
a:hover {letter-spacing: 3px;}

</style />

<div id="main">
<h1>v. pink cupcake reject</h1>

body {background-color:#FAE28D; font: 12px tahoma;}

#timetodance {width:800px; position:relative; top:25px; left:-8px; height:auto;}

#nav {width:550px; height:100px; position:absolute; top: 0px; left:0px;padding:4px; border-top: 5px solid #D1804E; border-bottom: 5px solid #D1804E; border-right: 10px solid #D1804E; background-color: white; text-align:center;}

#main {width:500px;  padding:4px; background-color: white; border-left: 5px solid #D1804E; border-right: 5px solid #D1804E; border-bottom: 5px solid #D1804E; position:absolute; top:113px; left:20px; height: 400px; overflow:auto; text-align:center; }

h1{font:40px tahoma; color:#910D0C; border-bottom:5px solid #DE9F4D; text-align:left;}

h2 {background-color:#DE9F4D; color:white; font: 20px georgia; line-height:13px; text-transform: uppercase;}
h2:hover {color:#910D0C;}

a.nav:link, a.nav:active, a.nav:visited {text-decoration: none; font: 70px georgia; color: #910D0C; }
a.nav:hover {font-style: italic; color:#910D0C;}

b {color:#D1804E;}
u {color:#DE9F4D;}
i {color:#D1804E; font:12px georgia; font-style: italic;}

a:link, a:active, a:visited {text-decoration:none; color:#910D0C;}
a:hover {letter-spacing: 3px;}

</style />

<div id="main">
<h1>v. a berry with cream</h1>

body {background-color:#D2F8E0; font: 12px tahoma;}

#timetodance {width:800px; position:relative; top:25px; left:-8px; height:auto;}

#nav {width:550px; height:100px; position:absolute; top: 0px; left:0px;padding:4px; border-top: 5px solid #E65757; border-bottom: 5px solid #E65757; border-right: 10px solid #E65757; background-color: white; text-align:center;}

#main {width:500px;  padding:4px; background-color: white; border-left: 5px solid #E65757; border-right: 5px solid #E65757; border-bottom: 5px solid #E65757; position:absolute; top:113px; left:20px; height: 400px; overflow:auto; text-align:center; }

h1{font:40px tahoma; color:#EB884E; border-bottom:5px solid #E65757; text-align:left;}

h2 {background-color:#E65757; color:white; font: 20px georgia; line-height:13px; text-transform: uppercase;}
h2:hover {color:#E2BD5F;}

a.nav:link, a.nav:active, a.nav:visited {text-decoration: none; font: 70px georgia; color: #EB884E; }
a.nav:hover {font-style: italic; color:#E8E592;}

b {color:#EB884E;}
u {color:#E65757;}
i {color:#EB884E; font:12px georgia; font-style: italic;}

a:link, a:active, a:visited {text-decoration:none; color:#E65757;}
a:hover {letter-spacing: 3px;}

</style />

<div id="main">
<h1>v. in a hot air balloon</h1>

style six

This is a really neat style in my opinion. There is one giant box that holds everything else. The navigation is in two blocks on top of the blog you can type in! YAY!

body {background: #F2BAA2; font: 12px verdana;}

#madasrabbits {width: 500px; height: 500px; position:relative; top:20px; left:375px; border: 10px solid #6B375A;  background-color:white; text-align:center; padding:5px; }

#nav {width:200px; height: 70px; padding:4px; position:absolute; left:40px; top: 60px;}

#nav2 {width:200px; height: 70px; padding:4px; position:absolute; right:40px; top: 60px;}

#main {width:426px; height: 350px; overflow: auto; position: absolute; left:40px; top:150px;}

h1 {font: 45px impact; color:#4D253D; margin-top:0px;}

h2{color:#8C3861; font:20px georgia; font-style:italic; text-align:left; border-bottom: 1px dotted #6B375A;}

a.nav:link, a.nav:active, a.nav:visited {display:block; background-color:#CC908F; color:#6B375A; border-left: 10px solid#8C3861; border-bottom: 1px solid #F2BAA2; text-decoration: none; text-align:left;}
a.nav:hover {letter-spacing: 5px;}

b{color:#8C3861;}
i {font: 12px georgia; color:#6B375A; font-style:italic;}
u {color: #4D253D;}

a:link, a:active, a:visited {text-decoration: none; color: #6B375A;}
a:hover {letter-spacing: 3px; color:#F2BAA2;}

</style />
<div id="madasrabbits">
<h1>v. Violets on the Windowsill</h1><br>

<div id="nav">
<a href=/myaccount.phtml class=nav>account</a>
<a href=/petcentral.phtml class=nav>central</a>
<a href=/explore.phtml class=nav>explore</a>
<a href=/games/arcade.phtml class=nav>arcade</a>
<a href=/neoboards/index.phtml class=nav>boards</a>
</div>

<div id="nav2">
<a href=/objects.phtml class=nav>shops</a>
<a href=/nf.phtml class=nav>news</a>
<a href=/video/index.phtml class=nav>tv</a>
<a href=/mall/index.phtml class=nav>mall</a>
<a href=/~squezhy class=nav>credit</a></div>

<div id="main">
<h2>heading</h2>
Pretty awesome layout, eh?<br>
<b>bold!</b> <i>italic!</i> <u>underline!</u> <a href="/~squezhy">link!</a><br>
type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here!

<h2>heading</h2>
Pretty awesome layout, eh?<br>
<b>bold!</b> <i>italic!</i> <u>underline!</u> <a href="/~squezhy">link!</a><br>
type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here! type your stuff here!

body {background: black; font: 12px verdana;}

#madasrabbits {width: 500px; height: 500px; position:relative; top:20px; left:375px; border: 10px solid #0BE6DB;  background-color:white; text-align:center; padding:5px; }

#nav {width:200px; height: 70px; padding:4px; position:absolute; left:40px; top: 60px;}

#nav2 {width:200px; height: 70px; padding:4px; position:absolute; right:40px; top: 60px;}

#main {width:426px; height: 350px; overflow: auto; position: absolute; left:40px; top:150px;}

h1 {font: 45px impact; color:#4A4A4A; margin-top:0px;}

h2{color:#575757; font:20px georgia; font-style:italic; text-align:left; border-bottom: 1px dotted #0BE6DB;}

a.nav:link, a.nav:active, a.nav:visited {display:block; background-color:#656968; color:#7FDBD7; border-left: 10px solid #0BE6DB; border-bottom: 1px solid #4A4A4A; text-decoration: none; text-align:left;}
a.nav:hover {letter-spacing: 5px;}

b{color:#0BE6DB;}
i {font: 12px georgia; color:#4A4A4A; font-style:italic;}
u {color: #4A4A4A;}

a:link, a:active, a:visited {text-decoration: none; color: #656968;}
a:hover {letter-spacing: 3px; color:#7FDBD7;}

</style />
<div id="madasrabbits">
<h1>v. Kazuki's Favorite</h1><br>

body {background: #F5DA85; font: 12px verdana;}

#madasrabbits {width: 500px; height: 500px; position:relative; top:20px; left:375px; border: 10px solid #F68288;  background-color:white; text-align:center; padding:5px; }

#nav {width:200px; height: 70px; padding:4px; position:absolute; left:40px; top: 60px;}

#nav2 {width:200px; height: 70px; padding:4px; position:absolute; right:40px; top: 60px;}

#main {width:426px; height: 350px; overflow: auto; position: absolute; left:40px; top:150px;}

h1 {font: 45px impact; color:#F7658E; margin-top:0px;}

h2{color:#F68288; font:20px georgia; font-style:italic; text-align:left; border-bottom: 1px dotted #F5BC86;}

a.nav:link, a.nav:active, a.nav:visited {display:block; background-color:#F5DA85; color:#F68288; border-left: 10px solid #F7658E; border-bottom: 1px solid #F5BC86; text-decoration: none; text-align:left;}
a.nav:hover {letter-spacing: 5px;}

b{color:#F7658E;}
i {font: 12px georgia; color:#F68288; font-style:italic;}
u {color: #F69F87;}

a:link, a:active, a:visited {text-decoration: none; color: #F7658E;}
a:hover {letter-spacing: 3px; color:#F5DA85;}

</style />
<div id="madasrabbits">
<h1>v. Coral Reefs</h1><br>

body {background: #75005A; font: 12px verdana;}

#madasrabbits {width: 500px; height: 500px; position:relative; top:20px; left:375px; border: 10px solid #806F80;  background-color:white; text-align:center; padding:5px; }

#nav {width:200px; height: 70px; padding:4px; position:absolute; left:40px; top: 60px;}

#nav2 {width:200px; height: 70px; padding:4px; position:absolute; right:40px; top: 60px;}

#main {width:426px; height: 350px; overflow: auto; position: absolute; left:40px; top:150px;}

h1 {font: 45px impact; color:#85A685; margin-top:0px;}

h2{color:#75005A; font:20px georgia; font-style:italic; text-align:left; border-bottom: 1px dotted #85A685;}

a.nav:link, a.nav:active, a.nav:visited {display:block; background-color:#75005A; color:#7E8B8C; border-left: 10px solid #C0D640; border-bottom: 1px solid #806F80; text-decoration: none; text-align:left;}
a.nav:hover {letter-spacing: 5px;}

b{color:#C0D640;}
i {font: 12px georgia; color:#75005A; font-style:italic;}
u {color: #806F80;}

a:link, a:active, a:visited {text-decoration: none; color: #85A685;}
a:hover {letter-spacing: 3px; color:#7E8B8C;}

</style />
<div id="madasrabbits">
<h1>v. Hint of Lime</h1><br>

style seven

Style Seven was inspired by the layout of my very own Siddey's CSS Help. It's a nice two-column layout with a new and really awesome style of navigation. When you hover over the "block" it expands and shows the name of what you're clicking on. Cool, huh?

body {background:#212121; font: 12px arial; color:black;}

#northerndownpour {width:700px; height:auto; position:relative; top:25px; left:260px; text-align:center;}

#main, #side {position:absolute; top: 100px; height:auto; border-top: 10px solid #525252; border-bottom: 10px solid #525252; border-right: 5px solid #525252; border-left: 5px solid #525252; background-color: white; padding: 4px;}

#main {left: 0px; width:450px;}
#side {right: 0px; width:200px;}

#head {width:700px; position:absolute; top:0px; left:0px;}

h1 {color:#B5B5B5; margin:0px; padding:0px; font: 50px times; border-bottom: 10px solid #383838; }

h6{color:#858585; background-color:#858585; font: 10px georgia; margin:0px; padding:0px;}

h2 {color:#383838; font: 24px tahoma; text-align: left; border-bottom: 1px dashed #6B6B6B;}

a.nav:link, a.nav:active, a.nav:visited {display:block;  color:white; border-left: 50px solid #858585; text-align:center; text-decoration: none; margin: 2px; }

a.nav:hover {border: none; background-color: #858585; color:#383838; font:12px georgia; font-style: italic; }

a:link, a:active, a:visited {text-decoration: none; color: #212121;}
a:hover {letter-spacing: 2px;}

b{color:#525252;}
i{font:12px georgia; font-style: italic;}
u {color:#858585;}

</style />
<div id="northerndownpour"><div id="head">
<h1>v. Dusk to Dreary Dawn</h1><h6>siddey made this layout for you</h6></div>

<div id="side">
<h2>navigate</h2>
<a href=/myaccount.phtml class=nav>account</a>
<a href=/petcentral.phtml class=nav>central</a>
<a href=/explore.phtml class=nav>explore</a>
<a href=/games/arcade.phtml class=nav>arcade</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>
<a href=/video/index.phtml class=nav>tv</a>
<a href=/mall/index.phtml class=nav>mall</a>
<a href=/~squezhy class=nav>credit</a>

affiliates

Affiliate requests are currently OPEN.
Neomail me to become affiliates.
Total affilates: 14

listings

credits & thank yous

The layout was completely made by me, siddey34 (tatooinejedi, siddeylikesipods). Stealers will not be tolerated.

Color scheme came from colourlovers [dot] com. It's a great site with great color palettes check it out!

This site began on March 27, 2009 and after a 1 1/2 month hiatus it returned (June 22, 2009). The name, Empyrean, came from a dictionary raid and means 'the visible heavens'. Cool, huh?

I would like to thank Kaz because he gave me loads of feedback on the layout and didn't get annoyed when I repeatedly asked him to look at it.

I would also like to thank the HC because the users on there are very helpful and give me the extra feedback I need.

This counter began on June 22, 2009. The day Empyrean reopened after a hiatus.
1000 page views reached on August 11, 2009.

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2009.
® denotes Reg. US Pat. & TM Office. All rights reserved.
PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions

empyrean

link back

requests

request slots

about

rules

style one

style two

style three

style four

style five

style six

style seven

affiliates

listings

credits & thank yous