| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Adidas Evolution Visualizer</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=Inter:wght@300;400;500;600;700;800&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .logo-container { |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); |
| } |
| |
| .logo-container:hover { |
| transform: scale(1.05); |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| } |
| |
| .timeline-dot { |
| width: 16px; |
| height: 16px; |
| border-radius: 50%; |
| background: #000; |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| } |
| |
| .timeline-connector { |
| position: absolute; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 2px; |
| background: #000; |
| height: 60px; |
| } |
| |
| .animate-fade-in { |
| animation: fadeIn 0.8s ease-out forwards; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .color-transition { |
| transition: background-color 0.5s ease, color 0.5s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-900"> |
| |
| <nav class="bg-white shadow-md"> |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> |
| <a href="#" class="text-xl font-bold">Adidas Evolution</a> |
| <div class="hidden md:flex space-x-8"> |
| <a href="#history" class="hover:text-blue-600">History</a> |
| <a href="#logos" class="hover:text-blue-600">Logos</a> |
| <a href="#timeline" class="hover:text-blue-600">Timeline</a> |
| <a href="#resources" class="hover:text-blue-600">Resources</a> |
| </div> |
| <button class="md:hidden"> |
| <i data-feather="menu"></i> |
| </button> |
| </div> |
| </nav> |
|
|
| |
| <section class="py-16 md:py-24 bg-gradient-to-r from-gray-100 to-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 animate-fade-in">Adidas Logo Evolution</h1> |
| <p class="text-xl md:text-2xl text-gray-700 max-w-3xl mx-auto mb-10 animate-fade-in" style="animation-delay: 0.2s;"> |
| Explore the iconic transformation of the Adidas logo from its inception to the modern designs we know today. |
| </p> |
| <a href="#logos" class="inline-block bg-black text-white px-8 py-4 rounded-full font-medium hover:bg-gray-800 transition-all duration-300 animate-fade-in" style="animation-delay: 0.4s;"> |
| Explore Logos |
| </a> |
| </div> |
| </section> |
|
|
| |
| <section id="logos" class="py-16 md:py-24 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Iconic Adidas Logos Through Time</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"> |
| |
| <div class="logo-container bg-white p-8 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-40 h-40 bg-black rounded-full flex items-center justify-center"> |
| <div class="w-32 h-32 bg-white rounded-full flex items-center justify-center"> |
| <div class="w-24 h-8 bg-black rounded"></div> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-center">Original Logo (1949)</h3> |
| <p class="text-gray-600 text-center">The classic three stripes representing the foundation of the brand.</p> |
| </div> |
| |
| |
| <div class="logo-container bg-white p-8 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-40 h-40 flex items-center justify-center"> |
| <svg width="120" height="120" viewBox="0 0 120 120"> |
| <path d="M60,20 L80,50 L60,80 L40,50 Z" fill="black" /> |
| <path d="M40,50 L60,20 L80,50 L60,80 Z" fill="black" /> |
| <circle cx="60" cy="50" r="10" fill="black" /> |
| </svg> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-center">Trefoil Logo (1971)</h3> |
| <p class="text-gray-600 text-center">The iconic three-leaf design representing diversity of products.</p> |
| </div> |
| |
| |
| <div class="logo-container bg-white p-8 rounded-2xl shadow-lg border border-gray-100"> |
| <div class="flex justify-center mb-6"> |
| <div class="w-40 h-40 flex items-center justify-center"> |
| <div class="relative"> |
| <div class="w-24 h-24 bg-black rounded-full flex items-center justify-center"> |
| <div class="absolute -rotate-45"> |
| <div class="w-32 h-4 bg-white mb-3 rounded-full"></div> |
| <div class="w-32 h-4 bg-white mb-3 rounded-full"></div> |
| <div class="w-32 h-4 bg-white rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <h3 class="text-xl font-bold mb-2 text-center">Modern Logo (1990s)</h3> |
| <p class="text-gray-600 text-center">The contemporary three bars representing mountain, goals, and achievement.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="timeline" class="py-16 md:py-24 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Evolution Timeline</h2> |
| |
| <div class="relative"> |
| |
| <div class="absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-black"></div> |
| |
| |
| <div class="space-y-24 relative"> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right"> |
| <h3 class="text-2xl font-bold mb-2">1949</h3> |
| <p class="text-gray-700">Adidas is founded by Adolf Dassler, introducing the classic three-stripe logo.</p> |
| </div> |
| <div class="timeline-dot"></div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="w-24 h-24 mx-auto bg-black rounded-full flex items-center justify-center"> |
| <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center"> |
| <div class="w-12 h-4 bg-black rounded"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="timeline-connector"></div> |
| |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right"> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="w-24 h-24 mx-auto flex items-center justify-center"> |
| <svg width="80" height="80" viewBox="0 0 80 80"> |
| <path d="M40,15 L55,35 L40,55 L25,35 Z" fill="black" /> |
| <path d="M25,35 L40,15 L55,35 L40,55 Z" fill="black" /> |
| <circle cx="40" cy="35" r="7" fill="black" /> |
| </svg> |
| </div> |
| </div> |
| </div> |
| <div class="timeline-dot"></div> |
| <div class="md:w-1/2 md:pl-12"> |
| <h3 class="text-2xl font-bold mb-2">1971</h3> |
| <p class="text-gray-700">Introduction of the Trefoil logo to represent the diversity of Adidas products.</p> |
| </div> |
| </div> |
| |
| |
| <div class="timeline-connector"></div> |
| |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 md:pr-12 mb-8 md:mb-0 md:text-right"> |
| <h3 class="text-2xl font-bold mb-2">1990s</h3> |
| <p class="text-gray-700">The modern three bars logo is introduced, symbolizing mountains and goals.</p> |
| </div> |
| <div class="timeline-dot"></div> |
| <div class="md:w-1/2 md:pl-12"> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="w-24 h-24 mx-auto bg-black rounded-full flex items-center justify-center"> |
| <div class="absolute -rotate-45"> |
| <div class="w-20 h-3 bg-white mb-2 rounded-full"></div> |
| <div class="w-20 h-3 bg-white mb-2 rounded-full"></div> |
| <div class="w-20 h-3 bg-white rounded-full"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="resources" class="py-16 md:py-24 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">Learn More</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-gray-100 p-8 rounded-2xl"> |
| <div class="w-12 h-12 bg-black rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="book" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">History</h3> |
| <p class="text-gray-700 mb-4">Discover the rich history behind Adidas and its founder Adolf Dassler.</p> |
| <a href="#" class="text-black font-medium hover:underline inline-flex items-center"> |
| Read more |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| |
| <div class="bg-gray-100 p-8 rounded-2xl"> |
| <div class="w-12 h-12 bg-black rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="image" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Logo Archive</h3> |
| <p class="text-gray-700 mb-4">Explore the complete collection of Adidas logos and branding elements.</p> |
| <a href="#" class="text-black font-medium hover:underline inline-flex items-center"> |
| View archive |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| |
| <div class="bg-gray-100 p-8 rounded-2xl"> |
| <div class極端な例外的状況のため、コードを途中で切り詰めました。完全なコードを生成し直します。 |
| |
| 続きから生成します: |
| |
| html |
| <div class="w-12 h-12 bg-black rounded-full flex items-center justify-center mb-4"> |
| <i data-feather="shopping-bag" class="text-white"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3">Products</h3> |
| <p class="text-gray-700 mb-4">See how the logos are applied across various Adidas products and collections.</p> |
| <a href="#" class="text-black font-medium hover:underline inline-flex items-center"> |
| Browse products |
| <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-black text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4">Adidas Evolution</h3> |
| <p class="text-gray-400">Exploring the iconic transformation of the Adidas brand through time.</p> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Navigation</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li> |
| <li><a href="#history" class="text-gray-400 hover:text-white">History</a></li> |
| <li><a href="#logos" class="text-gray-400 hover:text-white">Logos</a></li> |
| <li><a href="#timeline" class="text-gray-400 hover:text-white">Timeline</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Resources</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white">About</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Archive</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Products</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="font-bold mb-4">Connect</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="instagram"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="twitter"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="facebook"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i data-feather="youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"> |
| <p>© 2023 Adidas Evolution Visualizer. This is a fan-made project not affiliated with Adidas AG.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.classList.add('animate-fade-in'); |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| document.querySelectorAll('.logo-container, .timeline-dot').forEach(el => { |
| observer.observe(el); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
