File size: 11,368 Bytes
073b5f9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: currentColor;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.hero-gradient {
background: linear-gradient(to bottom, #000000, #2a2a2a);
}
.product-card {
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-5px);
}
</style>
</head>
<body class="bg-white text-gray-900 font-sans">
<!-- Navigation -->
<nav class="bg-gray-900 text-gray-100 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-12 items-center">
<div class="flex items-center space-x-1">
<a href="#" class="text-xl font-semibold">
<i class="fab fa-apple"></i>
</a>
</div>
<div class="hidden md:flex items-center space-x-7">
<a href="#" class="nav-link text-sm font-light">Store</a>
<a href="#" class="nav-link text-sm font-light">Mac</a>
<a href="#" class="nav-link text-sm font-light">iPad</a>
<a href="#" class="nav-link text-sm font-light">iPhone</a>
<a href="#" class="nav-link text-sm font-light">Watch</a>
<a href="#" class="nav-link text-sm font-light">AirPods</a>
<a href="#" class="nav-link text-sm font-light">TV & Home</a>
<a href="#" class="nav-link text-sm font-light">Only on Apple</a>
<a href="#" class="nav-link text-sm font-light">Accessories</a>
<a href="#" class="nav-link text-sm font-light">Support</a>
</div>
<div class="flex items-center space-x-5">
<a href="#" class="text-sm"><i class="fas fa-search"></i></a>
<a href="#" class="text-sm"><i class="fas fa-shopping-bag"></i></a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-gradient text-white py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h1 class="text-5xl font-bold mb-4">iPhone 14 Pro</h1>
<h2 class="text-2xl font-light mb-6">Pro. Beyond.</h2>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more ></a>
<a href="#" class="text-blue-500 hover:underline">Buy ></a>
</div>
<div class="mt-10">
<img src="http://static.photos/technology/1200x630/1" alt="iPhone 14 Pro" class="mx-auto">
</div>
</div>
</section>
<!-- Products Section -->
<section class="py-16 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="product-card bg-white p-8 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-2">MacBook Air</h3>
<p class="text-gray-600 mb-4">M2 chip</p>
<img src="http://static.photos/technology/320x240/2" alt="MacBook Air" class="mx-auto mb-4">
<a href="#" class="text-blue-500 hover:underline">Learn more ></a>
</div>
<div class="product-card bg-white p-8 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-2">iPad Pro</h3>
<p class="text-gray-600 mb-4">Supercharged by M2</p>
<img src="http://static.photos/technology/320x240/3" alt="iPad Pro" class="mx-auto mb-4">
<a href="#" class="text-blue-500 hover:underline">Learn more ></a>
</div>
<div class="product-card bg-white p-8 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-2">Apple Watch</h3>
<p class="text-gray-600 mb-4">Series 8</p>
<img src="http://static.photos/technology/320x240/4" alt="Apple Watch" class="mx-auto mb-4">
<a href="#" class="text-blue-500 hover:underline">Learn more ></a>
</div>
<div class="product-card bg-white p-8 rounded-lg text-center">
<h3 class="text-xl font-semibold mb-2">AirPods Pro</h3>
<p class="text-gray-600 mb-4">2nd generation</p>
<img src="http://static.photos/technology/320x240/5" alt="AirPods Pro" class="mx-auto mb-4">
<a href="#" class="text-blue-500 hover:underline">Learn more ></a>
</div>
</div>
</div>
</section>
<!-- Featured Section -->
<section class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16">
<h2 class="text-3xl font-semibold mb-4">The Apple experience.</h2>
<p class="text-gray-600 max-w-3xl mx-auto">Discover the unique combination of hardware, software, and services that only Apple can deliver.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="bg-gray-50 p-12 rounded-xl">
<h3 class="text-2xl font-semibold mb-4">Apple One</h3>
<p class="text-gray-600 mb-6">Bundle up to six Apple services. And enjoy more for less.</p>
<a href="#" class="text-blue-500 hover:underline">Try it free ></a>
</div>
<div class="bg-gray-50 p-12 rounded-xl">
<h3 class="text-2xl font-semibold mb-4">Apple Trade In</h3>
<p class="text-gray-600 mb-6">Turn the device you have into the one you want.</p>
<a href="#" class="text-blue-500 hover:underline">See what your device is worth ></a>
</div>
</div>
</div>
</section>
<!-- Quick Links -->
<section class="py-16 bg-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-sm">
<div>
<h4 class="font-semibold mb-4">Shop and Learn</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:underline">Store</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Mac</a></li>
<li><a href="#" class="text-gray-600 hover:underline">iPad</a></li>
<li><a href="#" class="text-gray-600 hover:underline">iPhone</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Watch</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:underline">Apple Music</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple TV+</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple Fitness+</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple News+</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple Arcade</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">Apple Store</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:underline">Find a Store</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Genius Bar</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Today at Apple</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple Camp</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple Store App</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">For Business</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:underline">Apple and Business</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Shop for Business</a></li>
</ul>
</div>
<div>
<h4 class="font-semibold mb-4">About Apple</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 hover:underline">Newsroom</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Apple Leadership</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Career Opportunities</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Investors</a></li>
<li><a href="#" class="text-gray-600 hover:underline">Ethics & Compliance</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="border-t border-gray-800 pt-8">
<p class="text-sm text-center">Copyright © 2023 Apple Inc. All rights reserved.</p>
<div class="flex flex-wrap justify-center mt-4 space-x-4">
<a href="#" class="text-xs hover:underline">Privacy Policy</a>
<a href="#" class="text-xs hover:underline">Terms of Use</a>
<a href="#" class="text-xs hover:underline">Sales and Refunds</a>
<a href="#" class="text-xs hover:underline">Legal</a>
<a href="#" class="text-xs hover:underline">Site Map</a>
</div>
</div>
</div>
</footer>
<script>
// Simple script to handle navigation hover effects
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('mouseenter', () => {
link.style.color = '#2997ff';
});
link.addEventListener('mouseleave', () => {
link.style.color = '#f5f5f7';
});
});
</script>
</body>
</html> |