Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</title> | |
| <link rel="icon" type="image/x-icon" href="https://www.amazon.com/favicon.ico"> | |
| <style> | |
| :root { | |
| --amazon-orange: #FF9900; | |
| --amazon-dark: #131921; | |
| --amazon-light: #EAEDED; | |
| --amazon-blue: #232F3E; | |
| --amazon-gray: #CCCCCC; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: Arial, sans-serif; | |
| } | |
| body { | |
| background-color: var(--amazon-light); | |
| } | |
| .navbar { | |
| background-color: var(--amazon-dark); | |
| color: white; | |
| height: 60px; | |
| padding: 0 20px; | |
| display: flex; | |
| align-items: center; | |
| position: relative; | |
| } | |
| .nav-logo { | |
| height: 50px; | |
| width: 100px; | |
| margin-right: 20px; | |
| background-image: url('http://static.photos/retail/320x240/1'); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| } | |
| .nav-search { | |
| display: flex; | |
| flex-grow: 1; | |
| max-width: 800px; | |
| height: 40px; | |
| } | |
| .search-select { | |
| background-color: #F3F3F3; | |
| width: 50px; | |
| border-top-left-radius: 4px; | |
| border-bottom-left-radius: 4px; | |
| border: none; | |
| text-align: center; | |
| } | |
| .search-input { | |
| flex-grow: 1; | |
| font-size: 16px; | |
| padding: 10px; | |
| border: none; | |
| } | |
| .search-icon { | |
| background-color: var(--amazon-orange); | |
| width: 45px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| border-top-right-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| color: var(--amazon-dark); | |
| } | |
| .nav-right { | |
| display: flex; | |
| color: white; | |
| margin-left: 20px; | |
| } | |
| .nav-item { | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .nav-item span:first-child { | |
| font-size: 12px; | |
| } | |
| .nav-item span:last-child { | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .nav-cart { | |
| display: flex; | |
| align-items: center; | |
| margin-left: 20px; | |
| position: relative; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: 5px; | |
| left: 20px; | |
| color: var(--amazon-orange); | |
| font-weight: bold; | |
| } | |
| .subnav { | |
| background-color: var(--amazon-blue); | |
| color: white; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| padding: 0 20px; | |
| } | |
| .subnav-menu { | |
| display: flex; | |
| align-items: center; | |
| margin-right: 20px; | |
| font-weight: bold; | |
| } | |
| .subnav-links { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .subnav-links li { | |
| padding: 0 10px; | |
| font-size: 14px; | |
| } | |
| .hero-image { | |
| height: 300px; | |
| width: 100%; | |
| background-image: url('http://static.photos/retail/1200x630/2'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .shop-section { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| padding: 20px; | |
| background-color: white; | |
| margin-top: -100px; | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1400px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .shop-box { | |
| height: 350px; | |
| background-color: white; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .shop-box h2 { | |
| margin-bottom: 10px; | |
| } | |
| .shop-box img { | |
| width: 100%; | |
| height: 250px; | |
| object-fit: cover; | |
| margin-bottom: 10px; | |
| } | |
| .shop-box a { | |
| color: #0066C0; | |
| font-size: 13px; | |
| text-decoration: none; | |
| } | |
| footer { | |
| background-color: var(--amazon-dark); | |
| color: white; | |
| margin-top: 30px; | |
| } | |
| .back-to-top { | |
| background-color: var(--amazon-blue); | |
| padding: 15px 0; | |
| text-align: center; | |
| font-size: 14px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 40px 0; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .footer-column h3 { | |
| font-size: 16px; | |
| margin-bottom: 10px; | |
| } | |
| .footer-column ul { | |
| list-style: none; | |
| } | |
| .footer-column li { | |
| margin-bottom: 10px; | |
| font-size: 14px; | |
| color: #DDDDDD; | |
| } | |
| .footer-logo { | |
| display: flex; | |
| justify-content: center; | |
| padding: 30px 0; | |
| border-top: 1px solid #3A4553; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="navbar"> | |
| <div class="nav-logo"></div> | |
| <div class="nav-search"> | |
| <select class="search-select"> | |
| <option>All</option> | |
| <option>Books</option> | |
| <option>Electronics</option> | |
| <option>Home</option> | |
| </select> | |
| <input type="text" class="search-input"> | |
| <div class="search-icon"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| <div class="nav-right"> | |
| <div class="nav-item"> | |
| <span>Hello, Sign in</span> | |
| <span>Account & Lists</span> | |
| </div> | |
| <div class="nav-item"> | |
| <span>Returns</span> | |
| <span>& Orders</span> | |
| </div> | |
| <div class="nav-cart"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">0</span> | |
| <span>Cart</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="subnav"> | |
| <div class="subnav-menu"> | |
| <i class="fas fa-bars"></i> | |
| <span>All</span> | |
| </div> | |
| <ul class="subnav-links"> | |
| <li>Today's Deals</li> | |
| <li>Customer Service</li> | |
| <li>Registry</li> | |
| <li>Gift Cards</li> | |
| <li>Sell</li> | |
| </ul> | |
| </div> | |
| </header> | |
| <div class="hero-image"></div> | |
| <div class="shop-section"> | |
| <div class="shop-box"> | |
| <h2>Shop deals in Electronics</h2> | |
| <img src="http://static.photos/technology/320x240/1"> | |
| <a href="#">See more</a> | |
| </div> | |
| <div class="shop-box"> | |
| <h2>Easy returns</h2> | |
| <img src="http://static.photos/retail/320x240/3"> | |
| <a href="#">Learn more</a> | |
| </div> | |
| <div class="shop-box"> | |
| <h2>Health & Personal Care</h2> | |
| <img src="http://static.photos/medical/320x240/1"> | |
| <a href="#">Shop now</a> | |
| </div> | |
| <div class="shop-box"> | |
| <h2>Home refresh ideas</h2> | |
| <img src="http://static.photos/home/320x240/1"> | |
| <a href="#">Shop kitchen upgrades</a> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="back-to-top"> | |
| <a href="#" style="color: white;">Back to top</a> | |
| </div> | |
| <div class="footer-links"> | |
| <div class="footer-column"> | |
| <h3>Get to Know Us</h3> | |
| <ul> | |
| <li>Careers</li> | |
| <li>Blog</li> | |
| <li>About Amazon</li> | |
| <li>Investor Relations</li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Make Money with Us</h3> | |
| <ul> | |
| <li>Sell products on Amazon</li> | |
| <li>Sell on Amazon Business</li> | |
| <li>Become an Affiliate</li> | |
| <li>Advertise Your Products</li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Amazon Payment Products</h3> | |
| <ul> | |
| <li>Amazon Business Card</li> | |
| <li>Shop with Points</li> | |
| <li>Reload Your Balance</li> | |
| <li>Amazon Currency Converter</li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Let Us Help You</h3> | |
| <ul> | |
| <li>Amazon and COVID-19</li> | |
| <li>Your Account</li> | |
| <li>Your Orders</li> | |
| <li>Shipping Rates & Policies</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer-logo"> | |
| <div class="nav-logo"></div> | |
| </div> | |
| </footer> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| </body> | |
| </html> |