API tools faq
paste
Advertisement
sycamorre

TEFc CSS Template 4 Box

sycamorre
Dec 25th, 2017
438
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.10 KB | None | 0 0
raw download clone embed print report
  1. <bioTtl>Character</bioTtl>
  2. <div class="biocontain"><div class="bioPic"><div class="credit"><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>
  3.  
  4. <div class="bio1"><div class="updLeft">
  5. <tabTtl>MM-DD-YYYY</tabTtl>
  6.  
  7. <updX>• <span class="tooltip">Body<span class="tooltiptext">{ physical wellness }</span></span> • <span class="tooltip">Mind<span class="tooltiptext">{ mental wellness }</span></span> • <span class="tooltip">Note<span class="tooltiptext">{ whatever you want or replace/get rid of me }</span></span> •
  8.  
  9. -----
  10.  
  11. "...Put some good thoughts here. Any thoughts. All thoughts. They can be kinda-long thoughts, but not too long!"</updPME></div>
  12. <div class="updHap"><updX>Recently:</updX>
  13.  
  14. Let your people know what's crackalackin'.
  15.  
  16. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu hendrerit urna. Nunc sollicitudin vestibulum tincidunt. Donec fringilla semper eleifend. Aenean faucibus ante diam, a viverra dui maximus id. Quisque quis venenatis sem, sed eleifend elit. Cras ullamcorper consectetur eros, nec bibendum urna iaculis ut. Etiam viverra mattis luctus. Cras venenatis suscipit magna eget dignissim. Curabitur id scelerisque quam, ut rhoncus est. Vestibulum in euismod urna. Praesent vitae ligula eget erat sollicitudin congue. Etiam molestie porttitor tellus.
  17.  
  18. Praesent non sagittis tortor. Cras non justo convallis, ultricies est efficitur, facilisis mauris. Proin ac euismod odio, vitae imperdiet turpis. Maecenas faucibus non urna consequat posuere. Aenean venenatis volutpat purus finibus interdum. Morbi urna risus, auctor eget posuere ut, accumsan et enim. Vestibulum in sollicitudin odio. Pellentesque vehicula neque sit amet eros luctus, et eleifend leo blandit.</div></div>
  19.  
  20. <div class="bio2"><div class="tabcontainer"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1" id="tl1">Tab 1</label><div class="tabcontent"><tabTtl>Tab 1 Title</tabTtl>
  21.  
  22. Tab 1 text.
  23.  
  24. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu hendrerit urna. Nunc sollicitudin vestibulum tincidunt. Donec fringilla semper eleifend. Aenean faucibus ante diam, a viverra dui maximus id. Quisque quis venenatis sem, sed eleifend elit. Cras ullamcorper consectetur eros, nec bibendum urna iaculis ut. Etiam viverra mattis luctus. Cras venenatis suscipit magna eget dignissim. Curabitur id scelerisque quam, ut rhoncus est. Vestibulum in euismod urna. Praesent vitae ligula eget erat sollicitudin congue. Etiam molestie porttitor tellus.
  25.  
  26. Praesent non sagittis tortor. Cras non justo convallis, ultricies est efficitur, facilisis mauris. Proin ac euismod odio, vitae imperdiet turpis. Maecenas faucibus non urna consequat posuere. Aenean venenatis volutpat purus finibus interdum. Morbi urna risus, auctor eget posuere ut, accumsan et enim. Vestibulum in sollicitudin odio. Pellentesque vehicula neque sit amet eros luctus, et eleifend leo blandit.
  27.  
  28. Donec elementum lacus vel quam condimentum, vel ullamcorper magna tempor. Nulla quis vulputate purus. Maecenas maximus convallis mi ac malesuada. Suspendisse convallis rutrum dui eu euismod. Sed a lobortis urna. Mauris mattis sit amet lacus vel posuere. Vestibulum sagittis congue euismod. Cras facilisis risus tortor, eu tincidunt velit ultrices eu. Nullam sit amet est neque. Fusce tempor, felis nec sodales egestas, libero est fermentum risus, ac semper risus nisl et tellus.
  29.  
  30. Mauris id tincidunt lacus, tristique mattis lectus. Quisque in odio semper, lacinia lectus eu, placerat est. In tortor eros, commodo in laoreet in, blandit vitae elit. Quisque volutpat ligula in ex eleifend interdum. Phasellus sodales nibh quis magna semper consequat. Pellentesque libero lectus, tincidunt id luctus eget, elementum tristique lorem. Aenean sit amet nulla et dui condimentum scelerisque et id lorem.
  31.  
  32. Mauris congue, odio ut convallis sodales, nunc enim euismod mauris, sit amet finibus libero massa eu tellus. Morbi quam tortor, dictum ac pellentesque vel, blandit sit amet eros. Donec ullamcorper vitae magna nec tincidunt. Aenean facilisis augue turpis, nec laoreet urna mollis eget. Ut scelerisque felis non rhoncus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit lacus nec tristique pharetra.</div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2" id="tl2">Tab 2</label><div class="tabcontent"><tabTtl>Tab 2 Title</tabTtl>
  33.  
  34. Tab 2 text.</div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3" id="tl3">Tab 3</label><div class="tabcontent"><tabTtl>Tab 3 Title</tabTtl>
  35.  
  36. Tab 3 text.</div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4" id="tl4">Tab 4</label><div class="tabcontent"><tabTtl>Tab 4 Title</tabTtl>
  37.  
  38. Tab 4 text.</div></span><span class="tab"><input type="radio" id="tab5" name="tabs"><label for="tab5" id="tl5">Tab 5</label><div class="tabcontent"><tabTtl>Tab 5 Title</tabTtl>
  39.  
  40. Tab 5 text.</div></span></div></div></div>
  41.  
  42.  
  43. <div id= "CSS-Sycamorre" style="display:none;">
  44.  
  45. -- BIO DIVS
  46. <link href="https://fonts.googleapis.com/css?family=Bahiana|Caesar+Dressing|Crushed|Oxygen|Titillium+Web" rel="stylesheet">
  47. <style>.biocontain{position:relative; width:900px; height:900px; margin:auto; border:2px solid #000; font-family:'Titillium Web'; font-size:13px;} .bioPic{box-sizing: border-box; position:absolute; left:0; top:0; width:300px; height:900px; border:2px solid #000; background-image:url('https://dl.dropbox.com/s/j9f93k72qmxte5p/tallprevpurp.png?dl=0');} .bio1{box-sizing: border-box; position:absolute; right:0; top:0; width:600px; height:350px; padding:10px; background:#333; border:2px solid #000;} .bio2{box-sizing: border-box; position:absolute; right:0; bottom:0; width:600px; height:550px; padding:10px; background:#333; border:2px solid #000;} .credit{width:150px; box-sizing:border-box; position:absolute; bottom:-28px; left:-4px; padding: 1px 5px 5px 5px; text-align:center; background:#000;}</style>
  48.  
  49. -- UPDATES
  50. <style>.updLeft{position:absolute; left:10px; top:10px; height:94%; width:38%; text-align:center;} .updHap{position:absolute; right:10px; top:10px; height:94%; width:55%; overflow:auto;} updX{font-family:'Crushed';font-size:20px;}</style>
  51.  
  52. -- TABS
  53. <style>.tabcontainer{position:relative; width:100%; height:100%; margin:auto;} input[type=radio] {display: none;} .tabcontainer label {margin-left: 5px; margin-top:-10px; transition:all 0.3s ease-out; overflow:hidden; cursor:pointer; height:0px; background:#ddd; border-bottom:12px solid #000; border-radius:0 0 10px 10px; color: #222; padding:0 10px 0; position:relative; z-index:10; float:left; font-size:18px; font-family:'Crushed'; line-height:20px;} .tabcontent{opacity:0; position:absolute; bottom:0; margin:auto; width:556px; height:500px; padding:10px; overflow:auto;} label:hover{height:20px;padding:10px;} input[type=radio]:checked ~ label {background:#222; color:#ddd; border-color:#a8b;} input[type=radio]:checked ~ .tabcontent {z-index: 2; opacity:1;} #tl1{margin-left:100px;}</style>
  54.  
  55. -- TITLES AND TOOLTIPS
  56. <style>bioTtl{font-size:75px; font-family:'Caesar Dressing'; display:block; width:900px; text-align:right; letter-spacing:5px; margin:auto; color:#cad;} tabTtl{font-size:30px; font-family:'Crushed';} .tooltip {position: relative; display: inline-block; cursor: pointer; color:#879E7B} .tooltip .tooltiptext {opacity:0; transition:all 1s; visibility: hidden;width: 250px; background:rgba(0,0,0,0.7); color: #aaa;padding: 5px; border-radius: 6px;position: absolute; z-index: 1;margin: 20px 0 0 -125px; text-align:center;} .tooltip:hover .tooltiptext{opacity: 1; visibility: visible;} .tooltip:hover .tooltiptext2{opacity: 1; visibility: visible;}</style>
  57.  
  58. -- INVISIBLE SCROLLBAR
  59. <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>
  60.  
  61. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!