Tugas 6
Nama : Muhammad Faizul Muttaqin Wahyudi
NRP : 5053231005
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iPad Mini Landing Page</title>
<style>
/* Global Styles */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #FFFFFF;
color: #1d1d1f;
}
/* Header Styles */
header {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
background-color: white;
border-bottom: 1px solid #e5e5e5;
}
nav ul {
list-style: none;
display: flex;
gap: 20px;
}
nav a {
text-decoration: none;
color: #1d1d1f;
font-weight: 500;
}
/* Main Section */
.main-section {
text-align: center;
padding: 80px 20px;
}
.main-section h1 {
font-size: 56px;
font-weight: 600;
margin: 0;
}
.main-section p {
font-size: 24px;
margin: 20px 0 40px 0;
color: #86868b;
}
.main-section .button-group {
display: flex;
justify-content: center;
gap: 20px;
}
.main-section a {
text-decoration: none;
font-size: 17px;
font-weight: 500;
padding: 10px 20px;
border-radius: 20px;
transition: background-color 0.3s ease;
}
.learn-more {
background-color: #0071e3;
color: white;
}
.learn-more:hover {
background-color: #005bb5;
}
.pre-order {
background-color: #f5f5f7;
color: #0071e3;
border: 1px solid #0071e3;
}
.pre-order:hover {
background-color: #e5e5e5;
}
/* Image Styles */
.image-section {
margin-top: 40px;
}
.image-section img {
width: 80%;
max-width: 600px;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<nav>
<ul>
<li><a href="#">Store</a></li>
<li><a href="#">Mac</a></li>
<li><a href="#">iPad</a></li>
<li><a href="#">iPhone</a></li>
<li><a href="#">Watch</a></li>
<li><a href="#">AirPods</a></li>
<li><a href="#">TV & Home</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Support</a></li>
</ul>
</nav>
</header>
<!-- Main Content Section -->
<section class="main-section">
<h1>iPad mini</h1>
<p>Hello, Apple Intelligence.<br>Available starting 10.23</p>
<div class="button-group">
<a href="#" class="learn-more">Learn more</a>
<a href="#" class="pre-order">Pre-order</a>
</div>
<div class="image-section">
<img src="https://cdn.osxdaily.com/wp-content/uploads/2024/10/ipad-mini-7th-gen.jpg" alt="iPad mini Image">
</div>
</section>
</body>
</html>
Komentar
Posting Komentar