API tools faq
paste
iStabOreos

Daiichi Profile

iStabOreos
Jan 2nd, 2025 (edited)
134
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.56 KB | None | 0 0
raw download clone embed print report
  1. !DOCTYPE html>
  2. <title></title>
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <style>
  7. @keyframes zoomIn {
  8. 0% {
  9. transform: scale(0.8);
  10. opacity: 0;
  11. }
  12. 100% {
  13. transform: scale(1);
  14. opacity: 1;
  15. }
  16. }
  17. @keyframes pulseOrange {
  18. 0% {
  19. box-shadow: 0 0 10px 5px rgba(255, 102, 0, 0.4);
  20. }
  21. 50% {
  22. box-shadow: 0 0 20px 10px rgba(255, 102, 0, 0.8);
  23. }
  24. 100% {
  25. box-shadow: 0 0 10px 5px rgba(255, 102, 0, 0.4);
  26. }
  27. }
  28. .bleach-profile {
  29. width: 430px;
  30. margin: 20px auto;
  31. border: 3px double #FF6600;
  32. padding: 10px;
  33. background-color: rgba(0, 0, 0, 0.9);
  34. text-align: left;
  35. font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  36. color: #FFFFFF;
  37. border-radius: 15px;
  38. animation: zoomIn 0.6s ease-in-out;
  39. position: relative;
  40. box-shadow: 0 0 15px 5px rgba(255, 102, 0, 0.4);
  41. overflow: hidden;
  42. }
  43. .bleach-title {
  44. font-size: 24px;
  45. letter-spacing: 2px;
  46. text-transform: uppercase;
  47. text-align: center;
  48. padding: 10px;
  49. background: linear-gradient(to right, #FF6600, #FF9933);
  50. border-radius: 10px;
  51. margin-bottom: 10px;
  52. }
  53. .stripe-container {
  54. width: 100%;
  55. margin: 0 auto 10px auto;
  56. }
  57. .bleach-stripe {
  58. height: 6px;
  59. margin: 2px 0;
  60. transition: filter 0.3s ease-in-out;
  61. border-radius: 0;
  62. }
  63. .bleach-stripe:hover {
  64. filter: brightness(1.2);
  65. }
  66. .stripe-white { background-color: #FFFFFF; }
  67. .stripe-pink { background-color: #FF0066; }
  68. .stripe-blue { background-color: #0066FF; }
  69. .image-container {
  70. position: relative;
  71. width: 100%;
  72. max-width: 400px;
  73. margin: 0 auto;
  74. perspective: 800px;
  75. animation: zoomIn 0.6s ease-in-out;
  76. }
  77. .playby-image {
  78. width: 100%;
  79. border: 3px solid #FF6600;
  80. border-radius: 15px;
  81. transform-origin: center;
  82. transition: transform 0.6s ease-in-out, box-shadow 0.6s ease-in-out;
  83. position: relative;
  84. z-index: 1;
  85. box-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
  86. }
  87. .tilt-zone {
  88. position: absolute;
  89. width: 33.3%;
  90. height: 33.3%;
  91. background-color: transparent;
  92. z-index: 2;
  93. }
  94. .top-left { top: 0; left: 0; }
  95. .top-middle { top: 0; left: 33.3%; }
  96. .top-right { top: 0; left: 66.6%; }
  97. .mid-left { top: 33.3%; left: 0; }
  98. .mid-center { top: 33.3%; left: 33.3%; }
  99. .mid-right { top: 33.3%; left: 66.6%; }
  100. .bottom-left { top: 66.6%; left: 0; }
  101. .bottom-middle { top: 66.6%; left: 33.3%; }
  102. .bottom-right { top: 66.6%; left: 66.6%; }
  103. .top-left:hover ~ .playby-image {
  104. transform: rotateX(10deg) rotateY(-10deg) scale(1.05);
  105. }
  106. .top-middle:hover ~ .playby-image {
  107. transform: rotateX(10deg) rotateY(0deg) scale(1.05);
  108. }
  109. .top-right:hover ~ .playby-image {
  110. transform: rotateX(10deg) rotateY(10deg) scale(1.05);
  111. }
  112. .mid-left:hover ~ .playby-image {
  113. transform: rotateX(0deg) rotateY(-10deg) scale(1.05);
  114. }
  115. .mid-center:hover ~ .playby-image {
  116. transform: rotateX(0deg) rotateY(0deg) scale(1.07);
  117. }
  118. .mid-right:hover ~ .playby-image {
  119. transform: rotateX(0deg) rotateY(10deg) scale(1.05);
  120. }
  121. .bottom-left:hover ~ .playby-image {
  122. transform: rotateX(-10deg) rotateY(-10deg) scale(1.05);
  123. }
  124. .bottom-middle:hover ~ .playby-image {
  125. transform: rotateX(-10deg) rotateY(0deg) scale(1.05);
  126. }
  127. .bottom-right:hover ~ .playby-image {
  128. transform: rotateX(-10deg) rotateY(10deg) scale(1.05);
  129. }
  130. .tilt-zone:hover ~ .playby-image {
  131. box-shadow: 0 0 15px 10px rgba(255, 102, 0, 0.7);
  132. }
  133. .quote-text {
  134. font-size: 14px;
  135. font-style: italic;
  136. color: #FFCC99;
  137. text-align: center;
  138. margin: 10px 0;
  139. }
  140. hr.custom-bleach-rule {
  141. border: none;
  142. border-top: 2px solid #FF6600;
  143. margin: 15px 0;
  144. }
  145. .overview-section {
  146. margin-top: 10px;
  147. }
  148. .section-header {
  149. font-size: 18px;
  150. font-weight: bold;
  151. border-bottom: 2px solid #FF6600;
  152. margin-bottom: 10px;
  153. text-align: center;
  154. text-transform: uppercase;
  155. letter-spacing: 1px;
  156. color: #FF6600;
  157. }
  158. .section-content {
  159. font-size: 14px;
  160. line-height: 1.6;
  161. text-align: justify;
  162. padding: 10px;
  163. background-color: #1C1C1C;
  164. border: 2px solid #FF6600;
  165. border-radius: 10px;
  166. box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);
  167. color: #EAEAEA;
  168. animation: pulseOrange 1.5s infinite ease-in-out;
  169. }
  170. html, body {
  171. background: #000000;
  172. margin: 0;
  173. padding: 0;
  174. scrollbar-face-color: #FF6600;
  175. scrollbar-track-color: #1C1C1C;
  176. scrollbar-shadow-color: #FF9933;
  177. scrollbar-darkshadow-color: #000000;
  178. scrollbar-3dlight-color: #FF9933;
  179. scrollbar-highlight-color: #FF6600;
  180. scrollbar-arrow-color: #FFFFFF;
  181. filter: progid:DXImageTransform.Microsoft.Glow(color=#FF6600, strength=5);
  182. -ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#FF6600, strength=5);
  183. }
  184. </style>
  185. </head>
  186. <body>
  187. <div class="bleach-profile">
  188. <div class="bleach-title">[CHARACTER NAME]</div>
  189. <div class="stripe-container">
  190. <div class="bleach-stripe stripe-white"></div>
  191. <div class="bleach-stripe stripe-pink"></div>
  192. <div class="bleach-stripe stripe-blue"></div>
  193. </div>
  194. <center>
  195. <div class="image-container">
  196. <div class="tilt-zone top-left"></div>
  197. <div class="tilt-zone top-middle"></div>
  198. <div class="tilt-zone top-right"></div>
  199. <div class="tilt-zone mid-left"></div>
  200. <div class="tilt-zone mid-center"></div>
  201. <div class="tilt-zone mid-right"></div>
  202. <div class="tilt-zone bottom-left"></div>
  203. <div class="tilt-zone bottom-middle"></div>
  204. <div class="tilt-zone bottom-right"></div>
  205. <img src="[IMAGE URL HERE]" class="playby-image">
  206. </div>
  207. </center>
  208. <div class="quote-text"><i>"[QUOTE]"</i></div>
  209. <hr class="custom-bleach-rule">
  210. <div class="overview-section">
  211. <div class="section-header">Overview</div>
  212. <div class="section-content">
  213. [OVERVIEW, CHARACTER DESCRIPTION]
  214. </div>
  215. </div>
  216. </div>
  217. </body>
  218. </html>
  219.  
  220. <embed src="[SONG URL HERE]" width="0" height="0" autoplay="1" loop="1">
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!