Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

I have href attributes in my .nav-link elements, but it keeps showing wrong

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product</title>
    <link rel="stylesheet" href="style-4.css">
</head>

<body>
    <header id="header">
        <div id="image">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/RedBullEnergyDrink.svg/1200px-RedBullEnergyDrink.svg.png"

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">
    <title>Product</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header id="header">
        <div id="image">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/RedBullEnergyDrink.svg/1200px-RedBullEnergyDrink.svg.png"
                alt="logo" id="header-img">
        </div>
        <nav id="nav-bar">
            <div href="#home" class="nav-link">
                <a href="#home">
                    home
                </a>
            </div>
            <div href="#video" class="nav-link">
                <a href="#video">
                    Video
                </a>
            </div>
            <div href="#form" class="nav-link">
                <a href="#form">
                    form
                </a>
            </div>
        </nav>
    </header>
    <div id="video1">
        <iframe id="video" width="500" height="300" src="https://www.youtube.com/embed/hiDLVsvZo0w?si=y-QxhNvxIMyrGB6r"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="home">
        This is home
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <p>Contact</p>
        <input type="email" placeholder="Enter your email" id="email" name="email" required
            pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*">
        <input type="submit" id="submit">
    </form>
</body>

</html>
/* file: styles.css */
body{
    margin-top: 60px;
    background-color: #23326A;
}

#header{
    display: flex;
    flex-direction: row;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
}

#image{
    margin-top: 6px;
    width: 300px;
    height: 50px;
}

#header-img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#nav-bar{
    flex: 1;
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
}

.nav-link{
    padding-left: 40px;
    padding-right: 40px;
}

.navlink a{
    text-decoration: none;
    color: #23326A;
    font-family: sans-serif;
    font-weight: bold;
}

#video1{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
}

#form{
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    align-items: center;
    justify-content: center;
}

p{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 45px;
    margin: 0;
    padding: 0;
    color: white;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

You have href value and class value within div elements. Read the instructions carefully and see your html code.
Instructions:
You can see at least three clickable elements inside the nav element, each with the class nav-link
When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page.
@haseethvardhan01

Changed it, still does not work, on removing href from divs also shows up that ach .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ).

Please post your updated code

Copy and paste your updated code and add three back ticks (```) in a separate line before and after your code.
@haseethvardhan01

<!-- file: 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</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header id="header">
        <div id="image">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/RedBullEnergyDrink.svg/1200px-RedBullEnergyDrink.svg.png"
                alt="logo" id="header-img">
        </div>
        <nav id="nav-bar">
            <div class="nav-link">
                <a href="#home">
                    home
                </a>
            </div>
            <div  class="nav-link">
                <a href="#video">
                    Video
                </a>
            </div>
            <div  class="nav-link">
                <a href="#form">
                    form
                </a>
            </div>
        </nav>
    </header>
    <div id="video1">
        <iframe id="video" width="500" height="300" src="https://www.youtube.com/embed/hiDLVsvZo0w?si=y-QxhNvxIMyrGB6r"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="home">
        This is home
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <p>Contact</p>
        <input type="email" placeholder="Enter your email" id="email" name="email" required
            pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*">
        <input type="submit" id="submit">
    </form>
</body>

</html>

This is the recent, this also says another issue when I remove href from div’s

<!-- file: 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</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header id="header">
        <div id="image">
            <img src="https://upload.wikimedia.org/wikipedia/en/thumb/f/f5/RedBullEnergyDrink.svg/1200px-RedBullEnergyDrink.svg.png"
                alt="logo" id="header-img">
        </div>
        <nav id="nav-bar">
            <div class="nav-link">
                <a href="#home">
                    home
                </a>
            </div>
            <div  class="nav-link">
                <a href="#video">
                    Video
                </a>
            </div>
            <div  class="nav-link">
                <a href="#form">
                    form
                </a>
            </div>
        </nav>
    </header>
    <div id="video1">
        <iframe id="video" width="500" height="300" src="https://www.youtube.com/embed/hiDLVsvZo0w?si=y-QxhNvxIMyrGB6r"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
    </div>
    <div id="home">
        This is home
    </div>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
        <p>Contact</p>
        <input type="email" placeholder="Enter your email" id="email" name="email" required
            pattern="[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*">
        <input type="submit" id="submit">
    </form>
</body>

</html>

Instructions:
You can see at least three clickable elements inside the nav element, each with the class nav-link
When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page.

div element is didn’ make a code clickable. class and href should goes within anchor element’s opening tag. And make sections with matching id attributes value, corresponding to your anchor’s href attributes value.
@haseethvardhan01

1 Like

It worked. Thanks for the help.

1 Like

Your welcome, keep it up. Happy Coding.