Could you please help me why i cannot past these:
“Each .nav-link element should have an href attribute.” and " 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 i am missing. I tried it in many ways and looks ok to me.
Thank you in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Product</title>
</head>
<body>
<header id="header">
<div class="container">
<div class="image">
<img src="img/coffee.png" alt="" id="header-img">
</div>
<div class="title">
<h1 class="title_name">Verdi Verdi</h1>
</div>
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#form">Form</a></li>
<li class="nav-link"><a href="#main">Main</a></li>
<li class="nav-link"><a href="#footer">Footer</a></li>
</ul>
</nav>
</div>
</header>
<section class="section_1">
<form id="form" method="post" action='https://www.freecodecamp.com/email-submit'>
<fieldset>
<label for="email">Please subscribe
<input id="email" name="email" type="email" required placeholder="Your email" /></label>
</fieldset>
<input id="submit" class="submit" type="submit" value="Get Started" />
</form>
</section>
<main class="main" id="main">
<section class="main_section">
<div>
<h2 class="main_section_title">Who?</h2>
</div>
<div>
<p class="section_title">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore, aperiam.</p>
</div>
</section>
<section class="main_section">
<div>
<h2 class="main_section_title">Where?</h2>
</div>
<div>
<p class="section_title">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores veniam officia
tempora praesentium
animi magni.</p>
</div>
</section>
<section class="main_section">
<div>
<h2 class="main_section_title">Why?</h2>
</div>
<div>
<p class="section_title">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis id culpa
tempore veniam porro,
doloremque officiis dignissimos sit cupiditate labore facilis ab, perspiciatis nesciunt voluptatum?
</p>
</div>
</section>
</main>
<div class="video">
<section class="video_section">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/1UozgFnd_Sc"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</section>
</div>
<div class="prices" id="products">
<div class="prices_container">
<section class="prices_box">
<h3>Falafel</h3>
<p>Lorem ipsum dolor sit amet.</p>
<p>€10</p>
<p class="menu_button"><a href="">Choose me</a></p>
</section>
<section class="prices_box">
<h3>Kokos Cake</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>€15</p>
<p class="menu_button"><a href="">Choose me</a></p>
</section>
<section class="prices_box">
<h3>Ginger Bread</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, iure voluptate!</p>
<p>€11</p>
<p class="menu_button"><a href="">Choose me</a></p>
</section>
</div>
</div>
<footer id="footer">
<div class="footer_container">
<p>Copyright 2023 - Verdi Verdi Gibraltar</p>
</div>
</footer>
</body>
</html>
/* RESET */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 1.3125rem;
line-height: 1.6;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif
}
img,
iframe {
max-width: 100%;
}
h1,
h2,
h3,
p {
margin: 0;
}
/* Mobile first */
/* HEADER */
#header {
background: #d9ed92;
}
.container {
width: min(90%, 800px);
margin: 0 auto;
}
.image {
text-align: center;
}
img {
height: 10rem;
/* Center an Image */
/* display: block;
margin-left: auto;
margin-right: auto; */
}
.title {
text-align: center;
margin-top: -1.5em;
}
.title_name {
margin: 0%;
color: #184e77;
}
#nav-bar {
text-align: center;
}
#nav-bar>ul {
padding: 0;
margin: 0em;
padding-bottom: 0.5em;
}
.nav-link {
list-style: none;
}
.nav-link>a {
text-decoration: none;
color: #34a0a4;
font-weight: bold;
cursor: pointer;
}
.nav-link>a:hover,
.nav-link>a:focus {
color: white;
}
/* FORM */
.section_1 {
background: #52b69a;
padding: 1.5em;
}
#form {
width: min(75%, 750px);
margin: 0 auto;
}
fieldset {
text-align: center;
border: none;
color: black;
margin: 0;
}
input {
display: block;
margin: 0 auto;
}
.submit {
background: #184e77;
color: white;
}
/* MAIN */
.main {
background: #1a759f;
text-align: center;
color: wheat;
padding: 0.5em;
}
.main_section {
width: min(75%, 750px);
margin: 0 auto;
}
.main_section_title,
.section_title {
margin: 0;
}
/* VIDEO SECTION */
.video {
background: #d9ed92;
padding: 1em;
}
.video_section {
width: min(75%, 750px);
margin: 0 auto;
}
iframe {
display: block;
margin: 0 auto;
width: 100%;
}
/* Prices */
.prices {
background: #52b69a;
padding: 1em;
}
.prices_container {
width: min(75%, 750px);
margin: 0 auto;
text-align: center;
color: black;
}
.prices_box {
margin-top: 0.5em;
}
.prices_box>h3 {
background: gray;
}
.prices_box>p {
background: #d9ed92;
}
.menu_button {
padding-bottom: 0.25em;
}
.menu_button>a {
text-decoration: none;
background: yellow;
border-radius: 100px;
padding: 0.15em;
cursor: pointer;
color: black;
}
.menu_button>a:hover,
.menu_button>a:focus {
background: red;
color: white;
}
/* Footer */
footer {
background: #1a759f;
padding: 1em;
color: white;
text-align: center;
font-weight: bold;
}
.footer_container {
width: min(75%, 750px);
margin: 0 auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: