lollyracket

influence - story page

Nov 10th, 2020
40
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  4. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  5. <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;700;900&display=swap" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;700&display=swap" rel="stylesheet">
  7.  
  8. <style type="text/css">
  9. /* -- credits
  10. code was made by lollyracketcodes. please do not copy or frankenstein.
  11.  
  12. honyebee icon font is credit to suiomi
  13.  
  14. --*/
  15. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  16. #credit icon { padding:5px; font-size:20px; }
  17. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  18.  
  19. body { font-family:raleway; font-size:10px; background-color:#f2f2f2; }
  20. body a { text-decoration:none; color:#000; }
  21.  
  22. ::-webkit-scrollbar {
  23. width: 2px; }
  24. ::-webkit-scrollbar-track {
  25. background:transparent; }
  26. ::-webkit-scrollbar-thumb {
  27. background:#bceddb; }
  28.  
  29. @font-face {
  30. font-family: 'Rosamtika';
  31. src: url('https://static.tumblr.com/xab8hqo/cFOqhvvai/rosmatika-_demo_.woff') format('woff');
  32. }
  33.  
  34. #influenceback { width:850px; height:550px; padding:10px; background-color:#fff; border:1px solid #ccc; margin:20px auto auto auto; position:relative; }
  35. #influenceback .linkbar { padding:20px; background-color:#bcceed; position:absolute; top:-1px; left:-1px; right:-1px; }
  36. #influenceback .linktext { width:100px; padding:10px; font-size:30px; text-align:center; }
  37. #influenceback .linklittle { margin-top:5px; font-size:12px; text-transform:uppercase; font-weight:800; color:#4074cc; }
  38. #influenceback .linkbar a { color:#4074cc; }
  39. #influenceback .linkbar a:hover { font-style:italic; transition-duration:0.8s;}
  40.  
  41. #influenceback .titlebox { width:270px; padding:20px; position:absolute; top:140px; left:30px; }
  42. #influenceback .titlebig { font-family:rosamtika; font-size:30px; }
  43. #influenceback .infojust { text-align:justify; margin-top:20px; height:170px; padding:20px; }
  44. #influenceback .infojust b { background-color:#edbcce; padding:3px; }
  45. #influenceback .infojust u { color:#c3bced; }
  46. #influenceback .infojust i { border-bottom:1px double #bceddb; }
  47. #influenceback .infotags { padding:10px; background-color:#f5f5f5; border:1px solid #ccc; border-radius:5px; text-align:left; max-height:50px; overflow:auto; word-wrap:break-word; margin-top:15px; }
  48.  
  49. #influenceback .infochar { position:absolute; right:30px; top:140px; width:490px; height:370px; padding:10px; overflow:auto; }
  50. #influenceback .charbox { padding:10px; text-align:center; width:130px; }
  51. #influenceback .boximg { width:100px; height:100px; padding:10px; }
  52. #influenceback .boximg img { width:100px; height:100px; background-size:cover; border-radius:100%; }
  53. #influenceback .boxname { width:100px; padding:10px; font-family:rosamtika; font-size:15px; }
  54. #influenceback .boxname bg { background-color:#edbcce; padding:3px; }
  55. #influenceback .boxname a:hover { letter-spacing:3px; transition-duration:0.8s; font-style:italic; }
  56.  
  57. /* -- table info
  58.  
  59. - only three boxes per row
  60. - use <tr> tags when you make a new row
  61. - to make a new row copy from <tr> to </tr>
  62. - to make a new box copy from <td> to </td>
  63.  
  64. --*/
  65.  
  66. </style>
  67.  
  68.  
  69. </head>
  70.  
  71. <body>
  72. <div id="credit"><a href="https://lollyracketcodes.tumblr.com/"><icon><span class="th th-moon-o" title="page credit to lollyracketcodes"></span></icon></a></div>
  73.  
  74.  
  75. <div id="influenceback">
  76. <div class="linkbar"><center>
  77. <table><td><div class="linktext"><a href="//"><span class="th th-helm-o"></span> <div class="linklittle">link</div></a></div></td>
  78. <td><div class="linktext"><a href="//"><span class="th th-parrot-o"></span> <div class="linklittle">link</div></a></div></td>
  79. <td><div class="linktext"><a href="//"><span class="th th-pirate-ship-o"></span> <div class="linklittle">link</div></a></div></td>
  80. <td><div class="linktext"><a href="//"><span class="th th-pirate-skull-o"></span> <div class="linklittle">link</div></a></div></td>
  81. <td><div class="linktext"><a href="//"><span class="th th-pirate-swords-o"></span> <div class="linklittle">link</div></a></div></td>
  82. <td><div class="linktext"><a href="//"><span class="th th-treasure-map-o"></span> <div class="linklittle">link</div></a></div></td>
  83. </table>
  84. </center>
  85. </div>
  86.  
  87. <div class="titlebox">
  88. <div class="titlebig">title here</div>
  89. <div class="infojust">
  90. info n stuff here <b>bold looks like this</b> <i>and italics woo</i> <u>underline too if u need</u> </div>
  91.  
  92. <div class="infotags">#tag #tag #tag #tag #link or write tags related to your story</div>
  93.  
  94. </div>
  95.  
  96. <div class="infochar">
  97. <center>
  98. <table>
  99. <tr>
  100. <td><center><div class="charbox"><div class="boximg"><img src="http://placehold.it/100"></div><div class="boxname"><a href="//"><bg>name</bg></a></div></div></center></td>
  101. <td><div class="charbox"><div class="boximg"><img src="http://placehold.it/100"></div><div class="boxname"><a href="//"><bg>name</bg></a></div></div></td>
  102. <td><div class="charbox"><div class="boximg"><img src="http://placehold.it/100"></div><div class="boxname"><a href="//"><bg>name</bg></a></div></div></td>
  103. </tr>
  104. </table>
  105.  
  106.  
  107.  
  108.  
  109.  
  110. </center>
  111.  
  112. </div>
  113. </div>
  114.  
  115. </body>
  116.  
  117. </html>
RAW Paste Data