Tell us what’s happening:
I am creating a landing page in freecodecamp frontend course, It has a test that states:
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
).
I have nav-link in my code and they are refering to document sections, but my code is not passing this test .
Following is my code
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<title>Product Landing page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<header id="header">
<nav id="nav-bar" class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">
<img id="header-img" src="https://images.unsplash.com/photo-1523381210434-271e8be1f52b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"width="50" height="50" style="border-radius:50%; object-fit:cover;"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="flase" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#Home">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#AboutUs">About Us</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section id="Home"><h3>Home</h3>
</section>
<section id="Products"><h3>Products</h3>
<video id="video" width="100%" height="auto" controls>
<source src="https://assets.mixkit.co/videos/preview/mixkit-going-down-a-curved-highway-down-a-mountain-41576-large.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</section>
<section id="AboutUS"><h3>About Us</h3></section>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.66 Safari/537.36
Challenge: Build a Product Landing Page
Link to the challenge: