Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. @import url("https://fonts.googleapis.com/css2?family=Mynerve&display=swap");
  6. </style>
  7. <meta charset="UTF-8" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <title>Pokemon Shrine</title>
  10. <!-- The style.css file allows you to change the look of your web pages.
  11. If you include the next line in all your web pages, they will all share the same look.
  12. This makes it easier to make new pages for your site. -->
  13. <link href="/style.css" rel="stylesheet" type="text/css" media="all" />
  14. <script src="https://unpkg.com/[email protected]/built/webamp.bundle.min.js"></script>
  15. </head>
  16. <body>
  17. <div id="main">
  18. <p>just some placeholder text for now :></p>
  19. <ul> to do:
  20. <br><br>
  21. <li>add custom flaaffy cursor (that moves)</li>
  22. <li>plan out how the page layout will look</li>
  23. <li>set some custom fonts</li>
  24. <li>make a navbar</li>
  25.  
  26.  
  27. <br><br>
  28.  
  29. </ul>
  30.  
  31.  
  32.  
  33. <div id="musicplayerbox" style="left: -20px;">
  34.  
  35. <audio controls loop autoplay src="https://files.catbox.moe/8crcwr.mp3" type="audio/mp3" style="height: 35px"></audio>
  36.  
  37. </div>
  38.  
  39.  
  40.  
  41.  
  42. <div id="scrollbox">
  43.  
  44. </div>
  45.  
  46.  
  47.  
  48.  
  49.  
  50. <img src="https://cdn.discordapp.com/attachments/1137355840978944091/1141176075989303358/Untitled1205_20230815200420.png" id="title">
  51.  
  52. <img src="https://cdn.discordapp.com/attachments/1137355840978944091/1141892981679468604/oie_ooF04H7uoI81.gif" id="flaaffybutton">
  53.  
  54. <style>
  55.  
  56. body {
  57. background-image: url("https://cdn.discordapp.com/attachments/1137355840978944091/1141189252806348800/Glitter-Graphics-the-community-for-graphics-enthusiasts.png");
  58. padding: 5px;
  59. background-repeat: repeat;
  60. width: 1000px;
  61. position: relative;
  62. display: block;
  63. margin-left: auto;
  64. margin-right: auto;
  65.  
  66.  
  67. }
  68.  
  69. #main {
  70. border: 3px red solid;
  71. height: 3000px;
  72. width: 1000px;
  73. background-image: url('https://cdn.discordapp.com/attachments/1137355840978944091/1143702168273178775/tumblr_inline_mqijm93dHT1qz4rgp.png');
  74. position: absolute;
  75. bottom: -3230px;
  76.  
  77.  
  78. }
  79.  
  80. #title {
  81. width: 900px;
  82. position: absolute;
  83. top: -150px;
  84. right: 60px;
  85. }
  86.  
  87. #scrollbox {
  88. height: 550px;
  89. width: 930px;
  90. border: red 2px solid;
  91. position: relative;
  92. left: 35px;
  93. overflow-y: scroll;
  94. overflow-x: hidden;
  95.  
  96. }
  97.  
  98. #flaaffybutton {
  99. position: absolute;
  100. right: -150px;
  101. width: 125px;
  102. bottom: -3220px;
  103.  
  104.  
  105.  
  106. }
  107.  
  108. #musicplayerbox {
  109. position: sticky;
  110. width: 300px;
  111. height: 300px;
  112. border: 3px purple dashed;
  113. top: 0px;
  114. left: -20px;
  115.  
  116. }
  117.  
  118. html {
  119.   animation: cursoranim 1s infinite;
  120. }
  121. @keyframes animate{
  122.   0%{
  123.     cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934289331474582/cursor-frame1.png"), auto;
  124.   }
  125.   50%{
  126.     cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934303403364413/cursor-frame2.png"), auto;
  127.   }
  128.   100%{
  129.     cursor: url("https://cdn.discordapp.com/attachments/1137355840978944091/1144934289331474582/cursor-frame1.png"), auto;
  130.   }
  131. }
  132.  
  133.  
  134.  
  135.  
  136. </style>
  137.  
  138.  
  139.  
  140. </body>