API tools faq
paste
RageQxeen

Crow's Nest

RageQxeen
Feb 17th, 2026
23
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.83 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>The Crow's Nest</title>
  7. <style>
  8. @import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Uncial+Antiqua&family=Cinzel+Decorative&display=swap');
  9.  
  10. /* Base styles */
  11. html, body {
  12. margin: 0;
  13. padding: 0;
  14. width: 100%;
  15. min-height: 100vh;
  16. font-family: 'MedievalSharp', cursive;
  17. background: linear-gradient(to bottom, #1a001f, #3c0a59, #5b1f6a);
  18. color: #fff;
  19. overflow-x: hidden;
  20. }
  21.  
  22. /* Title */
  23. #title {
  24. position: fixed;
  25. top: 9.4vw;
  26. left: 1vw;
  27. font-family: 'Cinzel Decorative', cursive;
  28. font-size: 4vw;
  29. color: #5b1f6a;
  30. z-index: 1002;
  31. text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
  32. }
  33.  
  34. /* Banner */
  35. #banner {
  36. width: 100%;
  37. height: 250px;
  38. background-image: url('https://i.ibb.co/7Npp5HS0/banner.jpg');
  39. background-size: cover;
  40. background-position: 0% 15%;
  41. position: fixed;
  42. top: 0;
  43. left: 0;
  44. z-index: 1000;
  45. }
  46.  
  47. /* Navbar */
  48. #navbar {
  49. width: 100%;
  50. height: 60px;
  51. background-color: rgba(0,0,0);
  52. position: fixed;
  53. top: 250px;
  54. left: 0;
  55. z-index: 999;
  56. display: flex;
  57. align-items: center;
  58. justify-content: center;
  59. }
  60.  
  61. #nav {
  62. background-color: transparent;
  63. text-align: center;
  64. }
  65.  
  66. #nav a {
  67. margin: 0 20px;
  68. color: #fff;
  69. text-decoration: none;
  70. font-size: 18px;
  71. padding: 10px 15px;
  72. transition: color 0.3s ease;
  73. }
  74.  
  75. #nav a:hover {
  76. color: #ffccff;
  77. }
  78.  
  79. /* Main container */
  80. #container {
  81. width: 100%;
  82. position: relative;
  83. top: 310px; /* below banner + navbar */
  84. z-index: 2;
  85. padding: 20px;
  86. box-sizing: border-box;
  87. padding-bottom: 80px; /* space for footer */
  88. }
  89.  
  90. /* Section styles */
  91. .section {
  92. display: none;
  93. background-color: transparent;
  94. color: #fff;
  95. padding: 10px;
  96. min-height: 400px;
  97. width: 100%;
  98. box-sizing: border-box;
  99. }
  100. .section:first-of-type {
  101. display: block; /* show first by default */
  102. }
  103.  
  104. /* Bottom-right image */
  105. #image {
  106. width: 25vw;
  107. height: 20vw;
  108. background-image: url("https://i.ibb.co/pjrBPLwD/crow.png");
  109. background-repeat: no-repeat;
  110. background-size: 100%;
  111. background-position: top;
  112. position: fixed;
  113. right: 0vw;
  114. top: 6vw;
  115. z-index: 10001;
  116. }
  117.  
  118. /* Profile picture in intro */
  119. #profile-pic {
  120. width: 120px;
  121. height: auto;
  122. border-radius: 50%;
  123. margin-right: 2vw;
  124. float: left;
  125. }
  126.  
  127. /* Section headers */
  128. .section h2 {
  129. font-family: 'Uncial Antiqua', cursive;
  130. color: #ffccff;
  131. margin-top: 0;
  132. }
  133.  
  134. /* Card container for horizontal layout with click-drag */
  135. .card-container {
  136. display: flex;
  137. flex-direction: row; /* horizontal layout */
  138. overflow-x: auto; /* enable horizontal scroll */
  139. gap: 20px;
  140. margin-top: 20px;
  141. }
  142.  
  143. /* Hide scrollbar in WebKit browsers */
  144. .card-container::-webkit-scrollbar {
  145. display: none;
  146. }
  147. /* Hide scrollbar in Firefox */
  148. @supports (-moz-scrollbars-none) {
  149. .card-container {
  150. scrollbar-width: none;
  151. }
  152. }
  153.  
  154. /* Change cursor when dragging */
  155. .card-container.active {
  156. cursor: grabbing;
  157. cursor: -webkit-grabbing; /* for Safari */
  158. }
  159.  
  160. /* Card styles */
  161. .card {
  162. position: relative;
  163. width: 300px; /* fixed size for cards */
  164. aspect-ratio: 3 / 4;
  165. border-radius: 15px;
  166. overflow: hidden;
  167. text-decoration: none;
  168. color: #fff;
  169. box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  170. transition: transform 0.3s ease, box-shadow 0.3s ease;
  171. flex-shrink: 0; /* prevent shrinking */
  172. }
  173.  
  174. .card:hover {
  175. transform: translateY(-6px);
  176. box-shadow: 0 12px 25px rgba(0,0,0,0.7);
  177. }
  178.  
  179. .card-image {
  180. width: 100%;
  181. height: 100%;
  182. background-size: cover;
  183. background-position: center;
  184. transition: transform 0.4s ease;
  185. }
  186.  
  187. .card:hover .card-image {
  188. transform: scale(1.08);
  189. }
  190.  
  191. .card-overlay {
  192. position: absolute;
  193. inset: 0;
  194. background: rgba(20, 0, 30, 0.85);
  195. opacity: 0;
  196. display: flex;
  197. flex-direction: column;
  198. justify-content: center;
  199. align-items: center;
  200. padding: 15px;
  201. text-align: center;
  202. transition: opacity 0.3s ease;
  203. }
  204.  
  205. .card:hover .card-overlay {
  206. opacity: 1;
  207. }
  208.  
  209. .card-overlay h3 {
  210. font-family: 'Cinzel Decorative', cursive;
  211. color: #ffccff;
  212. margin-bottom: 10px;
  213. }
  214.  
  215. .card-overlay p {
  216. font-family: 'MedievalSharp', cursive;
  217. font-size: 0.9rem;
  218. }
  219.  
  220. /* Additional CSS */
  221. ::-webkit-scrollbar-button:vertical {
  222. background-color: transparent;
  223. }
  224.  
  225. ::-webkit-scrollbar-thumb:vertical {
  226. background-color: transparent;
  227. height: 0px;
  228. }
  229.  
  230. ::-webkit-scrollbar-thumb:horizontal {
  231. background-color: transparent;
  232. height: 0px;
  233. }
  234.  
  235. ::-webkit-scrollbar {
  236. height: 0px;
  237. width: 0px;
  238. background-color: transparent;
  239. }
  240.  
  241.  
  242. /* Footer styles */
  243. footer {
  244. text-align: center;
  245. padding: 10px;
  246. background-color: rgba(0,0,0);
  247. position: fixed;
  248. bottom: 0;
  249. width: 100%;
  250. font-family: 'MedievalSharp', cursive;
  251. font-size: 1rem;
  252. color: #fff;
  253. z-index: 1004;
  254. }
  255. </style>
  256. </head>
  257. <body>
  258. <!-- Your existing scripts and content -->
  259. <script>
  260. document.addEventListener('DOMContentLoaded', () => {
  261. // Navigation toggle setup
  262. const sections = document.querySelectorAll('.section');
  263. const navLinks = document.querySelectorAll('#nav a');
  264.  
  265. // Show only first section initially
  266. sections.forEach((sec, i) => {
  267. sec.style.display = (i === 0) ? 'block' : 'none';
  268. });
  269.  
  270. // Set up navigation links
  271. navLinks.forEach((link, index) => {
  272. link.addEventListener('click', (e) => {
  273. e.preventDefault();
  274. sections.forEach(s => s.style.display = 'none');
  275. if (sections[index]) {
  276. sections[index].style.display = 'block';
  277. document.getElementById('container').scrollIntoView({behavior: 'smooth'});
  278. }
  279. });
  280. });
  281.  
  282. // Implement click-and-drag scroll for all .card-container
  283. document.querySelectorAll('.card-container').forEach(container => {
  284. let isDown = false;
  285. let startX;
  286. let scrollLeft;
  287.  
  288. container.addEventListener('mousedown', (e) => {
  289. isDown = true;
  290. container.classList.add('active');
  291. startX = e.pageX - container.offsetLeft;
  292. scrollLeft = container.scrollLeft;
  293. });
  294. container.addEventListener('mouseleave', () => {
  295. isDown = false;
  296. container.classList.remove('active');
  297. });
  298. container.addEventListener('mouseup', () => {
  299. isDown = false;
  300. container.classList.remove('active');
  301. });
  302. container.addEventListener('mousemove', (e) => {
  303. if (!isDown) return;
  304. e.preventDefault();
  305. const x = e.pageX - container.offsetLeft;
  306. const walk = (x - startX) * 1; // adjust speed if needed
  307. container.scrollLeft = scrollLeft - walk;
  308. });
  309. });
  310. });
  311. </script>
  312.  
  313. <!-- Page content -->
  314. <div id="title">The Crow's Nest</div>
  315. <div id="banner"></div>
  316. <div id="navbar">
  317. <div id="nav">
  318. <a href="#">Home</a>
  319. <a href="#">Male</a>
  320. <a href="#">Female</a>
  321. <a href="#">Non-Binary</a>
  322. </div>
  323. </div>
  324. <div id="image"></div>
  325.  
  326. <!-- Main content container -->
  327. <div id="container">
  328. <!-- Section 1: Home -->
  329. <div class="section" id="section-one">
  330. <!-- Your intro content here -->
  331. <img id="profile-pic" src="https://i.ibb.co/jPn5GPdp/crow1.png" alt="Profile Picture" />
  332. <div id="intro-text">
  333. <h2>Welcome to The Crow's Nest</h2>
  334. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at dolor tristique, consequat ex ut, feugiat justo. Vestibulum vel ante consectetur, interdum sem et, venenatis massa. Ut sed dolor mi. Suspendisse faucibus ante lorem, tincidunt bibendum magna condimentum sed. Aliquam maximus auctor justo, elementum interdum justo. Integer aliquet nibh ut arcu elementum volutpat. Quisque rutrum dolor risus, ac pulvinar est dictum in. Aliquam libero nisi, cursus id maximus vel, consectetur nec justo. Pellentesque lorem ante, bibendum vel justo non, laoreet malesuada eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non convallis elit. Cras molestie ligula nibh, id cursus libero viverra quis. Etiam at vulputate nulla, in volutpat neque. Cras porta varius ipsum eu ultrices. Vestibulum ultricies cursus laoreet. Vivamus maximus urna vitae malesuada ultricies.</p>
  335.  
  336. <p>Praesent sodales erat sed fermentum luctus. Aliquam vitae placerat magna. Sed commodo lacus in velit volutpat, eu accumsan leo elementum. Pellentesque nunc tortor, rutrum dictum aliquam sed, elementum in arcu. Nullam non consectetur ex. Aenean semper dapibus tristique. Proin eros eros, lacinia eu faucibus at, consequat id libero. Nulla sed arcu aliquam, molestie neque eu, tincidunt lectus. Quisque posuere, purus viverra vulputate cursus, ante nisi finibus sem, vitae tempor dolor diam sodales purus. Suspendisse id magna non diam viverra mattis sed et est. Quisque quis massa enim. Fusce varius at ante vel pretium. Etiam sit amet nulla bibendum sem convallis efficitur. Nulla rutrum, diam ut auctor pulvinar, nisl erat lacinia sapien, quis commodo enim nisi a metus.</p>
  337.  
  338. <p>Praesent porttitor lorem non nisl facilisis, non ultrices sapien consequat. Donec euismod cursus nunc eget facilisis. In massa odio, dignissim gravida rhoncus nec, malesuada vel orci. Phasellus at nisl at mauris consectetur molestie a at nulla. Nam eu consectetur enim. In eu quam ac lacus tincidunt molestie at eget ante. In sit amet erat eget sapien pharetra blandit et commodo tortor. Proin pellentesque eget arcu vitae ornare. Nullam pharetra, neque quis pulvinar elementum, nibh ante rhoncus tortor, sed facilisis sem est quis leo. Aliquam magna magna, congue quis placerat in, eleifend eget lorem. Aenean vehicula risus vitae mollis faucibus. Proin sodales orci ipsum, nec venenatis nibh condimentum sit amet. Sed urna enim, commodo vel velit a, posuere euismod eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  339.  
  340. <p>Maecenas commodo tincidunt lacus sit amet consectetur. Sed vestibulum hendrerit blandit. Quisque malesuada posuere nunc vel efficitur. Ut molestie molestie magna, et mollis ipsum lacinia at. In a velit in felis ornare sollicitudin vitae sed diam. Ut volutpat quam lacus, a molestie mauris congue vitae. Morbi tincidunt a urna vitae congue. Fusce sem elit, sollicitudin nec neque sit amet, feugiat semper neque. Morbi auctor, metus in semper placerat, sapien velit aliquet dui, euismod volutpat est nunc iaculis est. Fusce venenatis tempus ex eu sollicitudin. Nunc vehicula sapien sed tellus rhoncus, et efficitur felis vestibulum. Vestibulum viverra purus id aliquam convallis.</p>
  341.  
  342. <p>Aliquam elementum eleifend pellentesque. Etiam at augue mollis, lobortis neque et, fringilla enim. Maecenas pellentesque libero pharetra neque vestibulum condimentum. Pellentesque non pulvinar enim. Donec a erat nec velit tincidunt ultricies a a nibh. Praesent quis ex rutrum, dignissim justo sed, viverra justo. Phasellus libero risus, accumsan a ligula varius, eleifend dictum felis.</p>
  343.  
  344. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at dolor tristique, consequat ex ut, feugiat justo. Vestibulum vel ante consectetur, interdum sem et, venenatis massa. Ut sed dolor mi. Suspendisse faucibus ante lorem, tincidunt bibendum magna condimentum sed. Aliquam maximus auctor justo, elementum interdum justo. Integer aliquet nibh ut arcu elementum volutpat. Quisque rutrum dolor risus, ac pulvinar est dictum in. Aliquam libero nisi, cursus id maximus vel, consectetur nec justo. Pellentesque lorem ante, bibendum vel justo non, laoreet malesuada eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non convallis elit. Cras molestie ligula nibh, id cursus libero viverra quis. Etiam at vulputate nulla, in volutpat neque. Cras porta varius ipsum eu ultrices. Vestibulum ultricies cursus laoreet. Vivamus maximus urna vitae malesuada ultricies.</p>
  345.  
  346. <p>Praesent sodales erat sed fermentum luctus. Aliquam vitae placerat magna. Sed commodo lacus in velit volutpat, eu accumsan leo elementum. Pellentesque nunc tortor, rutrum dictum aliquam sed, elementum in arcu. Nullam non consectetur ex. Aenean semper dapibus tristique. Proin eros eros, lacinia eu faucibus at, consequat id libero. Nulla sed arcu aliquam, molestie neque eu, tincidunt lectus. Quisque posuere, purus viverra vulputate cursus, ante nisi finibus sem, vitae tempor dolor diam sodales purus. Suspendisse id magna non diam viverra mattis sed et est. Quisque quis massa enim. Fusce varius at ante vel pretium. Etiam sit amet nulla bibendum sem convallis efficitur. Nulla rutrum, diam ut auctor pulvinar, nisl erat lacinia sapien, quis commodo enim nisi a metus.</p>
  347.  
  348. <p>Praesent porttitor lorem non nisl facilisis, non ultrices sapien consequat. Donec euismod cursus nunc eget facilisis. In massa odio, dignissim gravida rhoncus nec, malesuada vel orci. Phasellus at nisl at mauris consectetur molestie a at nulla. Nam eu consectetur enim. In eu quam ac lacus tincidunt molestie at eget ante. In sit amet erat eget sapien pharetra blandit et commodo tortor. Proin pellentesque eget arcu vitae ornare. Nullam pharetra, neque quis pulvinar elementum, nibh ante rhoncus tortor, sed facilisis sem est quis leo. Aliquam magna magna, congue quis placerat in, eleifend eget lorem. Aenean vehicula risus vitae mollis faucibus. Proin sodales orci ipsum, nec venenatis nibh condimentum sit amet. Sed urna enim, commodo vel velit a, posuere euismod eros. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
  349.  
  350. <p>Maecenas commodo tincidunt lacus sit amet consectetur. Sed vestibulum hendrerit blandit. Quisque malesuada posuere nunc vel efficitur. Ut molestie molestie magna, et mollis ipsum lacinia at. In a velit in felis ornare sollicitudin vitae sed diam. Ut volutpat quam lacus, a molestie mauris congue vitae. Morbi tincidunt a urna vitae congue. Fusce sem elit, sollicitudin nec neque sit amet, feugiat semper neque. Morbi auctor, metus in semper placerat, sapien velit aliquet dui, euismod volutpat est nunc iaculis est. Fusce venenatis tempus ex eu sollicitudin. Nunc vehicula sapien sed tellus rhoncus, et efficitur felis vestibulum. Vestibulum viverra purus id aliquam convallis.</p>
  351.  
  352. <p>Aliquam elementum eleifend pellentesque. Etiam at augue mollis, lobortis neque et, fringilla enim. Maecenas pellentesque libero pharetra neque vestibulum condimentum. Pellentesque non pulvinar enim. Donec a erat nec velit tincidunt ultricies a a nibh. Praesent quis ex rutrum, dignissim justo sed, viverra justo. Phasellus libero risus, accumsan a ligula varius, eleifend dictum felis.</p>
  353. </div>
  354. </div>
  355. <!-- Section 2: Male -->
  356. <div class="section" id="section-two">
  357. <h1 style="text-align: center;">Male Section</h1>
  358. <div class="card-container">
  359. <a href="page1.html" class="card">
  360. <div class="card-image" style="background-image: url('https://i.ibb.co/4HVw9Dk/41.jpg');"></div>
  361. <div class="card-overlay">
  362. <h3>Raven Knight</h3>
  363. <p>A dark warrior of the midnight skies.</p>
  364. </div>
  365. </a>
  366.  
  367. <a href="page2.html" class="card">
  368. <div class="card-image" style="background-image: url('https://i.ibb.co/n8659Vkf/73.jpg');"></div>
  369. <div class="card-overlay">
  370. <h3>Shadow Crow</h3>
  371. <p>Silent wings beneath the fading moon.</p>
  372. </div>
  373. </a>
  374.  
  375. <a href="page3.html" class="card">
  376. <div class="card-image" style="background-image: url('https://i.ibb.co/hJZ9LcQB/84.jpg');"></div>
  377. <div class="card-overlay">
  378. <h3>Plum Sorcerer</h3>
  379. <p>Master of twilight enchantments.</p>
  380. </div>
  381. </a>
  382.  
  383. <a href="page3.html" class="card">
  384. <div class="card-image" style="background-image: url('https://i.ibb.co/XfB9jLk0/10.jpg');"></div>
  385. <div class="card-overlay">
  386. <h3>The Scarecrow</h3>
  387. <p>Master of twilight enchantments.</p>
  388. </div>
  389. </a>
  390.  
  391. <a href="page3.html" class="card">
  392. <div class="card-image" style="background-image: url('https://i.ibb.co/FNrGFqb/3.jpg');"></div>
  393. <div class="card-overlay">
  394. <h3>Black Dove</h3>
  395. <p>Master of twilight enchantments.</p>
  396. </div>
  397. </a>
  398.  
  399. <a href="page1.html" class="card">
  400. <div class="card-image" style="background-image: url('https://i.ibb.co/4HVw9Dk/41.jpg');"></div>
  401. <div class="card-overlay">
  402. <h3>Raven Knight</h3>
  403. <p>A dark warrior of the midnight skies.</p>
  404. </div>
  405. </a>
  406.  
  407. <a href="page2.html" class="card">
  408. <div class="card-image" style="background-image: url('https://i.ibb.co/n8659Vkf/73.jpg');"></div>
  409. <div class="card-overlay">
  410. <h3>Shadow Crow</h3>
  411. <p>Silent wings beneath the fading moon.</p>
  412. </div>
  413. </a>
  414.  
  415. <a href="page3.html" class="card">
  416. <div class="card-image" style="background-image: url('https://i.ibb.co/hJZ9LcQB/84.jpg');"></div>
  417. <div class="card-overlay">
  418. <h3>Plum Sorcerer</h3>
  419. <p>Master of twilight enchantments.</p>
  420. </div>
  421. </a>
  422.  
  423. <a href="page3.html" class="card">
  424. <div class="card-image" style="background-image: url('https://i.ibb.co/XfB9jLk0/10.jpg');"></div>
  425. <div class="card-overlay">
  426. <h3>The Scarecrow</h3>
  427. <p>Master of twilight enchantments.</p>
  428. </div>
  429. </a>
  430.  
  431. <a href="page3.html" class="card">
  432. <div class="card-image" style="background-image: url('https://i.ibb.co/FNrGFqb/3.jpg');"></div>
  433. <div class="card-overlay">
  434. <h3>Black Dove</h3>
  435. <p>Master of twilight enchantments.</p>
  436. </div>
  437. </a>
  438.  
  439. </div>
  440. </div>
  441. <!-- Section 3: Female -->
  442. <div class="section" id="section-three">
  443. <h1 style="text-align: center;">Female Section</h1>
  444. <div class="card-container">
  445. <a href="page1.html" class="card">
  446. <div class="card-image" style="background-image: url('https://i.ibb.co/pjMBBxp6/255.jpg');"></div>
  447. <div class="card-overlay">
  448. <h3>Raven Knight</h3>
  449. <p>A dark warrior of the midnight skies.</p>
  450. </div>
  451. </a>
  452.  
  453. <a href="page2.html" class="card">
  454. <div class="card-image" style="background-image: url('https://i.ibb.co/Ndpn1z0c/226.jpg');"></div>
  455. <div class="card-overlay">
  456. <h3>Shadow Crow</h3>
  457. <p>Silent wings beneath the fading moon.</p>
  458. </div>
  459. </a>
  460.  
  461. <a href="page3.html" class="card">
  462. <div class="card-image" style="background-image: url('https://i.ibb.co/gLVrwB2w/204.jpg');"></div>
  463. <div class="card-overlay">
  464. <h3>Plum Sorcerer</h3>
  465. <p>Master of twilight enchantments.</p>
  466. </div>
  467. </a>
  468.  
  469. <a href="page3.html" class="card">
  470. <div class="card-image" style="background-image: url('https://i.ibb.co/9dFsNjd/194.jpg');"></div>
  471. <div class="card-overlay">
  472. <h3>The Scarecrow</h3>
  473. <p>Master of twilight enchantments.</p>
  474. </div>
  475. </a>
  476.  
  477. <a href="page3.html" class="card">
  478. <div class="card-image" style="background-image: url('https://i.ibb.co/h1RyGk5J/202.jpg');"></div>
  479. <div class="card-overlay">
  480. <h3>Black Dove</h3>
  481. <p>Master of twilight enchantments.</p>
  482. </div>
  483. </a>
  484. </div>
  485. </div>
  486. <!-- Section 4: Non-Binary -->
  487. <div class="section" id="section-four">
  488. <h1 style="text-align: center;">Non-Binary Section</h1>
  489. <div class="card-container">
  490. <a href="page1.html" class="card">
  491. <div class="card-image" style="background-image: url('https://i.ibb.co/fYHcTsrq/6.jpg');"></div>
  492. <div class="card-overlay">
  493. <h3>Raven Knight</h3>
  494. <p>A dark warrior of the midnight skies.</p>
  495. </div>
  496. </a>
  497.  
  498. <a href="page2.html" class="card">
  499. <div class="card-image" style="background-image: url('https://i.ibb.co/Kjjr7vg3/5.jpg');"></div>
  500. <div class="card-overlay">
  501. <h3>Shadow Crow</h3>
  502. <p>Silent wings beneath the fading moon.</p>
  503. </div>
  504. </a>
  505.  
  506. <a href="page3.html" class="card">
  507. <div class="card-image" style="background-image: url('https://i.ibb.co/bMfLG7GD/4.jpg');"></div>
  508. <div class="card-overlay">
  509. <h3>Plum Sorcerer</h3>
  510. <p>Master of twilight enchantments.</p>
  511. </div>
  512. </a>
  513.  
  514. <a href="page3.html" class="card">
  515. <div class="card-image" style="background-image: url('https://i.ibb.co/yFtFYHcp/2.jpg');"></div>
  516. <div class="card-overlay">
  517. <h3>The Scarecrow</h3>
  518. <p>Master of twilight enchantments.</p>
  519. </div>
  520. </a>
  521.  
  522. <a href="page3.html" class="card">
  523. <div class="card-image" style="background-image: url('https://i.ibb.co/gZZ4DD7C/1.jpg');"></div>
  524. <div class="card-overlay">
  525. <h3>Black Dove</h3>
  526. <p>Master of twilight enchantments.</p>
  527. </div>
  528. </a>
  529.  
  530. </div>
  531. </div>
  532. </div>
  533.  
  534. <!-- Footer -->
  535. <footer>
  536. Code made by RageQxeen for Scarecrow, Do Not Steal.
  537. </footer>
  538.  
  539. </body>
  540. </html>
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!