Responsive Web Design Projects - Build a Product Landing Page - idVzT_G9cQfy3w2Z4hwk0

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Hi, so I’m having a problem completing the task, it says ( You should have at least 3 .nav-link elements within the #nav-bar. Each .nav-link element should have a href attribute. Each .nav-link element should link to a corresponding element on the landing page I’m really baffled and I don’t know what to do.

   **Your code so far**

/* file: index.html */
<!Doctype HTML5>
 <html>
   <header id="header">
     <title id="title">Gloss pianos</title>
     
     <img  id="header-img" src="https://www.google.com/search?q=piano+4k+picture&tbm=isch&ved=2ahUKEwi-mY2qjPP4AhUDqRoKHdtaDSIQ2-cCegQIABAA&oq=piano+4k+picture&gs_lcp=CgNpbWcQAzoHCCMQ6gIQJzoECCMQJzoECAAQQzoLCAAQgAQQsQMQgwE6CAgAELEDEIMBOgUIABCABDoGCAAQHhAFOgYIABAeEAg6BAgAEB5QAFijOWDBO2gBcAB4BYAB8gaIAflPkgEJMy03LjIuNi40mAEAoAEBqgELZ3dzLXdpei1pbWewAQrAAQE&sclient=img&ei=x0bNYv6ZJYPSatu1tZAC&rlz=1C1SQJL_enTZ901TZ901#imgrc=hfB-p_Xj2mbV0M">
     <nav id="nav-bar"><a id="d" href="#footer"> Order</a> <a id="a" href="#prenium-build"> Features</a>
     <a id="b" href="#video"> video demonstration</a><a id="c" href="#email">Enter your email to get started</a>
     </nav>
     </header>
     <body>
     <h1 id="prenium-build">Prenium build</h2>
        <p id="p"> Our pianos are made from the highest quality wood available</p>
     <h2 id="pay-less-shipping"> Payless shipping</h3>
       <p id="p"> Once you have purchased one our distinguished pianos shipping will be free</p>
     <h3 id="safe delivery">Safe delivery</h4>
      <p id="p"> Your piano will be delivered by one of our trusted delivery companies</p>
      <iframe id="video" src="https://www.youtube.com/watch?v=sEQf5lcnj_o"></iframe>
   </body>
   <footer id="footer">
   <h4 id="How to order a piano">How to order a piano</h5>   
      <p id="p"> To order a piano you have to enter your email and we will email you back with a customization form</p>
   <form action="https://www.freecodecamp.com/email-submit"
         id="form">
   <label id="email-label"for="email">Email</label>
<input name="email"id="email"  type="email" required placeholder="Enter your email"> 
<input name="submit"id="submit"  type="submit" required > 
</form>
<link rel="stylesheet" href="styles.css">
   </footer>
   </html> 

/* file: styles.css */
<style>
#a{
 display:flex;
}
#b{
display:flex;
}
#c{
 display:flex;
}
 @media (max-height: 800px){ 
   p {
   font-size: 10px;
     }
 }
 
</style>

   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

2

Hello.
I suggest you to check you code with validator.
There are like dozen of things which are not quite right with your page.
Also, this id-s like: a, b, c, d are not descriptive at all. I suggest to change such names to something more descriptive.

3

So I’ve done what you have said but the same error keeps on popping up eventhough I have a nav bar and nav-links

4

Remove the style tags from the css file, no html can go in there

5

I did but I am still having problems with the .nav-link section.

6

where are they? 

7

I just realized that it wants me to put them as classes and not id, sorry for wasting your time and thanks for the help.

8

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