Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Apple Store Clone</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="stylesheet" href="assets/css/style.css"> | |
| <style> | |
| :root { | |
| --apple-black: #1d1d1f; | |
| --apple-dark-gray: #333; | |
| --apple-gray: #86868b; | |
| --apple-light-gray: #f5f5f7; | |
| --apple-blue: #2997ff; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| body { | |
| background-color: #fff; | |
| color: var(--apple-black); | |
| } | |
| .navbar { | |
| position: sticky; | |
| top: 0; | |
| background-color: rgba(0,0,0,0.8); | |
| backdrop-filter: blur(20px); | |
| color: #f5f5f7; | |
| padding: 0 22px; | |
| height: 44px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 1000; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 24px; | |
| font-size: 12px; | |
| font-weight: 400; | |
| } | |
| .nav-links a { | |
| color: inherit; | |
| text-decoration: none; | |
| opacity: 0.8; | |
| transition: opacity 0.3s; | |
| } | |
| .nav-links a:hover { | |
| opacity: 1; | |
| } | |
| .hero { | |
| background: var(--apple-light-gray); | |
| text-align: center; | |
| padding: 60px 0; | |
| } | |
| .hero h1 { | |
| font-size: 56px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .hero h2 { | |
| font-size: 28px; | |
| font-weight: 400; | |
| margin-bottom: 20px; | |
| } | |
| .cta-links { | |
| display: flex; | |
| gap: 20px; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .cta-link { | |
| font-size: 17px; | |
| color: var(--apple-blue); | |
| text-decoration: none; | |
| } | |
| .cta-link:hover { | |
| text-decoration: underline; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 10px; | |
| padding: 10px; | |
| } | |
| .product-card { | |
| background: var(--apple-light-gray); | |
| border-radius: 18px; | |
| padding: 40px 20px; | |
| text-align: center; | |
| } | |
| .product-card h3 { | |
| font-size: 28px; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| } | |
| .product-card p { | |
| font-size: 17px; | |
| margin-bottom: 20px; | |
| } | |
| footer { | |
| background: var(--apple-light-gray); | |
| padding: 20px; | |
| font-size: 12px; | |
| color: var(--apple-gray); | |
| margin-top: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <nav class="navbar"> | |
| <div class="nav-links"> | |
| <a href="#"><i class="fab fa-apple"></i></a> | |
| <a href="#">Store</a> | |
| <a href="#">Mac</a> | |
| <a href="#">iPad</a> | |
| <a href="#">iPhone</a> | |
| <a href="#">Watch</a> | |
| <a href="#">AirPods</a> | |
| <a href="#">TV & Home</a> | |
| <a href="#">Entertainment</a> | |
| <a href="#">Accessories</a> | |
| <a href="#">Support</a> | |
| <a href="#"><i class="fas fa-search"></i></a> | |
| <a href="#"><i class="fas fa-shopping-bag"></i></a> | |
| </div> | |
| </nav> | |
| <section class="hero"> | |
| <h1>iPhone 15 Pro</h1> | |
| <h2>Titanium. So strong. So light. So Pro.</h2> | |
| <div class="cta-links"> | |
| <a href="#" class="cta-link">Learn more ></a> | |
| <a href="#" class="cta-link">Buy ></a> | |
| </div> | |
| </section> | |
| <section class="products-grid"> | |
| <div class="product-card"> | |
| <h3>MacBook Air 15"</h3> | |
| <p>Impressively big. Impossibly thin.</p> | |
| <div class="cta-links"> | |
| <a href="#" class="cta-link">Learn more ></a> | |
| <a href="#" class="cta-link">Buy ></a> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <h3>iPad Pro</h3> | |
| <p>Supercharged by M2.</p> | |
| <div class="cta-links"> | |
| <a href="#" class="cta-link">Learn more ></a> | |
| <a href="#" class="cta-link">Buy ></a> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <h3>Apple Watch Series 9</h3> | |
| <p>Smarter. Brighter. Mightier.</p> | |
| <div class="cta-links"> | |
| <a href="#" class="cta-link">Learn more ></a> | |
| <a href="#" class="cta-link">Buy ></a> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <h3>AirPods Pro</h3> | |
| <p>Adaptive Audio. Now playing.</p> | |
| <div class="cta-links"> | |
| <a href="#" class="cta-link">Learn more ></a> | |
| <a href="#" class="cta-link">Buy ></a> | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <p>Copyright © 2023 Apple Inc. All rights reserved.</p> | |
| </footer> | |
| <script src="assets/js/main.js"></script> | |
| </body> | |
| </html> |