Fp-style b Layout
A different similar layout to the original FP inspired layout but with more textboxes for better organization.
DO NOT edit the CSS part unless you know what you're doing! This can mess up the layout! Features: - lots of textboxes for lots of organization - special textbox to show off your beautiful tags - FP-style color palette |
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; text-decoration: underline dashed; font-size: 13pt; } 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: 15pt 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: 16pt 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: 11420px; left: 200px; 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: auto; position: absolute; top: 11710px; left: 200px; height: 1250px; width: 430px; 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: auto; position: absolute; top: 11710px; left: 660px; width: 600px; height: 500px; border:8px solid #452709; border-radius:10px; } .lastbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; font-size:10pt; background-color:#f6ecde; overflow: auto; position: absolute; top: 12240px; left: 660px; width: 600px; height: 600px; border:8px solid #452709; border-radius:10px; } .creditbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; font-size:10pt; background-color:#f6ecde; overflow: auto; position: absolute; top: 12870px; left: 660px; width: 600px; height: 60px; border:8px solid #452709; border-radius:10px; } .arrowbox { position: fixed; bottom: 0; left: 75px; border-top: 0px solid #3c9a35; background: none; z-index: 999;} .tagbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; background-color:#f6ecde; font-size:10pt; overflow: stretch; position: absolute; top: 11750px; left: 20px; width: 150px; border:8px solid #452709; border-radius:10px; } .navbox { font-family: Century Gothic, Gill Sans MT, arial; color: #160a00; background-color:#f6ecde; font-size:12pt; overflow: stretch; position: absolute; top: 11420px; left: 20px; width: 150px; height: 300px; 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> <br /><a href="http://www.furry-paws.com/kennel/index/000000" class="nav"><b>Our Dogs</b></a><br /><a href="http://www.furry-paws.com/explore" class="nav"><b>Atlas</b></a> <br /><a href="http://www.furry-paws.com/shop" class="nav"><b>Market</b></a> <br /><a href="http://www.furry-paws.com/forum" class="nav"><b>Chat</b></a> <br /><a href="http://www.furry-paws.com/search" class="nav"><b>Search</b></a> <br /><a href="http://www.furry-paws.com/news" class="nav"><b>News</b></a> <br /><a href="http://www.furry-paws.com/help/kb" class="nav"><b>Help</b></a> <br /><a class="nav" href="http://www.furry-paws.com/kennel/owner/000000"><b>Owner</b></a> <br /><a href="http://www.furry-paws.com/message/compose/000000" class="nav"><b>Message Me</b></a> <br /><a href="http://www.furry-paws.com/meadow/tomb" class="nav"><b>Tomb</b></a> </div> </div> <div class="topbox"> <h1>Header 1</h1> <h2>Header 2</h2> <b>BOLD.</b> <u>Underlined.</u> <i>Italics.</i><br> <a href="#">A Link</a><br> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet. </p> <br /><br /></div> <div class="leftbox"> <div style="text-align:center;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p><br /><br /></div></div> <div class="rightbox"> <div style="text-align:center;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p></div></div><br /><br /> <div class="lastbox"> <div style="text-align:center;"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et placerat leo. Fusce vel risus eros. Praesent ultrices purus vitae finibus vehicula. Aliquam erat volutpat. Curabitur dignissim augue a ante facilisis, eu dignissim metus congue. Praesent convallis, nulla non maximus lacinia, leo tortor ultricies sapien, a consectetur lacus quam in ante. Donec in vestibulum elit. Praesent auctor erat lorem, id congue ante viverra a. Integer accumsan mi quis nunc pellentesque, et feugiat dolor consequat. Ut dictum pharetra ante, sit amet euismod ante aliquet nec. Vestibulum vulputate augue purus, in mattis mi pretium sit amet.</p> </div></div><br /><br /> <div class="tagbox"> <div style="text-align:center;"> <h2>My Tags</h2> Display some tags here or add some text! Delete this is you don't want it! This box seems small, but it will stretch as you add more tags! :D <a class="highlight" href="#top"><img src="https://i.imgur.com/qSmaCjS.png" alt="Image" title="Image" style="border:0px solid;" /></a> <a class="highlight" href="#top"><img src="https://i.imgur.com/qSmaCjS.png" alt="Image" title="Image" style="border:0px solid;" /></a> <a class="highlight" href="#top"><img src="https://i.imgur.com/qSmaCjS.png" alt="Image" title="Image" style="border:0px solid;" /></a> <a class="highlight" href="#top"><img src="https://i.imgur.com/qSmaCjS.png" alt="Image" title="Image" style="border:0px solid;" /></a> <a class="highlight" href="#top"><img src="https://i.imgur.com/qSmaCjS.png" alt="Image" title="Image" style="border:0px solid;" /></a> <br /></div></div><br /><br /><div class="creditbox"> <div style="text-align:center;"><br /> Layout Design and Coding by <a href="http://www.furry-paws.com/kennel/owner">Crestie</a>.<br />This is a freebie layout! Get the code for it <a href="#">here!</a> for your kennel!<br /></div></div><br /><br /><div class="arrowbox"> <div style="text-align:center;"><br /><a href="#"><img src="https://orig00.deviantart.net/682f/f/2017/365/9/d/jumping_arrow_by_force_o_nature-dbyholg.gif" alt="Back to Top" title="Back to Top" style="border:0px solid;" /></a></div></div><br /><br /> |