Product Landing Page - Build a Product Landing Page

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:

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.