Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

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">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="logo" width="100" id="header-img"/>

      <nav id="nav-bar">
        <ul>
          <li class="nav-link">
            <a href="#home">Home</a>
            </li>

          <li class="nav-link">
            <a href="#pproject">Project</a>
            </li>

          <li class="nav-link"><a href="#contact">Contact</a></li>
        </ul>
      </nav>

      <section class="home">
        <h1 class="title">My First App Design</h1>
        <p class="subtitle">My dream in life isto become a proffesioner web and software developer</p>
      </section>

      <section class="project">
        <video id="video"width="240" height="80" control>
          <source src="https://player.vimeo.com/external/348824308.sd.mp4?s=b6596c8a1d0ef5b350af2a2cebc6fdb12bfa56d0&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          Birds in the field.
        </video>
        <br>

        
        <form id="form" action="https://www.freecodecamp.com/email-submit">

                <input id="email" type="email" name="email" placeholder="enter your email">

<input id="submit" type="submit" value="Submit">
        
        
        </form
      </section>

      <section class="contact">
        <footer>
          <p>No. 39 David Ejoor Crescent, Gudu District, Abuja, Nigeria</p>

          <p>+2348 5961 1779</p>

        </footer>
      </section>
    </header>
  </body>
</html>

/* file: styles.css */
*{
  margin: 0;
  padding: 0;
  font-size: 20px;
}

body{
  font-family: Arial, sans-serif;
}

#header{
  position: fixed;
  top: 0;
}

#nav-bar ul{
  display: flex;
}

#nav-bar .nav-link{
  display: inline-block;
  

}



@media only screen and (max-width:680px){
  .home{
    color: orangered;

  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Hi everyone!

Please am stocked since yesterday though my code perfectly right, but I couldn’t pass.

I keep having this two errors:

Each .nav-link element should have an href attribute.
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).
3

you can edit your post before posting or after using the penciel
image

please do not leave things for so long before asking for help. it can cause unnecessary frustration that can get in the way of learning

the spelling and capitalisation of an id is important.
your nav-project href is spelt differently to your section id

4

Have corrected that, still can 't pass.

5

could you explain more about what you are trying to do?

is it just to link navs?
if so, you might want to double check your last section id

6 
Each .nav-link element should have an href attribute.
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).

The two questions are the reason am yet to pass. I have deleted my code and try write it back since yesterday but am still having the same issue.

1 Like
7

I know this is frustrating, when working on a project you have many things held in your mind, which can often make things harder to see.

take another look at your last sections id.

8

sorry, I couldn’t see anything

9

<section class="contact">

what is your id called?

10

am lost here .

please my code below:

 <section id="contact">
11

in your code above you added a class, not an id.

check your code to make sure your sections have id= and not class=,

12

Finding bugs and errors in code is not easy. Its often the case that you think you find one when in truth there are more :frowning:

don’t loose hope, you will pass, just a case of one step at a time

13

I cant really see anything else other than the three things bellow that could be causing those errors.

mispelt
<a href="#pproject">Project</a>
no id
<section class="contact">
need closing >
</form

once these things are fixed, you can repost your html code using back tics `

use three above and three below your copy and pasted code to allow me to see it

if no backtic on your keyboard use ALT+065

14

I have done the corrections, am yet to pass.

I will start all over again

15

I don’t believe you need to start over,
unless you feel you could learn more from starting over?

If you post your new code I’d be happy to go through it.

either way, try not to wait so long to ask for help next time you get stuck.
:heart:

1 Like
16 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>build a product landing page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <img src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png" alt="logo" width="100" id="header-img"/>

      <nav id="nav-bar">
        <ul>
          <li class="nav-link">
            <a href="#home">Home</a>
            </li>

          <li class="nav-link">
            <a href="#project">Project</a>
            </li>

          <li class="nav-link"><a href="#feature">Feature</a></li>
        </ul>
      </nav>

      <section id="home">
        <h1 class="title">My First App Design</h1>
        <p class="subtitle">My dream in life isto become a proffesioner web and software developer</p>
      </section>

      <section id="project">
        <video id="video"width="240" height="80" control>
          <source src="https://player.vimeo.com/external/348824308.sd.mp4?s=b6596c8a1d0ef5b350af2a2cebc6fdb12bfa56d0&profile_id=164&oauth2_token_id=57447761" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">
          Birds in the field.
        </video>
        <br>

        
        <form id="form" action="https://www.freecodecamp.com/email-submit">

                <input id="email" type="email" name="email" placeholder="enter your email">

<input id="submit" type="submit" value="Submit">
        
        
        </form>
      </section>

      <section id="feature">

          <footer id="footer">
        <a href="#">Privacy</a>
        <a href="#">Terms</a>
        <a href="#">Contact</a>

      </footer>

      
      </section>
      
    </header>
  </body>
</html>
1 Like
17

are you getting any other errors? or just those two?

18

just that two questions

19

vs code isn’t showing any syntax errors

why is your footer surrounded by a section?

1 Like
20

even if I moved footer out section it will still show error