Product Landing Page - Build a Product Landing Page

Product Landing Page Cert Project NavBar Help:

I’m having some trouble understanding how to make a successful ‘navbar’ to pass this test. I understand the concept of making sure to include links to the relevant sections.

Can you point me in the right direction to make a successful navbar? These are the tests I am having trouble with-

  1. You should have at least 3 .nav-link elements within the #nav-bar.
  2. Each .nav-link element should have an href attribute.
  3. 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).

Thanks!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<head>
      <meta charset="UTF-8">
			<html lang="en"></html>
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	    <title></title>
			<link rel="stylesheet" href="styles.css">
  </head>
<header id="header">
  <nav id="nav-bar">
    <ul>
      <li id="nav-link"><a href="Critical_Role">Critical Role</a></li>
      <li id="nav-link"><a href="Candela_Obscura">Candela Obscura</a></li>
      <li id="nav-link"><a href="Company_Information">Company Information</a></li>
      </ul>
    </nav>
    <img id="header-img" src="https://en.wikipedia.org/wiki/Critical_Role_Productions#/media/File:Critical_Role_logo,_black_2017.png" alt="Critical Role Logo">
  </header>
<main>
<body id="shows">
  <p>
    Critical Role Productions, LLC is a multimedia production company incorporated in 2015 by the members of the creator-owned streaming show Critical Role. The first two shows from the company, Critical Role and Talks Machina, originally premiered on Geek & Sundry. The company moved to their own studio space in 2018, and began putting out new shows on their own Twitch and YouTube channels. A split from Legendary Digital Networks was completed in early 2019, at which point Critical Role Productions took over production responsibility and since then has continued to launch new shows independently.

Critical Role Productions uses several trade names for various forms of media production such as the gaming imprint Darrington Press, the record label Scanlan Shorthalt Music, and the film and television production banner Metapigeon. They also launched a 501(c)(3) nonprofit organization, Critical Role Foundation, in 2020 to manage various charity projects by the company. In 2023, Critical Role Productions signed a film and television first-look deal with Amazon Studios.

These are just some of the shows they produce-
    </p>
  <section id="critical-role">
    <h3>Critical Role</h3>
    <p>
      Critical Role is the "main series" of the studio. The series is broadcast on Thursdays at 19:00 PT on the Critical Role Twitch and YouTube channels, with the VOD being available to Twitch subscribers immediately after the broadcast. The VODs are made available for the public via the YouTube channel on the Monday after the live stream. As part of social distancing requirements during the COVID-19 pandemic the show has switched to a pre-recorded format. The show's third campaign premiered on October 21, 2021.
      </p>
    </section>
  <section id="candela-obscura">
    <h3>Candela Obscura</h3>
    <p>
      A horror–themed actual play episodic web series, using the new Illuminated Worlds System designed by Darrington Press; Candela Obscura was created by Taliesin Jaffe and Chris Lockey, with Steve Failows and Maxwell James as producers, and with Spenser Starke and Rowan Hall as the game's lead designers and writers. Since May 25, 2023, it has aired on the last Thursday of the month. Each episode focuses on a new investigation; Jaffe also serves as the show's Lightkeeper who provides the characters each mission. The cast of the first three episode story arc is composed of Laura Bailey, Ashley Johnson, Anjali Bhimani, Robbie Daymond with Matthew Mercer as the game master. The cast of the second three episode story arc is composed of Travis Willingham, Brennan Lee Mulligan, Zehra Fazal, Luis Carazo, and Marisha Ray with Starke as the game master.
      </p>
    </section>
    <section id="company-information">
<h3>Company Information</h3>
<p>
  For more information about the company, please fill out the attached form and someone will get back to you.
  </p>
    <form id="form" method="submit" action="https://www.freecodecamp.com/email-submit">
      <h4>Email Submittal</h4>
      <input id="email" name="email" type="email" placeholder="Bidet Critters!" required>
      </input>
      <input id="submit" type="submit" name="submit">
      </input>
    </form>
      </section>
  </body>
</main>
<footer>
  </footer>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

Hi @brendanpgrace

  1. there is a dot before nav-link, so this means it is a class, not an id attribute. The code for this part of the link needs to go in the anchor element.
    Note: if it is an id, it needs to be unique. id = unique identifier
  2. refer step 1, it goes in the anchor element.
  3. the href attribute property values need to match the id property values exactly. Casing and characters such as hypens and underscores matter. I’d copy the id from each section and paste it into the respective href

Happy coding