lollyracket

attack - about page

Oct 31st, 2020 (edited)
22
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=Karla:wght@400;700&display=swap" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;700;900&display=swap" rel="stylesheet">
  7.  
  8.  
  9. <style type="text/css">
  10.  
  11. /* -- credits
  12. code was made by lollyracketcodes. please do not copy or frankenstein.
  13.  
  14. honyebee icon font is credit to suiomi
  15.  
  16. --*/
  17.  
  18.  
  19. body { font-family:karla; font-size:10px; background-color:#f0f0f0; }
  20. body a { text-decoration:none; color:#000; }
  21. body a:hover { text-decoration:line-through; }
  22.  
  23. ::-webkit-scrollbar {
  24. width: 2px;
  25. }
  26. ::-webkit-scrollbar-track {
  27. background:transparent;
  28. }
  29. ::-webkit-scrollbar-thumb {
  30. background:rgba(0,0,0,0.6);
  31. }
  32.  
  33. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  34. #credit icon { padding:5px; font-size:20px; }
  35. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  36.  
  37. /* -- fonts --*/
  38.  
  39. @font-face {
  40. font-family: 'Tondu';
  41. src: url('https://static.tumblr.com/xab8hqo/Hnpqia0c5/tondu_beta.woff') format('woff');
  42. }
  43.  
  44. #attackhold { width:750px; height:500px; background-color:#fff; border:1px solid #ccc; margin:50px auto auto auto; padding:10px; overflow:hidden; }
  45. #attackhold .titlebox { width:40%; height:480px; background-color:#6A7FDB; padding:10px; float:left; text-align:center; overflow:hidden; }
  46. #attackhold .titlelinks { margin:30px 20px 20px 20px; padding:20px; height:180px; overflow:auto; font-family:poppins; font-style:italic; font-size:20px; }
  47. #attackhold .linkblock { padding:10px; text-align:center; color:#fff; }
  48. #attackhold .linkblock a { color:#fff; }
  49. #attackhold .titlecard { font-family:tondu; font-size:40px; text-align:center; padding:20px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color:#fff; color:transparent; transform:rotate(15deg); margin-top:50px; opacity:0.7; }
  50.  
  51. #attackhold .infobox { width:53%; height:475px; padding:10px; float:right; }
  52. #attackhold .infoimg { width:395px; height:150px; }
  53. #attackhold .infoimg img { width:395px; height:150px; background-image:cover; }
  54. #attackhold .infotext { margin:10px 0px 10px 0px; padding:10px; height:200px; overflow:auto; text-align:justify; }
  55. #attackhold .infotag { margin:20px 0px 10px 0px; padding:10px; font-family:tondu; font-size:30px; text-align:center; }
  56. #attackhold .infohighlight { background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #6A7FDB 50%); }
  57. </style>
  58.  
  59.  
  60. </head>
  61.  
  62. <body>
  63.  
  64. <div id="attackhold">
  65. <div class="titlebox">
  66. <div class="titlelinks">
  67. <div class="linkblock"><a href="//"> link</a></div>
  68. <div class="linkblock"><a href="//">link</a></div>
  69. <div class="linkblock"><a href="//">link</a></div>
  70. <div class="linkblock"><a href="//">link</a></div>
  71. <div class="linkblock"><a href="//">link</a></div>
  72. <div class="linkblock"><a href="//">link</a></div>
  73. </div>
  74. <div class="titlecard">short line of lyrics or something</div>
  75.  
  76. </div>
  77.  
  78. <div class="infobox">
  79. <div class="infoimg"><img src="http://placehold.it/395x150"></div>
  80. <div class="infotext">about you here it scrolls</div>
  81.  
  82. <div class="infotag"><span class="infohighlight">name</span> // <span class="infohighlight">age</span> // <span class="infohighlight">pronouns</span> </div>
  83.  
  84. </div>
  85.  
  86. </div>
  87.  
  88. <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>
  89.  
  90. </body>
  91.  
  92. </html>
RAW Paste Data