Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Trombon Asli</title>
</head>
<body>
    <header id="header">
        <img id="header-img" src="logo.png" alt="Trombon Asli Logo">
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#video">Video</a></li>
                <li><a class="nav-link" href="#form">Hubungi Kami</a></li>
                <li><a class="nav-link" href="#footer">Hak Cipta</a></li>
            </ul>
        </nav>
    </header>
    <section id="video">
        <video controls id="video" src="video.mp4" type="https://youtu.be/y8Yv4pnO7qc">
            Your browser does not support the video tag.
        </video>
    </section>
    <section id="form">
        <h2>Hubungi Kami</h2>
        <form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
            <label for="email">Alamat Email:</label>
            <input type="email" id="email" name="email" placeholder="Masukkan alamat email Anda" required>
            <button type="submit" id="submit">Kirim</button>
        </form>
    </section>
    <footer id="footer">
        <p>&copy; 2016, Trombon Asli</p>
    </footer>
</body>
</html>


/* file: styles.css */
/* Reset margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

#header-img {
    max-width: 100px;
    height: auto;
}

#nav-bar ul {
    display: flex;
    list-style: none;
}

.nav-link {
    text-decoration: none;
    color: white;
    margin-right: 20px;
}

#video {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background-color: #f4f4f4;
}

#video video {
    max-width: 100%;
    height: auto;
}

#form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background-color: #f9f9f9;
}

#form label,
#email,
#submit {
    margin-bottom: 10px;
}

#footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

@media (max-width: 768px) {
    #header {
        flex-direction: column;
        text-align: center;
    }

    #header-img {
        margin-bottom: 10px;
    }

    #nav-bar ul {
        flex-direction: column;
        align-items: center;
    }

    .nav-link {
        margin-right: 0;
        margin-bottom: 10px;
    }
}
/* ... gaya-gaya lainnya ... */

#nav-bar {
    position: fixed;
    top: 0;
    background-color: #333; /* Ganti dengan warna latar belakang yang sesuai */
    width: 100%;
    z-index: 1000; /* Menentukan kedalaman tampilan */
}

/* ... gaya-gaya lainnya ... */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

You can’t use the same id on multiple elements. Every id on the page should be unique.