My code so far.
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head><style>#ageConfirm, #guidanceFooter { display: none !important; }</style>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
<img id="header-img" src="https://cdn.shopify.com/s/files/1/0612/8969/3353/files/Logo_Header_With_Boarder_170x.png?v=1657571812" alt="Honest Amish logo"></img>
<nav id="nav-bar">
<li><a href="#beard-balms" class="nav-link">Beard Balms</a></li>
<li><a href="#beard-oils" class="nav-link">Beard Oils</a></li>
<li><a href="#merch-shop" class="nav-link">Merch Shop</a></li>
</ul>
</header>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" placeholder="Please Enter Your Email" name="email">
</input>
<input id="submit" type="submit" value="Get Started" required>
</input>
</form>
<p>Our all natural and organic recipes help condition, maintain, and control growing beards. We use absolutely no synthetic chemicals, no artificial preservatives, no imitation fragrances or colorants in any of our products. All oils, waxes, and butters used are natural or organic. We only use 100% recyclable glass or aluminum tins for our products and avoid plastic containerization. Made in the U.S.A. by hand for an honest wage.</p>
<section id="beard-balms">
<h3 class="headers">Our Beard Balms</h3>
<img id="balms-img" src="https://cdn.shopify.com/s/files/1/0612/8969/3353/collections/Balm_Group_E_535x.jpg?v=1646863217"></img>
</section>
<section id="beard-oils">
<h3 class="headers">Our Famous Beard Oil</h3>
<img id="oils-img" src="https://cdn.shopify.com/s/files/1/0612/8969/3353/collections/Oil_Group_E_535x.jpg?v=1646863424"></img>
</section>
<section id="merch-shop">
<h3 class="headers">Honest Amish Merchandice</h3>
<img id="balms-img" src="https://cdn.shopify.com/s/files/1/0612/8969/3353/collections/Hat_Group_2_E_535x.jpg?v=1646922194"></img>
</section>
<video id="video">
<source src="https://cdn.shopify.com/s/files/1/0612/8969/3353/files/Screen_Shot_2022-03-31_at_11.48.06_AM_1100x.png?v=1648741703" type="video">
</source>
</video>
<form>
</form>
</body>
</html>
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:106.0) Gecko/20100101 Firefox/106.0
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
Having some trouble here on this cert project.
I laid out all the HTML first and thought I would style it after.
Currently it passes all the tests except for
- I need to use flexbox at least once
and - The nav bar should be sticky at the top.
Not sure what I did wrong but NOTHING I do in CSS now is letting me style it.
Not sure where I went wrong.
Also the video element shows no content on the page although it’s passing the test. I’ve never used that tag before so possibly missing something.