Responsive Web Design Projects - Build a Product Landing Page

HTML-CSS
1

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 */
<html>
 <head> 
   <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet" >
 <link href="https://fonts.googleapis.com/css?family=Kanit" rel="stylesheet" >
 </head>
 <body>
   <div class="background-img">
   <header id="header">
     <div>
       <img id="header-img" src="https://animecorner.me/wp-content/uploads/2021/08/anime_corner_logo_3.webp" alt="anime logo">
     </div>
     <div>
       <nav id="nav-bar">
         <ul>
           <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>
         </ul>
       </nav>
     </div>
   </header>
   
     <section id="anime-online">
     <h2><b>Subscribe us for weekly special!</b></h2>
   <form id="form" action="https://www.freecodecamp.com/email-submit">
     <input id="email" name="email" type="email" placeholder="Enter your email address" required>
     <input id="submit" type="submit">
   </form>
   <div>
   <iframe id="video" src="https://4anime.gg/home"></iframe>
   </section>
  
   <div id="anime-onsale">
       <h2>Find your favourite anime firgure online!</h2>
     <div id="amazon"><P><a href="https://www.amazon.com/s?k=anime&crid=2YBCUXW360XVG&sprefix=anim%2Caps%2C148&ref=nb_sb_noss_2">Amazon</a></p></div>
     <div id="ebay"><P><a href"https://www.ebay.com/sch/i.html?_from=R40&_trksid=p2380057.m570.l1313&_nkw=anime&_sacat=0">Ebay</a></P></div>
     <div id="other"><p><a href"https://www.google.com/search?q=anime&rlz=1C1RXQR_enUS975US975&sxsrf=ALiCzsYBTaLmxEFVlwNaRz0-ePqMos3etQ:1659385528177&source=lnms&tbm=shop&sa=X&ved=2ahUKEwju9s7nvKb5AhWZDkQIHT7fDaoQ_AUoAXoECAEQCw&biw=1920&bih=929&dpr=1">other on google</a></p></div>
   </div>
     <div>
       <section id="contact-us">
       <h3>Contact Us!<br/>
       Phone:123456<br/>
       Email:123456</h3><br/>
       <div>
         <textarea id="comment" name="comment" placeholder="Enter your suggestions here..." min="0" max="10"></textarea>
         </div><br/>
         </section>
         </div>
      <div>
        <button type="submit" id="submit">Submit</button>
     </div>
     </div>
     </div>
 
   
 </body>
 <footer>All sourses are from online</footer>
</html>

/* file: styles.css */
<style>
 body {
 font-family: Kinit, Rubik;
 font-size: 1.1em;

 }
 .background-img {
   position: flex;
   top:0;
   left:0;
   height: auto;
   width: 100%
   z-index: -10;
   zoom:1; 
   background: url(https://wallpapercave.com/wp/wp6795602.jpg);
   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;
 }

 }
  #anime-onsale{
   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; 
}

</style>

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

Link to the challenge:

2

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

3

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

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

No.2:
you need to remove this extra div around the navbar

that should help with test case 13.

No.3:
You have an extra curly brace here

No.4:
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:

4

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?

5

Here is a good article on what media queries are

6

thanks, I got it from the email too.

7

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