SUPERMANwebsite name: SUPERMAN website theme : blackish"home " page content:1. background image : "I:\Images\Cinematic\super_man_ready_to_fly.jpg"2. front texts:-superman : stonger than yesterday ( lighter character)-the hero you can trust ( bold character)-Born on the planet Krypton, Kal-El was sent to Earth by his parents, Jor-El and Lara, before their planet was destroyed. He was found and adopted by Jonathan and Martha Kent, who raised him as their ow in allville, Kansas(quotes )a right pointing arrow logo link button that open main page (at buttom)“main” page content :Header with new row : 6 deadly villains fought with superman New row ; image + text button link : Superman vs. DoomsdayNew row ; image + text button link : Superman vs. BrainiacNew row ; image + text button link :Superman vs. BizarroNew row ; image + text button link :Superman vs. DarkseidNew row ; image + text button link :Superman vs. Lex LuthorHome button that return to home page Containt pages :- will include header and paraghaph - home button that return to main page - logo button that return top smoothly - Initial Deployment
7e1153f
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SUPERMAN | Villains</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .villain-card { | |
| transition: all 0.3s ease; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| } | |
| .villain-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3); | |
| } | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background-color: rgba(220, 38, 38, 0.8); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| z-index: 99; | |
| transition: all 0.3s ease; | |
| } | |
| .back-to-top:hover { | |
| background-color: rgba(220, 38, 38, 1); | |
| transform: scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white min-h-screen"> | |
| <header class="bg-gray-900 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-center text-red-500 mb-6" data-aos="fade-down">6 Deadly Villains Fought by Superman</h1> | |
| <div class="flex justify-center"> | |
| <a href="index.html" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full flex items-center transition-all duration-300" data-aos="fade-up"> | |
| <i data-feather="home" class="mr-2"></i> Home | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Doomsday --> | |
| <div class="villain-card rounded-lg overflow-hidden shadow-lg" data-aos="fade-up"> | |
| <img src="https://static.photos/black/640x360/1" alt="Superman vs Doomsday" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2 text-red-500">Doomsday</h3> | |
| <p class="text-gray-300 mb-4">The creature that killed Superman in their epic battle.</p> | |
| <a href="doomsday.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-all duration-300"> | |
| Read More <i data-feather="arrow-right" class="inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Brainiac --> | |
| <div class="villain-card rounded-lg overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="https://static.photos/black/640x360/2" alt="Superman vs Brainiac" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2 text-red-500">Brainiac</h3> | |
| <p class="text-gray-300 mb-4">The super-intelligent android who collects cities from planets.</p> | |
| <a href="brainiac.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-all duration-300"> | |
| Read More <i data-feather="arrow-right" class="inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Bizarro --> | |
| <div class="villain-card rounded-lg overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="200"> | |
| <img src="https://static.photos/black/640x360/3" alt="Superman vs Bizarro" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2 text-red-500">Bizarro</h3> | |
| <p class="text-gray-300 mb-4">The imperfect duplicate of Superman with opposite characteristics.</p> | |
| <a href="bizarro.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-all duration-300"> | |
| Read More <i data-feather="arrow-right" class="inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Darkseid --> | |
| <div class="villain-card rounded-lg overflow-hidden shadow-lg" data-aos="fade-up"> | |
| <img src="https://static.photos/black/640x360/4" alt="Superman vs Darkseid" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2 text-red-500">Darkseid</h3> | |
| <p class="text-gray-300 mb-4">The tyrannical ruler of Apokolips seeking the Anti-Life Equation.</p> | |
| <a href="darkseid.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-all duration-300"> | |
| Read More <i data-feather="arrow-right" class="inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Lex Luthor --> | |
| <div class="villain-card rounded-lg overflow-hidden shadow-lg" data-aos="fade-up" data-aos-delay="100"> | |
| <img src="https://static.photos/black/640x360/5" alt="Superman vs Lex Luthor" class="w-full h-64 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold mb-2 text-red-500">Lex Luthor</h3> | |
| <p class="text-gray-300 mb-4">The brilliant but ruthless businessman who sees Superman as a threat.</p> | |
| <a href="luthor.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-all duration-300"> | |
| Read More <i data-feather="arrow-right" class="inline ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <div class="back-to-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})"> | |
| <i data-feather="arrow-up" class="text-white"></i> | |
| </div> | |
| <script> | |
| AOS.init(); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |