Build a Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Am having issue with the nav-bar to be on top of viewport
I’ve tried everything but none was working

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

<body>
  <header id="header">
    <img 
      src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
      loading="lazy"
      id="header-img"
      alt="header-logo" />

      <nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#features">Features</a></li>
          <li><a class="nav-link" href="#how-it-works">How it works</a></li>
          <li><a class="nav-link" href="#pricing">Pricing</a></li>
          </ul>
      </nav>
  </header>

  <main>
    <div>
      <form id="form" method="post" action="https://www.freecodecamp.org/email-submit">
        <label for="email"><span>New and UK use iphones</span></label>
        <p>
          <input
          id="email"
          name="email"
          placeholder="enter your email address"
          type="email"
          required>
        </p>
        <input id="submit" type="submit" value="Get Started">
      </form>
    </div>

    <section id="features">
      <div class="goods">
        <h3>New iphone</h3>
        <p>Our new iphones are gotten from the USA apple store.</p>
      </div>

      <div class="goods">
        <h3>UK used iphones</h3>
        <p>Our UK used iphones are got from a reliable source and they are faultless with 6 months warrant.</p>
      </div>

      <div class="goods">
        <h3>Delivery</h3>
        <p>We deliver nationwide. You will get your order between 3-10 working days starting from the day you place your order.</p>
      </div>
    </section>

    <section id="how-it-works">
      <div class="youtube">
        <iframe 
        id="video"
        src="https://youtu.be/IYtDS27znnM?si=bkJOOe4J_xF3ljoD"
        title="iphone vs samsung">
        </iframe>
      </div>
    </section>

    <section id="pricing">
      <div class="column">
        <h3>Iphone 17promax</h3>
        <p><span>€1,449.00</span></p>
        <p><span>Display:</span>6.9"/1320x2868px</p>
        <p><span>Camera:</span>48MP/2160p</p>
        <p><span>RAM/ROM:</span>12Gb/256g</p>
        <p><span>Battery:</span>5300mAh</p>
        <button type="submit">Select</button>
      </div>

      <div class="column">
        <h3>Iphone 17pro</h3>
        <p><span>€1,299.00</span></p>
        <p><span>Display:</span>63"/1260x2622px</p>
        <p><span>Camera:</span>48MP/2160p</p>
        <p><span>RAM/ROM:</span>12GB/256GB</p>
        <p><span>Battery:</span>3988mAh</p>
        <button type="submit">Select</button>
      </div>

      <div class="column">
        <h3>Iphone 17Air</h3>
        <p><span>€1,199.00</span></p>
        <p><span>Display:</span>6.5"/1260x2736px</p>
        <p><span>Camera:</span>48MP/1260p</p>
        <p><span>RAM/ROM:</span>12GB/256GB</p>
        <p><span>Battery:</span>3149mAh</p>
        <button type="submit">Select</button>
      </div>
    </section>
  </main>

</body>

  <footer class="flex">
    <div class="right">
      <div><a 
      href="http://www.gmail.com/ohbaby991"
      target="_blank">Contact</a>
      </div>
      
      <div>
        <a href="privacy"
        target="_blank">Privacy
        </a>
        </div>
        
        <div>
          <a href="http://www.jumia.com/terms-and-conditions"
          target="_blank">Terms
          </a>
        </div>
      </div>

          <div class="copy">Copyright 2016, Sammy phones</div>    
  </footer>

</html>


* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  background-color: #f1f1f1;
  font-family: Arial;
  width: 100vw;
  margin: 0;
  padding: 0;
}

#header {
  font-size: 2rem;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dedede;
  width: 100vw;
  flex-direction: column;
}

#header img {
  width: 25rem;
  max-width: 100vw;
  margin: 0.5rem auto;
}

#nav-bar ul{
  list-style-type: none;
  line-height: 1.3;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
  color: inherit;
}

a:active {
  background-color: darkgray;
}

a:hover {
  text-decoration: underline; 
}

main {
  margin-top: 25rem;
  text-align: center;
  font-size: 2rem;
}

span, h3 {
  font-weight: bold;
  font-size: 2rem;
}

input[type="email"] {
  width: 15rem;
  height: 1.7rem;
}

input[type="submit"] {
  width: 12rem;
  height: 2rem;
  border-radius: 0;
  font-size: 1.7rem;
  background-color: rgba(250, 200, 30, 1);
}

.goods {
  margin-top: 15rem;
}

#pricing {
  margin-top: 8rem;
}

.column {
  border: 1.4px solid black;
  margin: 1.2rem 6rem;
}

.column > h3 {
  background-color: #e0e0e0;
  margin-top: 0rem;
  padding: 1.2rem 0;
}

.column > p:first-of-type {
  margin-bottom: 1.5rem;
  padding: 1.2rem 0;
}

.column button {
  margin: 2rem 0;
  background-color: rgba(250, 200, 30, 1);
  width: 7rem;
  padding: 2rem 0;
  font-size: 2rem;
}

.flex {
  background-color: #e0e0e0;
  margin-top: 4rem;
  padding: 2rem 0;
  display: flex;
  line-height: 2;
  flex-direction: column;
  justify-content: space-evenly;
  font-size: 1.8rem;
}

.right {
  display: flex;
  justify-content: flex-end;
  gap: 2rem;
  font-size: 2.5rem;
  margin-right: 3rem;
}

.copy {
  text-align: right;
  margin-right: 2rem;
}

@media (max-width: 768px) {
  #header img {
    width: 22rem;
    margin: 0;
  }

  #nav-bar ul {
    padding: 0;
    margin: 1rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  main {
    margin-top: 20rem;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (iPhone; CPU iPhone OS 18_7_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/138.0.7204.119 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page

https://www.freecodecamp.org/learn/full-stack-developer/lab-product-landing-page/build-a-product-landing-page

2

you should not have html elements after the closing tag of the body, all elements that appear on the page go inside the body element

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

3

I did it still not working

4

you tried a different browser and all those other things?

5

Yes, it becoming annoying

I’ve so many things for the past few days now none of it work

6

Can I leave it and continue with my learning?

7

you can always access all the curriculum, feel free to move where you want