Product Landing Page - Build a Product Landing Page

Each .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 help

</section>

#BATH SCENTED CANDLES Our sensual bath scented candles will leave you invigorated and smelling of luxury. It soothes and calmes your senses making for a relaxed night-in.

#COLORED SCENTED CANDLES Our color scented candles are ethereal giving a calming whimsical nature to enlighten your home or space.

#DECOR SCENTED CANDLES Our decor collection scented candles are widely used for evnts such as weddings and intimate events giving luminous luxury look and feel, heightening the space around it.

  </nav>
<!-- 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>Scented Candles</title>
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
      
<p> <a class="nav-link" href="BATH_SCENTED_CANDLES">#BATH SCENTED CANDLES</a> Our sensual bath scented candles will leave you invigorated and smelling of luxury. It soothes and calmes your senses making for a relaxed night-in.</p> 
<p> <a class="nav-link" href="COLRED_SCENTED_CANDLES">#COLORED SCENTED CANDLES</a> Our color scented candles are ethereal giving a calming whimsical nature to enlighten your home or space.</p>
<p> <a class="nav-link" href="DECOR_SCENTED_CANDLES">#DECOR SCENTED CANDLES</a> Our decor collection scented candles are widely used for evnts such as weddings and intimate events giving luminous luxury look and feel, heightening the space around it. </p>
<p><a class="nav-link" href="footer"></a></p>
<section>
 <a id="#BATH_SCENTED_CANDLES"><h1>#BATH SCENTED CANDLES</a></h1>
 <a id="#SCENTED_SCENTED_CANDLES"><h1>#COLORED SCENTED CANDLES</a></h1>
    <a id="#DECOR_SCENTED_CANDLES"><h1>#DECOR SCENTED CANDLES</a></h1>
  
    </section>
      </nav>
      <img id="header-img" src="BATECH188 Digital Content Creation&Presentation" alt="pexels_valeria_boltneva_1123256.jpg"></img>
      <video id="video" src="BATECH188 Digital Content Creation&Presentation" alt="pexels_nicole_michalou_6139586.mp4">Scented candles at an event</video>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" name="email" type="email" placeholder="email"></input>
      
      <input id="submit" type="submit"></input>
      </form>
    </header>
  </body>
  </html>
/* file: styles.css */
@media screen and (min-width: 480px){Background-color: gray;
}

a{
  display: flex;
}body{
  background-color: silver;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
article{
  font-family: Helvetica;
  Margin: auto;
  padding: 0 20 0 20;
  font-color: light-blue;
}
nav{
  justify-content: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like

to make this link work you must write the exact value of the id of the element you are linking to with a # prefix in front

1 Like

Thank you however it still not passing

1 Like

if you fixed all the links, are you able to click them and do they work for you?
If yes, please share the udpated code.

1 Like

sorry i’m not sure how to put the code in the reply section…When I copy paste it does not show the html version
Sorry if i’m being tech slow :-/

1 Like

do i have to create a new post with the updated version?

1 Like

It workkkkked lol i tried it again and it passed. Appreciate it.

2 Likes

Glad you got it working.
For future reference:

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

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