FP-style Layout
CSS
body{
background-color: #e2c395; background-image: url(http://imageshack.com/a/img853/2685/ldew.png); color: #000; font-family:Century Gothic, Gill Sans MT, arial;} p:first-letter { font-size: 30px; float: left; margin: 5px 10px 0 0; line-height: 0.8;; text-decoration:bold;} a:link, a:visited, a:active {color: #ac7f59; font-family:Century Gothic, Gill Sans MT, arial; font-size: 12; } a:hover{ color: #8c6d4f; text-decoration:none;} .shadow:link { color: #d8b17d; font: bold 30px Century Gothic, Gill Sans MT, Arial; text-shadow: 1px 1px #452709, 2px 2px #452709, 3px 3px #452709; -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -ms-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; } .shadow:hover { position: relative; top: -3px; left: -3px; text-shadow: 1px 1px #452709, 2px 2px #452709, 3px 3px #452709, 4px 4px #452709, 5px 5px #452709, 6px 6px #452709; } h1{ font:15pt Century Gothic, Gill Sans MT, arial; color:#c39860; letter-spacing:2pt; text-align: left; border-bottom: dashed 2px #452709} h1:first-letter{ color:#a07b4c;} h2{ font:15pt Century Gothic, Gill Sans MT, arial; color:#FFFFFF; background-color:#452709; text-transform:uppercase; letter-spacing:2pt;} .topbanner { position: fixed; top: 0; left: 0; border-top: 0px solid #3c9a35; background: none; z-index: 999;} .nav:link, .nav:visited {font: 12pt Century Gothic, Gill Sans MT, arial; color: #0a2306; text-align:center; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; padding: 0; } .nav:hover {font: 12pt Century Gothic, Gill Sans MT, arial; color: #FFFFFF; text-align:center; text-shadow: -1px 1px 5px #452709, 1px -1px 5px #452709; padding: 0;} .topbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; font-size:10pt; background-color:#f6ecde; overflow: auto; position: absolute; top: 11470px; left: 142px; width: 1060px; height: 260px; border:8px solid #452709; border-radius:10px; } .leftbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; font-size:10pt; background-color:#f6ecde; overflow: stretch; position: absolute; top: 11760px; left: 140px; width: 500px; border:8px solid #452709; border-radius:10px; } .rightbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; font-size:10pt; background-color:#f6ecde; overflow: stretch; position: absolute; top: 11760px; left: 700px; width: 500px; border:8px solid #452709; border-radius:10px; } .navbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; background-color:#f6ecde; font-size:10pt; overflow: stretch; position: absolute; top: 11420px; left: 142px; width: 1060px; border:8px solid #452709; border-radius:10px; } .highlight img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity: 0.6; opacity: 0.6;} .highlight:hover img{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; opacity: 1;} div#fpaw_layout_column_2 {overflow: visible;} div#fpaw_layout_holder {top: -11350px;float: none;position: relative;margin: 0px 0px 0px 0px;left: 0px;float: left;} .text_logout, #fpaw_layout_column_1, fpaw_layout_column_3, #top_bar, #fpaw_layout_footer, #fpaw_layout_inner_footer, #fpaw_layout_footer_text, .footer_legal, fpaw_layout_footer_section, .fpaw_layout_footer_subsection {display: none;} |
HTML (description)
<a class="topbanner" href="#top"><img
src="http://imageshack.com/a/img18/1539/p4xd.png" alt="Kennel Banner"
style="border:0px solid;" /></a>
<div class="navbox"> <div style="text-align:center;"> <a class="nav" href="http://furry-paws.com/kennel"><b>Your Kennel</b></a> - <a href="http://www.furry-paws.com/kennel/index/000000" class="nav"><b>Our Dogs</b></a> - <a href="http://www.furry-paws.com/explore" class="nav"><b>Atlas</b></a> - <a href="http://www.furry-paws.com/shop" class="nav"><b>Market</b></a> - <a href="http://www.furry-paws.com/forum" class="nav"><b>Chat</b></a> - <a href="http://www.furry-paws.com/search" class="nav"><b>Search</b></a> - <a href="http://www.furry-paws.com/news" class="nav"><b>News</b></a> - <a href="http://www.furry-paws.com/help/kb" class="nav"><b>Help</b></a> - <a class="nav" href="http://www.furry-paws.com/kennel/owner/000000"><b>Owner</b></a> - <a href="http://www.furry-paws.com/message/compose/000000" class="nav"><b>Message Me</b></a> - <a href="http://www.furry-paws.com/meadow/tomb" class="nav"><b>Tomb</b></a> </div> </div> <div class="topbox"> <a class="shadow" href="#">Welcome! This is a Fancy Header</a> <br><bR><a href=http://crestieslayouts.webs.com/afurrypawslayout.htm><b>Click here to get the code for this layout!</b></a><br><br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /><br /></div> <div class="leftbox"> <div style="text-align:center;"> <a class="highlight" href="#top"><img src="http://i994.photobucket.com/albums/af68/crestielover/HighlightImageTester.png" alt="Test Image" title="Test" style="border:0px solid;float:right;" /></a> <h1>Header 1</h1> <h2>Header 2</h2> <b>Bold.</b> <i>Italic.</i> <span style="text-decoration:underline;">Underline.</span> <a href="#top">Test Link</a>.<br /><br /> The image to the right is to test the highlight feature. When you hover over it, it should be in full color. You can use this for any image by linking putting the "class=highlight" in between the "a href". If you don't actually want the image to link anywhere, just link it to "#top", which will bring you to the top of the page when clicked on.<br /> This layout is optimized for Google Chrome and screens at 1440x900 or 1366x768. <br /><br /></div></div> <div class="rightbox"> <div style="text-align:center;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><br /><br /> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br><br><sub>Layout design and coding by <a href="http://www.furry-paws.com/kennel/owner/740384">Crestie</a></sub><br /><a href="#top"><b><img src="http://img855.imageshack.us/img855/4254/ixiq.png" alt="ixiq.png" style="border:0px solid;" />Back to Top</b></a></p> <br /></div></div> |