Hello, I need help in creating a landing page

HTML-CSS
1

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

  **Your code so far**

/* file: index.html */
<header id="header">
<img id="header-img" src="" />
<svg class="tds-icon tds-icon-logo-wordmark tds-site-logo-icon" viewBox="0 0 342 35" xmlns="http://www.w3.org/2000/svg"><path d="M0 .1a9.7 9.7 0 007 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 007-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 006-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 00-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 13.8h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zm0 14.1h26a9.6 9.6 0 007.1-7H78.3a9.6 9.6 0 007 7zM308.5 7h26a9.6 9.6 0 007-7h-40a9.6 9.6 0 007 7z" fill="currentColor"></path></svg>
<nav id="nav-bar">
  <ul>
   <li><a class="nav-link" href="#models">Model S</li>
   <li><a class="nav-link" href="#model3">Model 3</li>
   <li><a class="nav-link" href="#modelx">Model X</li>
   <li><a class="nav-link" href="#modely">Model Y</li>
  </ul>

</nav>
</header>
<section id="models"><iframe id="video" width="280" height="220" src="https://www.youtube.com/embed/Tb_Wn6K0uVs" title="Model Y Unveil" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></section>
<section id="model3">Model 3</section>
<section id="modelx">Model X</section>
<section id="modely">Model Y</section>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="elon@tesla.com" type="email" name="email"></input>
<input id="submit" type="submit"></input>
</form>

/* file: styles.css */
svg {
width: 100px;
}
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
background-color: #cc0000;
color: white;
font-family: 'Exo 2', sans-serif;
padding: 1em;
}
}
ul {
display: flex;
}

  **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: Build a Product Landing Page

Link to the challenge:

2

It’s not the header that needs to be at the top of the viewport but rather the #nav-bar. Your #nav-bar is below the image in the header so it can’t possibly be at the top of the viewport.

3

@bbsmooth can you tell me what exactly i needed to do?

4

First, you need to make sure you link the stylesheet into your HTML.

“Note: Be sure to add <link rel="stylesheet" href="styles.css"> in your HTML to link your stylesheet and apply your CSS”

5

It worked! Thank you sir!

6

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