Advertisement
wilderanima

ᴇᴠᴇʀʏᴛʜɪɴɢ, ɪɴ ᴛɪᴍᴇ

Apr 30th, 2024 (edited)
1,135
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 5.48 KB | Writing | 0 0
  1. <style>
  2.  
  3. @import url('https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap');
  4. @import url('https://fonts.googleapis.com/css2?family=Economica:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  5.  
  6. body {
  7. cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_1280.png), auto;
  8. background-color: #1b2a09; }
  9.  
  10. ::-webkit-scrollbar {
  11. display: none;}
  12.  
  13. ::selection {
  14. background: ;
  15. color: white;}
  16.  
  17. a {
  18. text-decoration: none;
  19. color: #a6c1bc;
  20. }
  21.  
  22. a:hover {
  23. color: #e5cfa2;
  24. }
  25.  
  26. .wilder {
  27. position: fixed;
  28. bottom: 0px;
  29. right: 0px; }
  30.  
  31. .container {
  32. position: absolute;
  33. margin: auto;
  34. top: 0px;
  35. bottom: 0px;
  36. left: 0px;
  37. right: 0px;
  38. height: 550px;
  39. width: 550px;
  40. background-color: #738859;
  41. border-radius: 10px; }
  42.  
  43. .image1 {
  44. position: absolute;
  45. margin: auto;
  46. top: 25px;
  47. bottom: 0px;
  48. left: 0px;
  49. right: 0px;
  50. height: 338px;
  51. width: 450px;
  52. background: url(https://placehold.co/450x338.png);
  53. background-size: cover;
  54. border: 5px solid #1b2a09;
  55. filter: grayscale(0%);
  56. border-radius: 10px; }
  57.  
  58. .image2 {
  59. position: absolute;
  60. bottom: 25px;
  61. left: -150px;
  62. right: 0px;
  63. height: 150px;
  64. width: 268px;
  65. background: url(https://placehold.co/268x150.png); <!--bottom-->
  66. background-size: cover;
  67. border: 5px solid #738859;
  68. filter: grayscale(0%);
  69. border-radius: 10px; }
  70.  
  71. .image3 {
  72. position: absolute;
  73. top: 25px;
  74. right: -150px;
  75. height: 150px;
  76. width: 268px;
  77. background: url(https://placehold.co/268x150.png); <!--top-->
  78. background-size: cover;
  79. border: 5px solid #738859;
  80. filter: grayscale(0%);
  81. border-radius: 10px; }
  82.  
  83. .name {
  84. position: absolute;
  85. top: 50px;
  86. left: 60px;
  87. font-family: walter turncoat;
  88. font-size: 50px;
  89. color: #1b2a09;
  90. }
  91.  
  92. .blurb {
  93. position: absolute;
  94. bottom: -50px;
  95. right: -75px;
  96. height: 195px;
  97. width: 240px;
  98. background: rgba(177, 163, 110, 0.3);
  99. backdrop-filter: blur(7.0px);
  100. -webkit-backdrop-filter: blur(7.0px);
  101. mix-blend-mode: overlay;
  102. border-radius: 10px 10px; }
  103.  
  104. .blin {
  105. position: absolute;
  106. bottom: -40px;
  107. right: -65px;
  108. height: 160px;
  109. width: 200px;
  110. padding: 8px;
  111. background: rgba(13, 13, 13, 0.4);
  112. backdrop-filter: blur(7.0px);
  113. -webkit-backdrop-filter: blur(7.0px);
  114. border-radius: 10px 10px;
  115. color: #fff;
  116. font: 13px economica;
  117. text-align: right;
  118. overflow: auto; }
  119.  
  120. .blin b {
  121. font: 16px walter turncoat;
  122. color: #CFC06A;
  123. mix-blend-mode: overlay;
  124. }
  125. .blin i {
  126. font: 14px economica;
  127. font-style: italic;
  128. }
  129. .blin p {
  130. margin: 5px;
  131. padding: 5px;
  132. outline: 1px solid #9A9B8C;
  133. text-align: justify;
  134. }
  135.  
  136. .cons {
  137. position: absolute;
  138. bottom: 25px;
  139. left: 140px;
  140. height: 55px;
  141. width: 240px;
  142. background: #738859;
  143. border: 1px solid #738859;
  144. padding: 0px;
  145. overflow: auto;
  146. }
  147.  
  148. .contact {
  149. width: 35px;
  150. height: 35px;
  151. border: 1px solid #1b2a09;
  152. display: inline-block;
  153. transition: all 500ms linear;
  154. object-fit: cover;
  155. margin: 5px;
  156. margin-bottom: 8px;
  157. padding: 4px;
  158. background: transparent;
  159. overflow:; }
  160.  
  161. .contact img {
  162. width: 35px;
  163. height: 35px;
  164. transition: all 500ms linear;
  165. -webkit-filter: grayscale(0%);
  166. /* Safari 6.0 - 9.0 */
  167. filter: grayscale(0%);
  168. opacity: 1; }
  169.  
  170. </style>
  171.  
  172. <!--
  173.  MUSIC PLAYER #02 by glenthemes
  174.  ♬ glenthpvs.tumblr.com/player02
  175. --->
  176. <script src="//cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
  177. <link href="//fonts.googleapis.com/css?family=Readex+Pro" rel="stylesheet">
  178. <link href="//glenthemes.github.io/-music-/glenplayer02.css" rel="stylesheet">
  179. <script src="//glenthemes.github.io/-music-/glenplayer02.js"></script>
  180. <style element="glenplayer02">
  181. :root {
  182.  --MusicPlayer-Position:bottom left;
  183.  --MusicPlayer-Edge-Offset:15px;
  184.  
  185.  --MusicPlayer-Buttons-Size:15px;
  186.  --MusicPlayer-Buttons-Color:#738859;
  187.  --MusicPlayer-Buttons-Fill:yes;
  188.  
  189. }
  190. </style>
  191.  
  192. <div glenplayer02>
  193.  <div controls></div>
  194.  <i class="aa-line-icons" icon-name="music-2"></i>
  195.  <audio src="MUSIC_LINK" volume="100%"></audio>
  196. </div>
  197.  
  198. <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>
  199.  
  200. <div class="container">
  201. <div class="image1"></div>
  202. <div class="image2"></div>
  203. <div class="image3"></div>
  204. <div class="name">Name Name</div>
  205.  
  206. <div class="blurb"></div>
  207. <div class="blin">
  208. <p>put whatever you want in here!</p>
  209. <p>put whatever you want in here!</p>
  210. <p>put whatever you want in here!</p>
  211. <p>put whatever you want in here!</p>
  212. <p><b>bold</b> <i>italic</i> <a>link</a></p> <br>
  213.  
  214. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br>
  215.  
  216. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br><br>
  217.  
  218. </div>
  219.  
  220. <div class="cons">
  221.  
  222. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
  223.  <div class="contact">
  224. <img class="contact-img" src="https://placehold.co/50x50.png">
  225.  </div> </a>
  226.  
  227. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
  228.  <div class="contact">
  229. <img class="contact-img" src="https://placehold.co/50x50.png">
  230.  </div> </a>
  231.  
  232. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
  233.  <div class="contact">
  234. <img class="contact-img" src="https://placehold.co/50x50.png">
  235.  </div> </a>
  236.  
  237. <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="Name." >
  238.  <div class="contact">
  239. <img class="contact-img" src="https://placehold.co/50x50.png">
  240.  </div> </a>
  241.  
  242. </div>
  243.  
  244. </div>
Tags: RPC
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement