lollyracket

lols - story page

Feb 2nd, 2021 (edited)
28
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3.  
  4.  
  5. <!-- SOME FONTS -->
  6. <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,700&display=swap" rel="stylesheet">
  7. <link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
  8. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  9. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  10. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  11.  
  12. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,700&display=swap" rel="stylesheet">
  13.  
  14.  
  15.  
  16.  
  17. <head>
  18.  
  19.  
  20. </head>
  21.  
  22. <style type="text/css">
  23.  
  24. /* -- credits
  25. code was made by lollyracketcodes. please do not copy or frankenstein.
  26.  
  27.  
  28.  
  29. --*/
  30.  
  31. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  32. #credit icon { padding:5px; font-size:20px; }
  33. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  34.  
  35.  
  36. /* hosted fonts */
  37.  
  38. @font-face { font-family:"rotters"; src:url('https://dl.dropbox.com/s/n5eagm9wp1ylbaf/Rotters.otf'); }
  39. @font-face{ font-family:"moon"; src: url('https://dl.dropboxusercontent.com/s/ubael2mwud27z8o/moon_get-Heavy.ttf’)'); }
  40.  
  41. body {
  42. background-image:url(https://img.nickpic.host/rYQN3D.png);
  43. font-family:poppins;
  44. font-size: 11px;
  45. line-height:140%;
  46. }
  47.  
  48. body a { color:#000; text-decoration:none; }
  49.  
  50. #s-m-t-tooltip{
  51. /* basic */
  52. z-index:10;
  53. margin:24px 14px 7px 12px;
  54. /* style and design */
  55. padding:8px;
  56. background:#222; /* fallback if rgba not supported */
  57. background:rgba(0,0,0,0.8);
  58.  
  59. /* font */
  60. font-family:moon;
  61. font-size:12px;
  62. line-height:16px;
  63. color:#fff;
  64. letter-spacing:1px;
  65. }
  66.  
  67.  
  68. #pgbg { width:750px; padding:30px; background-color:#fff; border:1px solid rgba(209, 206, 224, 1.00); border-radius:5px; margin-top:60px; margin-bottom:40px; }
  69.  
  70. #pgbg .toptitle { font-family:moon; font-size:60px; text-align:left; -webkit-text-stroke: 1px #222222; color:transparent; text-transform:uppercase; letter-spacing:1px; margin-top:20px; margin-bottom:40px; }
  71.  
  72. #pgbg .pageinfo { margin-top:20px; margin-bottom:10px; }
  73.  
  74. #pgbg .pageinfo blockquote { background-color:rgba(209, 206, 224, 0.7); padding:20px; text-align:justify; font-family:poppins; font-size:11px; border-radius:5px; }
  75.  
  76. #pgbg .pagetitle { font-family:rotters; font-size:40px; text-align:left; padding:30px; }
  77.  
  78. #pgbg .pagetags { padding:30px; max-height:100px; overflow:auto; line-height:400%; word-spacing:10px; margin-bottom:20px; }
  79. #pgbg .pagetags a { background-color:#cee0d1; padding:10px; border-radius:5px; word-spacing:0px;}
  80.  
  81. #pgbg .pagecharas { padding:30px; max-height:320px; overflow:auto; }
  82. #pgbg .charblock { width:120px; padding:20px; text-align:center; text-transform:uppercase; font-size:9px; }
  83. #pgbg .charimg { width:100px; height:100px; padding:10px; }
  84. #pgbg .charimg img { width:100px; height:100px; background-size:cover; border-radius:100%; }
  85. #pgbg .charname { padding:10px; text-transform:uppercase; font-weight:800; }
  86. #pgbg .charname a:hover { background-color:#dacee0; padding:10px; border-radius:5px; }
  87.  
  88.  
  89. </style>
  90.  
  91. <body>
  92.  
  93. <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>
  94.  
  95.  
  96. <center>
  97. <div id="pgbg">
  98. <div class="toptitle">story title</div>
  99.  
  100. <div class="pageinfo"><blockquote>hi there i made this as a little story info page to match my theme. i don't think i'm going to use it so i decided to release it to the public. here you all go. also testing to see how this'll look long. this is supposed to be like a story blurb/about thing</blockquote></div>
  101.  
  102. <div class="pagetitle">tags</div>
  103.  
  104. <div class="pagetags"><a href="//">tag one</a> <a href="//">tag two</a> <a href="//">tag three</a> <a href="//">tag four</a> <a href="//">tag five</a> <a href="//">tag six</a> <a href="//">tag seven</a> <a href="//">tag eight</a> <a href="//">tag one</a> <a href="//">tag two</a> <a href="//">tag three</a> <a href="//">tag four</a> <a href="//">tag five</a> <a href="//">tag six</a> <a href="//">tag seven</a> <a href="//">tag eight</a>
  105. </div>
  106.  
  107.  
  108. <div class="pagetitle">characters</div>
  109.  
  110. <div class="pagecharas">
  111.  
  112. <table><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  113. <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  114. <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  115. </table>
  116.  
  117.  
  118. <table><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  119. <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  120. <td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td><td><div class="charblock"><div class="charimg"><img src="http://placehold.it/100"></div><div class="charname"><a href="//">first last</a></div></div></td>
  121. </table>
  122.  
  123.  
  124.  
  125. </div>
  126.  
  127. </div>
  128. </center>
  129. </body>
  130.  
  131. </html>
RAW Paste Data