Tugas 7-CSS-Landing Page
Link :Klik Disini !
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Advertisement</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>MINE</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</header>
<div class="container">
<div class="image-section">
<img src="baju.jpeg" alt="Product Image">
</div>
<div class="product-details">
<h2>Baju Dede Bayi Gemoy</h2>
<p>Temani waktu tidur si kecil dengan piyama anak bergambar karakter kesukaannya. Terbuat dari bahan katun yang lembut dan adem, piyama ini memberikan kenyamanan maksimal saat tidur. Dengan desain yang lucu dan warna yang cerah, tidur si kecil akan semakin nyenyak. Mudah dicuci dan tidak mudah melar, piyama ini pilihan sempurna untuk keseharian buah hati Anda.</p>
<a href="#" class="buy-button">Beli Sekarang</a>
<span class="price">Rp 1.350.000</span>
</div>
</div>
</body>
</html>
Style.css:
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Body Styling */
body {
background-color: #f8f8f8;
color: #333;
text-align: center;
}
/* Header */
header {
background-color: #fff;
padding: 20px;
border-bottom: 1px solid #ddd;
}
header h1 {
font-size: 24px;
font-weight: bold;
}
header nav {
margin-top: 10px;
}
header nav a {
color: #333;
text-decoration: none;
margin: 0 15px;
font-size: 16px;
}
header nav a:hover {
text-decoration: underline;
}
/* Main Content */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
margin: 50px auto;
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Product Image */
.image-section {
flex: 1;
max-width: 50%;
}
.image-section img {
width: 100%;
border-radius: 8px;
}
/* Product Details */
.product-details {
flex: 1;
max-width: 50%;
text-align: left;
padding-left: 30px;
}
.product-details h2 {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.product-details p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
color: #555;
}
/* Buy Button */
.product-details .buy-button {
display: inline-block;
background-color: #000;
color: #fff;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-size: 18px;
margin-right: 20px;
}
.product-details .price {
font-size: 18px;
font-weight: bold;
color: #333;
}
Comments
Post a Comment