Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MangaSphere</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Comic Neue', cursive; | |
| background-color: #fff5e6; | |
| } | |
| .comic-panel { | |
| border: 4px solid #000; | |
| box-shadow: 8px 8px 0 rgba(0,0,0,0.2); | |
| position: relative; | |
| } | |
| .speech-bubble { | |
| background: white; | |
| border: 3px solid black; | |
| border-radius: 1em; | |
| padding: 1em; | |
| position: relative; | |
| max-width: 80%; | |
| margin: 1em auto; | |
| } | |
| .speech-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -20px; | |
| left: 50%; | |
| border-width: 20px 20px 0; | |
| border-style: solid; | |
| border-color: white transparent; | |
| margin-left: -20px; | |
| } | |
| .manga-nav { | |
| background-color: #ff6b6b; | |
| border-bottom: 3px solid #000; | |
| } | |
| .manga-btn { | |
| background-color: #ff9e3f; | |
| border: 3px solid #000; | |
| border-radius: 8px; | |
| box-shadow: 4px 4px 0 rgba(0,0,0,0.2); | |
| transition: all 0.2s; | |
| } | |
| .manga-btn:hover { | |
| transform: translate(2px, 2px); | |
| box-shadow: 2px 2px 0 rgba(0,0,0,0.2); | |
| } | |
| .action-line { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #ff0000, | |
| #ff0000 10px, | |
| #ff6b6b 10px, | |
| #ff6b6b 20px | |
| ); | |
| height: 8px; | |
| width: 100%; | |
| margin: 2rem 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="manga-nav fixed w-full z-50 py-4 px-6 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="text-yellow-300" stroke-width="3"></i> | |
| <span class="font-bold text-2xl text-white">MANGA<span class="text-yellow-300">SPHERE</span></span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="index.html" class="text-white hover:text-yellow-300 font-bold">HOME</a> | |
| <a href="#" class="text-white hover:text-yellow-300 font-bold">COMICS</a> | |
| <a href="#" class="text-white hover:text-yellow-300 font-bold">CHARACTERS</a> | |
| <a href="portfolio.html" class="text-white hover:text-yellow-300 font-bold">PORTFOLIO</a> | |
| </div> | |
| <button class="manga-btn px-4 py-2 text-black font-bold md:hidden"> | |
| <i data-feather="menu" stroke-width="3"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="comic-panel mt-16 mx-4"> | |
| <div class="bg-white p-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center"> | |
| <div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 text-red-600">KA-POW!</h1> | |
| <div class="speech-bubble"> | |
| <p class="text-xl md:text-2xl mb-4">Welcome to the wild world of MangaSphere!</p> | |
| <p class="text-lg">Where every click leads to adventure!</p> | |
| </div> | |
| <div class="flex space-x-4 mt-8"> | |
| <button class="manga-btn px-8 py-3 text-lg font-bold">READ NOW</button> | |
| <button class="manga-btn px-8 py-3 text-lg font-bold bg-white border-3 border-black">EXPLORE</button> | |
| </div> | |
| </div> | |
| <div> | |
| <img src="http://static.photos/manga/640x360/1" alt="Manga Hero" class="w-full rounded-lg border-4 border-black"> | |
| <div class="text-center mt-4 text-sm"> | |
| <span class="inline-block bg-yellow-200 px-2 py-1 rounded border border-black">"I'll be the manga king!"</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-line"></div> | |
| </div> | |
| <!-- Latest Chapters Section --> | |
| <section class="py-12 px-6 max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8 border-b-4 border-black pb-2 inline-block">LATEST CHAPTERS</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8"> | |
| <div class="comic-panel bg-white p-4"> | |
| <img src="http://static.photos/manga/320x240/2" alt="Chapter 1" class="w-full border-2 border-black mb-2"> | |
| <h3 class="font-bold text-lg">Chapter 101</h3> | |
| <p class="text-sm">The Final Battle Begins!</p> | |
| <div class="text-xs mt-2 text-red-600 font-bold">NEW!</div> | |
| </div> | |
| <div class="comic-panel bg-white p-4"> | |
| <img src="http://static.photos/manga/320x240/3" alt="Chapter 2" class="w-full border-2 border-black mb-2"> | |
| <h3 class="font-bold text-lg">Chapter 100</h3> | |
| <p class="text-sm">Unlikely Alliances</p> | |
| </div> | |
| <div class="comic-panel bg-white p-4"> | |
| <img src="http://static.photos/manga/320x240/4" alt="Chapter 3" class="w-full border-2 border-black mb-2"> | |
| <h3 class="font-bold text-lg">Chapter 99</h3> | |
| <p class="text-sm">Secrets Revealed</p> | |
| </div> | |
| <div class="comic-panel bg-white p-4"> | |
| <img src="http://static.photos/manga/320x240/5" alt="Chapter 4" class="w-full border-2 border-black mb-2"> | |
| <h3 class="font-bold text-lg">Chapter 98</h3> | |
| <p class="text-sm">Training Arc Complete</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button class="manga-btn px-6 py-2 font-bold">VIEW ALL CHAPTERS</button> | |
| </div> | |
| <div class="action-line"></div> | |
| </section> | |
| <!-- Character Spotlight --> | |
| <section class="py-12 px-6 bg-yellow-100 border-t-4 border-b-4 border-black"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-8">CHARACTER SPOTLIGHT</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="comic-panel bg-white p-6 text-center"> | |
| <div class="w-32 h-32 rounded-full border-4 border-black mx-auto mb-4 overflow-hidden"> | |
| <img src="http://static.photos/manga/200x200/6" alt="Hero" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold text-xl">RYO</h3> | |
| <p class="text-sm mb-2">The Hot-Headed Hero</p> | |
| <div class="h-1 bg-black my-2"></div> | |
| <p class="text-sm">Power Level: ★★★★★</p> | |
| <p class="text-sm">Special Move: Flame Fist</p> | |
| </div> | |
| <div class="comic-panel bg-white p-6 text-center"> | |
| <div class="w-32 h-32 rounded-full border-4 border-black mx-auto mb-4 overflow-hidden"> | |
| <img src="http://static.photos/manga/200x200/7" alt="Hero" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold text-xl">SAKURA</h3> | |
| <p class="text-sm mb-2">The Mysterious Ninja</p> | |
| <div class="h-1 bg-black my-2"></div> | |
| <p class="text-sm">Power Level: ★★★★</p> | |
| <p class="text-sm">Special Move: Shadow Clone</p> | |
| </div> | |
| <div class="comic-panel bg-white p-6 text-center"> | |
| <div class="w-32 h-32 rounded-full border-4 border-black mx-auto mb-4 overflow-hidden"> | |
| <img src="http://static.photos/manga/200x200/8" alt="Hero" class="w-full h-full object-cover"> | |
| </div> | |
| <h3 class="font-bold text-xl">GEN</h3> | |
| <p class="text-sm mb-2">The Wise Old Master</p> | |
| <div class="h-1 bg-black my-2"></div> | |
| <p class="text-sm">Power Level: ★★★★★★</p> | |
| <p class="text-sm">Special Move: Dragon Palm</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-black text-white"> | |
| <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-bold mb-4 text-red-500">MANGA<span class="text-yellow-300">SPHERE</span></h4> | |
| <p class="text-gray-300">Your ultimate manga destination!</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-yellow-300">EXPLORE</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">Manga Library</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">New Releases</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">Popular Series</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-yellow-300">COMMUNITY</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">Forums</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">Fan Art</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-red-400 transition">Cosplay</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4 text-yellow-300">FOLLOW US</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-red-400 transition"><i data-feather="twitter" stroke-width="2"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-red-400 transition"><i data-feather="instagram" stroke-width="2"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-red-400 transition"><i data-feather="facebook" stroke-width="2"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-red-400 transition"><i data-feather="youtube" stroke-width="2"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="max-w-6xl mx-auto mt-12 pt-6 border-t border-gray-700 text-center text-gray-300"> | |
| <p>© 2023 MANGA SPHERE. All rights reserved. BAM! POW! ZOOM!</p> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Add comic sound effects on buttons | |
| document.querySelectorAll('.manga-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| const sounds = ['POW!', 'BAM!', 'ZAP!', 'WHAM!', 'KAPOW!']; | |
| const randomSound = sounds[Math.floor(Math.random() * sounds.length)]; | |
| const effect = document.createElement('div'); | |
| effect.className = 'comic-effect absolute font-bold text-2xl text-red-600'; | |
| effect.textContent = randomSound; | |
| effect.style.left = `${Math.random() * 100}%`; | |
| effect.style.top = `${Math.random() * 100}%`; | |
| btn.appendChild(effect); | |
| setTimeout(() => { | |
| effect.remove(); | |
| }, 1000); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |