API tools faq
paste
Advertisement
Caiir

TEFc CSS

Caiir
Sep 9th, 2017
132
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.10 KB | None | 0 0
raw download clone embed print report
  1. <center><img src="https://dl.dropbox.com/s/wrhrlvw00a0enq9/hiru%20head.png?dl=0" style="z-index:25;margin-bottom:-870px;position:relative; pointer-events:none;left:-23px"><img src="https://dl.dropbox.com/s/3l1jk1bpoad0muh/hiru%20body.png?dl=0"><div style="width:425px;height:630px;background:rgba(0,0,0,0.95); position:relative;top:-800px;margin-bottom:-700px;z-index:20;border:5px double #BE9726;overflow:none;padding:20px;"><div style="width:250px;height:230px;border:3px double #E2BE53;position:relative;left:80px;overflow:auto;padding:3px;background:rgba(89,71,18,0.2);z-index:10;"><DEC>Month, Day, Year</DEC>
  2.  
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada finibus dolor, vel lacinia magna. In hac habitasse platea dictumst. Vestibulum eget eros sit amet neque fermentum ornare. Suspendisse varius blandit risus, nec ornare lorem sagittis non. Aliquam dignissim hendrerit quam et vehicula. Morbi feugiat ante sodales dapibus venenatis. Aenean id cursus leo, vel mollis enim. Vestibulum malesuada pharetra posuere.
  4.  
  5. Curabitur viverra ex a mauris lacinia rutrum. Proin hendrerit, nibh id interdum commodo, nisl turpis lobortis sapien, a mollis ipsum lorem et urna. Vivamus interdum imperdiet vestibulum. Vestibulum ut pretium ante. Aenean eget consequat enim, eu tempus tortor. Nam venenatis feugiat diam, sit amet gravida dolor. Aliquam lacus libero, cursus a lectus in, sollicitudin pellentesque libero. Cras in magna eget ex aliquet molestie. Proin feugiat, quam ut condimentum malesuada, nibh odio pretium leo, in laoreet neque nisi eu diam. Duis sollicitudin mattis magna, vitae consectetur quam. Donec ac pulvinar erat. In sodales, nisi vitae venenatis ultricies, quam est tristique quam, in dignissim metus eros sed arcu. Morbi condimentum vehicula massa, vel lobortis quam.
  6.  
  7. Suspendisse ac lacinia augue, quis suscipit nisi. Nam pretium feugiat commodo. Nam ex magna, tristique vitae faucibus in, bibendum a velit. Curabitur ac risus diam. Donec semper nulla non rhoncus imperdiet. Duis laoreet at nisl sed mattis. Nam tempor congue fringilla. Vestibulum sem augue, interdum in libero vel, aliquam tempor urna. Mauris sodales condimentum mollis. Sed nec augue in nisl convallis porttitor eget ac lectus. Integer commodo hendrerit ipsum. Curabitur nulla nibh, ornare eget mi eu, bibendum porttitor neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</div><div style="width:100px;height:50px;position:relative;margin-bottom:-50px;top:-70px;left:-140px;"><h1 class="animated infinite pulse"><NAME>Hiru</NAME>
  8.  
  9. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="FlashVars" value="mp3=https://dl.dropbox.com/s/jtc6rqo5hd3dd91/07%20The%20Banks%20Of%20The%20Sansretour%20-%20Blood%20and%20Wine%20-%20The%20Witcher%203%20-%20Soundtrack.mp3?dl=0&amp;slidercolor=BE9726" /></object>
  10. <object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="100" height="10"><param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf" /><param name="bgcolor" value="#000000" /><param name="FlashVars" value="mp3=URLHERE&amp;slidercolor=BE9726" /></object></div>
  11. <div style="width:100%;height:10px;"><a href="javascript:;" onmousedown="for(var ii=0;ii<4;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('one').style.display='inline';"><TAB>Tab One</TAB></a> &nbsp;&nbsp; <a href="javascript:;" onmousedown="for(var ii=0;ii<4;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('two').style.display='inline';"><TAB>Tab Two</TAB></a> &nbsp;&nbsp; <a href="javascript:;" onmousedown="for(var ii=0;ii<4;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('three').style.display='inline';"><TAB>Tab Three</TAB></a> &nbsp;&nbsp; <a href="javascript:;" onmousedown="for(var ii=0;ii<4;ii++){document.getElementsByClassName('tab')[ii].style.display='none';};document.getElementById('four').style.display='inline';"><TAB>Tab Four</TAB></a></div>
  12. <div style="width:400px;height:330px;border:3px double #E2BE53;position:relative;overflow:auto;padding:3px;background:rgba(89,71,18,0.2);z-index:20;"><span id="one" class="tab" style="display:inline;">
  13. <DEC>Title</DEC><div style="width:330px;text-align:left;height:100px;overflow:none;">
  14. <ba>Entry</ba> &#183; Info ...........................................................................
  15. <ba>Entry</ba> &#183; Info ...........................................................................
  16. <ba>Entry</ba> &#183; Info ...........................................................................
  17. <ba>Entry</ba> &#183; Info ...........................................................................
  18. <ba>Entry</ba> &#183; Info ...........................................................................</div>
  19.  
  20. One
  21.  
  22.  
  23. <a href="#">Link</a>
  24.  
  25.  
  26.  
  27.  
  28.  
  29.  
  30.  
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45. </span><span id="two" class="tab" style="display:none;">
  46. <DEC>Title</DEC>
  47.  
  48. Two
  49.  
  50.  
  51. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum laoreet dui in elementum. Sed consectetur vel leo a pellentesque. Duis est justo, vestibulum id sollicitudin posuere, porttitor dignissim quam. Aliquam suscipit ligula id turpis tincidunt tincidunt. Morbi egestas pretium elementum. Fusce interdum lacus nec lacinia hendrerit. Duis tempor a diam sed scelerisque. Sed in venenatis felis. Pellentesque tempus, purus quis condimentum viverra, ex sapien euismod sem, quis egestas arcu ipsum non lacus. Cras nec ipsum turpis. Aliquam erat volutpat. Vestibulum ut libero in erat finibus cursus. Quisque tempus orci massa, lacinia volutpat dui elementum eget. Mauris efficitur est sed leo egestas, vel viverra sem ornare. Etiam in magna scelerisque, fringilla risus vel, rhoncus nibh.
  52.  
  53. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec venenatis sodales semper. Integer lobortis arcu eget consequat mattis. Donec sit amet pharetra nisl. Praesent consequat a justo sed sollicitudin. Integer placerat elementum dolor et commodo. Aenean erat est, imperdiet quis malesuada vitae, malesuada in nunc. Integer hendrerit quam eget dictum hendrerit.
  54.  
  55. Nunc in sagittis dolor. Quisque et augue eu velit luctus laoreet id interdum orci. Curabitur ultrices erat tellus, sit amet dictum quam suscipit quis. Etiam malesuada dignissim justo eget maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam arcu ligula, ornare id interdum at, commodo vel ex. Morbi a arcu accumsan, efficitur nunc eu, fringilla est.
  56.  
  57. Duis hendrerit risus sed orci egestas sagittis. Aliquam consequat at dolor id ultricies. Donec vel elit eget lectus consequat volutpat eget at velit. In malesuada enim nec ex posuere, eu auctor enim aliquam. Donec iaculis rhoncus est vitae pellentesque. Curabitur suscipit congue venenatis. Donec in risus sed felis molestie condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc feugiat maximus mattis. Morbi ullamcorper dapibus ex, sed sagittis elit tempor at. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam at dapibus neque. Vivamus non risus nisi.
  58.  
  59.  
  60.  
  61.  
  62.  
  63. </span><span id="three"class="tab" style="display:none;">
  64. <DEC>Title</DEC>
  65.  
  66. Three
  67.  
  68.  
  69.  
  70.  
  71.  
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90. </span><span id="four"class="tab" style="display:none;">
  91. <DEC>Title</DEC>
  92.  
  93. Four
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114.  
  115.  
  116. </span></div>[color=#BE9726]&#9780;[/color]</div><div style="width:10px;height:100px;position:relative;margin-bottom:-100px;left:210px;top:-200px;"><div id="disclaimer"><span class="rotate"><disc>Disclaimer</span><span class="disclaimertext">Disclaimer text here!
  117.  
  118. <small>CSS Layout &#169; Shey and Mauvable, created for Mauvable.
  119. <sup>Not for free use and/or redistribution without explicit permission.</sup></small></span></div></div>
  120.  
  121. </center><div style="display:none;">
  122.  
  123. **************************************CSS**************************************
  124.  
  125. TOOLTIPS [May break the scrollbars on small divs! :( ]
  126. <style>#tooltips{display:inline-block; position:relative;} #tooltips .tooltiptext{width:200px; position:absolute; padding:5px; z-index:25; top: 100%; left:50%; margin-left: -100px; opacity:0; transition: all 0.2s; text-align: center; visibility:hidden;background:rgba(0,0,0,0.93);border:2px double #BE9726;overflow:none;padding:5px;} #tooltips:hover .tooltiptext{opacity: 1; visibility:visible}</style>
  127.  
  128.  
  129. TABS
  130. <style>TAB{font-family:optimusprincepts;font-size:17px;color:#f2d57d;z-index:25;letter-spacing:2px;text-decoration:none;transition: all 1s;} TAB:hover{font-family:optimusprincepts;font-size:17px;color:#fff;z-index:25;letter-spacing:3px;text-decoration:none;color:#f2d57d;transition: all 1s;text-shadow:0 0 5px #685312;}</style>
  131.  
  132. NAME
  133. <style>NAME{font-family:optimusprincepts;font-size:25px;color:#E2BE53;letter-spacing:3px;transition: all 2s;} NAME:hover{font-family:optimusprincepts;font-size:25px;color:#f2d57d;letter-spacing:4px;transition: all 2s;text-shadow:0 0 5px #685312;}</style>
  134.  
  135. TEXT DECORATION [ex. Date styling]
  136. <style>DEC{font-family:optimusprincepts;font-size:16px;color:#BE9726;}</style>
  137. <style> @font-face {font-family: 'optimusprincepts';src: url('https://dl.dropbox.com/s/pqc77e9y6jylxne/optimusprinceps-webfont.woff2?dl=0') format('woff2'),url('https://dl.dropbox.com/s/hb5grk8tzpojnph/optimusprinceps-webfont.woff?dl=0f') format('woff');font-weight: normal;font-style: normal;} </style>
  138.  
  139. DISCLAIMER STYLING
  140. <style>.rotate{position:relative;display:inline-block;transform:rotate(-270deg); -moz-transform:rotate(-270deg);-webkit-transform:rotate(-270deg)}</style>
  141. <style>#disclaimer{display:inline-block; position:relative;} #disclaimer .disclaimertext{width:250px; position:absolute; padding:5px; z-index:25;margin-top:30px; top: 100%; left:50%; margin-left: -140px; opacity:0; transition: all 0.2s; text-align: center; visibility:hidden;background:rgba(0,0,0,0.93);border:2px double #BE9726;overflow:none;padding:5px;} #disclaimer:hover .disclaimertext{opacity: 1; visibility:visible}</style>
  142. <style>disc{font-family:optimusprincepts;font-size:13px;letter-spacing:2px;}</style>
  143.  
  144. LINKS
  145. <style>a:link, a:visited{color:#f2d57d;transition:all 1s;} a:link:hover, a:visited:hover{color:#ffffff;text-decoration:none;text-shadow:0 0 5px #fff;}</style>
  146.  
  147. SCROLLBARS
  148. <style>::-webkit-scrollbar-track { -webkit-box-shadow: inset 0px 0px 2px rgba(50,50,50,1);background-color:rgba(0,0,0,1);} ::-webkit-scrollbar {width:3px;background-color:rgba(0,0,0,1);} ::-webkit-scrollbar-thumb { background-color: #594712;}</style>
  149.  
  150. TEXT
  151. <style>body{font-size:11px;-webkit-font-smoothing: antialiased;-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;font-family:'Roboto', sans-serif;color:#fff;}</style>
  152. "BASIC INFO" TEXT
  153. <style>ba{font-size:11px;color:#BE9726}</style>
  154.  
  155. Music name [incase you wanted it] - Witcher 3 OST / Blood and Wine / The Banks Of The Sansretour</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!