Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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 ) what does it mean

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
  </head>
  <body>
    <header id="header">
      <img src="https://static.vecteezy.com/system/resources/previews/002/724/520/original/tree-logo-free-vector.jpg" id="header-img" width="100">
      <h1>Furniture</h1>
        <nav id="nav-bar">
        <ul>
            <li><a href="#About_Us" class="nav-link">About Us</a></li>
            <li><a href="#Demo" class="nav-link">Demo</a></li>
            <li><a href="#Photo_Gallery" class="nav-link">Photo Gallery</a></li>
            <li><a href="#Contact" class="nav-link">Contact</a></li>
        </ul>
    </nav>
       <video id="video" src=""></video>
       <form id="form" action="https://www.freecodecamp.com/email-submit">
         <label>email:<input id="email" placeholder="e-mail" type="email" name="email"></label>
         <input id="submit" type="submit">
       </form>
    </header>
  </body>
</html>

/* file: styles.css */
@media(max-width:100px){
  #header{
    text-align:center;
  }
}
#header-img #header{
  display:flex;
  justify-content:space-evenly;
}
header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: white;
    color: black;
    font-family: 'Exo 2', sans-serif;
    padding: 1em;
}
h1{
  text-align:center;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Here is some information on this topic:
Note: The hash tag represents Id.

The .nav-link element in HTML serves as a navigation link within a web page. Let’s break down what it means:

  1. Definition and Purpose:
  • The <nav> tag defines a set of navigation links. It is intended for major blocks of navigation within a webpage.
  • Not all links need to be inside a <nav> element; it is primarily used for sections that consist of significant navigation blocks.
  • Browsers, including screen readers for disabled users, can use this element to determine whether to omit the initial rendering of navigation content.
  • Common examples of navigation sections are menus, tables of contents, and indexes.
  1. Usage Example:
  • Suppose you have a navigation menu with links to different sections of your website (e.g., Home, About, Services, Contact). You can structure these links within a <nav> element like this:

HTML

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</nav>

AI-generated code. Review and use carefully. More info on FAQ.

  • In this example, each .nav-link (represented by the <a> tags) points to a corresponding element on the landing page using the href attribute with the value of another element’s ID (e.g., #footer).
  1. Accessibility and Semantics:
  • Properly using the <nav> tag enhances website accessibility by aiding screen reading software in identifying primary navigation areas.

In summary, the .nav-link elements should be structured within a <nav> tag to create a clear and accessible navigation system on your webpage. :globe_with_meridians:

3

You didn’t have elements for your nav links, that have id value match’s with you href attribute value.

4

MDN: Linking to an element on the same page

@robheyays I would suggest you shorten your replies and stick to the information the camper needs to pass the challenge.

Also, please do not post AI-generated replies or code.

5

I`ll do that and thx. I might be having to much fun with generated AI. :grinning:

6

sorry sir i am not getting the point of this text i mean that i have give same values of href and the text why didn’t it pass the code example:i have given the href id values about us in the same way i should give the text or not to give i didn’t get your point can u explain me in more detail with an example

7

i want with an example please explain with neat example sir

8

You have created these four links that go to ID’s on the page, but you don’t actually have any elements with those ID’s on the page.

9

thank you sir i got your point i got it my code was submitted

10

Your welcome. Keep it up, happy Coding!

11

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