Layouts

All Layouts have been tested and work in the following browsers: Internet Explorer, Firefox, Google Chrome, Safari, and Opera. If you notice that a layout does not look right or is messed up, please contact me. Thank you, and I hope you enjoy. Please follow all the rules when using.(:

Make A Suggestion? Is there a particular theme you would like to see here? A certain celebrity, TV show, band (etc)? Neomail Me your ideas and I'll see what I can do.

*small note*this only applies to the 2nd userlookup style (the disney themed one) due to filters, "position:absolute" is not allowed in style tags. However, userlookups allow you to place them in style tags if they are in an already established div box. This is a fancy way of saying that you need to add " position:absolute; " in the "#main {}" and the "#content {}" at the very beginning of the code. If you don't add it, then the layout will look messed up. please be aware that it is not currently added because the filters on the petpage won't allow it. You'll have to add it yourself. Also, thanks to The Magic of Disney for making my requests and letting me use her animations in my layouts.

Userlookups

<style> body { background: black; } body, td, p { font-family: verdana; font-size: 10px; color: #333333; } #head { margin-top: 10px; float: left; background: url("http://s7.tinypic.com/5evdrd.jpg"); height: 350px; width: 800px; border: 0px; z-index: 5; } #container { top: 0px; width: 800px; margin-left: 0px; margin-right: 0px; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: #ffffff; font-family: century gothic; font-size: 14px; background: #00815a; text-transform: lowercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: #070707; height: 290px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #content { width: 800px; margin-top: 95px; margin-left: 0px; margin-right: 0px; } #main { background: none; width: 800px; border: 0px; } a:link, a:visited { color: #00815a; } a:hover { color: #339de0; } a.n:link, a.n:visited { width: 180px; display: block; height: 20px; line-height: 20px; vertical-align: middle; background-color: #137dc1; border: 2px solid #333; text-align: center; color: white; font-size: 11px; font-family: century gothic; text-transform: lowercase; } a.n:hover { background-color: #339de0; } h1 { margin-top: 0px; height: 25px; line-height: 25px; vertical-align: middle; } #c { text-align: left; float: right; width: 377px; background: #070707; height: 240px; overflow: hidden; margin-bottom: 20px; } #y { text-align: left; float: left; width: 400px; background: #070707; height: 240px; overflow: hidden; margin-bottom: 20px; } </style> <center> <div id="container"></div> <div id="head"></div> <div id="c"> <h1>Navigation</h1> <table> <tr> <td><a href="/" class="n">Home</a></td> <td><a href="/myaccount.phtml" class="n">My Account</a></td> </tr> <tr> <td><a href="/petcentral.phtml" class="n">Pet Central</a></td> <td><a href="/explore.phtml" class="n">Explore</a></td> </tr> <tr> <td><a href="/games/arcade.phtml" class="n">Games</a></td> <td><a href="/object.phtml" class="n">Shops</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #3</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #4</a></td> </tr> <tr> <td><a href="/~eightiseven" class="n">Link</a></td> <td><a href="/~eightiseven" class="n">Credit</a></td> </tr> </table> </div> <div id="y"> <h1>your name here. </h1> <div style="padding-left: 5px; padding-right: 5px; height: 200px; overflow: auto; margin-right: 5px;"> Put a little bit of info about you here.(:<br><br><br><br><center><a href="/~eightiseven"><img src="http://s7.tinypic.com/55qxee.jpg" border="0"></a></center> <br><br> </div> </div> </center> <style> body { background: black; } body, td, p { font-family: verdana; font-size: 10px; color: #666; } #head { margin-top: 10px; float: left; background: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/mythunder.png"); height: 350px; width: 800px; border: 0px; z-index: 5; } #container { top: 0px; width: 800px; margin-left: 0px; margin-right: 0px; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: #ffffff; font-family: century gothic; font-size: 14px; background: #ae41d6; text-transform: lowercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: #070707; height: 290px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #content { width: 800px; margin-top: 95px; margin-left: 0px; margin-right: 0px; } #main { background: none; width: 800px; border: 0px; } a:link, a:visited { color: #8822c9; } a:hover { color: #339de0; } a.n:link, a.n:visited { width: 180px; display: block; height: 20px; line-height: 20px; vertical-align: middle; background-color: #339de0; border: 2px solid #333; text-align: center; color: white; font-size: 11px; font-family: century gothic; text-transform: lowercase; } a.n:hover { background-color: #137dc1; } h1 { margin-top: 0px; height: 25px; line-height: 25px; vertical-align: middle; } #c { text-align: left; float: right; width: 377px; background: #070707; height: 240px; overflow: hidden; margin-bottom: 20px; } #y { text-align: left; float: left; width: 400px; background: #070707; height: 240px; overflow: hidden; margin-bottom: 20px; } </style> <center> <div id="container"></div> <div id="head"></div> <div id="c"> <h1>Navigation</h1> <table> <tr> <td><a href="/" class="n">Home</a></td> <td><a href="/myaccount.phtml" class="n">My Account</a></td> </tr> <tr> <td><a href="/petcentral.phtml" class="n">Pet Central</a></td> <td><a href="/explore.phtml" class="n">Explore</a></td> </tr> <tr> <td><a href="/games/arcade.phtml" class="n">Games</a></td> <td><a href="/object.phtml" class="n">Shops</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #3</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #4</a></td> </tr> <tr> <td><a href="/~eightiseven" class="n">Link</a></td> <td><a href="/~eightiseven" class="n">Credit</a></td> </tr> </table> </div> <div id="y"> <h1>your name here. </h1> <div style="padding-left: 5px; padding-right: 5px; height: 200px; overflow: auto; margin-right: 5px;"> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> Put a little bit of info about you here.(:<br><br><br><br> </div> </div> </center> <style> body { background: white; } body, td, p { font-family: verdana; font-size: 10px; color: #333333; } #head { margin-top: 10px; float: left; background: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/drwho.png"); height: 350px; width: 800px; border: 0px; z-index: 5; } #container { top: 0px; width: 800px; margin-left: 0px; margin-right: 0px; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: white; font-family: century gothic; font-size: 14px; background: #a01b0d; text-transform: lowercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: #ededed; height: 290px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #content { width: 800px; margin-top: 95px; margin-left: 0px; margin-right: 0px; } #main { background: none; width: 800px; border: 0px; } a:link, a:visited { color: #c6cb95; } a:hover { color: #a0410d; } a.n:link, a.n:visited { width: 180px; display: block; height: 20px; line-height: 20px; vertical-align: middle; background-color: #c6cb95; border: 2px solid #333; text-align: center; color: #333; font-size: 11px; font-family: century gothic; text-transform: lowercase; } a.n:hover { background-color: #a0410d; color: white; } h1 { margin-top: 0px; height: 25px; line-height: 25px; vertical-align: middle; } #c { text-align: left; float: right; width: 377px; background: #ededed; height: 240px; overflow: hidden; margin-bottom: 20px; } #y { text-align: left; float: left; width: 400px; background: #ededed; height: 240px; overflow: hidden; margin-bottom: 20px; } </style> <center> <div id="container"></div> <div id="head"></div> <div id="c"> <h1>Navigation</h1> <table> <tr> <td><a href="/" class="n">Home</a></td> <td><a href="/myaccount.phtml" class="n">My Account</a></td> </tr> <tr> <td><a href="/petcentral.phtml" class="n">Pet Central</a></td> <td><a href="/explore.phtml" class="n">Explore</a></td> </tr> <tr> <td><a href="/games/arcade.phtml" class="n">Games</a></td> <td><a href="/object.phtml" class="n">Shops</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #3</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #4</a></td> </tr> <tr> <td><a href="/~eightiseven" class="n">Link</a></td> <td><a href="/~eightiseven" class="n">Credit</a></td> </tr> </table> </div> <div id="y"> <h1>your name here. </h1> <div style="padding-left: 5px; padding-right: 5px; height: 200px; overflow: auto; margin-right: 5px;"> Put a little bit of info about you here.(:<br><br><br><br><center><a href="/~eightiseven"><img src="http://s7.tinypic.com/55qxee.jpg" border="0"></a></center> <br><br> </div> </div> </center> <style> body { background: white; } body, td, p { font-family: verdana; font-size: 10px; color: #333333; } #head { margin-top: 10px; float: left; background: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/glee.png"); height: 350px; width: 800px; border: 0px; z-index: 5; } #container { top: 0px; width: 800px; margin-left: 0px; margin-right: 0px; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: white; font-family: century gothic; font-size: 14px; background: #a00b0b; text-transform: lowercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: #ededed; height: 290px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #content { width: 800px; margin-top: 95px; margin-left: 0px; margin-right: 0px; } #main { background: none; width: 800px; border: 0px; } a:link, a:visited { color: #a00b0b; } a:hover { color: #dba8c9; } a.n:link, a.n:visited { width: 180px; display: block; height: 20px; line-height: 20px; vertical-align: middle; background-color: #fcd418; border: 2px solid #333; text-align: center; color: #333; font-size: 11px; font-family: century gothic; text-transform: lowercase; } a.n:hover { background-color: #dba8c9; color: white; } h1 { margin-top: 0px; height: 25px; line-height: 25px; vertical-align: middle; } #c { text-align: left; float: right; width: 377px; background: #ededed; height: 240px; overflow: hidden; margin-bottom: 20px; } #y { text-align: left; float: left; width: 400px; background: #ededed; height: 240px; overflow: hidden; margin-bottom: 20px; } </style> <center> <div id="container"></div> <div id="head"></div> <div id="c"> <h1>Navigation</h1> <table> <tr> <td><a href="/" class="n">Home</a></td> <td><a href="/myaccount.phtml" class="n">My Account</a></td> </tr> <tr> <td><a href="/petcentral.phtml" class="n">Pet Central</a></td> <td><a href="/explore.phtml" class="n">Explore</a></td> </tr> <tr> <td><a href="/games/arcade.phtml" class="n">Games</a></td> <td><a href="/object.phtml" class="n">Shops</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Side Account #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #1</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #2</a></td> </tr> <tr> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #3</a></td> <td><a href="/userlookup.phtml?user=USERNAME+HERE" class="n">Friend #4</a></td> </tr> <tr> <td><a href="/~eightiseven" class="n">Link</a></td> <td><a href="/~eightiseven" class="n">Credit</a></td> </tr> </table> </div> <div id="y"> <h1>your name here. </h1> <div style="padding-left: 5px; padding-right: 5px; height: 200px; overflow: auto; margin-right: 5px;"> Put a little bit of info about you here.(:<br><br><br><br><center><a href="/~eightiseven"><img src="http://s7.tinypic.com/55qxee.jpg" border="0"></a></center> <br><br> </div> </div> </center>

<style> #main { background: none; width: 600px; border: 0px; left: 100px; margin-top: -90px; } #content { top: 715px; left: 250px; width: 596px; background: white; border: 2px solid black; } body { background: url("http://i55.tinypic.com/25folf5.jpg"); background-attachment: fixed; background-repeat: repeat-y; background-color: white; } body, td, p { font-family: verdana; font-size: 10px; } #head { top: -617px; left: -2px; background: url("http://i54.tinypic.com/209r407.jpg"); height: 350px; width: 600px; border: 0px; border-bottom: 2px solid black; } .contentModuleHeader, .contentModuleHeaderAlt { color: #a800ff; font-family: waltograph,century gothic; font-size: 25px; width: 100px; background: none; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #a { top: -185px; left: -2px; width: 596px; height: 155px; overflow: auto; background: white; border: 2px solid black; } #ani { top: -368px; left: 470px; } a:link, a:visited { color: #0e0c6b; } a:hover { color: #29278f; } h1 { color: #a800ff; font-family: waltograph,century gothic; font-size: 25px; background: none; } #userneopets img { width: 60px; height: 60px; } #usershop img { width: 60px; height: 60px; } #nav { top: -245px; left: -2px; width: 596px; height: 35px; overflow: auto; background: white; border: 2px solid black; } a.n:link { line-height: 15px; background-color: #a800ff; color: white; margin-right: 5px; padding: 5px; } a.n:visited { line-height: 15px; background-color: #a800ff; color: white; margin-right: 5px; padding: 5px; } a.n:hover { background-color: #7900b7; color: #ebebeb; } br.n { line-height: 10px; } </style> <div id="head" style="position: absolute;"></div> <div id="ani" style="position: absolute;"> <a href="/~2fruitpunch"><img src="http://i28.tinypic.com/331fxxw.gif" border="0"></a> </div> <div id="nav" style="position: absolute;"> <br class="n"><a href="/" class="n">Home</a><a href="/myaccount.phtml" class="n">My Account</a><a href="/petcentral.phtml" class="n">Pet Central</a><a href="/games/arcade.phtml" class="n">Games</a><a href="/explore.html" class="n">Explore</a><a href="/objects.phtml" class="n">Shops</a><a href="/neoboards/index.phtml" class="n">Boards</a><a href="/customise/" class="n">Customise</a><a href="/nf.phtml" class="n">News</a><a href="/~eightiseven" class="n">Credit</a> </div> <div id="a" style="position: absolute;"> <h1>Your Name Here</h1> <br> Put information about yourself here, or whatever it is you would like.<br><br> LEAVE CREDIT! <br><br> Layout&CSS by <a href="/~eightiseven">Eight Is Even</a>, Animation by <a href="/~2fruitpunch">The Magic of Disney</a>. </div> <style> #main { background: none; width: 600px; border: 0px; left: 100px; margin-top: -90px; } #content { top: 715px; left: 250px; width: 596px; background: white; border: 2px solid black; } body { background: url("http://i53.tinypic.com/xprhvl.jpg"); background-attachment: fixed; background-repeat: repeat-y; background-color: white; } body, td, p { font-family: verdana; font-size: 10px; } #head { top: -617px; left: -2px; background: url("http://s7.tinypic.com/20u8prp.jpg"); height: 350px; width: 600px; border: 0px; border-bottom: 2px solid black; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: #ffd112; font-family: waltograph,century gothic; font-size: 25px; background: none; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #a { top: -185px; left: -2px; width: 596px; height: 155px; overflow: auto; background: white; border: 2px solid black; } #ani { top: -368px; left: 470px; } a:link, a:visited { color: #667493; } a:hover { color: #99a2b6; } h1 { color: #ffd112; font-family: waltograph,century gothic; font-size: 25px; background: none; } #userneopets img { width: 60px; height: 60px; } #usershop img { width: 60px; height: 60px; } #nav { top: -245px; left: -2px; width: 596px; height: 35px; overflow: auto; background: white; border: 2px solid black; } a.n:link { line-height: 15px; background-color: #667493; color: white; margin-right: 5px; padding: 5px; } a.n:visited { line-height: 15px; background-color: #667493; color: white; margin-right: 5px; padding: 5px; } a.n:hover { background-color: #99a2b6; color: #ebebeb; } br.n { line-height: 10px; } </style> <div id="head" style="position: absolute;"></div> <div id="ani" style="position: absolute;"> <a href="/~2fruitpunch"><img src="http://i27.tinypic.com/2qxp6gx.gif" border="0"></a> </div> <div id="nav" style="position: absolute;"> <br class="n"><a href="/" class="n">Home</a><a href="/myaccount.phtml" class="n">My Account</a><a href="/petcentral.phtml" class="n">Pet Central</a><a href="/games/arcade.phtml" class="n">Games</a><a href="/explore.html" class="n">Explore</a><a href="/objects.phtml" class="n">Shops</a><a href="/neoboards/index.phtml" class="n">Boards</a><a href="/customise/" class="n">Customise</a><a href="/nf.phtml" class="n">News</a><a href="/~eightiseven" class="n">Credit</a> </div> <div id="a" style="position: absolute;"> <h1>Your Name Here</h1> <br> Put information about yourself here, or whatever it is you would like.<br><br> LEAVE CREDIT! <br><br> Layout&CSS by <a href="/~eightiseven">Eight Is Even</a>, Animation by <a href="/~2fruitpunch">The Magic of Disney</a>. </div> <style> #main { background: none; width: 600px; border: 0px; left: 100px; margin-top: -90px; } #content { top: 715px; left: 250px; width: 596px; background: white; border: 2px solid black; } body { background: url("http://i56.tinypic.com/rvydro.jpg"); background-attachment: fixed; background-repeat: repeat-y; background-color: white; } body, td, p { font-family: verdana; font-size: 10px; } #head { top: -617px; left: -2px; background: url("http://s7.tinypic.com/wqv4nt.jpg"); height: 350px; width: 600px; border: 0px; border-bottom: 2px solid black; } .contentModuleHeader, .contentModuleHeaderAlt, h1 { color: #85c7c6; font-family: waltograph,century gothic; font-size: 25px; background: none; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #header, #ban, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay { display: none; } #a { top: -185px; left: -2px; width: 596px; height: 155px; overflow: auto; background: white; border: 2px solid black; } #ani { top: -368px; left: 470px; } a:link, a:visited { color: #56a09f; } a:hover { color: #85c7c6; } #userneopets img { width: 60px; height: 60px; } #usershop img { width: 60px; height: 60px; } #nav { top: -245px; left: -2px; width: 596px; height: 35px; overflow: auto; background: white; border: 2px solid black; } a.n:link { line-height: 15px; background-color: #56a09f; color: white; margin-right: 5px; padding: 5px; } a.n:visited { line-height: 15px; background-color: #56a09f; color: white; margin-right: 5px; padding: 5px; } a.n:hover { background-color: #85c7c6; color: #ebebeb; } br.n { line-height: 10px; } </style> <div id="ani" style="position: absolute;"> <a href="/~2fruitpunch"><img src="http://i30.tinypic.com/14vtutl.gif" border="0"></a> </div> <div id="nav" style="position: absolute;"> <br class="n"><a href="/" class="n">Home</a><a href="/myaccount.phtml" class="n">My Account</a><a href="/petcentral.phtml" class="n">Pet Central</a><a href="/games/arcade.phtml" class="n">Games</a><a href="/explore.html" class="n">Explore</a><a href="/objects.phtml" class="n">Shops</a><a href="/neoboards/index.phtml" class="n">Boards</a><a href="/customise/" class="n">Customise</a><a href="/nf.phtml" class="n">News</a><a href="/~eightiseven" class="n">Credit</a> </div> <div id="a" style="position: absolute;"> <h1>Your Name Here</h1> <br> Put information about yourself here, or whatever it is you would like.<br><br> LEAVE CREDIT! <br><br> Layout&CSS by <a href="/~eightiseven">Eight Is Even</a>, Animation by <a href="/~2fruitpunch">The Magic of Disney</a>. </div>

Pet Pages

<style> body { background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/bg-stripes-gray.png"); font: 9px verdana; color: black; } table { background-color: black; } h1 { color: #dd0956; letter-spacing: 3px; font: 16px -blocked- century -blocked- verdana; text-transform: lowercase; font-weight: bolder; } a:link, a:visited, a:active { color: #dd0956; border-bottom: none; } a:hover { color: #75e5fd; } b { color: #bada51; } </style> <center> <div id="box" style="position: relative; top: 10px; margin: 0 auto; border: 1px solid black; background-color: white; width: 380px; height: 500px; overflow: hidden; line-height: 95%;"> <br><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/chalk.png"><br><h1>your name.</h1> <br><div style="height: 172px; width: 370px; overflow: auto;"> Hello.<br> Put your text here!<br> And. that's about it. <br><br><b>xoxoJayy</b> </div> </div> <div id="credits" style="position: relative; margin: 0 auto; top: 0px; width: 380px; font: 7.5px verdana;"> Layout by Jayy @ <a href="/~eightiseven">Eight Is Even</a>. </div> </center> <style> body { background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/bg-stripes-gray.png"); font: 9px verdana; color: black; } table { background-color: black; } h1 { color: #c62013; letter-spacing: 3px; font: 16px -blocked- century -blocked- verdana; text-transform: lowercase; font-weight: bolder; } a:link, a:visited, a:active { color: #df170f; border-bottom: none; } a:hover { color: #c62013; } b { color: #f26320; } </style> <center> <div id="box" style="position: relative; top: 10px; margin: 0 auto; border: 1px solid black; background-color: white; width: 380px; height: 500px; overflow: hidden; line-height: 95%;"> <br><img src="http://i46.tinypic.com/33xy6vb.jpg"><br><h1>your name.</h1> <br><div style="height: 172px; width: 370px; overflow: auto;"> Hello.<br> Your text goes here.<br> And. that's about it. <br><br><b>xoxoJayy</b> </div> </div> <div id="credits" style="position: relative; margin: 0 auto; top: 0px; width: 380px; font: 7.5px verdana;"> Layout by Jayy @ <a href="/~eightiseven">Eight Is Even</a>. </div> </center> <style> body { background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/bg-stripes-gray.png"); font: 9px verdana; color: black; } table { background-color: black; } h1 { color: #542a2e; letter-spacing: 3px; font: 16px -blocked- century -blocked- verdana; text-transform: lowercase; font-weight: bolder; } a:link, a:visited, a:active { color: #825b55; border-bottom: none; } a:hover { color: #542a2e; } b { color: #557825; } </style> <center> <div id="box" style="position: relative; top: 10px; margin: 0 auto; border: 1px solid black; background-color: white; width: 380px; height: 500px; overflow: hidden; line-height: 95%;"> <br><img src="http://i47.tinypic.com/6zsob9.jpg"><br><h1>your name.</h1> <br><div style="height: 172px; width: 370px; overflow: auto;"> Hello.<br> Random Info about me<br> And. that's about it. <br><br><b>xoxoJayy</b> </div> </div> <div id="credits" style="position: relative; margin: 0 auto; top: 0px; width: 380px; font: 7.5px verdana;"> Layout by Jayy @ <a href="/~eightiseven">Eight Is Even</a>. </div> </center>		<style> body { background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/kaubackground.png"); background-repeat: repeat-x; background-color: #fea1cb; font: 11px century gothic; color: #333333; } #container { top: 0px; margin-left: 0px; margin-right: 0px; width: 900px; } #header { float: left; background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/kauheader.png"); height: 300px; width: 900px; border: 0px; margin-top: -14px; z-index: 1; } #content { float: left; background: #ffb3d5; width: 750px; margin-left: 75px; } .col1 { width: 460px; padding: 10px; top: 0px; left: 0px; text-align: left; float: left; } .col2 { width: 210px; padding: 10px; top: 0px; text-align: left; float: right; } table { background-color: #fcc8df; font: 11px century gothic; color: #333; z-index: 2; } table.other { background: none; } h1 { color: #d74d8b; font: 20px century gothic; font-weight: bolder; text-transform: lowercase; letter-spacing: 3px; margin-bottom: 10px; background-color: #fa8ebf; height: 5px; line-height: 5px; margin-top: 20px; padding-bottom: 3px; } h2 { color: #d74d8b; font: 9px century gothic; font-weight: lighter; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; margin-top: -10px; text-align: right; } h3 { color: #fa8ebf; font: 20px century gothic; font-weight: bolder; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 5px; text-align: center; margin-top: 10px; } b { color: #d74d8b; } i { color: #d74d8b; } .u { border-bottom: 1px solid; } strike { color: #d74d8b; } TEXTAREA { width: 110px; height: 30px; font: 7.5px verdana; color: #d74d8b; border: 1px solid #d74d8b; } a { color: #d74d8b; text-decoration: none; } a:hover { color: #333; border-bottom: 1px solid; } a.nav { width: 100px; background-color: #fcc8df; height: 25px; line-height: 25px; vertical-align: middle; text-align: center; color: #d74d8b; border: 2px solid #fa8ebf; display: block; } a.nav:hover { background-color: #fa8ebf; } </style> <center> <div id="container"> <div id="header"></div> <div id="content"> <div class="col1"> <h1>header here.</h1> <h2>header 2?</h2> <b>Bold.</b><br><i>Italics.</i><br><span class="u">Underline.</span><br><strike>Strike.</strike><br><a href="/">Link.</a><br><center> [textarea] textarea. [/textarea] </center> <br><br><b>*For any and all tables you make.*</b> Make sure you add <i>class="other</i> in the tags or otherwise the background will be light pink. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. <h1>header here.</h1> <h2>header 2?</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <div class="col2"> <h3>Navigation</h3> <table class="other"> <tr> <td> <a href="/" class="nav">Link</a> </td> <td> <a href="/" class="nav">Link</a> </td> </tr> <tr> <td> <a href="/" class="nav">Link</a> </td> <td> <a href="/" class="nav">Link</a> </td> </tr> </table> <h3>sidebar header</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. <h3>credits</h3> Layout&CSS by <a href="/~eightiseven">Eight Is Even</a>.</div> </div> <br><br><br> </div> </center>		<style> body { background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/boribackground.png"); background-repeat: repeat-x; background-position: top center; background-color: #c64d4d; font: 11px century gothic; color: #333333; } #container { top: 0px; margin-left: 0px; margin-right: 0px; width: 800px; } #header { float: left; background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/boriheader.png"); height: 300px; width: 800px; border: 0px; margin-top: -14px; z-index: 1; } #content { float: left; background: #c64d4d; width: 750px; margin-left: 25px; } .col1 { width: 460px; padding: 10px; top: 0px; left: 0px; text-align: left; float: left; } .col2 { width: 210px; padding: 10px; top: 0px; text-align: left; float: right; } table { background: none; font: 11px century gothic; color: #333; z-index: 2; } table.other { background: none; } h1 { color: #790000; font: 20px century gothic; font-weight: bolder; text-transform: lowercase; letter-spacing: 3px; margin-bottom: 10px; background-color: #9c2020; height: 5px; line-height: 5px; margin-top: 20px; padding-bottom: 3px; } h2 { color: #790000; font: 9px century gothic; font-weight: lighter; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; margin-top: -10px; text-align: right; } h3 { color: #9c2020; font: 20px century gothic; font-weight: bolder; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 5px; text-align: center; margin-top: 10px; } b { color: #790000; } i { color: #790000; } .u { border-bottom: 1px solid; } strike { color: #790000; } TEXTAREA { width: 110px; height: 30px; font: 7.5px verdana; color: #9c2020; border: 1px solid #9c2020; } a { color: #e97979; text-decoration: none; } a:hover { color: #333; border-bottom: 1px solid; } a.nav { width: 100px; background-color: #9c2020; height: 25px; line-height: 25px; vertical-align: middle; text-align: center; color: #790000; border: 2px solid #790000; display: block; } a.nav:hover { background-color: #e97979; } </style> <center> <div id="container"> <div id="header"></div> <div id="content"> <div class="col1"> <h1>header here.</h1> <h2>header 2?</h2> <b>Bold.</b><br><i>Italics.</i><br><span class="u">Underline.</span><br><strike>Strike.</strike><br><a href="/">Link.</a><br><center> [textarea] textarea. [/textarea] </center> <br><br><b>*For any and all tables you make.*</b> Make sure you add <i>class="other</i> in the tags or otherwise the background will be light pink. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. <h1>header here.</h1> <h2>header 2?</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <div class="col2"> <h3>Navigation</h3> <table class="other"> <tr> <td> <a href="/" class="nav">Link</a> </td> <td> <a href="/" class="nav">Link</a> </td> </tr> <tr> <td> <a href="/" class="nav">Link</a> </td> <td> <a href="/" class="nav">Link</a> </td> </tr> </table> <h3>sidebar header</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. <h3>credits</h3> Layout&CSS by <a href="/~eightiseven">Eight Is Even</a>.</div> </div> <br><br><br> </div> </center>
<style> body { background-color: #ededed; font: 9px verdana; line-height: 14px; color: #333; } table { font: 9px verdana; color: #333; text-align: left; } #topper { background-color: black; top: 0px; left: 0px; width: 100%; height: 25px; color: white; } b.topper { color: white; font: 25px Georgia; text-transform: uppercase; letter-spacing: 4px; line-height: 25px; height: 25px; margin-left: 40px; margin-right: 100px; } a.topper { color: white; line-height: 25px; height: 25px; vertical-align: bottom; padding-left: 10px; padding-right: 10px; font-weight: lighter; text-transform: lowercase; font: 12px georgia; } a.topper:hover { color: #c07d4b; font-style: italic; } #content { width: 500px; padding: 10px; background-color: white; top: 40px; margin-left: 0px; margin-right: 0px; text-align: left; } a { text-decoration: none; color: #066c5c; } a:hover { color: #c07d4b; } h1 { text-align: left; margin-bottom: -5px; text-transform: uppercase; letter-spacing: 2px; color: #333; font: 18px Georgia; } h2 { text-align: right; margin-bottom: -5px; text-transform: uppercase; letter-spacing: 2px; color: #333; font: 18px Georgia; } h3 { text-transform: uppercase; letter-spacing: 2px; font: 22px Georgia; text-align: center; border-bottom: 1px solid #066c5c; color: #666; margin-bottom: 5px; margin-top: 15px; } b { color: #e8d582; } i { color: #22c3d1; } .u { color: #c07d4b; border-bottom: 1px solid #c07d4b; } strike { color: #22c3d1; } b.date { color: #22c3d1; font: 12px georgia; font-weight: normal; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #333; font: 7.5px verdana; } </style> <div id="topper" style="position: absolute;"> <b class="topper">Site Title</b> <a href="/" class="topper">Home</a> <a href="/" class="topper">Link 1</a> <a href="/" class="topper">Link 2</a> <a href="/" class="topper">Link 3</a> <a href="/" class="topper">Link 4</a> </div> <center> <br><br><br><br><div id="content"> <table><tr> <td width="240" valign="top"> <h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. </td> <td width="10"></td> <td width="240" valign="top"> <h2>Updates</h2> <div style="width: 100%; height: 150px; border: 2px solid #333; overflow: auto; padding: 3px;"> <b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br> </div> </td> </tr></table> <br><br><h3>Header</h3> <b>Bold</b><br><i>Italics</i><br><span class="u">Underlined</span><br><strike>Strike</strike><br><a href="/">Link</a>. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><h3>header</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><br> </div> <br><br><div style="width: 520px; background-color: white;"> <center>All content © YOUR NAME HERE. Coding from <a href="/~eightiseven">Eight Is Even</a>.</center> </div> <br> </center>		<style> body { background-color: #1a0028; font: 9px verdana; line-height: 14px; color: #333; } table { font: 9px verdana; color: #333; text-align: left; background-color: #1a0028; } #content { width: 400px; padding: 10px; background-color: white; top: 40px; margin-left: 0px; margin-right: 0px; text-align: left; } #left { left: 50px; width: 200px; color: #ccc; } #right { right: 50px; width: 200px; color: #ccc; } b.title { font: 28px Trajan -blocked- Georgia; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 10px; color: #ac37ba; } .uno { border-bottom: 3px solid #cda60b; } .dos { border-bottom: 3px solid #80168d; } a.nav { width: 150px; height: 25px; line-height: 25px; text-align: center; vertical-align: middle; font: 14px georgia; text-transform: lowercase; letter-spacing: 1px; background-color: #80168d; border: 2px solid #ccc; color: #1a0028; display: block; margin: 1px; } a.nav:hover { background-color: #cda60b; } a { text-decoration: none; color: #ac37ba; } a:hover { color: #c07d4b; } h1 { text-align: left; margin-bottom: -5px; text-transform: uppercase; letter-spacing: 2px; color: #80168d; font: 18px Georgia; } h2 { text-align: right; margin-bottom: -5px; text-transform: uppercase; letter-spacing: 2px; color: #80168d; font: 18px Georgia; } h3 { text-transform: uppercase; letter-spacing: 2px; font: 22px Georgia; text-align: center; border-bottom: 1px solid #1a0028; color: #666; margin-bottom: 5px; margin-top: 15px; } b { color: #cda60b; } i { color: #1a0028; } .u { color: #80168d; border-bottom: 1px solid #80168d; } strike { color: #80168d; } b.date { color: #cda60b; font: 12px georgia; font-weight: normal; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #333; font: 7.5px verdana; } </style> <div id="left" style="position: fixed;"> <b class="title">S<span class="uno">ite Ti</span><span class="dos">tle</span></b> <br><h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. </div> <div id="right" style="position: fixed;"> <center> <a href="/" class="nav">Home</a> <a href="/" class="nav">Link 1</a> <a href="/" class="nav">Link 2</a> <a href="/" class="nav">Link 3</a> <a href="/" class="nav">Link 4</a> </center> <br><br><h2>Updates</h2> <div style="width: 100%; height: 150px; overflow: auto; padding: 3px;"> <b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br><b class="date">date//</b> update here.<br> </div> </div> <center> <div id="content"> <h3>Header</h3> <b>Bold</b><br><i>Italics</i><br><span class="u">Underlined</span><br><strike>Strike</strike><br><a href="/">Link</a>. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><h3>header</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><br> </div> <br><br><div style="width: 420px; background-color: white;"> <center>All content © YOUR NAME HERE. Coding from <a href="/~eightiseven">Eight Is Even</a>.</center> </div> <br> </center>		<style> body { background-color: white; font: 14px times; line-height: 16px; color: #999; letter-spacing: 1px; } table { font: 12px times; color: #333; text-align: left; background-color: -blocked-; } #content { width: 700px; padding: 10px; background-color: white; top: 40px; margin-left: 0px; margin-right: 0px; text-align: left; } #left { left: 50px; width: 200px; color: #ccc; } #right { right: 50px; width: 200px; color: #ccc; } b.title { font: 50px times; letter-spacing: 10px; text-transform: capitalize; margin-bottom: 10px; color: #999; } b.title:hover { color: #fb98d2; } a.nav { font: 14px times; text-transform: lowercase; letter-spacing: 1px; padding: 5px; font-style: italic; color: #666; padding-left: 10px; padding-right: 10px; } a.nav:hover { background-color: #ededed; } a { text-decoration: none; color: #666; } a:hover { background-color: #fb98d2; } h1 { text-transform: lowercase; letter-spacing: 2px; font: 22px times; text-align: left; color: #666; margin-bottom: 10px; margin-top: 25px; font-style: italic; width: 300px; margin-left: 10px; } .uno { border-bottom: 1px solid #fb98d2; } .dos { border-bottom: 1px solid #ccc; margin-right: 10px; } .tres { color: white; } b { color: #666; } i { color: #333; } .u { color: #ccc; border-bottom: 1px solid #ccc; } strike { color: #666; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #333; font: 7.5px verdana; } </style> <center> <b class="title">Site Title</b> <br><a href="/" class="nav">001. Home</a> <a href="/" class="nav">002. Link 1</a> <a href="/" class="nav">003. Link 2</a> <a href="/" class="nav">004. Link 3</a> <a href="/" class="nav">005. Link 4</a> </center> <br><br><center> <div id="content"> <h1>H<span class="uno">ea</span><span class="dos">der <span class="tres">filler</span></span> </h1> <b>Bold</b><br><i>Italics</i><br><span class="u">Underlined</span><br><strike>Strike</strike><br><a href="/">Link</a>. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><h1>H<span class="uno">ea</span><span class="dos">der <span class="tres">filler</span></span> </h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis.<br><br> </div> <br><br><div style="width: 420px; background-color: white;"> <center>All content © YOUR NAME HERE. Coding from <a href="/~eightiseven">Eight Is Even</a>.</center> </div> <br> </center>
<style> body { background: black; font: 9px arial; color: #ededed; } #bar { background: white; width: 100%; height: 5px; left: 0px; top: 250px; } #container { top: 0px; margin-left: 0px; margin-right: 0px; width: 700px; height: 600px; } .title { font: 60 Times; color: #fff; font-style: italic; letter-spacing: 3px; background-color: black; padding-left: 20px; padding-right: 30px; float: left; padding-top: 205px; } .nav { padding-top: 180px; float: right; width: 250px; height: 50px; text-align: center; z-index: 2; top: 0px; } a.n img { width: 50px; height: 50px; border: 0px; padding-left: 5px; padding-right: 5px; } #main { top: 330px; left: 150px; width: 400px; text-align: left; overflow: hidden; height: 250px; } .section { width: 100%; height: 240px; overflow: auto; text-align: left; } h1 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #00aeef; margin-bottom: 5px; margin-top: 10px; } h2 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ec008c; margin-bottom: 5px; margin-top: 10px; } h3 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ffd200; margin-bottom: 5px; margin-top: 10px; } .star { color: #39b54a; } b { color: #ec008c; } i { color: #39b54a; } .u { color: #ccc; border-bottom: 1px solid #00aeef; } strike { color: #999; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #ec008c; overflow: hidden; font: 7.5pt verdana; } a { color: #00aeef; text-transform: uppercase; letter-spacing: 1px; } a:hover { color: #ffd200; } table { background: black; } </style> <center> <div id="bar" style="position: absolute;"></div> <div id="container" style="position: relative;"> <div class="title">Title<span class="star">*</span> </div> <div class="nav"> <a href="#home" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/home-blue.png"></a> <a href="#content" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/content-pink.png"></a> <a href="#sitely" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/me-yellow.png"></a> <a href="/userlookup.phtml?user=YOURUSERNAMEHERE" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/mail-green.png"></a> </div> <div id="main" style="position: absolute;"> <a name="home"></a> <div class="section"> <h1>Welcome</h1> <b>bold</b><br><i>italics</i><br><span class="u">underline</span><br><strike>strikethrough</strike><br><a href="/">link</a><br><br><br><center> (textarea) textarea (/textarea) </center> </div> <br><br><br><br><br><br><br><br><a name="content"></a> <div class="section"> <h2>Content</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br><a name="sitely"></a> <div class="section"> <h3>Sitely</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br> </div> </div> </center> <style> body { background: white; font: 9px arial; color: #333; } #bar { background: #333; width: 100%; height: 5px; left: 0px; top: 250px; } #container { top: 0px; margin-left: 0px; margin-right: 0px; width: 700px; height: 600px; } .title { font: 60 Times; color: #333; font-style: italic; letter-spacing: 3px; background-color: white; padding-left: 20px; padding-right: 30px; float: left; padding-top: 205px; } .nav { padding-top: 180px; float: right; width: 250px; height: 50px; text-align: center; z-index: 2; top: 0px; } a.n img { width: 50px; height: 50px; border: 0px; padding-left: 5px; padding-right: 5px; } #main { top: 330px; left: 150px; width: 400px; text-align: left; overflow: hidden; height: 250px; } .section { width: 100%; height: 240px; overflow: auto; text-align: left; } h1 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #00aeef; margin-bottom: 5px; margin-top: 10px; } h2 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ec008c; margin-bottom: 5px; margin-top: 10px; } h3 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ffd200; margin-bottom: 5px; margin-top: 10px; } .star { color: #39b54a; } b { color: #ec008c; } i { color: #39b54a; } .u { color: #ccc; border-bottom: 1px solid #00aeef; } strike { color: #999; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #ec008c; overflow: hidden; font: 7.5pt verdana; } a { color: #00aeef; text-transform: uppercase; letter-spacing: 1px; } a:hover { color: #ffd200; } table { background: black; } </style> <center> <div id="bar" style="position: absolute;"></div> <div id="container" style="position: relative;"> <div class="title">Title<span class="star">*</span> </div> <div class="nav"> <a href="#home" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/home-blue.png"></a> <a href="#content" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/content-pink.png"></a> <a href="#sitely" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/me-yellow.png"></a> <a href="/userlookup.phtml?user=YOURUSERNAMEHERE" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/mail-green.png"></a> </div> <div id="main" style="position: absolute;"> <a name="home"></a> <div class="section"> <h1>Welcome</h1> <b>bold</b><br><i>italics</i><br><span class="u">underline</span><br><strike>strikethrough</strike><br><a href="/">link</a><br><br><br><center> (textarea) textarea (/textarea) </center> </div> <br><br><br><br><br><br><br><br><a name="content"></a> <div class="section"> <h2>Content</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br><a name="sitely"></a> <div class="section"> <h3>Sitely</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br> </div> </div> </center> <style> body { background: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/woodfloor.jpg"); font: 9px arial; color: #333; } #bar { background: #333; width: 100%; height: 5px; left: 0px; top: 250px; } #container { top: 0px; margin-left: 0px; margin-right: 0px; width: 700px; height: 600px; } .title { font: 60 Times; color: #333; font-style: italic; letter-spacing: 3px; background: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/woodfloor.jpg"); padding-left: 20px; padding-right: 20px; float: left; padding-top: 205px; background-position: center; z-index: 1; margin-left: 50px; padding-bottom: 100px; } .nav { padding-top: 180px; float: right; width: 250px; height: 50px; text-align: center; z-index: 2; top: 0px; } a.n img { width: 50px; height: 50px; border: 0px; padding-left: 5px; padding-right: 5px; } #main { top: 330px; left: 150px; width: 400px; text-align: left; overflow: hidden; height: 250px; z-index: 2; } .section { width: 100%; height: 240px; overflow: auto; text-align: left; } h1 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #00aeef; margin-bottom: 5px; margin-top: 10px; } h2 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ec008c; margin-bottom: 5px; margin-top: 10px; } h3 { font: 20px century gothic; letter-spacing: -2px; text-transform: uppercase; border-bottom: 1px solid #ffd200; margin-bottom: 5px; margin-top: 10px; } .star { color: #39b54a; } b { color: #ec008c; } i { color: #39b54a; } .u { color: #ccc; border-bottom: 1px solid #00aeef; } strike { color: #999; } TEXTAREA { width: 110px; height: 30px; border: 1px solid #ec008c; overflow: hidden; font: 7.5pt verdana; } a { color: #00aeef; text-transform: uppercase; letter-spacing: 1px; } a:hover { color: #ffd200; } table { background: black; } </style> <center> <div id="bar" style="position: absolute;"></div> <div id="container" style="position: relative;"> <div class="title">Title<span class="star">*</span> </div> <div class="nav"> <a href="#home" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/home-blue.png"></a> <a href="#content" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/content-pink.png"></a> <a href="#sitely" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/me-yellow.png"></a> <a href="/userlookup.phtml?user=YOURUSERNAMEHERE" class="n"><img src="http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/mail-green.png"></a> </div> <div id="main" style="position: absolute;"> <a name="home"></a> <div class="section"> <h1>Welcome</h1> <b>bold</b><br><i>italics</i><br><span class="u">underline</span><br><strike>strikethrough</strike><br><a href="/">link</a><br><br><br><center> (textarea) textarea (/textarea) </center> </div> <br><br><br><br><br><br><br><br><a name="content"></a> <div class="section"> <h2>Content</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br><a name="sitely"></a> <div class="section"> <h3>Sitely</h3> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi purus diam, tempus sit amet mollis nec, tincidunt vitae enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam justo eros, imperdiet id aliquet eu, dapibus nec metus. Nunc mi dui, sodales sit amet tincidunt et, condimentum ac odio. Praesent sit amet aliquet metus. Pellentesque sagittis hendrerit malesuada. Praesent sed nisl metus. Aliquam sed imperdiet urna. Proin ultrices, tellus sed venenatis tempor, nibh urna hendrerit risus, ut scelerisque sapien nisi at felis. Nulla facilisi. </div> <br><br><br><br><br><br><br><br> </div> </div> </center>

Pet Lookups

<style> body { background: white; } body, td, p { font-family: verdana; font-size: 10px; color: #333333; } #header { width: 600px; height: 150px; background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/tuskaninee.png"); border: 0px; margin-left: 17px; padding-top: 15px; background-position: bottom center; background-repeat: no-repeat; background-color: transparent; } .contentModuleHeader, h1 { color: #a15dec; font-family: century gothic; font-size: 10px; background: none; text-transform: uppercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; border-bottom: 1px solid; line-height: 10px; height: 10px; vertical-align: bottom; } .contentModuleHeader:hover { color: #ff8be8; cursor: default; } h1:hover { color: #ff8be8; cursor: default; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: #ededed; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #ban, .eventIcon, .sf, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay, .sidebar, .contentModuleContent td img, .contentModuleHeaderAlt { display: none; } #main, #content { background: #ededed; width: 635px; border: 0px; margin-top: 20px; } #main a, a, a b { color: #4bdeff; font-weight: bold; text-transform: uppercase; } #main a:hover { color: #51d192; } a b:hover { color: #51d192; } b { color: #457ee7; } i { color: #51d192; } b hover { color: #ff8be8; } .contentModuleContent div img { display: inline; } #pet_rating { display: none !important; } table { width: 300px; } img { border: 0px; } </style> <h1>pet name.</h1> Layout & CSS by <a href="/~eightiseven">Eight Is Even</a>. <style> body { background: #1e1e1e; } body, td, p { font-family: verdana; font-size: 10px; color: #ededed; } #header { width: 600px; height: 150px; background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/petpets.png"); border: 0px; margin-left: 17px; padding-top: 15px; background-position: bottom center; background-repeat: no-repeat; background-color: transparent; } .contentModuleHeader, h1 { color: #d8486b; font-family: century gothic; font-size: 10px; background: none; text-transform: uppercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; border-bottom: 1px solid; line-height: 10px; height: 10px; vertical-align: bottom; } .contentModuleHeader:hover { color: #680b4a; cursor: default; } h1:hover { color: #680b4a; cursor: default; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: none; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #ban, .eventIcon, .sf, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay, .sidebar, .contentModuleContent td img, .contentModuleHeaderAlt { display: none; } #main, #content { background: #333; width: 635px; border: 0px; margin-top: 20px; } #main a, a, a b { color: #528763; font-weight: bold; text-transform: uppercase; } #main a:hover { color: #324470; } a b:hover { color: #324470; } b { color: #92b681; } i { color: #51d192; } b:hover { color: #680b4a; } .contentModuleContent div img { display: inline; } #pet_rating { display: none !important; } table { width: 300px; } img { border: 0px; } </style> <h1>pet name.</h1> Layout & CSS by <a href="/~eightiseven">Eight Is Even</a>. <style> body { background: #ccc; } body, td, p { font-family: verdana; font-size: 10px; color: #333; } #header { width: 600px; height: 150px; background-image: url("http://i813.photobucket.com/albums/zz54/ohhemjayy/8i7neo/autumn.png"); border: 0px; margin-left: 17px; padding-top: 15px; background-position: bottom center; background-repeat: no-repeat; background-color: transparent; } .contentModuleHeader, h1 { color: #c46e46; font-family: century gothic; font-size: 10px; background: none; text-transform: uppercase; letter-spacing: 3px; font-weight: lighter; padding-left: 10px; border-bottom: 1px solid; line-height: 10px; height: 10px; vertical-align: bottom; } .contentModuleHeader:hover { color: #e3441d; cursor: default; } h1:hover { color: #e3441d; cursor: default; } .contentModule { border: 0px; } .contentModuleTable { border: 0px; } .contentModuleContent { border: 0px; background: none; } #footer, .footerNifty, hr, #nst, #template_nav, .user, #ban, .eventIcon, .sf, #ban_bottom, .ad_wrapper_fixed, .adBox2, .adBox, .footOverlay, .sidebar, .contentModuleContent td img, .contentModuleHeaderAlt { display: none; } #main, #content { background: #ededed; width: 635px; border: 0px; margin-top: 20px; } #main a, a, a b { color: #ae7f3b; font-weight: bold; text-transform: uppercase; } #main a:hover { color: #f8e664; } a b:hover { color: #f8e664; } b { color: #c46e46; } i { color: #e3441d; } b:hover { color: #e3441d; } .contentModuleContent div img { display: inline; } #pet_rating { display: none !important; } table { width: 300px; } img { border: 0px; } </style> <h1>pet name.</h1> Layout & CSS by <a href="/~eightiseven">Eight Is Even</a>.