Responsive Web Design Projects - Build a Product Landing Page

HTML-CSS
1

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

I don’t get this: “Your #nav-bar should always be at the top of the viewport.”

   **Your code so far**

/* file: index.html */
<link rel="stylesheet" href="styles.css">
<body>
<header id="header"> 
 <img id="header-img" src="">
<div>
<nav id="nav-bar">
     <ul>
       <li><a href="" class="nav-link">Home</a></li>
       <li><a href="" class="nav-link">Contact</a></li>
       <li><a href="" class="nav-link">Donaciones</a></li>
     </ul>
   </nav>
   </div>
 </header>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7ezCt0xrrGU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
     <input id="email" placeholder="Email" type="email" name="email">
     <input id="submit" type="submit">
     </form>
     </body>

/* file: styles.css */
body{background: linear-gradient(yellow, orange, red)}
<style>
#nav-bar{}
.nav-link{}
ul{list-style-type: none;}
li{float: left;
padding: 16px;

}
</style>

   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

2

You don’t want to use HTML tags in the styles.css file. CSS syntax only.

Browser’s usually add a default margin to the body, so I would recommend you create a CSS rule that zeroes out the margin on the body.

Then, you need to use some sort of positioning to make sure the <nav> is always touching the top of the window.

3

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