Product Landing Page - Build a Product Landing Page

I have checked all posts already on this topic, but couldn’t figure it out what’s wrong with my code. I keep getting the errors:

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

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

Thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width-device-width initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Gabby's Product Landing Page</title>
    <link rel="stylesheet" href="styles.css" />
    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>

<body>
  <header id="header">
    <img id="header-img"
      src="https://s3.amazonaws.com/freecodecamp/original_trombones.png"  
      width="300" 
      height="50">
    <nav id="nav-bar">
          <ul>
            <li><a class="nav-link" href="#features">Features</a></li>
            <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
            <li><a class="nav-link" href="#pricing" >Pricing</a></li>
          </ul>
    </nav>
  </header>

<main>
  <div id="top-container">
      <h1>Handcrafted, home-made masterpieces</h1>
      <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
       <input 
          id="email"
          type="email" 
          required 
          placeholder="Enter your email address"
          name="email"
        >
        <input type="submit" 
          id="submit" 
          type="submit"
          value="GET STARTED">
      </form>
  </div>

  <div class="middle-container">
    <section id="features">
      
      <div class="feature">
        <div class="icon">
        <i class="ri-fire-fill ri-3x icon"></i>
        </div>
        <div>
          <h2>Premium Materials</h2>
          <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
      </div>
    
    
      <div class="feature">
        <div class="icon">
        <i class="ri-truck-fill ri-3x icon"></i>
        </div>
        <div>
          <h2>Fast Shipping</h2>
          <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
        </div>
      </div>

     <div class="feature">
      <div class="icon">
        <i class="ri-battery-fill ri-3x icon"></i>
      </div>
        <div>
          <h2>Quality Assurance</h2>
          <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
        </div>
     </div>
  </section>
  </div>

 <section id="how-it-works">
  <iframe 
  id="video"
    height="400" 
    src="https://www.youtube.com/embed/y8Yv4pnO7qc?si=7s6E3V-vwUPQSWaA" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen>
  </iframe>
</section>

<section id="pricing">
      <div class="products" id="tenor">
        <div class="level">Tenor Trombone</div>
        <h2 class="price">$600</h2>
        <ul>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum dolor.</li>
          <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
      </div>

    <div class="products" id="bass">
      <div class="level">Bass Trombone</div>
        <h2 class="price">$900</h2>
        <ul>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum doolor.</li>
          <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
      </div>
    <div class="products" id="valve">
      <div class="level">Valve Trombone</div>
        <h2 class="price">$1200</h2>
        <ul>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum.</li>
          <li>Lorem ipsum dolor.</li>
          <li>Lorem ipsum.</li>
        </ul>
        <button class="btn">SELECT</button>
    </div>
</section>
</main>

<footer>
  <ul>
    <li><a href="#">Privacy</a></li>
    <li><a href="#">Terms</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <p id="copyright">Copyright 2023, Original Trombones</p>
</footer>
</body>
</html>

body {
    background: #EEEEEE;
}

#nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #EEEEEE;
}

main {
    margin-top: 70px;
}

#nav-bar a {
    text-decoration: none;
    float: right;
    padding: 10px 40px;
    color: black;
    font-family: sans-serif;
}

#nav-bar ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

#header-img {
    padding-top: 10px;
    padding-left: 20px;
}

#top-container, #how-it-works {
    text-align: center;
}

input {
    display: block;
    margin: auto;
    margin-bottom: 10px;
}

#email {
    width: 20%;
}

#submit {
    padding: 5px 15px;
    background-color: #F1C545;
    border: none;
    font-weight: bold;
}

.icon {
    color: orange;
    margin-right: 30px;
}

#middle-container {
    text-align: left;
    max-width: 800px;
    margin: auto;
}

.feature {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    font-family: sans-serif;
}

#video {
    width: 100%;
}

#bottom-container {
    display: flex;
    align-items: center;
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
}

#bottom-container li {
    list-style: none;
    padding-bottom: 10px;
}

#pricing {
    display: flex;
    justify-content: space-around;
}

#tenor {
    border: 1px solid black;
    padding: 15px 35px;
}

#bass {
    border: 1px solid black;
    padding: 15px 35px;
}

#valve {
    border: 1px solid black;
    padding-top: 15px;
    padding-right: 20px;
}

.products > .level {
    background-color: #DDDDDD;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px;
}

.btn {
    background-color: #F1C545;
    border: none;
    padding: 10px;
}

footer {
    background-color: #DDDDDD;
    display: flex;
    align-items: right;
    justify-content: flex-end;
    margin: 20px;
    font-family: sans-serif;
}

footer a {
    text-decoration: none;
    display: flex;
    align-items: right;
    justify-content: flex;
    padding-right: 40px;
    color: black;
    margin-bottom: 0;
}

footer ul {
    list-style: none;
    display: flex;
    justify-content: flex-end;
}

footer p {
    text-align: right;
    padding-right: 15px;
    padding-bottom: 20px;
    display: flex;
}

@media (max-width: 550px) {
  #header-img {
    display: none;
  }
}

@media (max-width: 550px) {
  #features {
    margin: 0 0 0 -2rem;
  }
}

Welcome to the FCC Forum!

Please use the Ask for Help and use the < /> to submit all of both your html and css code for us to help you find the issue and guide you?
Or you could use ``` three backticks before and after the codes for us.

Happy coding!

we can’t help you unless we see your code.
copy-paste it here.

btw. did you follow that NOTE in the end and connected your stylesheet with HTML. that’s usually main overlook in cases like these, if you wrote css and it’s not applying

‘’’

Gabby's Product Landing Page

Handcrafted, home-made masterpieces

  <div class="feature">
    <div class="icon">
    <i class="ri-fire-fill ri-3x icon"></i>
    </div>
    <div>
      <h2>Premium Materials</h2>
      <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    </div>
  </div>


  <div class="feature">
    <div class="icon">
    <i class="ri-truck-fill ri-3x icon"></i>
    </div>
    <div>
      <h2>Fast Shipping</h2>
      <p>We make sure you receive your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
    </div>
  </div>

 <div class="feature">
  <div class="icon">
    <i class="ri-battery-fill ri-3x icon"></i>
  </div>
    <div>
      <h2>Quality Assurance</h2>
      <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
    </div>
 </div>
Tenor Trombone

$600

  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum dolor.
  • Lorem ipsum.
SELECT
<div class="products" id="bass">
  <div class="level">Bass Trombone</div>
    <h2 class="price">$900</h2>
    <ul>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum doolor.</li>
      <li>Lorem ipsum.</li>
    </ul>
    <button class="btn">SELECT</button>
  </div>
<div class="products" id="valve">
  <div class="level">Valve Trombone</div>
    <h2 class="price">$1200</h2>
    <ul>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum.</li>
      <li>Lorem ipsum dolor.</li>
      <li>Lorem ipsum.</li>
    </ul>
    <button class="btn">SELECT</button>
</div>

Copyright 2023, Original Trombones

‘’’

i see none of relevant code. where is head of your document code?

where is css code? that is what they ask for. everything you pasted is in body, which has little to none relation with the task.

please see my original first post, I edited that one with all html and css code included

I am still having issues with the code, still showing the same two fail errors

I dont know what to tell you.
when I enter your code in FCC codepen and check it , it shows all tasks are filled correctly, so unsure why it wont let you pass.


these are your mistakes by w3c validator

@Cody_Biggs any thoughts on this?

You shouldnt have two links to your styles.css thats causing the challenge to fail

3 Likes

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