lollyracket

tusk - about page

Oct 18th, 2020 (edited)
22
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head> <!-- this code was made by alyse @ lollyracketcodes. please don't claim as your own! the honeybee icons are credit to suiomi -->
  4.  
  5. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  6. <link href="https://fonts.googleapis.com/css?family=Montserrat:900&display=swap" rel="stylesheet">
  7. <link href="https://fonts.googleapis.com/css?family=Poppins:400,800,600&display=swap" rel="stylesheet">
  8. <link href="https://fonts.googleapis.com/css2?family=Fugaz+One&display=swap" rel="stylesheet">
  9.  
  10.  
  11. <style type="text/css">
  12.  
  13. body { font-family:poppins; font-size:10px; background-image:url(https://img.nickpic.host/FLiddb.jpg); }
  14. body a { text-decoration:none; color:#000; }
  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.  
  21. #tuskabout { width:780px; height:460px; padding:10px; background-color:rgba(0, 0, 0,0.7); border:1px solid #fff; margin:80px auto auto auto; position:relative; }
  22. #tuskabout .aboutfacts { width:300px; height:455px; background-color:rgba(165,164,233,0.8); overflow:hidden; position:relative; }
  23. #tuskabout .abouticon { font-size:160px; color:#a5a4e9; position:absolute; left:30px; bottom:30px; transform:rotate(25deg); }
  24. #tuskabout .aboutname { padding:10px; font-family:fugaz one; font-size:30px; position:absolute; top:40px; left:30px; }
  25. #tuskabout .aboutlink { position:absolute; top:120px; left:70px; padding:10px; font-size:9px; text-transform:uppercase; font-weight:800; font-family:poppins; }
  26. #tuskabout .aboutlink ul { list-style-type:none; margin:0px; padding:0px; }
  27. #tuskabout .aboutlink li { margin:0px; }
  28.  
  29.  
  30. #tuskabout .aboutbig { width:480px; height:455px; background-color:#f5f5f5; position:absolute; right:10px; top:10px; }
  31. #tuskabout .aboutimg { width:300px; height:200px; margin-top:30px; padding:10px; background-color:#a5a4e9; border:1px solid #a5a4e9;}
  32. #tuskabout .aboutimg img { width:300px; height:200px; background-size:cover; }
  33. #tuskabout .aboutinfo { width:280px; padding:20px; background-color:#fff; border:1px solid #ccc; border-top:none; text-align:justify; }
  34.  
  35.  
  36. </style>
  37.  
  38. <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>
  39. </head>
  40.  
  41. <body>
  42.  
  43. <div id="tuskabout">
  44. <div class="aboutfacts">
  45. <div class="abouticon"><span class="th th-sunflower-o"></span></div>
  46. <div class="aboutname">name</div>
  47. <div class="aboutlink"><ul>
  48.  
  49. <li><a href="//">link</a></li>
  50. <li><a href="//">link</a></li>
  51. <li><a href="//">link</a></li>
  52. <li><a href="//">link</a></li>
  53. <li><a href="//">link</a></li>
  54. <li><a href="//">link</a></li>
  55. <li><a href="//">link</a></li>
  56. </ul></div>
  57. </div>
  58. <div class="aboutbig"><center>
  59. <div class="aboutimg"><img src="https://placehold.it/300x200"></div>
  60. <div class="aboutinfo">info about yourself here</div>
  61.  
  62. </center> </div>
  63.  
  64.  
  65. </div>
  66. </body>
  67.  
  68. </html>
RAW Paste Data