Product Landing Page - Build a Product Landing Page

i’m stucked here, at the point i have to make my #nav-bar element go above my viewport

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
  <head lang="en">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css"></link>
<header id="header"><h1>Josh davis Footwear</h1>
  <img id="header-img" src="" tsrget="_blank" />
  <h3>Hand crafted bespoke shoes</h3>
   <nav id="nav-bar">
     <a class="nav-link" href="#header">facebook</a>
     <a class="nav-link" href="#header">instagram</a>
     <a class="nav-link" href="#header">whatsapp</a>
<form id="form" action="">
  <input id="email" placeholder="enter your email and proceed" type="email" name="email"/>
  <input id="submit" type="submit"  />
  <video id="video" src="" target="_blank"></video>
/* file: styles.css */
@media (max-width: 500px){body{font-size: 80%;}}
*{box-sizing: border-box;}
body{text-align: center; display: flex;}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

You’re going to need to use a lot of CSS to make the web page pretty. Do you remember how to force something to the top of a page (or anywhere on a page) using CSS?

Remember also, these projects are an opportunity to practice everything you’ve been learning. It’s not just about passing the minimum tests if possible.

1 Like

i’ve tried but can,t get it right

you can help me out right?

Here’s a hint: you’ll need to make use of position: sticky and possibly position: absolute

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