API tools faq
paste
lollyracket

quirk v2 - about page

lollyracket
Nov 14th, 2020
945
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.16 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
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!