Product landing page .nav-link

HTML-CSS
1

I have googled and researched all I can. I am stuck on #5 When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page. I keep getting the error" 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 )." From what Ive researched my coding is correct, can someone please help me out ?

   **Your code so far**

<!doctype html>

<a href=“information” class=

“nav-link” >Information |

Find Us |

Contact Us |

Products

<section><div class="contact" id="contact"></section>

  <section><div class="products" id="products"></section>


```css
\ file: nav {
           border: 1px;
           background-color: green;
           color: white;
           padding: 6px; 
 margin-left: auto; margin-right: auto; 
 position: top;
           }
        
       a {
           text-decoration: none;
           color: white;
           font-size: 20px;
}
.flex-container {
 display: flex;
 flex-direction: column;
}
body{ display:flex;}
header{text-align:center;
font-family: fantasy;
font-size: 100px;  width: 100%; position:fixed;}
form {margin-left: auto;
margin-right: auto;
width: 25%;}
@media only screen and (max-width: 600px) {
 body {
   background-color: white;
 }
nav {
           border: 1px;
           background-color: green;
           color: white;
           padding: 6px; 
 margin-left: auto; margin-right: auto; 
 position: top;
           }
        
       a {
           text-decoration: none;
           color: white;
           font-size: 20px;
}
.flex-container {
 display: flex;
 flex-direction: column;
}
body{ display:flex;}
header{text-align:center;
font-family: fantasy;
font-size: 100px;  width: 100%; position:fixed;}
form {margin-left: auto;
margin-right: auto;
width: 25%;}
@media only screen and (max-width: 600px) {
 body {
   background-color: white;
 }

   **Your browser information:**

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

Challenge: Build a Product Landing Page

Link to the challenge:

2

HI @jcmac1982 !

Right now you have these three nav links

But if I click on any of those nav links it wouldn’t go anywhere because there is no section for Find Us, Contact Us or Products.

As a user, I would be able to click on any of those nav links and be directed to a section on that page that contains that information.

For example, if I click on the products link, it should jump down to a section for products.

I would suggest reviewing this lesson to help you fix the issue.

Also, you should consider renaming these href values to something that relates to that nav link.

for example, instead of #iframe here

something more appropriate would be #find-us

Same goes for these two href values

Hope that helps!

3

it doesnt, as I said Ive re-written the code 100’s of times and its still coming up with the same error, also not sure where exactly the code above came from ? Ive edited to include my actual coding, from what I can tell everything you just specified is included.

4

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