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

Postingan Populer