Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Hello, I’m currently doing the product landing page project, I know it doesn’t look that great. I’m just trying to process the points that are being checked, but now I’m not sure how to get the “navbar on top of the viewport”.
can you help me?

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" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <a class="nav-link" href="#part_1">Part1</a>
        <a class="nav-link" href="#part_2">Part2</a>
        <a class="nav-link" href="#part_3">Part3</a>
        </nav>
      <img id="header-img" src="https://img.pixers.pics/pho(s3:700/FO/57/40/61/46/700_FO57406146_9b1cfdc4a8121203468b01ef7ba5ab33.jpg,700,700,jpg)/lichtdurchlassige-fenstervorhange-feuer-alphabet-buchstaben-h.jpg.jpg" alt="Hier sollte ein Bild sein wo ist es????" >
    </header>  
    <h1 id="part_1">Part 1</h1>
    <h2 id="part_2">Part 2</h2>
    <h3 id="part_3">Part 3</h3>
    <iframe id="video" width="640" height="360" src="https://www.youtube.com/embed/e4FSbGVrLS8" title="Lord of The Weed HD Deutsch Komplett" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <form method="post" id="form" action="https://www.freecodecamp.com/email-submit">
      <fieldset>
        <label for="email">Enter your e-mail
      <input name="email" type="email"id="email" placeholder="your mail">
       </label>
       <input id="submit" type="submit" value="abschicken">
    </fieldset> 
    </form>  
  </body>  
 </html> 

/* file: styles.css */
@media only screen and (max-width:500px){}
.nav-bar{
top:1;
right:1;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi there!

You need to add position property to valuefixed and top to 0. Also change the selector to an id selector. Currently you have a class selector .nav-bar

3

Nice it works, now it stays on the top of the page all the time, thanks for your fast help!
But is it possible to put in the upper right corner?
At the moment it stays in the left corner all the time…
i know this is not part of the tested points, but i wanted to try this…

4

I have found it, i need to make right:0
:slight_smile:
Thanks for your help!!!

1 Like
5

Your can try it on right, left, and bottom also. But for passing the challenge you need to follow the instructions.

6

I have try left and right corner(for the challenge both works) but it looks better in the left corner.

7

Tell us what’s happening:

Hello everyone
I was able to complete the product landing page (I’m only doing the points asked because I’m just not that creative and don’t have the patience to spend ages trying out whether everything is in the right place) but now I still wanted to change the look of the page a bit optimize, unfortunately the length and width attributes for the image don’t work even if I remove flexbox
Can someone explain to me why this is the case?

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" />
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <a class="nav-link" href="#part_1">Part1</a>
        <a class="nav-link" href="#part_2">Part2</a>
        <a class="nav-link" href="#part_3">Part3</a>
        </nav>
      <img id="header-img" src="https://img.pixers.pics/pho(s3:700/FO/57/40/61/46/700_FO57406146_9b1cfdc4a8121203468b01ef7ba5ab33.jpg,700,700,jpg)/lichtdurchlassige-fenstervorhange-feuer-alphabet-buchstaben-h.jpg.jpg" alt="Hier sollte ein Bild sein wo ist es????" >
    </header>  
    <h1 id="part_1">Part 1</h1>
    <h2 id="part_2">Part 2</h2>
    <h3 id="part_3">Part 3</h3>
    <iframe id="video" width="640" height="360" src="https://www.youtube.com/embed/e4FSbGVrLS8" title="Lord of The Weed HD Deutsch Komplett" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <form method="post" id="form" action="https://www.freecodecamp.com/email-submit">
      <fieldset>
        <label for="email">Enter your e-mail
      <input name="email" type="email"id="email" placeholder="your mail">
       </label>
       <input id="submit" type="submit" value="abschicken">
    </fieldset> 
    </form>  
  </body>  
 </html> 

/* file: styles.css */
@media only screen and (max-width:500px){}
#nav-bar{
  position:fixed;
top:0;
left:0;
}
.header-img{
height:10px;
width:20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

8

I’ve found the problem it was the selector :slight_smile:

1 Like
9

this is cheating, there should be something inside this media query

but to answer your question

the image does not have a class of header-img, it has an id, so you need to use an id selector

10

Yes i know. i just wanted to finish the Tasks. I’m not the Cretaiv one so i never know what to do with css…

11

Hi there!

Are you didn’t learned the CSS in previous challenge’s?

12

Of course I learned the basics of CSS in the exercises, but I’m just not that creative, so I often don’t really know what I should change. If a code fulfills its function, then that’s fine with me.

13

By the way, you need try it, that you learned in the previous challenge’s.

14

Yes, I know that, the best way to gain experience is to try it out yourself in a script. I’m often so stressed (for no reason) that I want to learn the advanced stuff straight away, but that doesn’t work if I don’t know the basics, that’s clear to me…
I’ve changed the code a little so that the media query has a function and I’ve also added a flexbox so that all the points of the task are completed.

@media only screen and (max-width:500px){max-width: 1024px}

#nav-bar{

position:fixed;

top:0;

left:0;

}

#header-img{

height:200px;

width:250px;

margin-top:10px;

}

img{

display:flex;

}

1 Like
15

To be honest, I didn’t fully understand the media queries, maybe I should repeat the exercise again and I also didn’t do the last 3 exercises on HTML and CSS. Maybe I should do those first.

16

Yes exactly, you need to do it one after another. And repeat practice it for better understanding.