● Home

Welcome to your new layout from Essence! I hope you like it! If you have any questions about the coding, or if you would like me to make any changes, get in touch! Feel free to edit the coding as much as you like, but please do not remove the credit! This is bold. This is italic.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna.

Codes Your code is below! Remember to change the brackets for the textareas afterwards (: if you have any problems please let me know!

Pick up your layout <style> .sf { display: none; } table { background: transparent; } a img { border: 0; } body { padding: 0; margin-top: -30px; background: url("http://imageshack.us/a/img826/2194/lightgradbg.png") repeat-x #EDF3F6; } font, body, td { color: #666; font: 12px calibri; line-height: 15px; } b { color: #6096A3; text-transform: uppercase; } i { color: #CFC7AB; font: 8pt georgia; font-style: italic; } a:link, a:visited, a:active { color: #99BCC5; text-decoration: none; font-weight: bold; } a:hover { color: #65817A; text-decoration: none; } .layout { top: 0px; left: 0px; z-index: -1; } #content { top: 328px; left: 124px; padding: 0 8px 8px 8px; width: 515px; height: 390px; overflow: hidden; } .page { width: 515px; height: 390px; overflow: auto; margin-bottom: 50px; } #side { top: 327px; left: 663px; padding: 0 8px 8px 8px; width: 135px; height: 390px; overflow: hidden; } .subnav { width: 130px; height: 390px; overflow: auto; margin-bottom: 50px; } #nav { top: 285px; left: 165px; height: 35px; width: 645px; } .nav1, .nav2, .nav3, .nav4, .nav5, .nav6 { display: block; float: left; background-position: center; } a.nav1:link, a.nav1:active, a.nav1:visited { width: 88px; height: 34px; background-image: url("http://imageshack.us/a/img855/1811/lightnav01.png"); } a.nav1:hover { width: 88px; height: 34px; background-image: url("http://imageshack.us/a/img23/9352/lightnavalt01.png"); } a.nav2:link, a.nav2:active, a.nav2:visited { width: 103px; height: 34px; background-image: url("http://imageshack.us/a/img10/8275/lightnav02.png"); } a.nav2:hover { width: 103px; height: 34px; background-image: url("http://imageshack.us/a/img580/4348/lightnavalt02.png"); } a.nav3:link, a.nav3:active, a.nav3:visited { width: 115px; height: 34px; background-image: url("http://imageshack.us/a/img829/4958/lightnav03.png"); } a.nav3:hover { width: 115px; height: 34px; background-image: url("http://imageshack.us/a/img854/5112/lightnavalt03.png"); } a.nav4:link, a.nav4:active, a.nav4:visited { width: 92px; height: 34px; background-image: url("http://imageshack.us/a/img24/691/lightnav04.png"); } a.nav4:hover { width: 92px; height: 34px; background-image: url("http://imageshack.us/a/img809/9944/lightnavalt04.png"); } a.nav5:link, a.nav5:active, a.nav5:visited { width: 123px; height: 34px; background-image: url("http://imageshack.us/a/img823/1586/lightnav05.png"); } a.nav5:hover { width: 123px; height: 34px; background-image: url("http://imageshack.us/a/img13/3636/lightnavalt05.png"); } a.nav6:link, a.nav6:active, a.nav6:visited { width: 101px; height: 34px; background-image: url("http://imageshack.us/a/img59/9849/lightnav06.png"); } a.nav6:hover { width: 101px; height: 34px; background-image: url("http://imageshack.us/a/img577/3571/lightnavalt06.png"); } h1 { font: 20px constantia; font-style: italic; margin: 0 5px 5px 0; padding: 5px; line-height: 15px; color: #6096A3; } .dot { color: #E4DCC7; } h5 { font: 12px tahoma; text-transform: uppercase; font-weight: bold; color: #837957; margin: 0 5px 15px 0; text-align: center; } .sublink { font: 8pt georgia; line-height: 10px; color: #444; font-weight: bold; border-bottom: 2px solid #A6BEBE; display: block; width: 130px; height: 12px; margin: 4px 0; } textarea { color: #666; font: 10px courier; background: #F4F7F8; border: 1px solid #ccc; width: 88px; height: 20px; } ul li { list-style-image: url("http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/bul37.png"); } </style> <div id="nav" style="position: absolute;"> <a href="#home" class="nav1"></a> <a href="#about" class="nav2"></a> <a href="#projects" class="nav3"></a> <a href="#pets" class="nav4"></a> <a href="#personal" class="nav5"></a> <a href="#sitely" class="nav6"></a> </div> <div id="side" style="position: absolute;"> <div class="subnav" id="main"> <h5>Navigation</h5> This is where your sub-navigation will go. <br><br><a href="#aboutme" class="sublink">Example page</a> <a href="#PAGE" class="sublink">Sub-link 2</a> <a href="#PAGE" class="sublink">Sub-link 3</a> </div> <div class="subnav" id="about"> <h5>About Me</h5> <a href="#PAGE" class="sublink">Sub-link 1</a> <a href="#PAGE" class="sublink">Sub-link 2</a> <a href="#PAGE" class="sublink">Sub-link 3</a> <p style="float: right;"><a href="#main">back?</a></p> </div> <div class="subnav" id="projects"> <h5>Projects</h5> <a href="#PAGE" class="sublink">Sub-link 1</a> <a href="#PAGE" class="sublink">Sub-link 2</a> <a href="#PAGE" class="sublink">Sub-link 3</a> <p style="float: right;"><a href="#main">back?</a></p> </div> <div class="subnav" id="pets"> <h5>Pets</h5> <a href="#PAGE" class="sublink">Sub-link 1</a> <a href="#PAGE" class="sublink">Sub-link 2</a> <a href="#PAGE" class="sublink">Sub-link 3</a> <p style="float: right;"><a href="#main">back?</a></p> </div> <div class="subnav" id="personal"> <h5>Personal</h5> <a href="#PAGE" class="sublink">Sub-link 1</a> <a href="#PAGE" class="sublink">Sub-link 2</a> <a href="#PAGE" class="sublink">Sub-link 3</a> <p style="float: right;"><a href="#main">back?</a></p> </div> </div> <div id="content" style="position: absolute;"> <div class="page" id="home"> <h1> <i>●</i> Home</h1> Welcome to your new layout from <a href="/~aretya">Essence</a>! I hope you like it! If you have any questions about the coding, or if you would like me to make any changes, get in touch! Feel free to edit the coding as much as you like, but please do not remove the credit! <b>This is bold</b>. <i>This is italic</i>. <br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. <br><br><center><a href="http://www.neopets.com/~la_roque"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d38.png" border="0"></a></center> <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. </div> <div class="page" id="aboutme"> <h1> <i>●</i> About Me</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. <br><br><center><a href="http://www.neopets.com/~la_roque"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/TLB/Resources/d38.png" border="0"></a></center> <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. </div> <div class="page" id="sitely"> <h1> <i>●</i> Sitely</h1> <b>Link back?</b> <br><br><center> <table width="80%"><tr> <td width="25%"> <img src="http://i1092.photobucket.com/albums/i405/rico_suave_3113/Black6.png" border="0"><br>(textarea)put some buttons here(/textarea) </td> <td width="25%"> <img src="http://i1092.photobucket.com/albums/i405/rico_suave_3113/Black6.png" border="0"><br>(textarea)put some buttons here(/textarea) </td> <td width="25%"> <img src="http://i1092.photobucket.com/albums/i405/rico_suave_3113/Black6.png" border="0"><br>(textarea)put some buttons here(/textarea) </td> <td width="25%"> <img src="http://i1092.photobucket.com/albums/i405/rico_suave_3113/Black6.png" border="0"><br>(textarea)put some buttons here(/textarea) </td> </tr></table> </center> <br><b>Credits</b> <ul> <li>Layout, icons and coding by <a href="/userlookup.phtml?user=plasticrose">Sarah</a> at <a href="/~aretya">Essence</a>.</li> <li>All content by <a href="/userlookup.phtml?user=river_valley37">Anna</a>. Theft will not be tolerated.</li> <li>Images belong to Neopets.com, found at <a href="/~Hawiku">Background Bonanza</a>.</li> <li>Textures from <i>Deviantart</i>, rope illustration from <i>ZCOOL</i>.</li> <li>Bullets and divider by <a href="/~solidarized">The Lunch Box</a>.</li> <li>Button placeholders by <a href="/~euphoric">Euphoric</a>.</li> </ul> <br> NEOPETS, characters, logos, names and all related indicia are trademarks of <a href="/">Neopets, Inc.</a>, © 1999-2013. All rights reserved. </div> </div> <img src="http://imageshack.us/a/img543/5140/lightlayout2.png" class="layout" style="position: absolute;">

Header code with dot: <h1> <i>●</i> Header</h1>

Page template: <div class="page" id="NAME"> </div>

<a href="/~aretya"><img src="http://imageshack.us/a/img823/5606/lighticon2.png"></a>

● About Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus hendrerit dignissim eleifend. Proin faucibus ipsum at turpis tempor dapibus eu mattis nibh. In hac habitasse platea dictumst. In ut leo sed dui eleifend viverra. In facilisis consectetur odio, dapibus mattis dui tincidunt eu. Proin tortor lacus, rutrum eu sagittis ut, condimentum vulputate magna.

● Sitely

Link back?

put some buttons here

put some buttons here

put some buttons here

put some buttons here

Credits

• Layout, icons and coding by Sarah at Essence.
• All content by Anna. Theft will not be tolerated.
• Images belong to Neopets.com, found at Background Bonanza.
• Textures from Deviantart, rope illustration from ZCOOL.
• Bullets and divider by The Lunch Box.
• Button placeholders by Euphoric.

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013. All rights reserved.