Product Landing Page - Build a Product Landing Page

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

  1. I need to use flexbox at least once
    and
  2. 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.

You need to link the style sheet in the html head. There’s a note at the bottom of the instructions.

1 Like

you need to address those two issues by using “css”, so you can use them from this “style” section and add those rules to suffice this step requirements, happy learning :slight_smile:

1 Like

Wow unbelievable.

Totally forgot about that… despite knowing about that and doing it 100 times so far lol.
:scream::scream::roll_eyes::roll_eyes:

Thanks a lot , much appreciated.

Happens to the best of us. Glad I could help.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.