Product Landing Page - Build a Product Landing Page

HTML-CSS
1

My code so far:

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
    <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 */
header {

}

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. Any advice?

All the tests pass except

  1. I need to use Flex once
  2. My Nav Bar is supposed to be at the top of the viewport.

Can’t figure out how to make this nav-bar look better.

I looksed it up online and messed around with it but I can’t get it right.

2

You have added no CSS at all to your project. You also have not explained what you want your project to look like vs. the state currently shown.

To pass the two tests, you will have to use CSS. I suggest going back to the section covering flexbox for the first test and review this challenge but also do research on your own to discover what it means to put an element at the top of the viewport.

3

Yeah sorry I had lflexbox and a million other CSS styles and just couldn’t figure out how to make the Nav Bar look good, be at the top of the viewport and sticky.

I looked online and it was quite confusing particularily with making a sticky nav bar. Some styles are applies to the Nav-bar ID and some to the LI, etc. got kind of confusing.

I checked it out as you mentioned and think I might be getting somewhere, well see what happends.

thanks

4

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