Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

hello!
I am a new in learning to code on “Free code camp”
I tried to google the answers, opened all sites available but still can’t find my mistakes. Please help me. Below 2 steps I can not pass…

  1. 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 ).
  2. Your Product Landing Page should use CSS Flexbox at least once.

Will be pleasure for your help!!!

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" />
<link rel="stylesheet" href="styles.css">
<header id="header">
<div id="image">
<div id="title">
            <img id="header-img" alt="product logo thing" 
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"/>
<nav id="nav-bar">
  <li>
  <a class="nav-link" href="#premium materials">Premium Materials</a></li>
  <li>
            <a class="nav-link" href="#fast shipping">Fast Shipping</a> </li>
  <li>
              <a class="nav-link" href="#quality assurance">Quality Assurance</a></li>
  </nav>
</header>




          <div id="video-wrapper">
            <div>
            <p>Product Video Overview</p>
            </div>
          <iframe id="video" width="560" height="315" src="https://youtu.be/y8Yv4pnO7qc" frameborder="0" allowfullscreen></iframe>
        </div>
         <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
            <label for="email" id="email-label"><input id="email" name="email" type="email" placeholder="Enter your email"></input></label>
            <input type="submit" id="submit" value="Get Started!"></input>
            <div class="social-icons">
          <a
href="https://www.facebook.com/freecodecamp/"> 
<i class="fab fa-facebook-f"></i>
</a>
<footer class="text-center">
      <hr>
      href="https://www.instagram.com/alexsjch0/" target="_blank"><i class="fa fa-instagram"></i></a></p>
    </footer>
            </div>
      </header>

/* file: styles.css */
@media (prefers-reduced-motion: no-preference) { *{
    scroll-behavior: smooth;}}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You do not have any elements with id values that are the same as the href values on your links (minus the hash for the id value).

The href values should not have spaces or the spaces should be replaced with underscores _

You do not have any Flexbox CSS in your styles.

MDN: Linking to an element on the same page

1 Like
3

With Flexbox I solved thanks so much but with the first step I can not solve yet . what do you suggest I do?

1 Like
4

I solved just added
section id =“bla bla” and closed my section element

Thank you!

5

Hi, I have the same problem with you.

    • Failed: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).*

this is my code,

<link rel="stylesheet" href="styles.css">

<header id="header">
  <div class="logo">
    <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" id="header-img" alt="original trombones logo" />
  </div>
  <nav id="nav-bar">
    <ul>
      <li>
          <a class="nav-link" href="#how-it-works">
          How It Works
        </a>
        
      </li>
      <li>
        <a class="nav-link" href="#pricing" >
         Pricing
        </a>
      </li>
      <li>
        <a class="nav-link" href="#footer">
          Features
        </a>
      
      </li>
    </ul>
  </nav>
</header>

 <div class="container">
  <section id="how-it-works">
    <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
  </section>

  <section id="pricing">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input name="email" type="email" id="email" placeholder="Enter your email address" required/>
      <input id="submit" type="submit" value="Get Started" class="btn"/>
    </form>
  </section>
</div>

<footer id="footer">
  <ul>
    <li>
      <a class="nav-link" href="#">
          Privacy
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
          Terms
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
         Contact
      </a>
    </li>
  </ul>
</footer>

anyone can show me where I wrong

6

Hi @windanetto

Please start a new topic for your question.

Happy coding

7

control your code i wrote below my example…

Blockquote

“”"

"""
8

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