twitter - Style Layout
DO NOT edit the CSS part unless you know what you're doing! This can mess up the layout! Features: - dark theme, easy on eyes - Twitter-esque look - large banner image, small icon, and tag choices. show off your fav art! - Profile pic should be 200x200px and can be edited in the CSS! Others will be resized on their own! - the search bar is fake! |
CSS
body{
background-color: #10171f; background-image: url(); background-repeat:no-repeat; font-family: Century Gothic, Arial, Gill Sans MT; } a:link, a:visited, a:active {color: #8a6138; font-family:Century Gothic, Gill Sans MT, arial; font-size: 12pt; } a:hover{ color: #d8b17d; text-decoration:none;} .nav:link, .nav:visited {font: 13pt Century Gothic, Arial, Gill Sans MT; color: #8899a6; 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: 13pt Century Gothic, Arial, Gill Sans MT; color: #fff; border-bottom: 2px solid #8899a6; text-align:center; text-shadow: -1px 1px 5px #ffffff, 1px -1px 5px #ffffff; padding: 0;} h1{ font:16pt Century Gothic, Arial; font-style: bold; color: #fff; letter-spacing: 2pt; text-align: left; text-transform: uppercase;} h2{ font:15pt century gothic, Arial; color:#fff; background-color:#1b7fbb; text-align: center; text-transform: uppercase; letter-spacing: 2pt;} .topbanner { font-family: Century Gothic, Arial; font-size:12pt; color: #2a2a2a; background-color: #fff; position: absolute; top: 11300px; left: -10px; border-top: 0px solid #3c9a35; background: none;} .kennelname { font-family: Century Gothic, Arial; font-size:12pt; color: #2a2a2a; background-color: #1c2939; padding:0px; overflow: stretch; position: fixed; top: 0px; left: 0px; width: 1200px; height: 55px; z-index: 999;} .profileimg { background-color: #1c2939; background-image: url(https://i.imgur.com/RtZEpiK.png); background-repeat:no-repeat; border: 2px solid #16202a; border-radius: 50%; padding:0px; overflow: stretch; position: absolute; top: 11550px; left: 0px; width: 200px; height: 200px; z-index: 995;} .strip { font-family: Century Gothic, Arial; font-size:12pt; color: #2a2a2a; background-color: #1c2939; padding:0px; overflow: stretch; position: absolute; top: 11650px; left: -10px; width: 1200px; height: 55px; z-index: 990;} .left { font-family: Century Gothic, Arial; font-size:10pt; color: #fff; background-color: #10171f; padding:0px; overflow: stretch; position: absolute; top: 11750px; left: 10px; width: 250px; } .right{ font-family: Century Gothic, Arial; font-size:10pt; color: #fff; background-color: #16202a; border:2px solid #2c323f; padding:0px; overflow: stretch; position: absolute; top: 11750px; left: 930px; width: 255px; } .center { font-family: Century Gothic, Arial; font-size:10pt; color: #fff; background-color: #16202a; border:2px solid #2c323f; padding:3px; overflow: stretch; position: absolute; top: 11750px; left: 300px; width: 600px; } .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)
<div class="profileimg">.</div>
<div class="strip"><div class="navigation"> <div style="text-align:center;"><br> - <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/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> <div class="kennelname"> <img src="https://i.imgur.com/StSH3A6.png" height="50" alt="THIS IS YOUR 50X50 TOP RIGHT IMG, DO NOT REMOVE SIZING!" style="float:right;"> <img src="https://i.imgur.com/gREvJfE.png" height="50" alt="gREvJfE.png" style="float:right;"> </div> <div class="topbanner"> <img src="https://i.imgur.com/owZ3k5X.png" width="1200" height="400" alt="THIS IS YOUR BIG BANNER! DO NOT REMOVE SIZING"> </div> <div class="left"> <h1><b>Username!</b></h1> <i>@username</i><br><br> <b>Nicknames:</b> John, Johnny<br> <b>Age:</b> 25<br> <b>Birthday:</b> January 1st<br> <b>Gender:</b> male<br> <b>Pronouns:</b> he/him/they/them<br><br> <h2>Game</h2> <b>Played Since:</b> January 2010<br> <b>Breed Specialties:</b> Border Collies and Huskies<br><br> <h2>Art</h2> <b>Commission Site:</b> <a href="#">LINK</a><br> <b>Commission Status:</b> CLOSED<br> <b>Character Site:</b> <a href="#">LINK</a><br> <b>Toyhou.se:</b> <a href="#">LINK</a><br> <b>deviantART:</b> <a href="#">LINK</a><br> <b>Discord:</b> Username #0000<br><br><br> </div> <div class="right"> <div style="text-align:left;"> <h1><b>Friends</b></h1> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 1</a><br> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 2</a><br> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 3</a><br> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 4</a><br> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 5</a><br> <img src="https://i.imgur.com/9cqimpR.png" width="30" alt="9cqimpR.png"> <a href="#">Friend 6</a><br> <h1><b>Quick Links</b></h1> + <a href="#">Link</a><br> + <a href="#">Link</a><br> + <a href="#">Link</a><br> + <a href="#">Link</a><br> + <a href="#">Link</a><br> + <a href="#">Link</a><br> </div></div> <div class="center"> <div style="text-align:center;"> <b>BOLD</b>. <i>Italic</i>. <span style="text-decoration:underline;">Underline</span>. <br> <h2>Header 2</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum est est, eu dapibus arcu auctor vel. Vestibulum vestibulum fermentum urna. Donec molestie posuere dui ut ullamcorper. Proin tempor eros at pretium laoreet. Fusce ut diam tempor, hendrerit nibh et, accumsan velit. Nulla eu tellus sapien. Integer at condimentum orci. Praesent sit amet scelerisque erat. Cras at diam suscipit, ultricies magna eu, ultrices urna. Aliquam cursus accumsan consequat.<br><br> Maecenas eget pellentesque nunc. Aliquam consequat efficitur libero laoreet rutrum. Sed ac volutpat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi molestie ipsum sed tempus accumsan. Mauris vitae sollicitudin turpis. Vestibulum vel turpis et dolor facilisis feugiat ac at arcu. Suspendisse quis iaculis tellus. Nullam volutpat libero nec est varius, nec tincidunt lacus dapibus. Pellentesque venenatis vehicula libero nec imperdiet. Donec scelerisque, dui a rhoncus tincidunt, est lectus ornare mi, eget auctor nisl urna quis enim. Mauris blandit libero eros, ut mattis velit condimentum in. Quisque et ex dolor.<br><br> Nullam iaculis finibus nisl, tristique ullamcorper est eleifend at. Aliquam mattis nunc et interdum tempor. Proin a aliquet orci, sit amet maximus justo. Praesent vulputate dictum lectus et porttitor. Maecenas eget bibendum leo. Quisque eu orci dolor. Nullam et sapien nibh. Donec accumsan vitae dolor id pellentesque. Aliquam vitae est id nisi suscipit tristique. Duis iaculis nunc ante, vel aliquet felis scelerisque sit amet. Ut lacus velit, viverra at scelerisque ac, porta vel ipsum. Nullam non magna sagittis, lobortis nisl placerat, mollis ligula. Vestibulum nec dignissim nibh.<br><br> Duis sed arcu eu turpis hendrerit hendrerit nec semper sem. Etiam mauris magna, ullamcorper quis orci convallis, finibus convallis risus. Pellentesque euismod scelerisque rhoncus. Suspendisse vitae convallis orci, et scelerisque nisl. In non metus ut urna feugiat lacinia ac vel enim. Pellentesque sit amet neque elementum, fermentum tortor vel, sollicitudin enim. Sed suscipit convallis ipsum non dapibus. Cras tincidunt, sem auctor maximus commodo, lacus risus cursus nulla, sit amet vestibulum tellus magna ac leo. Mauris sit amet rhoncus justo. Vivamus lacus odio, venenatis in neque vitae, dapibus condimentum felis. Fusce pellentesque purus eu tempus maximus. Nullam ultrices, dui ut consectetur gravida, ligula quam aliquet purus, at consectetur nunc sem quis nisi. Etiam in nibh mauris. Proin diam augue, condimentum non nisi ut, feugiat imperdiet velit. <h2><img src="https://i.imgur.com/wel1E4B.png" height="30" alt="wel1E4B.png"></h2> <i><sub>coding by <a href="https://www.furry-paws.com/kennel/owner/740384">StarTracer</a>. Get the code <a href="https://studiostartracer.weebly.com/free-layouts.html">HERE</a>!<br></sub></i> </div></div> |