Burger King About Us Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Us - Burger King</title> </head> <body class="bg-gray-50 overflow-x-hidden"> <!-- Notification --> <div id="notification" class="notification"> <div class="flex items-center"> <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> <span>Welcome to Burger King - Home of the Whopper!</span> </div> </div> <!-- Floating Background Elements --> <div class="fixed inset-0 pointer-events-none z-0"> <div class="absolute top-20 left-10 w-32 h-32 bg-red-500 rounded-full opacity-5 float-1"></div> <div class="absolute top-40 right-20 w-24 h-24 bg-orange-500 rounded-full opacity-5 float-2"></div> <div class="absolute bottom-40 left-20 w-40 h-40 bg-yellow-500 rounded-full opacity-5 float-3"></div> <div class="absolute bottom-20 right-10 w-28 h-28 bg-red-600 rounded-full opacity-5 float-1"></div> <!-- Crown Background --> <div class="absolute top-1/2 left-1/4 transform -translate-x-1/2 -translate-y-1/2 opacity-3"> <svg class="w-64 h-64 text-yellow-100 crown-spin" fill="currentColor" viewBox="0 0 24 24"> <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 1.4L12 8l-3.1 2L6.8 8.6L7.7 14z"/> </svg> </div> </div> <!-- Hero Section --> <section class="hero-bg text-white py-24 lg:py-32 relative overflow-hidden"> <div class="absolute inset-0 bg-black bg-opacity-30"></div> <div class="container mx-auto px-4 lg:px-8 relative z-10"> <div class="text-center"> <div class="fade-in-up"> <h1 class="poppins text-5xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight"> About <span class="text-yellow-300">Burger</span><br> <span class="text-gradient-yellow">King</span> </h1> </div> <div class="fade-in-up stagger-2"> <p class="text-xl md:text-2xl mb-10 max-w-4xl mx-auto leading-relaxed opacity-90"> Home of the Whopper since 1954. We flame-grill our burgers to perfection and serve them your way - because you're the king! </p> </div> <div class="fade-in-up stagger-3"> <button class="btn-primary text-white px-10 py-5 rounded-full font-semibold text-lg mr-4 mb-4"> Our Menu </button> <button class="border-2 border-white text-white hover:bg-white hover:text-red-900 px-10 py-5 rounded-full font-semibold text-lg transition-all duration-300"> Find Location </button> </div> <!-- Drive-Thru Notice --> <div class="fade-in-up stagger-4 mt-8"> <div class="inline-flex items-center bg-yellow-500 text-black px-6 py-3 rounded-full drive-thru-blink"> <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> <span class="font-bold">Drive-Thru Open 24/7</span> </div> </div> </div> </div> <!-- Animated Food Elements --> <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2"> <div class="flex items-center space-x-8"> <!-- Whopper --> <div class="burger-bounce"> <svg class="w-16 h-16 text-white opacity-30" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/> </svg> </div> <!-- Fries --> <div class="fries-shake"> <svg class="w-12 h-12 text-yellow-400 opacity-40" fill="currentColor" viewBox="0 0 24 24"> <path d="M6 8h2v8H6V8zm4-2h2v10h-2V6zm4 4h2v6h-2v-6z"/> </svg> </div> <!-- Drink --> <div class="drink-bubble"> <svg class="w-10 h-10 text-blue-400 opacity-40" fill="currentColor" viewBox="0 0 24 24"> <path d="M5 3v18h14V3H5zm12 16H7V5h10v14z"/> </svg> </div> <!-- Flame --> <div class="flame"> <svg class="w-14 h-14 text-orange-400 opacity-40" fill="currentColor" viewBox="0 0 24 24"> <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z"/> </svg> </div> </div> </div> </section> <!-- Stats Section --> <section class="py-20 bg-white relative"> <div class="container mx-auto px-4 lg:px-8"> <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> <div class="text-center bounce-in stagger-1"> <div class="bg-gradient-to-br from-red-50 to-red-100 border-2 border-red-200 rounded-3xl p-8 glow-red"> <div class="counter pulse-slow" data-target="18000">0</div> <p class="text-red-700 font-semibold text-lg mt-2">Restaurants</p> <div class="w-12 h-1 bg-gradient-to-r from-red-400 to-red-600 mx-auto mt-3 rounded-full"></div> </div> </div> <div class="text-center bounce-in stagger-2"> <div class="bg-gradient-to-br from-orange-50 to-orange-100 border-2 border-orange-200 rounded-3xl p-8 glow-orange"> <div class="counter pulse-slow" data-target="100">0</div> <p class="text-orange-700 font-semibold text-lg mt-2">Countries</p> <div class="w-12 h-1 bg-gradient-to-r from-orange-400 to-orange-600 mx-auto mt-3 rounded-full"></div> </div> </div> <div class="text-center bounce-in stagger-3"> <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 border-2 border-yellow-200 rounded-3xl p-8 glow-yellow"> <div class="counter pulse-slow" data-target="69">0</div> <p class="text-yellow-700 font-semibold text-lg mt-2">Years of Excellence</p> <div class="w-12 h-1 bg-gradient-to-r from-yellow-400 to-yellow-600 mx-auto mt-3 rounded-full"></div> </div> </div> <div class="text-center bounce-in stagger-4"> <div class="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-200 rounded-3xl p-8 glow-orange"> <div class="counter pulse-slow" data-target="11">0</div> <p class="text-blue-700 font-semibold text-lg mt-2">Million Served Daily</p> <div class="w-12 h-1 bg-gradient-to-r from-blue-400 to-blue-600 mx-auto mt-3 rounded-full"></div> </div> </div> </div> </div> </section> <!-- Main Story Section --> <section class="py-24 bg-gradient-to-br from-gray-50 to-white"> <div class="container mx-auto px-4 lg:px-8"> <div class="grid lg:grid-cols-2 gap-20 items-center mb-24"> <div class="fade-in-left"> <div class="mb-6"> <span class="text-gradient-red text-lg font-semibold uppercase tracking-wider poppins">Our Story</span> </div> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-8 leading-tight poppins"> Flame-Grilled<br> <span class="text-gradient-red">Since 1954</span> </h2> <p class="text-xl text-gray-600 mb-8 leading-relaxed"> Founded in Miami, Florida, Burger King has been serving flame-grilled burgers for nearly 70 years. What started as a simple idea - to serve better burgers - has grown into a global phenomenon. </p> <p class="text-lg text-gray-500 mb-10 leading-relaxed"> Our commitment to quality ingredients, flame-grilling, and serving food "your way" has made us the second-largest fast-food hamburger chain in the world. Every day, we serve over 11 million customers across 100+ countries. </p> <!-- Feature List with Food Icons --> <div class="space-y-6"> <div class="flex items-center fade-in-left stagger-1"> <div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-xl flex items-center justify-center mr-6 glow-red menu-item-pulse"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Flame-Grilled Perfection</h4> <p class="text-gray-600">Every burger is flame-grilled to lock in flavor and juiciness</p> </div> </div> <div class="flex items-center fade-in-left stagger-2"> <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center mr-6 glow-orange menu-item-pulse"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Have It Your Way</h4> <p class="text-gray-600">Customizable orders to match your exact preferences</p> </div> </div> <div class="flex items-center fade-in-left stagger-3"> <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-xl flex items-center justify-center mr-6 glow-yellow menu-item-pulse"> <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <div> <h4 class="text-lg font-semibold text-gray-800">Fast & Fresh Service</h4> <p class="text-gray-600">Quick service without compromising on quality</p> </div> </div> </div> </div> <div class="fade-in-right"> <div class="relative"> <!-- Main Restaurant Visualization --> <div class="bg-gradient-to-br from-red-50 to-orange-50 border-2 border-red-200 rounded-3xl p-12 float-1 glow-red"> <svg class="w-full h-80 text-red-600" fill="currentColor" viewBox="0 0 400 320"> <rect width="400" height="320" fill="url(#bkGradient)" rx="20"/> <defs> <linearGradient id="bkGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style="stop-color:#fef2f2;stop-opacity:1" /> <stop offset="100%" style="stop-color:#fff7ed;stop-opacity:1" /> </linearGradient> </defs> <!-- Restaurant Building --> <rect x="50" y="80" width="300" height="200" fill="#d62300" opacity="0.8" rx="10"/> <rect x="70" y="100" width="260" height="160" fill="#b91c1c" opacity="0.6" rx="5"/> <!-- Windows --> <rect x="80" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="120" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="160" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="200" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="240" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="280" y="120" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="80" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="120" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="160" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="200" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="240" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <rect x="280" y="160" width="30" height="25" fill="#fbbf24" opacity="0.8" rx="3"/> <!-- Main Entrance --> <rect x="170" y="200" width="60" height="80" fill="#ff6900" opacity="0.9" rx="5"/> <rect x="180" y="220" width="40" height="60" fill="#d62300" opacity="0.7" rx="3"/> <!-- Crown Logo --> <path d="M185 140 L190 130 L195 135 L200 125 L205 135 L210 130 L215 140 L185 140 Z" fill="#fbbf24" class="crown-spin"/> <!-- Drive-Thru --> <rect x="280" y="240" width="80" height="30" fill="#0066cc" opacity="0.8" rx="5"/> <rect x="285" y="235" width="70" height="15" fill="#60a5fa" opacity="0.6" rx="3"/> <circle cx="295" cy="265" r="8" fill="#374151"/> <circle cx="345" cy="265" r="8" fill="#374151"/> <rect x="320" y="245" width="15" height="3" fill="#ffffff" class="drive-thru-blink"/> <!-- BK Sign --> <rect x="150" y="50" width="100" height="25" fill="#d62300" opacity="0.9" rx="5"/> <text x="200" y="65" text-anchor="middle" fill="white" font-size="10" font-weight="bold">BURGER KING</text> <!-- Flame Grill --> <circle cx="320" cy="100" r="25" fill="#ff6900" opacity="0.7" class="flame"/> <path d="M310 100 Q315 90 320 100 Q325 90 330 100 Q325 110 320 100 Q315 110 310 100" fill="#fbbf24" class="flame"/> </svg> </div> <!-- Floating Achievement Cards --> <div class="absolute -top-6 -right-6 bg-white border-2 border-red-300 rounded-2xl p-6 shadow-2xl float-2 glow-red"> <div class="text-2xl font-bold text-gradient-red poppins">18K+</div> <div class="text-sm text-gray-600">Restaurants</div> </div> <div class="absolute -bottom-6 -left-6 bg-white border-2 border-orange-300 rounded-2xl p-6 shadow-2xl float-3 glow-orange"> <div class="text-2xl font-bold text-gradient-orange poppins">100+</div> <div class="text-sm text-gray-600">Countries</div> </div> </div> </div> </div> </div> </section> <!-- Menu Categories Section --> <section class="py-24 bg-white"> <div class="container mx-auto px-4 lg:px-8"> <div class="text-center mb-20"> <div class="fade-in-up"> <span class="text-gradient-red text-lg font-semibold uppercase tracking-wider poppins">Our Menu</span> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mt-4 mb-6 poppins"> Flame-Grilled Favorites </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> From our signature Whopper to crispy chicken and fresh salads, we have something delicious for everyone. </p> </div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="menu-category bg-gradient-to-br from-red-50 to-red-100 border-2 border-red-200 p-8 rounded-3xl scale-up stagger-1"> <div class="w-16 h-16 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white whopper-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path> </svg> </div> <h3 class="text-2xl font-bold text-red-700 mb-4 poppins">Burgers</h3> <p class="text-gray-600 leading-relaxed mb-4"> Our signature flame-grilled burgers including the iconic Whopper, Big King, and Bacon King. </p> <div class="text-sm text-red-600 font-semibold">? Flame-Grilled</div> </div> <div class="menu-category bg-gradient-to-br from-orange-50 to-orange-100 border-2 border-orange-200 p-8 rounded-3xl scale-up stagger-2"> <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white fries-shake" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10l1 16H6L7 4z"></path> </svg> </div> <h3 class="text-2xl font-bold text-orange-700 mb-4 poppins">Chicken</h3> <p class="text-gray-600 leading-relaxed mb-4"> Crispy chicken sandwiches, nuggets, and tenders made with premium white meat chicken. </p> <div class="text-sm text-orange-600 font-semibold">? Crispy & Fresh</div> </div> <div class="menu-category bg-gradient-to-br from-yellow-50 to-yellow-100 border-2 border-yellow-200 p-8 rounded-3xl scale-up stagger-3"> <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white fries-shake" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 8h2v8H6V8zm4-2h2v10h-2V6zm4 4h2v6h-2v-6z"></path> </svg> </div> <h3 class="text-2xl font-bold text-yellow-700 mb-4 poppins">Sides</h3> <p class="text-gray-600 leading-relaxed mb-4"> Golden crispy fries, onion rings, mozzarella sticks, and other delicious sides. </p> <div class="text-sm text-yellow-600 font-semibold">? Perfectly Seasoned</div> </div> <div class="menu-category bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-200 p-8 rounded-3xl scale-up stagger-4"> <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white drink-bubble" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v18h14V3H5zm12 16H7V5h10v14z"></path> </svg> </div> <h3 class="text-2xl font-bold text-blue-700 mb-4 poppins">Beverages</h3> <p class="text-gray-600 leading-relaxed mb-4"> Soft drinks, coffee, milkshakes, and smoothies to complement your meal perfectly. </p> <div class="text-sm text-blue-600 font-semibold">? Ice Cold</div> </div> <div class="menu-category bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200 p-8 rounded-3xl scale-up stagger-5"> <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path> </svg> </div> <h3 class="text-2xl font-bold text-green-700 mb-4 poppins">Breakfast</h3> <p class="text-gray-600 leading-relaxed mb-4"> Start your day right with our breakfast sandwiches, hash browns, and fresh coffee. </p> <div class="text-sm text-green-600 font-semibold">? All Day</div> </div> <div class="menu-category bg-gradient-to-br from-purple-50 to-purple-100 border-2 border-purple-200 p-8 rounded-3xl scale-up stagger-6"> <div class="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl flex items-center justify-center mb-6 pulse-slow interactive-hover"> <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path> </svg> </div> <h3 class="text-2xl font-bold text-purple-700 mb-4 poppins">Desserts</h3> <p class="text-gray-600 leading-relaxed mb-4"> Sweet treats including soft-serve ice cream, pies, cookies, and seasonal favorites. </p> <div class="text-sm text-purple-600 font-semibold">? Sweet Endings</div> </div> </div> </div> </section> <!-- Timeline Section --> <section class="py-24 bg-gradient-to-br from-gray-50 to-white"> <div class="container mx-auto px-4 lg:px-8"> <div class="text-center mb-20"> <div class="fade-in-up"> <span class="text-gradient-red text-lg font-semibold uppercase tracking-wider poppins">Our Journey</span> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mt-4 mb-6 poppins"> 69 Years of Flame-Grilled Excellence </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> From a small Miami restaurant to a global fast-food empire, our journey has been marked by innovation and dedication to quality. </p> </div> </div> <div class="relative"> <!-- Timeline Line --> <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-red-400 to-orange-600"></div> <div class="space-y-16"> <div class="timeline-item flex items-center"> <div class="w-1/2 pr-8 text-right"> <div class="bg-white border-2 border-red-200 rounded-2xl p-6 shadow-lg"> <h3 class="text-2xl font-bold text-red-700 mb-2 poppins">1954</h3> <h4 class="text-lg font-semibold text-gray-800 mb-3">The Beginning</h4> <p class="text-gray-600">James McLamore and David Edgerton founded Burger King in Miami, Florida.</p> </div> </div> <div class="w-8 h-8 bg-red-500 rounded-full border-4 border-white shadow-lg z-10"></div> <div class="w-1/2 pl-8"></div> </div> <div class="timeline-item flex items-center"> <div class="w-1/2 pr-8"></div> <div class="w-8 h-8 bg-orange-500 rounded-full border-4 border-white shadow-lg z-10"></div> <div class="w-1/2 pl-8"> <div class="bg-white border-2 border-orange-200 rounded-2xl p-6 shadow-lg"> <h3 class="text-2xl font-bold text-orange-700 mb-2 poppins">1957</h3> <h4 class="text-lg font-semibold text-gray-800 mb-3">The Whopper is Born</h4> <p class="text-gray-600">Introduced the Whopper sandwich, which became our signature burger.</p> </div> </div> </div> <div class="timeline-item flex items-center"> <div class="w-1/2 pr-8 text-right"> <div class="bg-white border-2 border-yellow-200 rounded-2xl p-6 shadow-lg"> <h3 class="text-2xl font-bold text-yellow-700 mb-2 poppins">1974</h3> <h4 class="text-lg font-semibold text-gray-800 mb-3">"Have It Your Way"</h4> <p class="text-gray-600">Launched the famous slogan emphasizing customer customization.</p> </div> </div> <div class="w-8 h-8 bg-yellow-500 rounded-full border-4 border-white shadow-lg z-10"></div> <div class="w-1/2 pl-8"></div> </div> <div class="timeline-item flex items-center"> <div class="w-1/2 pr-8"></div> <div class="w-8 h-8 bg-blue-500 rounded-full border-4 border-white shadow-lg z-10"></div> <div class="w-1/2 pl-8"> <div class="bg-white border-2 border-blue-200 rounded-2xl p-6 shadow-lg"> <h3 class="text-2xl font-bold text-blue-700 mb-2 poppins">1990s</h3> <h4 class="text-lg font-semibold text-gray-800 mb-3">Global Expansion</h4> <p class="text-gray-600">Rapid international expansion, reaching over 50 countries worldwide.</p> </div> </div> </div> <div class="timeline-item flex items-center"> <div class="w-1/2 pr-8 text-right"> <div class="bg-white border-2 border-red-200 rounded-2xl p-6 shadow-lg"> <h3 class="text-2xl font-bold text-red-700 mb-2 poppins">2023</h3> <h4 class="text-lg font-semibold text-gray-800 mb-3">Digital Innovation</h4> <p class="text-gray-600">Leading with mobile ordering, delivery, and digital experiences worldwide.</p> </div> </div> <div class="w-8 h-8 bg-red-500 rounded-full border-4 border-white shadow-lg z-10"></div> <div class="w-1/2 pl-8"></div> </div> </div> </div> </div> </section> <!-- Team Section --> <section class="py-24 bg-white"> <div class="container mx-auto px-4 lg:px-8"> <div class="text-center mb-20"> <div class="fade-in-up"> <span class="text-gradient-red text-lg font-semibold uppercase tracking-wider poppins">Our Leadership</span> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mt-4 mb-6 poppins"> The Kings Behind the Crown </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Meet the passionate leaders who drive our commitment to serving flame-grilled excellence and exceptional customer experiences. </p> </div> </div> <div class="grid md:grid-cols-3 gap-10"> <div class="team-card bg-white border-2 border-red-200 rounded-3xl shadow-xl overflow-hidden scale-up stagger-1"> <div class="h-80 bg-gradient-to-br from-red-500 via-red-400 to-orange-400 flex items-center justify-center relative"> <div class="w-32 h-32 bg-white rounded-full flex items-center justify-center shadow-2xl"> <svg class="w-16 h-16 text-red-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg> </div> <!-- Floating Crown --> <div class="absolute top-6 right-6 w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center float-1"> <svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 24 24"> <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 1.4L12 8l-3.1 2L6.8 8.6L7.7 14z"/> </svg> </div> <div class="absolute bottom-6 left-6 w-12 h-12 bg-white bg-opacity-20 rounded-full float-2"></div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-2 poppins">José Cil</h3> <p class="text-red-600 font-semibold text-lg mb-4">CEO, Restaurant Brands International</p> <p class="text-gray-600 leading-relaxed mb-6"> Leading the global expansion and digital transformation of Burger King with over 20 years of restaurant industry experience. </p> <div class="flex items-center text-sm text-gray-500 mb-4"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> </svg> <span>Harvard Business School</span> </div> <div class="flex space-x-4"> <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center hover:bg-red-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20"> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path> </svg> </div> <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center hover:bg-red-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> </div> </div> </div> <div class="team-card bg-white border-2 border-orange-200 rounded-3xl shadow-xl overflow-hidden scale-up stagger-2"> <div class="h-80 bg-gradient-to-br from-orange-500 via-orange-400 to-yellow-400 flex items-center justify-center relative"> <div class="w-32 h-32 bg-white rounded-full flex items-center justify-center shadow-2xl"> <svg class="w-16 h-16 text-orange-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg> </div> <div class="absolute top-6 right-6 w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center float-2"> <svg class="w-8 h-8 text-white flame" fill="currentColor" viewBox="0 0 24 24"> <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"/> </svg> </div> <div class="absolute bottom-6 left-6 w-12 h-12 bg-white bg-opacity-20 rounded-full float-1"></div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-2 poppins">Tom Curtis</h3> <p class="text-orange-600 font-semibold text-lg mb-4">President, Burger King US & Canada</p> <p class="text-gray-600 leading-relaxed mb-6"> Driving operational excellence and innovation across North American markets with focus on customer experience and franchise growth. </p> <div class="flex items-center text-sm text-gray-500 mb-4"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> </svg> <span>Northwestern Kellogg</span> </div> <div class="flex space-x-4"> <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center hover:bg-orange-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-orange-600" fill="currentColor" viewBox="0 0 20 20"> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path> </svg> </div> <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center hover:bg-orange-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> </div> </div> </div> <div class="team-card bg-white border-2 border-yellow-200 rounded-3xl shadow-xl overflow-hidden scale-up stagger-3"> <div class="h-80 bg-gradient-to-br from-yellow-500 via-yellow-400 to-orange-400 flex items-center justify-center relative"> <div class="w-32 h-32 bg-white rounded-full flex items-center justify-center shadow-2xl"> <svg class="w-16 h-16 text-yellow-600" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path> </svg> </div> <div class="absolute top-6 right-6 w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center float-3"> <svg class="w-8 h-8 text-white burger-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path> </svg> </div> <div class="absolute bottom-6 left-6 w-12 h-12 bg-white bg-opacity-20 rounded-full float-2"></div> </div> <div class="p-8"> <h3 class="text-2xl font-bold text-gray-800 mb-2 poppins">Ellie Doty</h3> <p class="text-yellow-600 font-semibold text-lg mb-4">Chief Marketing Officer</p> <p class="text-gray-600 leading-relaxed mb-6"> Leading global marketing strategy and brand innovation, creating memorable campaigns that connect with customers worldwide. </p> <div class="flex items-center text-sm text-gray-500 mb-4"> <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-4m-5 0H3m2 0h4M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path> </svg> <span>University of Pennsylvania</span> </div> <div class="flex space-x-4"> <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center hover:bg-yellow-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 20 20"> <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path> <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path> </svg> </div> <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center hover:bg-yellow-200 transition-colors cursor-pointer"> <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> </div> </div> </div> </div> </div> </div> </section> <!-- Awards Section --> <section class="py-24 bg-gradient-to-br from-gray-50 to-white"> <div class="container mx-auto px-4 lg:px-8"> <div class="text-center mb-20"> <div class="fade-in-up"> <span class="text-gradient-red text-lg font-semibold uppercase tracking-wider poppins">Recognition</span> <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mt-4 mb-6 poppins"> Awards & Achievements </h2> <p class="text-xl text-gray-600 max-w-3xl mx-auto"> Our commitment to quality, innovation, and customer satisfaction has earned recognition from industry leaders worldwide. </p> </div> </div> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div class="text-center scale-up stagger-1"> <div class="award-shine bg-gradient-to-br from-yellow-100 to-yellow-200 border-2 border-yellow-300 rounded-3xl p-8 glow-yellow"> <div class="w-20 h-20 bg-gradient-to-br from-yellow-500 to-yellow-600 rounded-full flex items-center justify-center mx-auto mb-6 pulse-slow"> <svg class="w-10 h-10 text-white crown-spin" fill="currentColor" viewBox="0 0 24 24"> <path d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11H5zm2.7-2h8.6l.9-5.4-2.1 1.4L12 8l-3.1 2L6.8 8.6L7.7 14z"/> </svg> </div> <h3 class="text-lg font-bold text-gray-800 mb-2 poppins">QSR Magazine</h3> <p class="text-sm text-gray-600">Top 50 Global Chain</p> <p class="text-xs text-gray-500 mt-2">2023</p> </div> </div> <div class="text-center scale-up stagger-2"> <div class="award-shine bg-gradient-to-br from-red-100 to-red-200 border-2 border-red-300 rounded-3xl p-8 glow-red"> <div class="w-20 h-20 bg-gradient-to-br from-red-500 to-red-600 rounded-full flex items-center justify-center mx-auto mb-6 pulse-slow"> <svg class="w-10 h-10 text-white flame" fill="currentColor" viewBox="0 0 24 24"> <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"/> </svg> </div> <h3 class="text-lg font-bold text-gray-800 mb-2 poppins">Franchise Times</h3> <p class="text-sm text-gray-600">Top 200 Franchise</p> <p class="text-xs text-gray-500 mt-2">2023</p> </div> </div> <div class="text-center scale-up stagger-3"> <div class="award-shine bg-gradient-to-br from-orange-100 to-orange-200 border-2 border-orange-300 rounded-3xl p-8 glow-orange"> <div class="w-20 h-20 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 pulse-slow"> <svg class="w-10 h-10 text-white burger-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"></path> </svg> </div> <h3 class="text-lg font-bold text-gray-800 mb-2 poppins">Nation's Restaurant News</h3> <p class="text-sm text-gray-600">Innovation Award</p> <p class="text-xs text-gray-500 mt-2">2022</p> </div> </div> <div class="text-center scale-up stagger-4"> <div class="award-shine bg-gradient-to-br from-blue-100 to-blue-200 border-2 border-blue-300 rounded-3xl p-8 glow-orange"> <div class="w-20 h-20 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center mx-auto mb-6 pulse-slow"> <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> </svg> </div> <h3 class="text-lg font-bold text-gray-800 mb-2 poppins">Customer Choice</h3> <p class="text-sm text-gray-600">Best Value Award</p> <p class="text-xs text-gray-500 mt-2">2023</p> </div> </div> </div> </div> </section> <!-- CTA Section --> <section class="hero-bg text-white py-24 relative overflow-hidden"> <div class="absolute inset-0 bg-black bg-opacity-40"></div> <div class="container mx-auto px-4 lg:px-8 text-center relative z-10"> <div class="fade-in-up"> <h2 class="poppins text-4xl md:text-5xl font-bold mb-8 leading-tight"> Taste the Flame-Grilled<br> <span class="text-yellow-300">Difference</span> </h2> </div> <div class="fade-in-up stagger-1"> <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto leading-relaxed opacity-90"> Experience the bold flavors of our flame-grilled burgers and discover why millions of customers choose Burger King every day. Have it your way! </p> </div> <div class="fade-in-up stagger-2"> <div class="flex flex-col sm:flex-row gap-6 justify-center items-center mb-8"> <button class="btn-primary text-white px-12 py-5 rounded-full font-semibold text-lg poppins"> Order Now </button> <button class="border-2 border-white text-white hover:bg-white hover:text-red-900 px-12 py-5 rounded-full font-semibold text-lg transition-all duration-300"> Find Restaurant </button> </div> <!-- Quick Contact Info --> <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto"> <div class="flex items-center justify-center bg-white bg-opacity-10 rounded-2xl p-4"> <svg class="w-6 h-6 mr-3 drive-thru-blink" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> </svg> <div> <div class="font-semibold">Drive-Thru</div> <div class="text-sm opacity-80">Open 24/7</div> </div> </div> <div class="flex items-center justify-center bg-white bg-opacity-10 rounded-2xl p-4"> <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path> </svg> <div> <div class="font-semibold">Mobile App</div> <div class="text-sm opacity-80">Order & Earn Points</div> </div> </div> <div class="flex items-center justify-center bg-white bg-opacity-10 rounded-2xl p-4"> <svg class="w-6 h-6 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> <div> <div class="font-semibold">Delivery</div> <div class="text-sm opacity-80">Available Nationwide</div> </div> </div> </div> </div> </div> <!-- Animated Food Elements --> <div class="absolute bottom-10 left-10 opacity-20"> <div class="burger-bounce"> <svg class="w-24 h-24 text-yellow-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/> </svg> </div> </div> <div class="absolute bottom-10 right-10 opacity-20"> <div class="flame"> <svg class="w-20 h-20 text-orange-300" fill="currentColor" viewBox="0 0 24 24"> <path d="M13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67z"/> </svg> </div> </div> </section> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96c13444a4df3a23',t:'MTc1NDY3OTA3Ny4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap'); * { font-family: 'Inter', sans-serif; } .poppins { font-family: 'Poppins', sans-serif; } /* Enhanced Animations */ .fade-in-up { opacity: 0; transform: translateY(60px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-up.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-80px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(80px); transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .scale-up { opacity: 0; transform: scale(0.7) rotate(-2deg); transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .scale-up.visible { opacity: 1; transform: scale(1) rotate(0deg); } .bounce-in { opacity: 0; transform: scale(0.3); transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .bounce-in.visible { opacity: 1; transform: scale(1); } /* Burger King Brand Colors */ :root { --bk-red: #d62300; --bk-orange: #ff6900; --bk-yellow: #ffb500; --bk-blue: #0066cc; --bk-brown: #8b4513; } /* Flame-Grilled Hero Background */ .hero-bg { background: linear-gradient(-45deg, var(--bk-red), var(--bk-orange), var(--bk-yellow), #ff4500); background-size: 400% 400%; animation: flameShift 15s ease infinite; } @keyframes flameShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Flame Animation */ .flame { animation: flameFlicker 2s ease-in-out infinite alternate; } @keyframes flameFlicker { 0% { transform: scale(1) rotate(-2deg); opacity: 0.8; } 100% { transform: scale(1.1) rotate(2deg); opacity: 1; } } /* Burger Bounce */ .burger-bounce { animation: burgerBounce 3s ease-in-out infinite; } @keyframes burgerBounce { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } /* Sizzle Effect */ .sizzle { animation: sizzle 1.5s ease-in-out infinite; } @keyframes sizzle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } /* Floating Elements */ .float-1 { animation: float1 8s ease-in-out infinite; } .float-2 { animation: float2 10s ease-in-out infinite; } .float-3 { animation: float3 12s ease-in-out infinite; } @keyframes float1 { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-30px) rotate(10deg); } } @keyframes float2 { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-25px) rotate(-8deg); } } @keyframes float3 { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-35px) rotate(5deg); } } /* Crown Animation */ .crown-spin { animation: crownSpin 20s linear infinite; } @keyframes crownSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Card Hover Effects */ .card-3d { perspective: 1000px; transition: all 0.5s ease; } .card-3d:hover { transform: rotateY(8deg) rotateX(5deg) translateZ(30px); } .card-inner { transition: all 0.5s ease; transform-style: preserve-3d; } .card-3d:hover .card-inner { transform: translateZ(40px); } /* Glowing Effects */ .glow-red { box-shadow: 0 0 30px rgba(214, 35, 0, 0.3); transition: all 0.3s ease; } .glow-red:hover { box-shadow: 0 0 50px rgba(214, 35, 0, 0.6); } .glow-orange { box-shadow: 0 0 30px rgba(255, 105, 0, 0.3); transition: all 0.3s ease; } .glow-orange:hover { box-shadow: 0 0 50px rgba(255, 105, 0, 0.6); } .glow-yellow { box-shadow: 0 0 30px rgba(255, 181, 0, 0.3); transition: all 0.3s ease; } .glow-yellow:hover { box-shadow: 0 0 50px rgba(255, 181, 0, 0.6); } /* Pulse Animation */ .pulse-slow { animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Text Gradients */ .text-gradient-red { background: linear-gradient(135deg, #d62300 0%, #ff6900 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-orange { background: linear-gradient(135deg, #ff6900 0%, #ffb500 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-yellow { background: linear-gradient(135deg, #ffb500 0%, #ffd700 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Counter Styles */ .counter { font-weight: 800; font-size: 3rem; background: linear-gradient(135deg, #d62300 0%, #ff6900 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Team Card Hover */ .team-card { position: relative; overflow: hidden; transition: all 0.5s ease; } .team-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); transition: left 0.8s; } .team-card:hover::before { left: 100%; } .team-card:hover { transform: translateY(-15px) scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,0.15); } /* Button Animations */ .btn-primary { background: linear-gradient(135deg, #d62300 0%, #ff6900 100%); position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition: left 0.5s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(214, 35, 0, 0.4); } /* Menu Item Animation */ .menu-item-pulse { animation: menuItemPulse 3s ease-in-out infinite; } @keyframes menuItemPulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.08) rotate(2deg); opacity: 0.9; } } /* Stagger Animation Delays */ .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } .stagger-5 { animation-delay: 0.5s; } .stagger-6 { animation-delay: 0.6s; } /* Drive-Thru Blink */ .drive-thru-blink { animation: driveThruBlink 2s ease-in-out infinite; } @keyframes driveThruBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Menu Category Hover Effect */ .menu-category { transition: all 0.4s ease; position: relative; overflow: hidden; } .menu-category::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(45deg, transparent, rgba(214, 35, 0, 0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .menu-category:hover::after { transform: translateX(100%); } .menu-category:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); } /* Timeline Animation */ .timeline-item { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease; } .timeline-item.visible { opacity: 1; transform: translateX(0); } .timeline-item:nth-child(even) { transform: translateX(50px); } .timeline-item:nth-child(even).visible { transform: translateX(0); } /* Award Animation */ .award-shine { position: relative; overflow: hidden; } .award-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,215,0,0.3), transparent); transform: rotate(45deg); animation: awardShine 3s ease-in-out infinite; } @keyframes awardShine { 0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 50% { transform: translateX(100%) translateY(100%) rotate(45deg); } } /* Responsive adjustments */ @media (max-width: 768px) { .counter { font-size: 2rem; } .card-3d:hover { transform: translateY(-5px) scale(1.02); } } /* Loading Animation */ .loading-spinner { animation: spin 2s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Notification Styles */ .notification { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #d62300, #ff6900); color: white; padding: 16px 24px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transform: translateX(400px); transition: transform 0.5s ease; z-index: 1000; } .notification.show { transform: translateX(0); } /* Interactive Elements */ .interactive-hover { transition: all 0.3s ease; cursor: pointer; } .interactive-hover:hover { transform: scale(1.05); filter: brightness(1.1); } /* Whopper Animation */ .whopper-spin { animation: whopperSpin 8s linear infinite; } @keyframes whopperSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } /* Fries Animation */ .fries-shake { animation: friesShake 4s ease-in-out infinite; } @keyframes friesShake { 0%, 100% { transform: translateX(0px) rotate(0deg); } 25% { transform: translateX(5px) rotate(1deg); } 50% { transform: translateX(0px) rotate(0deg); } 75% { transform: translateX(-5px) rotate(-1deg); } } /* Drink Bubble */ .drink-bubble { animation: drinkBubble 3s ease-in-out infinite; } @keyframes drinkBubble { 0%, 100% { transform: translateY(0px); opacity: 1; } 50% { transform: translateY(-10px); opacity: 0.7; } }
JavaScript
// Enhanced Intersection Observer const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Observe all animated elements document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in-right, .scale-up, .bounce-in, .timeline-item').forEach(el => { observer.observe(el); }); // Enhanced counter animation function animateCounter(element) { const target = parseInt(element.getAttribute('data-target')); const duration = 3000; const step = target / (duration / 16); let current = 0; const timer = setInterval(() => { current += step; if (current >= target) { current = target; clearInterval(timer); } // Add formatting for different values const displayValue = Math.floor(current); if (element.getAttribute('data-target') === '18000') { element.textContent = (displayValue / 1000).toFixed(0) + 'K+'; } else if (element.getAttribute('data-target') === '11') { element.textContent = displayValue + 'M+'; } else { element.textContent = displayValue + '+'; } }, 16); } // Counter observer const counterObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const counter = entry.target.querySelector('.counter'); if (counter && !counter.classList.contains('animated')) { counter.classList.add('animated'); setTimeout(() => animateCounter(counter), 300); } } }); }, { threshold: 0.5 }); document.querySelectorAll('.bounce-in').forEach(el => { counterObserver.observe(el); }); // Enhanced button interactions document.querySelectorAll('button').forEach(button => { button.addEventListener('mouseenter', () => { button.style.transform = 'translateY(-3px) scale(1.02)'; }); button.addEventListener('mouseleave', () => { button.style.transform = 'translateY(0) scale(1)'; }); button.addEventListener('mousedown', () => { button.style.transform = 'translateY(0) scale(0.98)'; }); button.addEventListener('mouseup', () => { button.style.transform = 'translateY(-3px) scale(1.02)'; }); }); // Interactive hover effects document.querySelectorAll('.interactive-hover').forEach(element => { element.addEventListener('mouseenter', () => { element.style.transform = 'scale(1.1) rotate(5deg)'; }); element.addEventListener('mouseleave', () => { element.style.transform = 'scale(1) rotate(0deg)'; }); }); // Menu category click effects document.querySelectorAll('.menu-category').forEach(card => { card.addEventListener('click', () => { // Add click animation card.style.transform = 'scale(0.95)'; setTimeout(() => { card.style.transform = 'translateY(-8px) scale(1.02)'; }, 150); // Show notification const categoryName = card.querySelector('h3').textContent; showNotification(`Explore our delicious ${categoryName} menu!`); }); }); // Notification system function showNotification(message) { const notification = document.getElementById('notification'); notification.querySelector('span').textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Show welcome notification on load window.addEventListener('load', () => { setTimeout(() => { showNotification('Welcome to Burger King - Home of the Whopper!'); }, 1000); }); // Drive-thru button pulse effect document.querySelectorAll('.drive-thru-blink').forEach(element => { element.addEventListener('click', () => { showNotification('Drive-Thru is open 24/7! Find your nearest location.'); }); }); // Team card interactions document.querySelectorAll('.team-card').forEach(card => { card.addEventListener('mouseenter', () => { const floatingElements = card.querySelectorAll('[class*="float-"]'); floatingElements.forEach(el => { el.style.animationDuration = '2s'; }); }); card.addEventListener('mouseleave', () => { const floatingElements = card.querySelectorAll('[class*="float-"]'); floatingElements.forEach(el => { el.style.animationDuration = ''; }); }); }); // Award shine effect on hover document.querySelectorAll('.award-shine').forEach(award => { award.addEventListener('mouseenter', () => { award.style.transform = 'scale(1.05) rotate(2deg)'; }); award.addEventListener('mouseleave', () => { award.style.transform = 'scale(1) rotate(0deg)'; }); }); // Smooth scroll behavior document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); }); // Loading animation window.addEventListener('load', () => { document.body.classList.add('loaded'); }); // Keyboard accessibility document.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { if (e.target.classList.contains('interactive-hover')) { e.target.click(); } } }); // Performance optimization - pause animations when not visible const pauseAnimationsObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { const animations = entry.target.querySelectorAll('[class*="float-"], [class*="pulse"], [class*="flame"], [class*="bounce"], [class*="spin"]'); animations.forEach(el => { if (entry.isIntersecting) { el.style.animationPlayState = 'running'; } else { el.style.animationPlayState = 'paused'; } }); }); }, { threshold: 0 }); document.querySelectorAll('section').forEach(section => { pauseAnimationsObserver.observe(section); }); // Special Burger King interactions document.querySelectorAll('.crown-spin').forEach(crown => { crown.addEventListener('click', () => { showNotification('You are the King! ? Enjoy your royal treatment at BK!'); crown.style.animationDuration = '1s'; setTimeout(() => { crown.style.animationDuration = '20s'; }, 2000); }); }); // Flame grill interaction document.querySelectorAll('.flame').forEach(flame => { flame.addEventListener('click', () => { showNotification('? Flame-grilled to perfection! Taste the difference!'); }); }); // Whopper spin interaction document.querySelectorAll('.whopper-spin').forEach(whopper => { whopper.addEventListener('click', () => { showNotification('? Try our signature Whopper - flame-grilled since 1957!'); }); });
Output Preview
Desktop
Mobile
Fullscreen