Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Hi team, i can’t complete this step:
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 -->
<!-- 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>Build a Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
<a href="styles.css" id="build_a_technical_documentation_page" target="_blank"></a>
  </head>
    <body>
<div id="side-nav">
<header id="header" align="left">Beauty Salon
  <img src="https://www.fragrantica.com/news/Felisa-Born-In-Brazil-18111.html" id="header-img">

<nav id="nav-bar">
 <ul> 
<li><a class="nav-link" 
href="#News">News</a></li>
 <li> <a class="nav-link" href="#form">Product Brands</a></li>
 <li><a class="nav-link" href="#video">Hair Type</a></li>
 <li> <a class="nav-link" href="#nav">Face care</a></li>
 <li> <a class="nav-link" href="#div">Hands and Feet</a></li>
  <li><a class="nav-link" href="#div">Body care</a></li>
 <li> <a class="nav-link" href="#div"> Notes</a></li>
 <li> <a class="nav-link"  href="#div">Forum</a> </li>
 <li> <a class="nav-link" href="#div">Reference</a></li>
</ul>
      </nav>
      </header>
<video id='video' src='https://www.youtube.com/watch?v=Mlgg9xdeIlg'></video>
  <form id='form' action='https://www.freecodecamp.com/email-submit'>
    <input name='email' id='email' placeholder='type your email address' required type='email'>
    <a href="https://www.freecodecamp.com/email-submit"><input type="submit" id="submit" value="submit" name="submit"></a>
  </form>
   <div class="box">
        <div>One</div>
        
      </div>

/* file: styles.css */
navbar{
position: top;
}
header {
position: fixed;
width: 100%;
}
@media (max-width: 650px) {
   #ul {
     flex-direction: column;
   }
     .box {
        display: flex;
        flex-wrap: wrap;
    }
  
header {
position: fixed;
top: 0;
min-height: 15px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: top-left;
background-color: #008000;
@media (max-width: 600px) {
  flex-wrap: wrap;
}
}

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:

2

This seems to be referring to bookmarks.

Here is a link that may be helpful:
HTML Links - Create Bookmark (w3schools.com)

Bookmarks will link to areas of your page.
For example you might want users to be able to jump to areas of your page using links in your nav list.
This means they wont have to scroll down to find something.

3

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