lollyracket

butterfly - nav page

Nov 14th, 2020
19
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.  
  3. <head>
  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.  
  9. <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Be+Vietnam|Bree+Serif|Bungee+Outline|Elsie|Emblema+One|Fugaz+One|Kumar+One|Monoton|Prata|Righteous|Roboto+Slab:400,700|Shrikhand|Sonsie+One|Vidaloka&display=swap" rel="stylesheet">
  10.  
  11. <style type="text/css">
  12.  
  13. /* -- credits
  14. code was made by lollyracketcodes. please do not copy or frankenstein.
  15.  
  16. honyebee icon font is credit to suiomi
  17.  
  18. --*/
  19.  
  20.  
  21. body { font-family:poppins; background-image:url(https://img.nickpic.host/rYQN3D.png); }
  22. body a { text-decoration:none; color:#000; }
  23.  
  24. ::-webkit-scrollbar {
  25. width: 1px; }
  26. ::-webkit-scrollbar-thumb {
  27. background-color:#000; }
  28.  
  29. ::-webkit-scrollbar-track {
  30. background-color:transparent;
  31. }
  32. #credit { position:fixed; right:20px; bottom:30px; padding:10px; font-size:9px; text-transform:uppercase; background-color:#f5f5f5; border:1px solid #ccc; }
  33. #credit icon { padding:5px; font-size:20px; }
  34. #credit:hover { transition-duration:1.2s; transition-timing-function:ease-in; font-weight:900; background-color:#a6dfb0; border:1px solid #a6dfb0; }
  35.  
  36.  
  37. #butterside { position:fixed; top:0px; bottom:0px; left:0px; padding:20px; background-color:rgba(244,187,211,0.6); border-right:1px solid #F4BBD3; }
  38. #butterside .sidenote { width:130px; padding:10px; text-align:justify; border:1px solid #f4bbd3; font-size:10px; background-color:#fff; }
  39.  
  40. #butterhold { position:fixed; top:50px; left:220px; padding:20px; width:700px; }
  41. #butterhold .maintitle { font-family:sonsie one; font-weight:800; letter-spacing:-2px; font-size:50px; margin-bottom:10px; }
  42. #butterhold .navbox { width:600px; height:350px; padding:10px; background-color:#fff; border:1px solid #ccc; }
  43. #butterhold .navinside { padding:10px; height:330px; overflow:auto;}
  44. #butterhold .navtitle { text-align:left; font-size:25px; font-family:sonsie one; }
  45. #butterhold .navtitle color { border:1px solid #f4bbd3; background-color:rgba(244,187,211,0.5); padding:5px; }
  46. #butterhold .navlist { padding:10px; text-align:left; }
  47. #butterhold .navlist a:hover { background-color:#f4bbd3; padding:3px; }
  48. #butterhold .navlist ul { list-style-type:circle; }
  49. #butterhold .linkbar { padding:20px;
  50. width:580px;
  51. background-color:#f4bbd3; border:1px solid #f4bbd3; }
  52. #butterhold .linkbar a { padding:5px; font-weight:800; background-color:#FE5D9F; display:inline; }
  53. #butterhold .linkbar a:hover { transition:0.8s ease-in-out; font-style:italic; }
  54.  
  55. </style>
  56.  
  57.  
  58. </head>
  59.  
  60. <body>
  61. <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>
  62.  
  63.  
  64. <div id="butterside">
  65. <div class="sidenote">a little note here. could be an "about this page" description or a note about the last time it was updated.</div>
  66. </div>
  67.  
  68. <div id="butterhold">
  69. <center>
  70. <div class="maintitle">navigation</div>
  71.  
  72. <div class="navbox"><div class="navinside">
  73. <div class="navtitle"><color>header one</color></div>
  74. <div class="navlist">
  75. <ul>
  76. <li><a href="//">link</a></li>
  77. <li><a href="//">link</a></li>
  78. <li><a href="//">link</a></li>
  79. <li><a href="//">link</a></li>
  80. <li><a href="//">link</a></li>
  81. </ul>
  82. </div>
  83.  
  84. <div class="navtitle"><color>header two</color></div>
  85. <div class="navlist">
  86. <ul>
  87. <li><a href="//">link</a></li>
  88. <li><a href="//">link</a></li>
  89. <li><a href="//">link</a></li>
  90. <li><a href="//">link</a></li>
  91. <li><a href="//">link</a></li>
  92. </ul>
  93. </div>
  94. </div></div>
  95. <div class="linkbar">
  96. <a href="//">link one</a> <a href="//">link two</a> <a href="//">link three</a> <a href="//">link four</a> <a href="//">link five</a>
  97.  
  98.  
  99. </div>
  100. </center>
  101.  
  102.  
  103.  
  104.  
  105. </body>
  106.  
  107. </html>
RAW Paste Data