Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

  • Each .nav-link element should have an href attribute.
    If i take the href from the li tags like i’ve seen in other similar posts i get the followin errors:
  • Each .nav-link element should have an href attribute.
  • 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 ).

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.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Unfortunately, we can’t see your code.

3

sorry it didn’t let me put it before this is the code:

     <nav id="nav-bar">
     <ul>
       <li class="nav-link" href="#features"><a href="#features">Features</a></li>
         <li class="nav-link" href="#how"><a href="#how">How do they work</a></li>
         <li class="nav-link" href="#pricing"><a href="#pricing">Pricings</a></li>
         <li class="nav-link" href="#form"><a href="#form">log in</a></li>
         <li class="nav-link" href="#footer"><a href="#footer">where to find us</a></li>
     </ul>
   </nav>

it does not allow me to put the complete

4

Please put all of your code.

5 
<!DOCTYPE html>
<html lang="en">
 <head>
   <link rel="stylesheet" href="styles.css">
   <meta charset="utf-8" />
   <title>Landing Page</title>
 </head>
 <body>
   <header id="header">
     <img id="header-img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.9MiLY0D1jz4EPU_qOq3S7QHaHa%26pid%3DApi&f=1&ipt=39e8a92290633a652543a76675c3598daa51f0e79b0e70bfdfcb6313edb3a2b9&ipo=images" alt="logo" />
     <nav id="nav-bar">
     <ul>
       <li class="nav-link" href="#features"><a href="#features">Features</a></li>
         <li class="nav-link" href="#how"><a href="#how">How do they work</a></li>
         <li class="nav-link" href="#pricing"><a href="#pricing">Pricings</a></li>
         <li class="nav-link" href="#form"><a href="#form">log in</a></li>
         <li class="nav-link" href="#footer"><a href="#footer">where to find us</a></li>
     </ul>
   </nav>
   </header>
   <main>
   
   <form id="form" method="post" action="https://www.freecodecamp.com/email-submit">
       <h1>Homercrafted Masterpieces</h1>
       <input type="email" name="email" id="email" placeholder="ElBarto@cburns.com" />
       <input type="submit" id="submit" />
   </form>
   
   <hr>
   
     <section id="features">
   	<div id="1">
   		<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.Ifdu8VOulewABKQU2Kz6ugHaFj%26pid%3DApi&f=1&ipt=3634e83f5afc23a1f300ea9a440eeeafec620b4010faab0edfba37b3177ce79b&ipo=images" alt="homer's electric hammer" id="hammer" class="inventions">
   		<header>Electric hammer</header>
   		  <article>The best hammer in the market.
   </article>
       </div>

       <div id="2">
         <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.9UdwLMQu0sHdroFl9WCX3AHaFj%26pid%3DApi&f=1&ipt=0036f6ab919ae906bf06b071b60abe8b66f85fccb46546032d1ab78728fc1a79&ipo=images" alt="homer's fire alarm" id="alarm" class="inventions">
<article>         <header>Everything is alright alarm</header>
         <p>It will let you know every 5 seconds that there is no problem while emitting a relaxing sound.</p>
</article>
         </div>

         <div id="3">
         <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.uzbJct4jKC6dslbzhBRUiAHaFj%26pid%3DApi&f=1&ipt=e3e26c8a97a34a432c85d371d45ec258db154f8a54309e57b880aed6d5b33737&ipo=images" alt="homer's 6 legs chair" id="chair" class="inventions">
         <header>Revolutionary chair</header>
         <article>This amazing chair will prevent you from falling down when inclined.</article>
         </div>

         <div id="4">
         <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.hr-LhJRbK7irLpY_NQPe9AHaEK%26pid%3DApi&f=1&ipt=37e0538f56defebcc7effcaf7305a48be7dd1ada98c3c413b603ee161cb037e4&ipo=images" alt="homer's makeup shootgun" id="makeup" class="inventions">
         <header>Fastest way to put makeup on</header>
         <article>Have you ever run late for a party just to realise you were not using makeup?.</article>
         </div>
     </section>
   <hr>
     <section id="how">
       <iframe id="video" width="260" height="115" src="https://www.youtube.com/embed/-ZC0rRcvra8" title="Homero el inventor - Los Simpson" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </section>
   <hr> 
     <section id="pricing">
       <div class="pricing">
         <h2>Electric Hammer</h2>
         <p>$150</p>
       </div>
       <div class="pricing">
         <h2>Everything is Alright Alarm</h2>
         <p>$100</p>
       </div>
       <div class="pricing">
         <h2>Chair with 6 Legs</h2>
         <p>$200</p>
       </div>
       <div class="pricing">
         <h2>Makeup Shootgun</h2>
         <p>$150</p>
       </div>
   </main>
   <hr>
   <footer id="footer">
     <p>You can come to <strong> 742 Evergreen Terrace</strong> and knock on Flanders door</p>
   </footer>
 </body>
</html>
6

I don’t think you can add the href to the li elements. That belongs only in a elements.

Since a is a “link”, that’s where I’d expect the class="nav-link" to go?

1 Like
7

i know but if i take it out i have 2 error insted of 1. at first i only put the href on the a tag elements and i had the 2 error from before after a while trying many thing found and reading old posts here i put the href in each li tag element and one error disapear i know it’s wrong but i do not know what to do :slightly_smiling_face:

8

i took out the class from the li tag

<nav id="nav-bar">
      <ul>
        <li><a href="#features" name="features" class="nav-link">Features</a></li>
          <li><a class="nav-link" href="#how">How do they work</a></li>
          <li><a class="nav-link" href="#pricing">Pricings</a></li>
          <li><a href="#form" class="nav-link" >log in</a></li>
          <li><a href="#footer" class="nav-link" >where to find us</a></li>
      </ul>
    </nav>

thanks for the help i didn’t know what to do :slight_smile:

2 Likes
9

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