Product Landing Page: Three error messages

Hello,

I can’t finish Product Landing Page because I keep getting these messages…

Screenshot from 2022-07-20 17-54-55

…and this is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
				<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
				<link rel="stylesheet" href="styles.css"/>
        <title>Product Landing Page</title>
</head>
<body>
				<header id="header">
				        <img id="header-img" src="" alt="Trava Logo">
				        	<nav id="nav-bar">
				                <a id="nav-link" href="#lorem">Lorem</a>
				                <a id="nav-link" href="#ipsum">Ipsum</a>
				                <a id="nav-link" href="#video">Dolor</a>
				                <a id="nav-link" href="#form">Sit</a>
				        	</nav>
				</header>
				<div class="lorem">
								<h1 id="lorem"> Elit officia at sunt at! </h1>
								<p> Ipsum tempora sit quidem eum hic Exercitationem eum illum necessitatibus aperiam eos Velit magni iure tempore ipsam numquam consequuntur Cum sequi assumenda odio quo nam. </p>
				</div>
				<h2 id="ipsum"> Ipsum reiciendis </h2>
				<div class="strains">
								<img src="" alt="White Strain">
								<img src="" alt="Black Strain">
								<img src="" alt="WB Strain">
				</div>
				<iframe id="video"  src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture" allowfullscreen></iframe>
				<form target="_blank" id="form" action="">
				        <input name="email" id="email" type="email" placeholder="" required>
								<input id="submit" type="submit" value="SUBMIT" /> 
				</form>
</body>
</html>

I do have at least 3 clickable .nav-link elements: there are 4 <a> elements with the right class.
All of them do have href attributes and all these attributes do have right values: first takes you to <h1> with the right id, second takes you to <h2> with the right id, third takes you to <iframe> with the right id and last one takes you to <form> with the right id.
I’ve checked at least a million times that there is no typo, no syntax error, the code should pass. Please, can anyone tell me what am I doing wrong?

Any help is greatly appreciated. Thank you in advance!

Hello. Your nav-link elements have an id set to nav-link, but the tests state that they must have a class attribute set to nav-link.

Be very careful with this! #id is how you select an element by its id. .class is how you select elements by their class.

Furthermore, you can’t have more than one element with one given id, since an id should be unique to an element.

1 Like

id is usually used for unique elements of the page, are you sure you need id-s here?

2 Likes

This hurts my brain, what a stupid mistake I made!
Thank you very much.