API tools faq
paste
iStabOreos

Isles of Abyss Profile

iStabOreos
Aug 30th, 2025
22
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.62 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8. <title>Template</title>
  9. <style>
  10. html, body {
  11. margin: 0;
  12. padding: 0;
  13. font-family: "Garamond", serif;
  14. background-color: #1c1c1c;
  15. background: linear-gradient(135deg, #1c1c1c 0%, #2d1b1b 50%, #1c1c1c 100%);
  16. color: #d8d8d8;
  17. min-height: 100vh;
  18. display: flex;
  19. align-items: center;
  20. justify-content: center;
  21. }
  22.  
  23. .flip-container {
  24. width: 400px;
  25. height: 600px;
  26. perspective: 1000px;
  27. margin: 0;
  28. cursor: pointer;
  29. position: relative;
  30. }
  31.  
  32. @media (max-height: 640px) {
  33. body {
  34. align-items: flex-start;
  35. padding-top: 20px;
  36. }
  37. }
  38.  
  39. .flipper {
  40. position: relative;
  41. width: 100%;
  42. height: 100%;
  43. transition: transform 0.8s;
  44. transform-style: preserve-3d;
  45. }
  46.  
  47. .flip-container.flipped .flipper {
  48. transform: rotateY(180deg);
  49. }
  50.  
  51. .profile-container, .info-container {
  52. position: absolute;
  53. width: 100%;
  54. height: 100%;
  55. backface-visibility: hidden;
  56. border-radius: 15px;
  57. box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  58. overflow: hidden;
  59. }
  60.  
  61. .profile-container {
  62. background: linear-gradient(145deg, rgba(0, 0, 0, 0.9), rgba(79, 18, 15, 0.3));
  63. border: 3px double #4f120f;
  64. padding: 20px;
  65. text-align: center;
  66. display: flex;
  67. flex-direction: column;
  68. justify-content: space-between;
  69. }
  70.  
  71. .info-container {
  72. background: linear-gradient(145deg, rgba(79, 18, 15, 0.3), rgba(0, 0, 0, 0.9));
  73. border: 3px double #4f120f;
  74. transform: rotateY(180deg);
  75. padding: 20px;
  76. display: flex;
  77. flex-direction: column;
  78. justify-content: center;
  79. }
  80.  
  81. .character-name {
  82. font-size: 32px;
  83. font-weight: bold;
  84. color: #e0e0e0;
  85. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  86. border-bottom: 2px solid #4f120f;
  87. margin-bottom: 15px;
  88. padding-bottom: 10px;
  89. background: linear-gradient(45deg, #e0e0e0, #b8b8b8);
  90. -webkit-background-clip: text;
  91. -webkit-text-fill-color: transparent;
  92. background-clip: text;
  93. }
  94.  
  95. .playby {
  96. position: relative;
  97. margin: 15px 0;
  98. flex-grow: 1;
  99. display: flex;
  100. align-items: center;
  101. justify-content: center;
  102. perspective: 1000px;
  103. }
  104.  
  105. .playby img {
  106. max-width: 100%;
  107. max-height: 300px;
  108. border-radius: 15px;
  109. border: 2px solid #4f120f;
  110. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  111. box-shadow: 0 0 15px rgba(79, 18, 15, 0.5);
  112. transform-style: preserve-3d;
  113. }
  114.  
  115. .tilt-zone {
  116. position: absolute;
  117. width: 33.3%;
  118. height: 33.3%;
  119. background-color: transparent;
  120. z-index: 2;
  121. }
  122.  
  123. .top-left { top: 0; left: 0; }
  124. .top-middle { top: 0; left: 33.3%; }
  125. .top-right { top: 0; left: 66.6%; }
  126. .mid-left { top: 33.3%; left: 0; }
  127. .mid-center { top: 33.3%; left: 33.3%; }
  128. .mid-right { top: 33.3%; left: 66.6%; }
  129. .bottom-left { top: 66.6%; left: 0; }
  130. .bottom-middle { top: 66.6%; left: 33.3%; }
  131. .bottom-right { top: 66.6%; left: 66.6%; }
  132.  
  133. /* Top row - forward tilt */
  134. .top-left:hover ~ img {
  135. transform: rotateX(15deg) rotateY(-15deg) scale(1.08);
  136. box-shadow: -10px -10px 25px 15px rgba(79, 18, 15, 0.8);
  137. }
  138. .top-middle:hover ~ img {
  139. transform: rotateX(15deg) rotateY(0deg) scale(1.08);
  140. box-shadow: 0 -10px 25px 15px rgba(79, 18, 15, 0.8);
  141. }
  142. .top-right:hover ~ img {
  143. transform: rotateX(15deg) rotateY(15deg) scale(1.08);
  144. box-shadow: 10px -10px 25px 15px rgba(79, 18, 15, 0.8);
  145. }
  146.  
  147. /* Middle row - neutral tilt */
  148. .mid-left:hover ~ img {
  149. transform: rotateX(0deg) rotateY(-15deg) scale(1.05);
  150. box-shadow: -10px 0 20px 10px rgba(79, 18, 15, 0.7);
  151. }
  152. .mid-center:hover ~ img {
  153. transform: rotateX(0deg) rotateY(0deg) scale(1.12);
  154. box-shadow: 0 0 25px 20px rgba(79, 18, 15, 0.9);
  155. }
  156. .mid-right:hover ~ img {
  157. transform: rotateX(0deg) rotateY(15deg) scale(1.05);
  158. box-shadow: 10px 0 20px 10px rgba(79, 18, 15, 0.7);
  159. }
  160.  
  161. /* Bottom row - backward tilt */
  162. .bottom-left:hover ~ img {
  163. transform: rotateX(-15deg) rotateY(-15deg) scale(1.08);
  164. box-shadow: -10px 10px 25px 15px rgba(79, 18, 15, 0.8);
  165. }
  166. .bottom-middle:hover ~ img {
  167. transform: rotateX(-15deg) rotateY(0deg) scale(1.08);
  168. box-shadow: 0 10px 25px 15px rgba(79, 18, 15, 0.8);
  169. }
  170. .bottom-right:hover ~ img {
  171. transform: rotateX(-15deg) rotateY(15deg) scale(1.08);
  172. box-shadow: 10px 10px 25px 15px rgba(79, 18, 15, 0.8);
  173. }
  174.  
  175. .quote {
  176. font-style: italic;
  177. font-size: 14px;
  178. color: #b8b8b8;
  179. margin: 10px 0;
  180. padding: 10px;
  181. background: rgba(79, 18, 15, 0.2);
  182. border-radius: 8px;
  183. border-left: 3px solid #4f120f;
  184. }
  185.  
  186. .description {
  187. font-size: 16px;
  188. text-align: left;
  189. line-height: 1.6;
  190. margin-top: 10px;
  191. }
  192.  
  193. .description p {
  194. margin: 0 0 10px 0;
  195. text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  196. }
  197.  
  198. .info-title {
  199. font-size: 28px;
  200. font-weight: bold;
  201. color: #e0e0e0;
  202. text-align: center;
  203. margin-bottom: 30px;
  204. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  205. background: linear-gradient(45deg, #e0e0e0, #b8b8b8);
  206. -webkit-background-clip: text;
  207. -webkit-text-fill-color: transparent;
  208. background-clip: text;
  209. }
  210.  
  211. .info-grid {
  212. display: grid;
  213. grid-template-columns: 1fr 1fr;
  214. gap: 15px;
  215. margin-bottom: 20px;
  216. }
  217.  
  218. .info-item {
  219. background: rgba(0, 0, 0, 0.4);
  220. padding: 12px;
  221. border-radius: 8px;
  222. border: 1px solid #4f120f;
  223. transition: all 0.3s ease;
  224. }
  225.  
  226. .info-item:hover {
  227. background: rgba(79, 18, 15, 0.3);
  228. transform: translateY(-2px);
  229. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  230. }
  231.  
  232. .info-label {
  233. font-size: 12px;
  234. color: #909090;
  235. text-transform: uppercase;
  236. letter-spacing: 1px;
  237. margin-bottom: 5px;
  238. }
  239.  
  240. .info-value {
  241. font-size: 16px;
  242. color: #e0e0e0;
  243. font-weight: bold;
  244. }
  245.  
  246. .full-width {
  247. grid-column: 1 / -1;
  248. }
  249.  
  250. .affiliation-section {
  251. margin-top: 20px;
  252. padding: 15px;
  253. background: rgba(0, 0, 0, 0.4);
  254. border-radius: 8px;
  255. border: 1px solid #4f120f;
  256. }
  257.  
  258. .affiliation-title {
  259. font-size: 14px;
  260. color: #909090;
  261. text-transform: uppercase;
  262. letter-spacing: 1px;
  263. margin-bottom: 10px;
  264. }
  265.  
  266. .affiliation-list {
  267. list-style: none;
  268. padding: 0;
  269. margin: 0;
  270. }
  271.  
  272. .affiliation-list li {
  273. padding: 5px 0;
  274. color: #e0e0e0;
  275. border-bottom: 1px solid rgba(79, 18, 15, 0.3);
  276. }
  277.  
  278. .affiliation-list li:last-child {
  279. border-bottom: none;
  280. }
  281.  
  282. .flip-hint {
  283. position: absolute;
  284. bottom: 10px;
  285. left: 50%;
  286. transform: translateX(-50%);
  287. font-size: 12px;
  288. color: #909090;
  289. opacity: 0.7;
  290. animation: pulse 2s infinite;
  291. }
  292.  
  293. .flip-hint.click {
  294. animation: none;
  295. opacity: 1;
  296. color: #4f120f;
  297. font-weight: bold;
  298. }
  299.  
  300. @keyframes pulse {
  301. 0%, 100% { opacity: 0.7; }
  302. 50% { opacity: 1; }
  303. }
  304. </style>
  305. </head>
  306. <body>
  307. <div class="flip-container" onclick="toggleFlip()">
  308. <div class="flipper">
  309. <!-- Front Side - Profile -->
  310. <div class="profile-container">
  311. <div class="character-name">Character Name</div>
  312. <div class="playby">
  313. <div class="tilt-zone top-left"></div>
  314. <div class="tilt-zone top-middle"></div>
  315. <div class="tilt-zone top-right"></div>
  316. <div class="tilt-zone mid-left"></div>
  317. <div class="tilt-zone mid-center"></div>
  318. <div class="tilt-zone mid-right"></div>
  319. <div class="tilt-zone bottom-left"></div>
  320. <div class="tilt-zone bottom-middle"></div>
  321. <div class="tilt-zone bottom-right"></div>
  322. <img src="https://i.pinimg.com/736x/73/90/62/739062ef320128cb1f29891f6cf7ec87.jpg">
  323. </div>
  324. <div class="quote">"Insert Quote Here."</div>
  325. <div class="description">
  326. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at lacus ex. Sed vel ultricies eros. Integer vehicula ut purus a pharetra.</p>
  327. <p>Aliquam erat volutpat. Fusce a mollis libero, sit amet scelerisque neque. Suspendisse eu augue mi.</p>
  328. </div>
  329. <br>
  330. <div class="flip-hint">Click to view details</div>
  331. </div>
  332.  
  333. <!-- Back Side - Information -->
  334. <div class="info-container">
  335. <div class="info-title">Character Details</div>
  336. <div class="info-grid">
  337. <div class="info-item">
  338. <div class="info-label">Age</div>
  339. <div class="info-value">??</div>
  340. </div>
  341. <div class="info-item">
  342. <div class="info-label">Height</div>
  343. <div class="info-value">?'??"</div>
  344. </div>
  345. <div class="info-item">
  346. <div class="info-label">Weight</div>
  347. <div class="info-value">??? lbs</div>
  348. </div>
  349. <div class="info-item">
  350. <div class="info-label">Sex</div>
  351. <div class="info-value">???</div>
  352. </div>
  353. <div class="info-item full-width">
  354. <div class="info-label">Race</div>
  355. <div class="info-value">???(Mutant / Witch / Wizard)</div>
  356. </div>
  357. <div class="info-item full-width">
  358. <div class="info-label">Origins</div>
  359. <div class="info-value">???</div>
  360. </div>
  361. </div>
  362. <div class="affiliation-section">
  363. <div class="affiliation-title">Affiliations</div>
  364. <ul class="affiliation-list">
  365. <li>? ? ?</li>
  366. <li>? ? ?</li>
  367. <li>? ? ?</li>
  368. </ul>
  369. </div>
  370. <div class="flip-hint click">Click to return to profile</div>
  371. </div>
  372. </div>
  373. </div>
  374.  
  375. <script>
  376. function toggleFlip() {
  377. const container = document.querySelector('.flip-container');
  378. container.classList.toggle('flipped');
  379. }
  380. </script>
  381. </body>
  382. </html>
  383.  
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!