Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
I have 1 thing left, and i cant get it right.
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 ).

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width.initial-scale=1.0">
  <title>Product landing page</title>
  <link rel="stylesheet" href="styles.css"/>
  <header id="header">
     <img id="header-img" src="" alt="video" height="30"/>
    <nav id="nav-bar" ><a class="nav-link" href="#colors"  >Colors</a>
      <a class="nav-link"  href="#video"  >News</div>
      <a class="nav-link" href="#pricing" value="#footer">Pricing</a></nav>
  <h2>The beginning</h2>
  <form id="form" action="">
    <input id="email" type="email" placeholder="Enter your email address"  name="email">
    </input><input id="submit" type="submit" action="" value="Subscribe"></input>
     <video id="video" width="560" height="315"src=""></video>
          <div>Discover the most interesting nail art and stay up to date with news and trends.</div>
          <a src=""></a>
          <div>The Pure Creamy Hybrid system comprises creamy hybrid polishes of excellent coverage and durability. It’s a formula with a high safety index, free of an irritating smell and removable with cosmetic alcohol. The short and flat brush, designed especially for the Pure line of products, facilitates even application. The system allows you to create ultra-thin hybrid manicures.</div>
          <a src=""></a> <div>The Gel Polish system comprises classic, durable hybrid polishes cured in UV and LED lamps. The system contains bases and tops of different properties, durability and finish.</div>
<footer id="footer">Privacy

/* file: styles.css */
    margin: 10;
    padding: 0;
  text-align: center;
  background-color: rgb(170, 164, 165);
header {
  position: fixed;
  background-color: rgb(231, 223, 223);
  right: 0;
  margin-top: -1.5em;

  float: left;

  #email, #submit{
  text-align: center;
   margin: auto;

  background-color: yellow;
  border: none;
  cursor: pointer;
  float: right;
  word-spacing: 17;  
  max-height: 100px;
  margin: auto;
  display: block;
  text-align: center;
  padding: 5%;
  font-size: 50px

  padding-bottom: 5%;
  border: dotted;
  display: inline-flex;
    padding: 10px;
    margin-top: 5px;
  font-size: 17px;
  font-weight: 500;
background-color: grijs;
word-spacing: 10;
 background-color: rgb(231, 223, 223);
bottom: 0px;
right: 0;

@media screen and (min-width: 800px) {
  main {
    width: 760px;

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

1 Like

your HTML is not correct.

Use The W3C Markup Validation Service to check errors and fix accordingly.

Start using VSCode to find out issues quickly

Oke thank you. i wil find it

Hi @Finette12

What that error means is that all your links you add into your navigation bar should pointing out to a correct element ID.

I hope that helps.

Happy coding it is looking good so far.

1 Like

What ever i try it just wont work

1 Like

Hi @Finette12

You can try this after read my first post again: add only one anchor element wich link to you footer element (remember, by ID) and do the test again.

You might need to read the challenge description more carefully to understand what they want. I think my hint is good enough to solve it. Google about linking between elements in the same HTML document if my test doesn’t work for you.

Give you time to understand the problem, no worries and don’t be hard with yourself. You will solve it for sure.

I hope it helps, happy coding!

1 Like

I did it. I tought i would never get it right. Thank you so mutch!

Good job @Finette12!!

I glad. Try to slow down during steps you will learn more if you read all the code and check or ask for the things or syntax you don’t fully understand.

Keep the good work!!

1 Like

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