Advertisement
wilderanima

𝐒𝐄𝐕𝐄𝐍

May 13th, 2024
1,115
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.44 KB | Writing | 0 0
  1.      Hello, wildlings!
  2.  
  3.   A straightforward placeholder code with an image and a scrolling words box.
  4.   Follow the dimensions of the images, otherwise, they won't fit properly.
  5.  Feel free to change colors!
  6.  
  7.  Please do not steal this code.
  8.  Leave the credit! <3 Happy Writing!
  9.  
  10. β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€”
  11.  
  12. <style>
  13.  
  14. @import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  15.  
  16. body {
  17. cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
  18. background-color: #000;
  19. }
  20.  
  21. ::-webkit-scrollbar {
  22. display: none;
  23. }
  24.  
  25. ::selection {
  26. background: ;
  27. color: white;
  28. }
  29.  
  30. .container {
  31. position: absolute;
  32. margin: auto;
  33. top: 0px;
  34. bottom: 0px;
  35. left: 0px;
  36. right: 0px;
  37. height: 550px;
  38. width: 550px;
  39. background-color: #000;
  40. }
  41.  
  42. .wilder {
  43. position: fixed;
  44. bottom: 0px;
  45. right: 0px;
  46. }
  47.  
  48. .image1 {
  49. position: absolute;
  50. margin: auto;
  51. top: 0px;
  52. bottom: 0px;
  53. left: 0px;
  54. right: 250px;
  55. height: 400px;
  56. width: 250px;
  57. background: url(https://placehold.co/250x400.png);
  58. background-size: cover;
  59. outline: 1px solid #554136;
  60. outline-offset: -5px;
  61. }
  62.  
  63. .words {
  64. position: absolute;
  65. margin: auto;
  66. top: 0px;
  67. bottom: 0px;
  68. left: 275px;
  69. right: 0px;
  70. height: 355px;
  71. width: 250px;
  72. font: 12px economica;
  73. color: #a3a597;
  74. text-align: center;
  75. overflow: auto;
  76. }
  77. b {
  78. font: 13px economica;
  79. color: #554136;
  80. text-transform: uppercase;
  81. font-weight: bold;
  82. }
  83. i {
  84. font: 13px economica;
  85. font-style: italic;
  86. color: #7a6d65;
  87. }
  88. a {
  89. text-decoration: none;
  90. font: 13px times;
  91. color: #7a6d65;
  92. transition: 0.5s;
  93. }
  94. a:hover {
  95. color: #a3a597;
  96. text-shadow: 1px 1px 0px #7a6d65;
  97.  
  98. </style>
  99.  
  100. <!--
  101. MUSIC PLAYER #02 by glenthemes
  102. ♬ glenthpvs.tumblr.com/player02
  103. --->
  104. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  105. <link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
  106. <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
  107. <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
  108. <style element="glenplayer02">
  109. :root {
  110. --MusicPlayer-Position:bottom left;
  111. --MusicPlayer-Edge-Offset:15px;
  112.  
  113. --MusicPlayer-Buttons-Size:14px;
  114. --MusicPlayer-Buttons-Color:#554136;
  115. --MusicPlayer-Buttons-Fill:yes;
  116.  
  117. }
  118. </style>
  119.  
  120. <div glenplayer02>
  121. <div controls></div>
  122. <i class="aa-line-icons" icon-name="music-2"></i>
  123. <audio src="MUSIC_LINK" volume="100%"></audio>
  124. </div>
  125.  
  126. <div class="wilder"><a target="_blank" href="https://pastebin.com/u/wilderanima" title="code by wilder."><img src="https://i.imgur.com/hCJmFVu.png" width="75px;"></a></div>
  127.  
  128. <div class="container">
  129. <div class="image1"></div>
  130. <div class="words">
  131.  
  132. <b>let's try something bold.</b> <br>
  133. <i>how about something italic?</i> <br>
  134. <a>and for good measure? a link.</a> <br><br>
  135.  
  136. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br>
  137.  
  138. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br>
  139.  
  140. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br><br>
  141.  
  142. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br>
  143.  
  144. <hr size="1" width="100%" noshade style="color:#554136"/>
  145. <br>
  146.  
  147. words. <br><br>
  148.  
  149. </div>
  150. </div>
Tags: RPC
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement