Responsive Web Design Projects - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
i could not understand the idea of “Your Product Landing Page should use CSS Flexbox at least once”. i tried to put some “

” but it did not work. Can anybody explain how to do it?
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <header id="header">
    <nav id="nav-bar">
      <li><a href="#header-img" class="nav-link">header-img</li>
      <li><a href="#video" class="nav-link">video</li>
      <li><a href="#form" class="nav-link">form</li>
    </nav>
    <img id="header-img" src=""></img>
    </header>
  <head> 
    <meta  charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0/>
    <link rel="stylesheet" href="styles.css">
    </head>
    <img id="header-img" src=""></img>
    </header>
    <iframe id="video" src=""></iframe>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <input id="email" placeholder="text" type="email" name="email" ></input>
      <input id="submit" src="https://www.freecodecamp.com/email-submit" type="submit"></input>
    </form>
<div class="container">
        <section id="features">
          <div class="grid">
            </div>
<style>
  @media {position: fixed;}
  #nav-bar{position:fixed;}
  </style>
  


/* file: styles.css */

#nav-bar{position:fixed;}

Your browser information:

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

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

Link to the challenge:

2

Review the curriculum to learn about this here

1 Like
3

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