Product Landing Page - Build a Product Landing Page

[akhtartaiba721]

Hi there,

I’m a bit stuck as to how to implement the @media rule for my header by changing the color and how to use the flexbox. I understand that the @media is used to apply different styles to a website but i dont understand how would I go about using one

Thanks

   **Your code so far**

/* file: index.html */

<link rel="stylesheet" href="styles.css">
<header id="header"


</header>
<nav id="nav-bar">
<a class="nav-link" href="#header">header</a>
<a class="nav-link" href="#footer">footer</a>
<a class="nav-link"  href="#menu">menu</a>

</nav>
<footer id="footer"</footer>
<menu id="menu"></menu>
<img id="header-img" src="https"></img>
<style>
header {
 position: fixed;
 top: 0px;
} 

<style>
@media screen and (max-width:400px){
 header{
   color: blue;
 }
}

</style> 

<video id="video" src="https"</video>
<form id="form" action="https://www.freecodecamp.com/email-submit"</form>
<input id="email" name="email" placeholder="bghdhd" type="email"</input>

<input id="submit" type="submit"></input>

<style>

/* file: styles.css */

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

Link to the challenge:

freeCodeCamp.org

[lasjorg]

• You should validate your HTML.

• Put the CSS inside the code panel you get by clicking the styles.css button and remember to link to it. Then remove the CSS from the HTML.

• The starting header tag isn’t closed correctly and it has no content so changing the color won’t really do anything (visibly anyway).

• A fairly common use of flexbox would be for the nav.