File size: 21,906 Bytes
e2ec395 | 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 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-section {
background: linear-gradient(to bottom, #000000, #1a1a1a);
}
.nav-link:hover {
opacity: 0.7;
}
.product-card:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
.footer-link:hover {
text-decoration: underline;
}
.search-input:focus {
outline: none;
background-color: rgba(255,255,255,0.2);
}
.dropdown:hover .dropdown-menu {
display: block;
}
.transform-style-preserve-3d {
transform-style: preserve-3d;
}
.hover\:rotate-x-6:hover {
transform: rotateX(6deg);
}
.hover\:rotate-y-6:hover {
transform: rotateY(6deg);
}
.hover\:rotate-y-12:hover {
transform: rotateY(12deg);
}
.product-card {
perspective: 1000px;
}
</style>
</head>
<body class="font-sans antialiased text-gray-100 bg-black">
<!-- Navigation -->
<nav class="bg-black bg-opacity-90 sticky top-0 z-50 backdrop-blur-md transform-style-preserve-3d">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<!-- Mobile menu button -->
<div class="flex items-center md:hidden">
<button class="text-gray-300 hover:text-white focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Apple logo -->
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-white">
<i class="fab fa-apple text-2xl"></i>
</a>
</div>
<!-- Desktop menu -->
<div class="hidden md:flex space-x-8">
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Store</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Mac</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">iPad</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">iPhone</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Watch</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Vision</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">AirPods</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">TV & Home</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Entertainment</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Accessories</a>
</div>
<div class="dropdown relative">
<a href="#" class="nav-link text-gray-300 hover:text-white text-sm font-medium">Support</a>
</div>
</div>
<!-- Search and bag -->
<div class="flex items-center space-x-4">
<div class="relative hidden md:block">
<input type="text" placeholder="Search apple.com" class="search-input bg-transparent border-none text-white placeholder-gray-400 text-sm rounded-md px-3 py-1 w-40 focus:w-64 transition-all duration-300">
<i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
</div>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fas fa-shopping-bag text-lg"></i>
</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section py-16 md:py-24 transform-style-preserve-3d">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center transition-transform duration-500 hover:rotate-x-6 hover:rotate-y-6">
<h1 class="text-4xl md:text-6xl font-bold mb-4">iPhone 16</h1>
<p class="text-xl md:text-2xl text-gray-300 mb-8">Meet the iPhone 16 family.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline text-lg">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline text-lg">Shop iPhone <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<p class="mt-8 text-gray-400">Built for Apple Intelligence.</p>
</div>
</section>
<!-- Products Grid -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
<!-- iPad Pro -->
<div class="product-card bg-gray-900 rounded-xl p-8 text-center transform-style-preserve-3d transition-all duration-500 hover:rotate-y-12 hover:shadow-2xl">
<h2 class="text-3xl font-semibold mb-2">iPad Pro</h2>
<p class="text-gray-300 mb-6">Unbelievably thin. Incredibly powerful.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline">Buy <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<p class="mt-6 text-gray-400">Built for Apple Intelligence.</p>
</div>
<!-- MacBook Air -->
<div class="product-card bg-gray-900 rounded-xl p-8 text-center">
<h3 class="text-xl font-semibold mb-2">MacBook Air</h3>
<p class="text-gray-300 mb-4">Sky blue color.</p>
<p class="text-gray-300 mb-6">Sky high performance with M4.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline">Buy <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<p class="mt-6 text-gray-400">Built for Apple Intelligence.</p>
</div>
<!-- iPad Air -->
<div class="product-card bg-gray-900 rounded-xl p-8 text-center">
<h3 class="text-xl font-semibold mb-2">iPad Air</h3>
<p class="text-gray-300 mb-6">Now supercharged by the M3 chip.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline">Buy <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<p class="mt-6 text-gray-400">Built for Apple Intelligence.</p>
</div>
<!-- Apple Watch -->
<div class="product-card bg-gray-900 rounded-xl p-8 text-center">
<h3 class="text-xl font-semibold mb-2">Apple Watch Series 10</h3>
<p class="text-gray-300 mb-6">Thinstant classic.</p>
<div class="flex justify-center space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline">Buy <i class="fas fa-chevron-right ml-1"></i></a>
</div>
</div>
</div>
<!-- Features Section -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
<!-- Apple Podcasts -->
<div class="product-card bg-gray-900 rounded-xl p-8">
<h3 class="text-xl font-semibold mb-4">Apple Podcasts</h3>
<p class="text-gray-300 mb-6">20 years of podcasts. 20 unforgettable shows.</p>
<a href="#" class="text-blue-500 hover:underline">Explore the list <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<!-- Apple Trade In -->
<div class="product-card bg-gray-900 rounded-xl p-8">
<h3 class="text-xl font-semibold mb-4">Apple Trade In</h3>
<p class="text-gray-300 mb-6">Get $170–$630 in credit when you trade in iPhone 12 or higher.</p>
<a href="#" class="text-blue-500 hover:underline">Get your estimate <i class="fas fa-chevron-right ml-1"></i></a>
</div>
<!-- Apple Card -->
<div class="product-card bg-gray-900 rounded-xl p-8">
<h3 class="text-xl font-semibold mb-4">Apple Card</h3>
<p class="text-gray-300 mb-6">Get up to 3% Daily Cash back with every purchase.</p>
<div class="flex space-x-4">
<a href="#" class="text-blue-500 hover:underline">Learn more <i class="fas fa-chevron-right ml-1"></i></a>
<a href="#" class="text-blue-500 hover:underline">Apply now <i class="fas fa-chevron-right ml-1"></i></a>
</div>
</div>
</div>
<!-- Apple TV+ Section -->
<div class="bg-gray-900 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h3 class="text-2xl font-semibold mb-8 text-center">Apple TV+</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Gallery Item 1 -->
<div class="text-center">
<div class="bg-gray-800 rounded-lg h-48 mb-4"></div>
<a href="#" class="text-blue-500 hover:underline">Watch now <i class="fas fa-chevron-right ml-1"></i></a>
<p class="text-gray-300 mt-2">Strong and Calm Combos for Busy Days</p>
</div>
<!-- Gallery Item 2 -->
<div class="text-center">
<div class="bg-gray-800 rounded-lg h-48 mb-4"></div>
<a href="#" class="text-blue-500 hover:underline">Listen now <i class="fas fa-chevron-right ml-1"></i></a>
<p class="text-gray-300 mt-2">Seth Rogen: The Zane Lowe Interview</p>
</div>
<!-- Gallery Item 3 -->
<div class="text-center">
<div class="bg-gray-800 rounded-lg h-48 mb-4"></div>
<a href="#" class="text-blue-500 hover:underline">Play now <i class="fas fa-chevron-right ml-1"></i></a>
<p class="text-gray-300 mt-2">PGA TOUR Pro Golf</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-black py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<!-- Footer notes -->
<div class="text-xs text-gray-500 mb-8">
<p class="mb-4">1. Available for Qualified Purchasers only. Qualified Purchasers purchasing an eligible Mac/iPad ("Eligible Product") with eligible AirPods/accessory ("Promotion Product") from a Qualifying Location through September 30, 2025 will receive Promotion Savings (up to $199, not to exceed the price of the Promotion Product). Customers will be charged for all items in their cart, including the Promotion Product. Only one Promotion Product per Eligible Product per Qualified Purchaser. Offer subject to availability. While supplies last. Additional restrictions apply.</p>
<p class="mb-4">2. Trade‑in values will vary based on the condition, year, and configuration of your eligible trade‑in device. Not all devices are eligible for credit. You must be at least the age of majority to be eligible to trade in for credit or for an Apple Gift Card. Trade‑in value may be applied toward qualifying new device purchase, or added to an Apple Gift Card. Actual value awarded is based on receipt of a qualifying device matching the description provided when estimate was made. Sales tax may be assessed on full value of a new device purchase. In‑store trade‑in requires presentation of a valid photo ID (local law may require saving this information). Offer may not be available in all stores, and may vary between in‑store and online trade‑in. Some stores may have additional requirements. Apple or its trade‑in partners reserve the right to refuse, cancel, or limit quantity of any trade‑in transaction for any reason.</p>
<p>To access and use all Apple Card features and products available only to Apple Card users, you must add Apple Card to Wallet on an iPhone or iPad that supports and has the latest version of iOS or iPadOS. Apple Card is subject to credit approval, available only for qualifying applicants in the United States, and issued by Goldman Sachs Bank USA, Salt Lake City Branch.</p>
</div>
<!-- Footer links -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-8">
<!-- Column 1 -->
<div>
<h4 class="text-gray-400 font-semibold mb-4">Shop and Learn</h4>
<ul class="space-y-2">
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Store</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Mac</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">iPad</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">iPhone</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Watch</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Vision</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">AirPods</a></li>
</ul>
</div>
<!-- Column 2 -->
<div>
<h4 class="text-gray-400 font-semibold mb-4">Apple Wallet</h4>
<ul class="space-y-2">
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Wallet</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Card</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Pay</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Cash</a></li>
</ul>
</div>
<!-- Column 3 -->
<div>
<h4 class="text-gray-400 font-semibold mb-4">Entertainment</h4>
<ul class="space-y-2">
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple One</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple TV+</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Music</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Arcade</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Fitness+</a></li>
</ul>
</div>
<!-- Column 4 -->
<div>
<h4 class="text-gray-400 font-semibold mb-4">Apple Store</h4>
<ul class="space-y-2">
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Find a Store</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Genius Bar</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Today at Apple</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Trade In</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Order Status</a></li>
</ul>
</div>
<!-- Column 5 -->
<div>
<h4 class="text-gray-400 font-semibold mb-4">About Apple</h4>
<ul class="space-y-2">
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Newsroom</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Apple Leadership</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Career Opportunities</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Investors</a></li>
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Events</a></li>
</ul>
</div>
</div>
<!-- Bottom footer -->
<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
More ways to shop: <a href="#" class="text-blue-500 hover:underline">Find an Apple Store</a> or <a href="#" class="text-blue-500 hover:underline">other retailer</a> near you. Or call 1-800-MY-APPLE.
</p>
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fas fa-globe"></i> <span class="ml-1">United States</span>
</a>
</div>
</div>
<div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center">
<p class="text-gray-400 text-sm mb-4 md:mb-0">
Copyright © 2025 Apple Inc. All rights reserved.
</p>
<div class="flex flex-wrap gap-4">
<a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Privacy Policy</a>
<a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Terms of Use</a>
<a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Sales and Refunds</a>
<a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Legal</a>
<a href="#" class="footer-link text-gray-400 hover:text-white text-sm">Site Map</a>
</div>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
// Search input animation
const searchInput = document.querySelector('.search-input');
searchInput.addEventListener('focus', function() {
this.style.width = '250px';
});
searchInput.addEventListener('blur', function() {
if(this.value === '') {
this.style.width = '160px';
}
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=NotDivYt/fkti" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |