lollyracket

quirk v2 - about page

Nov 14th, 2020
712
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=League+Script&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:11px; 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. #lionmanbig { width:800px; height:450px; padding:20px; background-color:#e1e1e1; border:1px solid #ccc; margin:70px auto auto auto; position:relative; }
  34. #lionmanbig .scareinside { position:absolute; top:10px; bottom:10px; left:95px; right:10px; background-color:#f5f5f5; border:1px solid #ccc; }
  35. #lionmanbig .leftside { position:absolute; left:-1px; top:-1px; bottom:-1px; background-color:#797596; padding:20px; z-index:99; }
  36. #lionmanbig .leftlinks { padding:10px; text-align:center; margin-top:15px; }
  37. #lionmanbig .leftlinks a:hover { font-style:italic; transition:0.8s ease-in-out; }
  38. #lionmanbig .lefticon { font-size:30px; padding:5px; }
  39. #lionmanbig .leftext { text-transform:uppercase; font-size:9px; font-weight:700; }
  40.  
  41. #lionmanbig .sideimg { width:300px; height:250px; background-image:url(https://placehold.it/300x250); position:absolute; top:20px; left:25px; overflow:hidden; }
  42. #lionmanbig .sidetext { width:270px; font-family:league script; font-size:30px; transform:rotate(-10deg); text-align:center; margin:70px auto auto auto; }
  43.  
  44. /* -- tabs --*/
  45.  
  46.  
  47.  
  48. #lionmanbig .tabscontain { position: relative; width:705px; height:440px; clear: both; overflow: hidden; margin-left:10px; margin-top:10px; }
  49. #lionmanbig .tabutton { float: left; padding:10px; margin-top:280px; }
  50. #lionmanbig .tabutton label { font-family:league script; font-size:20px; text-transform:lowercase; }
  51.  
  52. #lionmanbig .tabscontain .tabutton [type=radio] { display: none; baseline-tab-shift: true, retrieve; }
  53.  
  54. #lionmanbig .tabcontent { position: absolute; top: 0px; bottom: 0px; right:0px; width: 340px; height: 415px; padding: 10px; opacity: 0; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; }
  55. #lionmanbig .tabscontain .tabutton [type=radio]:checked ~ label { background-color:#797596; color:#fff; z-index: 2; }
  56. #lionmanbig .tabscontain .tabutton [type=radio]:checked ~ label ~ .tabcontent { z-index: 1; opacity: 1;}
  57.  
  58. #lionmanbig .onemove { position:absolute; left:100px; padding:5px; }
  59. #lionmanbig .twomove { position:absolute; left:100px; top:320px; padding:5px; }
  60. #lionmanbig .threemove { position:absolute; left:100px; top:350px; padding:5px; }
  61.  
  62. #lionmanbig .aboutinfo { height:25px; border:1px solid #ccc; background-color:#e1e1e1; width:167px; overflow:hidden; }
  63. #lionmanbig .aboutinfo left { float:right; font-size:10px; padding:7px; }
  64. #lionmanbig .aboutinfo right { float:left; background-color:#797596; text-transform:uppercase; font-weight:800; font-size:9px; padding:7px; }
  65. #lionmanbig .tabcontent table, th, td { border-collapse:collapse; padding:none; }
  66. #lionmanbig .aboutmore { padding:10px; text-align:justify; height:100px; margin-top:10px; background-color:#e1e1e1; border:1px solid #ccc; border-radius:5px; }
  67.  
  68. #lionmanbig .favebox { width:80px; height:140px; padding:10px; margin-top:10px; text-align:justify; font-size:9px; margin-right:4px; margin-left:4px; background-color:#e1e1e1; border-radius:5px; border:1px solid #ccc; }
  69.  
  70. #lionmanbig .navbox { padding:10px; height:390px; overflow:auto; }
  71. #lionmanbig .navtitle { font-family:league script; font-size:30px; text-align:left; border-bottom:1px solid #797596; margin-top:10px; }
  72. #lionmanbig .navlinks { padding:10px; text-align:left; line-height:250%; }
  73. #lionmanbig .navlinks a { padding:5px; background-color:#e1e1e1; border:1px solid #ccc; font-size:10px; font-family:hammersmith one; }
  74. #lionmanbig .navlinks a:hover { background-color:#797596; color:#fff; transition:0.8s ease-in-out; }
  75.  
  76. #lionmanbig .playlistbig { width:280px; padding:10px; background-color:#e1e1e1; border:1px solid #ccc; margin:10px; auto auto auto; }
  77. #lionmanbig .songname { padding:10px; background-color:#fafafa; border-radius:5px; margin-bottom:10px; }
  78. #lionmanbig .songtext { font-family:hammersmith one; text-transform:lowercase; margin-left:20px; }
  79. #lionmanbig .songname link { float:left; font-size:20px; color:#797596; }
  80. #lionmanbig .playlistbig a:hover .songname { background-color:#797596; color:#fff; transition:0.8s ease-in-out; }
  81. #lionmanbig .songname artist { float:right; text-transform:uppercase; font-style:italic; font-family:hammersmith one; font-size:10px; }
  82.  
  83.  
  84. </style>
  85.  
  86.  
  87. </head>
  88.  
  89.  
  90. <body>
  91. <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>
  92.  
  93. <div id="lionmanbig"><div class="leftside"><div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-fire-o"></span></div>
  94. <div class="leftext">link</div>
  95. </a></div>
  96. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-flash-o"></span></div>
  97. <div class="leftext">link</div>
  98. </a></div>
  99. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-rainbow-o"></span></div>
  100. <div class="leftext">link</div>
  101. </a></div>
  102. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-snowflake-o"></span></div>
  103. <div class="leftext">link</div>
  104. </a></div>
  105. <div class="leftlinks"><a href="//"><div class="lefticon"><span class="th th-sunset-o"></span></div>
  106. <div class="leftext">link</div>
  107. </a></div>
  108. </div>
  109. <div class="scareinside">
  110.  
  111. <div class="sideimg"><div class="sidetext">your grace is wasted in your face</div></div>
  112.  
  113.  
  114.  
  115. <div class="tabscontain">
  116. <div class="tabutton">
  117. <input type="radio" id="tabutton-1" name="tabutton-group-4" checked>
  118. <label for="tabutton-1" class="onemove">about</label>
  119. <div class="tabcontent"><div style="height:10px;"></div>
  120. <table><tr>
  121. <th><div class="aboutinfo"><right>name</right> <left>here</left></div></th>
  122. <th><div class="aboutinfo"><right>age</right> <left>here</left></div></th>
  123. </tr><tr>
  124. <th><div class="aboutinfo"><right>timezone</right> <left>here</left></div></th>
  125. <th><div class="aboutinfo"><right>mood</right> <left>here</left></div></th>
  126. </tr>
  127. <tr>
  128. <th><div class="aboutinfo"><right>listening to</right> <left>here</left></div></th>
  129. <th><div class="aboutinfo"><right>watching</right> <left>here</left></div></th>
  130. </tr></table>
  131.  
  132. <div class="aboutmore">about you here</div>
  133. <center>
  134. <table><td><div class="favebox">favorite music here, it scrolls</div></td>
  135. <td><div class="favebox">favorite shows here, it scrolls</div></td>
  136. <td><div class="favebox">favorite movies here, it scrolls</div></td>
  137. </table></center>
  138.  
  139. </div>
  140. </div>
  141.  
  142. <div class="tabutton">
  143. <input type="radio" id="tabutton-2" name="tabutton-group-4">
  144. <label for="tabutton-2" class="twomove">navigation</label>
  145. <div class="tabcontent">
  146. <div class="navbox">
  147. <div class="navtitle">header one</div>
  148. <div class="navlinks"><a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a>
  149. </div>
  150. <div class="navtitle">header two</div>
  151. <div class="navlinks"><a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a>
  152. </div>
  153. <div class="navtitle">header three</div>
  154. <div class="navlinks"><a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a> <a href="//">link</a>
  155. </div>
  156.  
  157. </div>
  158. </div></div>
  159.  
  160. <div class="tabutton">
  161. <input type="radio" id="tabutton-3" name="tabutton-group-4">
  162. <label for="tabutton-3" class="threemove">playlist</label>
  163. <div class="tabcontent">
  164.  
  165. <div class="playlistbig">
  166. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  167. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  168. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  169. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  170. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  171. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  172. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  173. <a href="//"><div class="songname"><link><span class="th th-music-o"></span></link> <span class="songtext">song title</span> <artist>artist</artist></div></a>
  174. </div>
  175.  
  176.  
  177.  
  178. </div>
  179.  
  180. </div>
  181.  
  182.  
  183.  
  184.  
  185. </div></div>
  186.  
  187.  
  188. </body>
  189.  
  190. </html>
RAW Paste Data