Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I got every line of codes correctly but this :
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 would love to know what am not doing right pls!
Your code so far

<!DOCTYPE html>
<html lang="en">
  <link rel="stylesheet" href="styles.css">
<main>
  <head>
    <meta charset="UTF-80">
    <header id="header">Product Landing page
      <img id="header-img" src=""></img>
       <nav id="nav-bar">
         <ul>
         <li><a href="#Chlorine" class="nav-link">Chlorine</a></li>
      <li>   <a href="#Rust" class="nav-link">Rust</a></li>
        <li> <a href="#Power" class="nav-link">Powder</a></li>
        <li> <a href="#Starch" class="nav-link">Starch</a></li>
         </ul>
         
         <style type="style/css">
                @media screen and (max-width:500px){
                display: flex;
                }
                }
                               @media screen and (max-width:400px){
                }
 display: flex;
                
                </style>
        </nav>
        <meta content="viewport">
      </header>
       
  </head>
  <body>
   
        
    <video id="video" src=""></video>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" placeholder="email" type="email" name="email"><input>
      <input id="submit" type="submit"></input>
      
    </form>
    </main>
  </body>
</html>

/* file: styles.css */
@media screen and (max-width:500px)
{
        nav{       display: flex;
                }
                }
                               @media screen and (max-width:400px){
                nav-link{
 display: flex;}
                               }

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hi there and welcome to the forum!

Your code had posted twice by the looks of it, so I’ve edited your post to remove the duplicated code.

It still seems rather jumbled, so I’m not sure if it’s been pasted correctly or if it’s become slightly muddled in the process?

You have your CSS appearing twice, in style tags in your HTML and in a separate CSS file. You shouldn’t have this code duplicated like this. I’d recommend removing the style element and its contents. The formatting of your CSS is rather messy too.

Your HTML has many misplaced elements:

  1. Your link element should be inside the head element.
  2. Your img, nav, ul and other such elements should be inside the body element.
  3. Your main element should be inside the body element.
  4. Your header element should not have other elements nested inside it.

Essentially, the structure of your HTML document should be along the lines of:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- meta, link and title elements here -->
  </head>
  <body>
    <nav>
      <!-- all nav-related elements here -->
    </nav>
    <main>
      <!-- all main page content here -->
    </main>
  </body>
</html>
3

Had similar problem and managed to solve it doing the following.

Then I made sure all the name on the href is identical to the id of the element I linked it to.
Hope it helps.

4

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