Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
I am creating the page for certificate 4- create a product landing page.

I passed all the tests except 2:

  1. Your #nav-bar should always be at the top of the viewport.

  2. Your Product Landing Page should use CSS Flexbox at least once.

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>Original Trumboms</title>
    <link rel="stylesheet" href="style.css">
      
  </head>

  <body>






    <header id="header">
      <nav id="nav-bar" >
        <img id="header-img" src="" alt="">
        <a id="nav-link1" class="nav-link" href="#section1"/ >
        <a id="nav-link2" class="nav-link" href="#section2"/ >
        <a id="nav-link3" class="nav-link" href="#section3"/ >
      <nav/>
    </header>
    <main>
      <section id="section1"></section>
      <section id="section2"></section> 
      <section id="section3"></section>

         

      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="Submit">
      </form>


       <video id="video" width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
          <video>

    </main>
  </body>
</html>

/* file: styles.css */
.nav-bar {
  position: fixed;
   top: 0px;
   width: 100%;
}​

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Here You are targeting an element with class ‘nav-bar’ but challenge is asking for element with ID nav-bar

//class 
.btn  {
margin: 0;
}

// id
#btn-download{
background-color: palegreen;
}
3
  • “dot” notation is used for “class” selector and “#” notation is used for “id” selector in css
4

Hi, both:
still dont work…

my current HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Original Trumboms</title>
    <link rel="stylesheet" href="style.css">
<header id="header">
    <nav id="nav-bar" >
        <img id="header-img" src="" alt="">
        <a id="nav-link1" class="nav-link" href="#section1"/ >
        <a id="nav-link2" class="nav-link" href="#section2"/ >
        <a id="nav-link3" class="nav-link" href="#section3"/ >
      <nav/>
      </header>
      
  </head>

  <body>



    
      
    
    <main>
      <section id="section1"></section>
      <section id="section2"></section> 
      <section id="section3"></section>

         

      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Give us your email"> </input>
        <input id="submit" type="submit" value="Submit">
      </form>


       <video id="video" width="320" height="240" controls>
          <source src="movie.mp4" type="video/mp4">
          Your browser does not support the video tag.
          <video>

    </main>
  </body>
</html>

my current CSS code:

#nav-bar{
  position: fixed;
  top: 0px;
}​
6

Found few typos

  1. it’s styles.css

  1. Try putting header inside the body

  2. nav is closed incorrectly

  1. links are closed incorrectly
  1. Your #video should have a src attribute.
7

hi that did the trick, thx!

8

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