About - Joggers <script src="/tailwindcss.js">"></script> <style> @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .blob { animation: float 6s ease-in-out infinite; } </style> </head> <body class="bg-gray-100"> <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-4 text-center sticky top-0 z-50 shadow-lg"> <nav> <ul class="flex justify-center space-x-8"> <li>><a href="/joggers/index.html" class="hover:underline">Home <li>><a href="/joggers/about.html" class="font-bold underline">About <li>><a href="/joggers/products.html" class="hover:underline">Products </ul> </nav> </header> <main> <section class="hero bg-gradient-to-b from-blue-600 to-indigo-700 text-white py-16 text-center relative overflow-hidden"> <div class="absolute inset-0 flex flex-col items-center justify-center opacity-20"> <svg viewBox="0 0 400 300" class="w-3/4 h-auto" preserveAspectRatio="xMidYMid meet"> <rect x="0" y="0" width="400" height="300" fill="#f0f0f0" rx="10"/> <g transform="translate(50,50)"> <path d="M 50,100 L 100,50 L 150,100 Z" fill="#4a90e2" opacity="0.8"/> <rect x="75" y="125" width="50" height="100" fill="#4a90e2" rx="5"/> <rect x="25" y="150" width="150" height="20" fill="#4a90e2" rx="5"/> </g> <g transform="translate(200,50)"> <circle cx="50" cy="50" r="40" fill="#ff69b4" opacity="0.8"/> <path d="M 50,90 L 70,110 L 30,110 Z" fill="#ff69b4"/> </g> <g transform="translate(20, 20)"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#4a90e2" stop-opacity="0.8"/> <stop offset="100%" stop-color="#ff69b4" stop-opacity="0.8"/> </linearGradient> </defs> <rect x="150" y="50" width="100" height="100" fill="url(#grad1)" rx="10"/> </g> </svg> </div> <h1 class="text-5xl font-bold relative z-10 mb-4">Where Comfort Meets Style <p class="relative z-10 max-w-2xl mx-auto">Handcrafted with quality materials and attention to detail since <span class="text-indigo-300 font-bold">2015..</p> </section> <section class="about text-center py-12"> <h2 class="text-4xl font-bold mb-8">Our Story <div class="max-w-4xl mx-auto px-4 grid md:grid-cols-2 gap-8"> <div class="relative p-6 rounded-lg bg-white bg-opacity-10 backdrop-blur-sm border border-white/20"> <h3 class="text-2xl font-bold mb-4">Crafted for Movement <p>Our journey began with a simple observation - people deserve better activewear that doesn't compromise on comfort, performance, or design. Founded in 2015 by fitness enthusiasts, we create joggers that move with you whether you're working out, running errands, or just relaxing..</p> </div> <div class="relative p-6 rounded-lg bg-white bg-opacity-10 backdrop-blur-sm border border-white/20"> <h3 class="text-2xl font-bold mb-4">Sustainable Style <p>