Responsive Web Design Projects - Build a Product Landing Page

Tell us what’s happening:

  • Failed:Your #nav-bar should always be at the top of the viewport.

  • Failed:Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.

     **Your code so far**
/* file: index.html */
   <link rel="stylesheet" href="styles.css">
   <link href="" rel="stylesheet" >
 <link href="" rel="stylesheet" >
   <div class="background-img">
   <header id="header">
       <img id="header-img" src="" alt="anime logo">
       <nav id="nav-bar">
           <li> <a class="nav-link" href="#anime-online">Latest anime</a></li>
           <li> <a class="nav-link" href="#anime-onsale">Firgue sale</a></li>
           <li> <a class="nav-link" href="#contact-us">Contact Us</a></li>
     <section id="anime-online">
     <h2><b>Subscribe us for weekly special!</b></h2>
   <form id="form" action="">
     <input id="email" name="email" type="email" placeholder="Enter your email address" required>
     <input id="submit" type="submit">
   <iframe id="video" src=""></iframe>
   <div id="anime-onsale">
       <h2>Find your favourite anime firgure online!</h2>
     <div id="amazon"><P><a href="">Amazon</a></p></div>
     <div id="ebay"><P><a href"">Ebay</a></P></div>
     <div id="other"><p><a href"">other on google</a></p></div>
       <section id="contact-us">
       <h3>Contact Us!<br/>
         <textarea id="comment" name="comment" placeholder="Enter your suggestions here..." min="0" max="10"></textarea>
        <button type="submit" id="submit">Submit</button>
 <footer>All sourses are from online</footer>
/* file: styles.css */
 body {
 font-family: Kinit, Rubik;
 font-size: 1.1em;

 .background-img {
   position: flex;
   height: auto;
   width: 100%
   z-index: -10;
   background: url(;
   repeat: no-repeat;
   background-size: cover;
   background-positon: center;
 header img {
   width: 50%;

header #header-img {
 max-width: 100%;
 height: auto; 
 margin: 50 auto;
 header nav  {
   font-size: 25;
 header nav li {
   display: inline;
   margin-right: 20;
 header #nav-bar {
   position: fixed;
   top: 0;
   right: 0;

   display: flex;
   flex-direction: row;
   justify-content: center;
 #amazon {
   background: blue;
 #ebay {
   background: red;
 #other {
   background: yellow;

 #contact-us h3 {
  color: red;
  font-size: 40;
 #comment {
 width: 20em;
 height: 8em;
 font-size: 1.2em;
 #submit {
 width: 12em;
 height: 2em; 

   **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: Responsive Web Design Projects - Build a Product Landing Page

Link to the challenge:

All three fails I believe I already did what it asked for but still not passing, i’ve been frustrated for a week and still duno what to do. I will appreciate for all of you who would like to help me out, thanks

You have some errors in your html and css that are preventing you from passing.

You need to remove the style tags.
That is html and does not belong in your css.

you need to remove this extra div around the navbar

that should help with test case 13.

You have an extra curly brace here

You still need to add a media query because I don’t see that in your css.

You have a few other errors that I didn’t mention.
I suggest running your code through a css validator and html validator

Hope that helps! :slight_smile:

thank you for helping me out, I will fix that. Also, i thought i already add the media query, which a link to a video from a website, isnt it a media query?

Here is a good article on what media queries are

thanks, I got it from the email too.

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