SHARE
TWEET

TEFc CSS Template 5 (BoxOnly)

sycamorre Jan 5th, 2018 116 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="biotitle">Character</div>
  2. <div class="biobox"><div class="biopic1"></div>
  3.  
  4. <div class="bioupdates"><tabTtl>UPDATES — Jan.01.3018</tabTtl>
  5.  
  6. <span class="tooltip">Tooltip 1<span class="tooltiptext">{ Tooltip 1 Text }</span></span> | <span class="tooltip">Tooltip 2<span class="tooltiptext">{ Tooltip 2 Text }</span></span> | <span class="tooltip">Tooltip 3<span class="tooltiptext">{ Tooltip 3 Text }</span></span>
  7.  
  8. <div class="events">[b]RECENTLY —[/b]
  9.  
  10. Current events go here.</div></div>
  11.  
  12. <div class="bioinfo"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1">BASICS</label><div class="tabcontent"><tabTtl>Tab 1 Title</tabTtl>
  13.  
  14. Tab 1 text.
  15. </div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2" id="t2">APPEARANCE</label><div class="tabcontent"><tabTtl>Tab 2 Title</tabTtl>
  16.  
  17. Tab 2 text.
  18. </div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3" id="t3">PERSONA</label><div class="tabcontent"><tabTtl>Tab 3 Title</tabTtl>
  19.  
  20. Tab 3 text.
  21. </div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4" id="t4">RELATIONS</label><div class="tabcontent"><tabTtl>Tab 4 Title</tabTtl>
  22.  
  23. Tab 4 text.
  24. </div></span><span class="tab"><input type="radio" id="tab5" name="tabs"><label for="tab5" id="t5">OTHER</label><div class="tabcontent"><tabTtl>Tab 5 Title</tabTtl>
  25.  
  26. Tab 5 text.
  27. </div></span><span class="tab"><input type="radio" id="tab6" name="tabs"><label for="tab6" id="t6">EXTRA</label><div class="tabcontent"><tabTtl>Tab 6 Title</tabTtl>
  28.  
  29. Tab 6 text.
  30.  
  31. You can get rid of this tab if you don't need it by removing everything from (and including) [code]<span class="tab">[/code] to [code]</span>[/code].
  32. </div></span></div>
  33. <div class="credits"><span class="tooltip">Credit<span class="tooltiptext">CSS by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>.</span></span> • <span class="tooltip">Disclaimer<span class="tooltiptext">{ Disclaimer text. }</span></span></div></div>
  34.  
  35.  
  36.  
  37.  
  38.  
  39. <div id="CSS-Sycamorre" style="display:none;">
  40.  
  41. <!---- CSS BELOW ---->
  42.  
  43. -- FONTS
  44. <link href="https://dl.dropbox.com/s/9safe3b500ygy23/pale_blue_eyes.css?dl=0" rel="stylesheet">
  45. <link href="https://fonts.googleapis.com/css?family=Bahiana|Caesar+Dressing|Crushed|Oxygen|Titillium+Web|Amatic+SC|Averia+Sans+Libre|Bellefair|BenchNine|Chelsea+Market|Economica|Frijole|Handlee|Mallanna|Montez|Neucha|Poiret+One|Rock+Salt" rel="stylesheet">
  46.  
  47. -- BIO BOX
  48. <style>.biotitle{position:relative; z-index:5; width:750px; margin:100px auto 0 auto; font-size:90px; text-align:center; font-family:'Frijole'; text-shadow:0 0 10px #000;} .biobox{position:relative; z-index:4; width:750px; height:1100px; margin:auto; color:#a98;} .biopic1{position:absolute; top:0; left:0; width:750px; height:250px; box-sizing:border-box; overflow:hidden; background-image:url('https://dl.dropbox.com/s/1531xwz9w1uhmxo/widepreviewsepia.png?dl=0');} .bioinfo{position:absolute; top:250px; left:0; width:375px; height:850px; box-sizing:border-box; border:2px solid #000; background:rgba(0,0,0,0.7);} .bioupdates{position:absolute; top:250px; right:0; width:375px; height:500px; box-sizing:border-box; padding:10px; border:2px solid #000; border-left:none; background:rgba(0,0,0,0.7); text-align:center;}</style>
  49.  
  50. -- TABS
  51. <style>.bioinfo input[type=radio] {display: none;} .bioinfo label {cursor:pointer; color:#765; background:rgba(0,0,0,0.3); padding:10px; position:absolute; margin-left:373px; font-size:25px; line-height:30px; top:505px; min-width:200px; font-family:'Chelsea Market'; letter-spacing:2px; transition:all 0.5s;} .bioinfo label:hover{letter-spacing:4px; min-width:250px;} .tabcontent{position:absolute; top:0; left:0; width:375px; height:840px; padding:10px; box-sizing:border-box; overflow:auto; opacity:0; transition:all 1s;} input[type=radio]:checked ~ label {background:#532; color:#dcb; min-width:250px; letter-spacing:4px;} input[type=radio]:checked ~ .tabcontent {z-index: 2; opacity:1;} #t2{top:560px;} #t3{top:615px} #t4{top:670px} #t5{top:725px} #t6{top:780px}</style>
  52.  
  53. -- MISC
  54. <style>tabTtl{font-family:'Chelsea Market'; font-size:30px;} .events{position:absolute; bottom:0; width:350px; padding-top:10px; height:390px; margin:auto; overflow:auto; border-top:1px solid #321; text-align:left;} .credits{position:absolute; left:0; bottom:-20px;} .biobox a:link, .biobox a:visited{color:#854; transition: all 0.7s} .biobox a:link:hover, .biobox a:visited:hover{color:#a98; text-decoration:none;}</style>
  55.  
  56. -- TOOLTIPS
  57. <style>.tooltip {position:relative; display: inline-block; cursor: pointer; color:#854;} .tooltip .tooltiptext {opacity:0; transition:all 0.4s; visibility: hidden;width: 250px; background:rgba(250,240,222,0.7); color: #111; padding: 5px; border-radius: 6px; position:absolute; z-index:8; margin: 20px 0 0 -125px; text-align:center; font-family:'Mallanna'; font-size:15px; line-height:15px; text-shadow:none;} .tooltip:hover .tooltiptext{opacity: 1; visibility: visible;}</style>
  58.  
  59. --INVISIBLE SCROLLBARS
  60. <style>#center ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000;} #center ::-webkit-scrollbar{width: 0px; background-color: #000;} #center ::-webkit-scrollbar-thumb{background-color: #000000; border: 2px solid #555555;}</style>
  61.  
  62. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top