Product Landing Page - Build a Product Landing Page

How will be #nav-bar be on top of the viewport?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="vieport" content="width=device-width, initial-scale=1.0">
    <title>Product Landing Page</title>  
    <link href="styles.css" rel="stylesheet">
      <header id="header">
        <img id="header-img" class="img-header" src="">
        <nav id="nav-bar">
          <link class="nav-link" href="#nav-bar" rel="features">
          <link class="nav-link" href="#header-img" rel="How it works">
          <link class="nav-link" href="#header" rel="pricing">    

        <video id="video"width="240" height="80" control>
          <source src="" type="video/mp4">
          <source src="movie.ogg" type="video/ogg">

      <form id="form" action="">
        <input id="email" placeholder="enter your email" type="email" name="email">Email
        <input id="submit" type="submit" value="submit">


/* file: styles.css */
nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:


You need to use in your styles position and top

As we want nav to be at the top we will use 0 at the top. And so that it is always visible, we will give a fixed value to the position.


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