lollyracket

quirk - about page

Nov 10th, 2020
132
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=Open+Sans:wght@400;700&family=Secular+One&display=swap" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&display=swap" rel="stylesheet">
  7. <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
  8.  
  9. <style type="text/css">
  10. /* -- credits
  11. code was made by lollyracketcodes. please do not copy or frankenstein.
  12.  
  13. honyebee icon font is credit to suiomi
  14.  
  15. --*/
  16. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  17. #credit icon { padding:5px; font-size:20px; }
  18. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  19.  
  20. body { font-family:open sans; font-size:10px; background-image:url(https://img.nickpic.host/FyLs0m.png); }
  21. body a { text-decoration:none; color:#000; }
  22.  
  23. ::-webkit-scrollbar {
  24. width: 2px;
  25. }
  26. ::-webkit-scrollbar-track {
  27. background:transparent;
  28. }
  29. ::-webkit-scrollbar-thumb {
  30. background:#fff;
  31. }
  32.  
  33. #scarecrowbig { width:800px; height:400px; padding:20px; background-color:#f5f5f5; border:1px solid #ccc; margin:80px auto auto auto; position:relative; }
  34. #scarecrowbig .scareinside { position:absolute; top:10px; bottom:10px; left:10px; right:10px; background-color:#fff; border:1px solid #ccc; }
  35. #scarecrowbig .leftside { position:absolute; left:-1px; top:-1px; bottom:-1px; background-color:#bcedc2; padding:20px; z-index:99; }
  36. #scarecrowbig .leftlinks { padding:10px; text-align:center; margin-top:10px; }
  37. #scarecrowbig .lefticon { font-size:30px; padding:10px; }
  38. #scarecrowbig .leftext { text-transform:uppercase; font-size:9px; }
  39.  
  40. #scarecrowbig .bigtext { width:280px; height:150px; overflow:hidden; padding:10px; font-family:fugaz one; font-size:25px; position:absolute; left:100px; top:50px; }
  41. #scarecrowbig .biglinks { width:280px; padding:10px; position:absolute; left:100px; bottom:100px; }
  42. #scarecrowbig .biglinks table td { background-color:#f5f5f5; border:1px solid #ccc; font-size:10px; text-align:center; padding:20px; text-transform:uppercase; font-weight:800; }
  43. #scarecrowbig .biglinks icon { font-size:12px; padding:5px; }
  44.  
  45. #scarecrowbig .rightbig { width:320px; padding:20px; position:absolute; right:30px; top:20px; bottom:20px; background-color:#bce7ed; }
  46. #scarecrowbig .rightimg { width:300px; height:200px; border:1px solid #fff; padding:10px; }
  47. #scarecrowbig .rightimg img { width:300px; height:200px; background-size:cover; }
  48. #scarecrowbig .rightinfo { padding:10px; height:80px; overflow:auto; text-align:justify; margin-top:10px; }
  49.  
  50. </style>
  51.  
  52.  
  53. </head>
  54.  
  55. <body>
  56. <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>
  57.  
  58. <div id="scarecrowbig"><div class="leftside"><div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-fire-o"></span></div>
  59. <div class="leftext">link</div>
  60. </a></div>
  61. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-flash-o"></span></div>
  62. <div class="leftext">link</div>
  63. </a></div>
  64. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-rainbow-o"></span></div>
  65. <div class="leftext">link</div>
  66. </a></div>
  67. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-snowflake-o"></span></div>
  68. <div class="leftext">link</div>
  69. </a></div>
  70. </div>
  71. <div class="scareinside">
  72. <div class="bigtext">some chunk of lyrics</div>
  73. <div class="biglinks">
  74. <center>
  75. <table><td><icon><span class="th th-bubble-heart-o"></span></icon> pronouns</td> <td><icon><span class="th th-location-4-o"></span></icon> timezone</td></table>
  76. </center>
  77. </div>
  78.  
  79. <div class="rightbig">
  80. <div class="rightimg"><img src="http://placehold.it/300x200"></div>
  81. <div class="rightinfo">info goes here</div>
  82. </div>
  83.  
  84. </div>
  85. </div>
  86.  
  87. </body>
  88.  
  89. </html>
RAW Paste Data