[Tugas Pertemuan ke-7] Landing Page E-Commerce
Landing Page E-Commerce
Nama: Lucky Virgiawan Dwi Widodo
NRP: 5053231007
Kelas: Pemrograman Web (M)
Link GitHub: https://github.com/rukiwatsuyoidesune/Web-LandingPageECommerce
Link Website: https://hype-hop.vercel.app
Link Website: https://hype-hop.vercel.app
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hype-Hop</title> <link rel="stylesheet" href="styles.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"> </head> <body> <div class="navbar"> <div class="logo">Hype-Hop</div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="hero"> <div class="vignette"></div> <h1>Get All Your Favorite Hip-Hop Album In Here!</h1> </div> <div class="products"> <h2>Products</h2> <div class="product-list"> <div class="product-item"> <img src="assets/img/17.jfif"> <h3>17</h3> <h2>XXXTENTACION</h2> <p>$15.00</p> <button>Buy Now</button> </div> <div class="product-item"> <img src="assets/img/astroworld.jfif"> <h3>Astroworld</h3> <h2>Travis Scott</h2> <p>$18.00</p> <button>Buy Now</button> </div> <div class="product-item"> <img src="assets/img/damn.jfif"> <h3>DAMN.</h3> <h2>Kendrick Lamar</h2> <p>$20.00</p> <button>Buy Now</button> </div> <div class="product-item"> <img src="assets/img/eternalatake.jfif"> <h3>Eternal Atake</h3> <h2>Lil Uzi Vert</h2> <p>$20.00</p> <button>Buy Now</button> </div> <div class="product-item"> <img src="assets/img/heroesvillains.jfif"> <h3>Heroes & Villains</h3> <h2>Metro Boomin</h2> <p>$20.00</p> <button>Buy Now</button> </div> <div class="product-item"> <img src="assets/img/kamikaze.jfif"> <h3>Kamikaze</h3> <h2>Eminem</h2> <p>$20.00</p> <button>Buy Now</button> </div> </div> </div> <div class="more"> <button>More ...</button> </div> <div class="footer"> <p>Instagram</p> <p>X/Twitter</p> <p>Whatsapp</p> </div> </body> </html>
CSS:
* { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } body, html { margin: 0; padding: 0; } .navbar { display: flex; justify-content: space-between; align-items: center; background-color: #000000; padding: 10px 20px; } .navbar .logo { font-size: 36px; font-weight: bold; color: #fff; } .navbar ul { list-style-type: none; margin: 0; padding: 0; display: flex; } .navbar ul li { margin-left: 20px; } .navbar ul li a { color: #fff; text-decoration: none; padding: 10px 15px; } .hero { background: url('assets/img/RapAlbums.webp') no-repeat center center/cover; height: 500px; display: flex; justify-content: center; align-items: center; color: #fff; position: relative; } .vignette { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .hero h1 { position: relative; font-size: 48px; z-index: 1; } .products { padding: 50px 20px; text-align: center; } .products h2 { font-size: 36px; margin-bottom: 40px; } .product-list { display: flex; justify-content: space-around; flex-wrap: wrap; } .product-item { width: 15%; margin-bottom: 30px; text-align: center; } .product-item img { width: 100%; height: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 8px; } .product-item h3 { margin: 15px 0 10px; font-size: 24px; font-weight: 700; } .product-item h2 { margin: 5px 0 10px; font-size: 16px; } .product-item p { font-size: 18px; color: #85BB65; } .product-item button { background-color: #000000; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 8px; } .more { padding: 50px 20px; text-align: center; } .more > button { background-color: #000000; color: white; font-size: 24px; cursor: pointer; border-radius: 8px; } .footer { background-color: #000000; color: rgb(255, 255, 255); padding: 20px; text-align: center; font-size: 20px; display: flex; justify-content: space-evenly; }
Komentar
Posting Komentar