Build a Product Landing Page - nr.23

HTML-CSS
1

everything is pass but this one doesn.t work " 23. Your #nav-bar should always be at the top of the viewport." even with position:fixed top:0
i don.t know why, please help !

2

we are unable to help you like this, you will need to share your code

3

how i can do this is my first time here

4

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5 
.nav-bar{
   position: fixed;
   top: 0px;
   width: 100%;​
}
6

that’s not enough to be able to debug your issue

8 
.header-logo{
  display: inline-block;
  width: 100px;
  margin-right: 100px;
}
.header{
  display: flex;
  align-items: space-between;
}

header{
  display:flex;
font-size: 30px;
font-style: sans-serif;

}

.nav-bar{
   position: fixed;
   top: 0px;
   width: 100%;​
}
.nav{
position:fixed;
top: 0;
}

p{
  display: flex;
  align-items: center;

}
@media only screen and (max-width: 600px) 
  .nav-bar{
position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.video{
  position:fixed;
}
li{
  display: inline-block;
top:0;
right:0;
}
9

That’s not an id selector. Also check it in the media query

10

i should use # ?[quote=“hasanzaib1389, post:9, topic:737674, full:true”]

That’s not an id selector. Also check it in the media query
[/quote]
I should use # ?

11

Of course, the test wants it.

12 
#

header-logo{
  display: inline-block;
  width: 100px;
  margin-right: 100px;
}
#header{
  display: flex;
  align-items: space-between;
}

header{
  display:flex;
font-size: 30px;
font-style: sans-serif;

}

#nav-bar{
   position: fixed;
   top: 0px;
   width: 100%;​
}
#nav{
position:fixed;
top: 0;
}

p{
  display: flex;
  align-items: center;

}
@media only screen and (max-width: 600px) 
  #nav-bar{
position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}

.video{
  position:fixed;
}
li{
  display: inline-block;
top:0;
right:0;
}
i did it but it's still the same x at 23 , i should sent html code ?
13

Yeah, check your html as well.

14 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="wievport" content="device=device-width ,initial-scale=1.0" >
    <header id="header">Luxury Watches</header>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <section id="header">
      <div class="header">
      <img id="header-img" class="header-logo" 
    alt="logo-luxurywatches"  src="https://thumbs.dreamstime.com/b/simple-flat-golden-crown-symbol-luxury-high-quality-icon-logo-jewelry-maker-luxurious-watch-vector-graphic-design-183475557.jpg" width="100px">

      <div class="title-header">
      <header id="header">Luxury Watches</header>
      </div>
      
      <div class="nav">
      <nav  id="nav-bar" class="nav-bar" name="nav-bar">
        <ul class="nav-bar">
        <li><a class="nav-link" href="#main">About us</a></li>
      <li><a class="nav-link" href="#form">Join US</a></li>
        <li><a class="nav-link" href="#video">Video</a></li>
      </nav>
      </div>
    </section>
<HR></HR>

      <main id="main">
      <P class="text1"> The luxury is on your wrist</p>
      <p class="text2"> 50% OFF NOW !!! JUST USE YOUR E-mail !!! </p>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" type="email" 
name="email"      placeholder="You're email address">
      <input id="submit" type="submit">JOIN US!
      </form>
      <video width="400" height="300" controls id="video" src="https://www.youtube.com/watch?v=CMcv3d3PyNU" type="video/mp4">
  </video>
      </main>
  </body>
</html>
15

Remove that extra #.

The media query is missing opening and closing bracket also.

16

changed but still the same :frowning:

17

name and content attribute value are isn’t correct.

18

changed but still the same

19

Use that link to validate your code:

1 Like
20

what this site does ? Showing results for https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page - Nu Html Checker

21

That site highlights the errors in your html/css