Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
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 ).
I’m pretty sure I did all of this, but I’m still not passing the test.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF=8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
    <title>Product Landing Page</title>
    </head>
    <body>
      <header id="header">
        <nav id="nav-bar">
          <div class="logo-container">
            <img 
            src="https://thumbs.dreamstime.com/b/fresh-food-logo-sign-vegetable-meat-seafood-fruit-vector-design-100849337.jpg"
            alt="logo"
            id="header-img"/>
            <span class="the-product">
              Creative Foods
              </span>
              </div>
              <ul>
                <li><a href="#meats" class="nav-link">Meats</a></li>
                <li><a href="#seafood" class="nav-link">Seafood</a></li>
                <li><a href="#fruits" class="nav-link">Fruits</a></li>
                <li><a href="#vegetables" class="nav-link">Vegetables</a></li>
                <li><a href="#delivery" class="nav-link">Delivery</a></li>
              </ul>
          </nav>
      </header>
      <section id="email-section">
        <h2>Quality Foods at the lowest prices</h2>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
<input 
type="email" id="email" required placeholder="Enter your email address" name="email"/>
<input type="submit" id="submit" value="GET STARTED"/>
          </form>
        </section>
        <section id="features">
          <div class="features">
            <i class="ri-truck-fill ri-4x"></i>
            <div>
              <h2>Free 1 Day Shipping</h2>
              <p>Your groceries will arrive directly at your door within 24 hours after your purchase is made guaranteed!</p>
              </div>
            </div>
            <div class="features">
              <i class="ri-money-dollar-circle-fill ri-4x"></i>
              <div>
                <h2>Save more money</h2>
                <p>Our prices are fixed at a very affordable rate and will not  be affected by inflation.</p>
                </div>
            </div>
              <div class="features">
                <i class="ri-thumb-up-fill ri-4x"></i>
                <div>
                  <h2>Cruel & Pesticide Free</h2>
                  <p>Our animals are feed well and treated with upmost care. Our fruits and veggies are organic and natual. </p>
                  </div>
            </div>
          </section>
          <section>
          <iframe
          id="video"
          width="560"
          height="335"
          src="https://www.youtube.com/embed/Qmla9NLFBvU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </iframe>
            </section>
      </body>
  </html>

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS aarch64 15278.72.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: {{challengeTitle}} Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

“Each .nav-link element should link to a corresponding element on the landing page”

Can you show me the corresponding element that <a href="#meats" class="nav-link">Meats</a> points to?

3

For example, each element should link to the corresponding element when performing a test on the development of a pet site, and it was necessary to add a photo of a sea turtle vector and a photo of a porpoise vector. But I faced a problem, the code did not work, did not link to the next page, which followed the photo. My friends helped me solve the problem and found out that the code had an error in the [.nav-link] value, and after fixing it, everything worked.

4

By the way, I forgot to write that this situation helped me a lot in the future, because the next few orders were also about animals, and there was also a, and an otter and a gopher. Therefore, mistakes are even useful so that you don’t make them in the future and work much better.

5

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