[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
<!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