FOR CALICO: VIEW LIVE DEMO
<style> body { background: #e8bb31; overflow: auto; font-family: verdana; font-size: 10px; line-height: 11px; color: #666; text-transform: none; } #pic { left: 0px; top: 0px; z-index: -1; } a:link, a:visited, a:active { font-size: 10px; line-height: 11px; color: #925b60; text-decoration: none; font-family: verdana; } a:hover { color: #ca6840; letter-spacing: 2px; } table { background-color: transparent; } table a img { display: none; } .sf { display: none; } h1 { font-weight: bold; font-family: georgia; text-align: left; color: #d5862f; padding-left: 15px; text-transform: lowercase; line-height: 22px; font-size: 20px; background: #fbb51a; font-style: italic; letter-spacing: -1px; border-bottom: 5px solid #e8cc76; } h2 { font: 10pt Tahoma bold; text-transform: uppercase; letter-spacing: 1px; text-align: right; border-right: 10px solid #fbb51a; color: #975f64; padding-right: 5px; } .updatebox { width: 560px; height: 120px; overflow: auto; text-align: justify; background-color: #ffffff; border: 1px solid #a26b4a; padding: 5px; } #content { width: 616px; height: 318px; top: 360px; left: 103px; background-color: #ffffff; overflow: hidden; } .box { width: 616px; height: 318px; top: 360px; left: 103px; overflow: auto; text-align: justify; background-color: #ffffff; } #links { width: 258px; height: 200px; top: 289px; left: 750px; overflow: auto; } #linkbacks { width: 677px; height: 107px; top: 753px; left: 66px; overflow: auto; } #notepad { width: 227px; height: 215px; top: 515px; left: 751px; background: url("http://fc03.deviantart.net/fs15/i/2007/073/c/6/Lines_paper_by_Ginnyhaha_Stock.jpg"); overflow: hidden; } .nav a:link, .nav a:visited { font: 10pt Tahoma bold; color: #ffd072; letter-spacing: 4px; background-color: #e7a11b; text-align: center; padding: 5px; width: 150px; text-decoration: none; text-transform: uppercase; } .nav a:hover { color: #fba711; background-color: #f2b859; } b { color: #d5862f; } font.u { color: #fe9323; text-decoration: underline; } i { color: #cd7433; } </style> <br><br><img src="http://i705.photobucket.com/albums/ww51/rhokaima/BB.png" id="pic" style="position: absolute;"><div id="linkbacks" style="position: absolute; padding: 10px;"> <p> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> <a href="/~drewcurtis"><img src="http://i498.photobucket.com/albums/rr350/superbubblet/88BY31/builttolast.gif" border="0"></a> </p> </div> <div id="notepad" style="position: absolute; padding: 10px;"> <h1>notepad</h1> <p> Place the text here! </p> </div> <div id="links" style="position: absolute;"> <div class="nav"> <p></p> <center> <p><a href="#home">Home</a> <a href="#link%202">link 2</a> <a href="#link%203">link 3</a> </p> <p><br><br><a href="#link%204">link 4</a> <a href="#link%205">link 5</a> <a href="#link%206">link 6</a> </p> <p><br><br><a href="#link%207">link 7</a> <a href="#link%208">link 8</a> <a href="#sitely">Sitely</a></p> </center> </div> </div> <div id="content" style="position: absolute;"> <a name="home"></a> <div class="box"><div style="padding: 10px;"> <h1> Welcome</h1> <p>You can change the color of the headers, nav links/links, and etc to your liking. </p> <p> <b>bold</b>. <a href="http://www.neopets.com/userlookup.phtml?user=o_kasimir_o">link link</a>. <font class="u">underline u got that?</font> <i>italic bby</i> </p> <p> <a href="http://www.neopets.com/userlookup.phtml?user=o_kasimir_o">neomail me?</a> if you have any questions/comments. </p> <h2>UPDATES</h2> <div class="updatebox" style="position: absolute;"> <p></p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div> </div></div> <a name="link 2"></a> <div class="box"><div style="padding: 10px;"> <h1> rules are rules</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </div></div> <a name="link 3"></a> <div class="box"><div style="padding: 10px;"> <h1>Request?</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="link 4"></a> <div class="box"><div style="padding: 10px;"> <h1> page 4</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="link 5"></a> <div class="box"><div style="padding: 10px;"> <h1> page 5</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="link 6"></a> <div class="box"><div style="padding: 10px;"> <h1> page 6</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="link 7"></a> <div class="box"><div style="padding: 10px;"> <h1> page 7</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="link 8"></a> <div class="box"><div style="padding: 10px;"> <h1> page 8</h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam vitae nunc. Nullam eleifend ultricies nibh. Mauris ut augue. Praesent placerat dui non nulla. Suspendisse a est non erat ullamcorper ultricies. Proin rutrum turpis non nisl. Curabitur eros. Suspendisse metus. Nam varius odio non nibh. Nam posuere volutpat leo. Ut quis urna. Aenean convallis. Quisque ac lacus vel nisi blandit placerat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue orci ac leo. Morbi ultricies nonummy lacus. Nulla varius risus a nunc. Aenean ornare augue ut leo. Ut nec augue. </div></div> <a name="sitely"></a> <div class="box"><div style="padding: 10px;"> <h1> Sitely</h1> <h2>Credit</h2> <p> Layout created by <a href="http://www.neopets.com/userlookup.phtml?user=o_kasimir_o">Melody</a> @ <a href="/~drewcurtis">Built to Last</a> for <b>Beyond Beauty</b> use only! <br>Images from <i>neopets.com</i>. <br> Textures and notepad background used from their respective owners found in <i>deviantArt</i>. </p> </div></div> </div>