| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>About Rainbow Unicorns</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .rainbow-gradient { |
| background: linear-gradient( |
| 90deg, |
| rgba(255, 0, 0, 1) 0%, |
| rgba(255, 154, 0, 1) 10%, |
| rgba(208, 222, 33, 1) 20%, |
| rgba(79, 220, 74, 1) 30%, |
| rgba(63, 218, 216, 1) 40%, |
| rgba(47, 201, 226, 1) 50%, |
| rgba(28, 127, 238, 1) 60%, |
| rgba(95, 21, 242, 1) 70%, |
| rgba(186, 12, 248, 1) 80%, |
| rgba(251, 7, 217, 1) 90%, |
| rgba(255, 0, 0, 1) 100% |
| ); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen"> |
| <custom-header></custom-header> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden p-6 mb-8"> |
| <h1 class="text-3xl font-bold mb-6 text-center rainbow-text">About Our Magical Unicorns</h1> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <img src="http://static.photos/fantasy/640x360/23" alt="Unicorn herd" class="w-full h-64 object-cover rounded-lg mb-4"> |
| <h2 class="text-2xl font-semibold mb-3">Our Story</h2> |
| <p class="text-gray-700 mb-4">Founded in the magical year of 2023, Rainbow Unicorn Dashboard was created to bring joy and sparkles to the world. Our team of unicorn enthusiasts works tirelessly to monitor rainbow production and ensure maximum happiness levels.</p> |
| <p class="text-gray-700">Every unicorn in our care receives daily doses of stardust and regular cloud jumps to keep them in top magical condition.</p> |
| </div> |
| |
| <div> |
| <h2 class="text-2xl font-semibold mb-3">Unicorn Facts</h2> |
| <div class="space-y-4"> |
| <div class="p-4 bg-purple-50 rounded-lg"> |
| <h3 class="font-bold text-purple-800 flex items-center"> |
| <i data-feather="zap" class="mr-2"></i> |
| Magic Power |
| </h3> |
| <p class="text-gray-700 mt-2">Our unicorns generate an average of 87 magic units per hour, enough to power small spells and minor enchantments.</p> |
| </div> |
| |
| <div class="p-4 bg-blue-50 rounded-lg"> |
| <h3 class="font-bold text-blue-800 flex items-center"> |
| <i data-feather="cloud-rain" class="mr-2"></i> |
| Rainbow Production |
| </h3> |
| <p class="text-gray-700 mt-2">Each unicorn can produce up to 3 full rainbows per day, with peak production occurring during sunrise and sunset.</p> |
| </div> |
| |
| <div class="p-4 bg-pink-50 rounded-lg"> |
| <h3 class="font-bold text-pink-800 flex items-center"> |
| <i data-feather="heart" class="mr-2"></i> |
| Happiness Levels |
| </h3> |
| <p class="text-gray-700 mt-2">Our happiness guarantee ensures all unicorns maintain at least 95% happiness through regular grooming and cloud surfing sessions.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <custom-footer></custom-footer> |
|
|
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| </body> |
| </html> |
