Product landing page (query and flexbox)

Tell us what’s happening:
these are the two issues i am having

  • 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

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
<style>
  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  body {
    background-color: #eee;
    font-family: 'lato', sans-serif;
  }
  #page-wrapper{
    position: relative;
  }
  li {
  list-style: none;
}
a {
  color: #000;
  text-decoration: none;
}
.container {
  max-width: 1000px;
  width: 100%;
  margin: o auto;
}
.btn {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px black solid
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}
}

.grid {
  display: flex;
}

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

@media (max-width: 650px) {
  .logo > img {
    margin: 0 auto;
  }
}

nav {
  font-weight: 400;
}
@media (max-width: 650px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}
nav > ul {
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
@media (max-width: 650px) {
  nav > ul {
    flex-direction: column;
  }
}
#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}
#hero > h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
}
#hero input[type='email'] {
  max-width: 275px;
  width: 100%;
  padding: 5px;
}
#hero input[type='submit'] {
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}
#hero input[type='submit']:hover {
  background-color: green;
  transition: background-color 1s;
}
@media (max-width: 650px) {
  #hero {
    margin-top: 120px;
  }
}

#features {
  margin-top: 30px;
}
#features .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: red;
}
@media (max-width: 550px) {
  #features .icon {
    display: none;
  }
}
#features .desc {
  display: flex;
  flex-direction: column;
  justify-content: left;
  height: 125px;
  width: 80vw;
  padding: 5px;
}
@media (max-width: 550px) {
  #features .desc {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 150px;
  }
}
@media (max-width: 650px) {
  #features {
    margin-top: 0;
  }
}
#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
#how-it-works > iframe {
  max-width: 560px;
  width: 100%;
}

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: calc(100% / 3);
  margin: 10px;
  border: 1px solid blue;
  border-radius: 3px;
}
.product > .level {
  background-color: lightblue;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}
.product > h2 {
  margin-top: 15px;
}
.product > ol {
  margin: 15px 0;
}
.product > ol > li {
  padding: 5px 0;
}
.product > button {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
}
.product > button:hover {
  background-color: lightgreen;
  transition: background-color 1s;
}
@media (max-width: 800px) {
  #pricing {
    flex-direction: column;
  }
  .product {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
}
footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
}footer > ul {
  display: flex;
  justify-content: flex-end;
}
footer > ul > li {
  padding: 0 10px;
}
footer > span {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: #444;
}
  </style>
  </head>
  <body>
    <div id="page-wrapper">
      <header id="header">
        <div class="logo">
          <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
          </div>
          <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>
        <div class="container"></div>
        <section id="hero">
          <h2>Handcrafted, home-made masterpieces</h2>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input name="email" id="email" type="email" placeholder="Enter your email address" required="">
          <input id="submit" type="submit" value="Get Started" class="btn">
          </form>
      </section>
      <div class="container">
        <section id="features">
          <div class="grid">
            <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
            <div class="desc">
              <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="grid">
            <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
            <div class="desc">
              <h2>Fast Shipping</h2>
              <p>
                We make sure you recieve 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="grid">
            <div class="icon">
              <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
            </div>
            <div class="desc">
              <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>
          <section id="how-it-works">
            <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
            </section>
            <section id="pricing">
              <div class="product" id="tenor">
            <div class="level">Tenor Trombone</div>
            <h2>$600</h2>
            <ol>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ol>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="bass">
            <div class="level">Bass Trombone</div>
            <h2>$900</h2>
            <ol>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum.</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ol>
            <button class="btn">Select</button>
          </div>
          <div class="product" id="valve">
            <div class="level">Valve Trombone</div>
            <h2>$1200</h2>
            <ol>
              <li>Plays similar to a Trumpet</li>
              <li>Great for Jazz Bands</li>
              <li>Lorem ipsum dolor.</li>
              <li>Lorem ipsum.</li>
            </ol>
            <button class="btn">Select</button>
          </div>
        </section>
        <footer>
          <ul>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
          <span>Copyright 2016, Original Trombones</span>
          </footer>
      </div>
    </div>
</body>
</html>





Your browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

Hi @vinx , and welcome to the forum!

The tests are expecting to find your css code in the “styles.css” file.

So

  • move your css (without the style tags) into the styles.css tab (at the top of the page, next to index.html)
  • and then remove the style tags from your html
1 Like

I’m sorry, I don’t understand your question.

You should have removed the style tags from your html after your css code was moved to styles.css.

1 Like

OMG, it was staring me in the face, thanks a lot
quick question, why did I have to move my CSS style tag to the top of the index.html?

<style>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
...........
</style> 

this was just the bit lol

yeah, I am really a novice in this but managed to apply your response as I understand and it worked, really falling in love with it now :blush:, thanks amillion