Tell us what’s happening:
Despite my best efforts - im not able to get this one. I’ve been stuck for a while, its my Achilles. I want to get this.
see here for errors -
9. Each .nav-link element should have an href attribute.
Failed:
10. 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’ve tried relocating nav element/ placing it in its own “header”/ replacing elements and Ids but nothing.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Product Landing Page</title>
<link href="https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap"
rel="stylesheet"/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
<link href="https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&family=Satisfy&display=swap"
rel="stylesheet"/>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<section>
<header id ="header" class="logo">
<nav id="nav-bar">
<ul>
<li class="nav-link"><a href="#home">Home</a></li>
<li class="nav-link"><a href="#product-shop">Product Shop</a></li>
<li class="nav-link"><a href="#about-us">About Us</a></li>
<li class="nav-link"><a href="#contact-us">Contact Us</a></li>
</ul>
</nav>
<img alt="bodycrushessentialslogo" src="https://deqyd.com/clients/bodycrush/bodycrush_logo.jpg"
loading="lazy"
id="header-img" />
<h1>Body Crush Essentials</h1>
<h2>.... Because you deserve it.</h2>
</header>
<fieldset>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<p>Sign up to get notified once we launch our store!</p>
<label for="email">E-mail:<input id="email" name="email" type="email" placeholder="Jane@example.com" required/></label>
<input id="submit" type="submit" value="Submit">
</form>
</fieldset>
</section>
<section class="main-page">
<div class="home-page" id="home">
<h1>Dive into the finest thing for your skin. Made with ethically sourced natural ingredients. All the things fit for the skin you're in.<h1>
<video src="https://deidreawrit7265783993787.sirv.com/video-output-updatedwebsite.mov" id="video" height="500 px" width="400px" muted controls></video>
</div>
<div class="shop" id="product-shop">
<img
src="https://deidreawrit7265783993787.sirv.com/IMG_0582.heic"
alt="product-shot1"
class="photo2"
loading="lazy"
/>
<h2>Whipped Body Butter</h2>
<p>Soothe your skin and within with natrural, nourishing ingredients likes Shea, Cocoa and Kokum Butter. </p>
<p>Quantities Available: 4oz, 8oz, 16oz</p>
<img
src="https://deidreawrit7265783993787.sirv.com/B1B5E2CA-6ED3-481C-8551-E96EA73BF7A7.heic"
alt="product-shot2"
class="photo3"
loading="lazy"
/>
<h2>Exfoliating Body Polish</h2>
<p>Made with Natural exfoliants, revitalize your skin and nourish it with oils like Jojoba, Rosehip, Avocado, Castor, Safflower, and Apricot. </p>
<p>Quantities Available: 4oz, 8oz, 16oz, 24oz</p>
</div>
</section>
<section class="secondary-page">
<div class="about" id="about-us">
<h1>About Us</h1>
<p>
Created in 2022, Body Crush essentials is a small business created from the need to love your skin more! Made with natural ethically sourced ingredients made to enrich, moisturize and rejuvenate the skin you're in!
</p>
</div>
<div class="contact" id="contact-us">
<h1>Contact Us</h1>
<a href="https://www.facebook.com/bodycrushja">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://instagram.com/bodycrushja">
<i class="fab fa-instagram"></i>
</a>
<a href="mailto:bodycrushessentials@gmail.com">
<i class="fa fa-envelope"></i>
</div>
</section>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page