Product Landing Page: Build a product landing page

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

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

I have browsed the forum and notice others have had the same issue but I dont understand the solved comments.

`<!DOCTYPE HTML>
<html>
  <head>
     <link rel="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scotties Socks</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
<header id="header">
  <h1>Scotties Socks</h1>
  
  <div class="gallery" class='flex-container'>
  <img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img>
  <img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'> </img>
  <img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img>
  <img id='header-img' src='https://www.corgisocks.com/cdn/shop/files/women-s-corgi-dog-cotton-socks-corgi-socks-4_963965ac-b5a8-43df-b379-7ec855a062ea.jpg?v=1706536777'alt='corgi_socks'></img> 
  </div>
  <nav id="nav-bar">
    <ul>
    <li><a class="nav-link" href="#Scotties_Socks">Scotties Socks</a></li>
    <li><a class="nav-link"id='education' href="#education">Education</a></li>
    <li><a class='nav-link' id='offers' href='#offers'>The Offer</a></li></ul>
  </nav>
    </header>
    <main id='main-doc'>
      <title>Scotties Socks</title>
          <section id="Scotties_Socks">
        <h1>The socks</h1>
        <p>Scotties Socks where designed to be completely the same as any other pair of socks, exept we "solely" use the image of the Scottie dog. We pride ourselves on being highly detailed to provied the best product available.</p>
        <h1>Education</h1>
        <p>We offer guidance of on how to care for and train your Scottie dog.</p>
        <h1>The Offer</h1>
        <p>Our subscription offers help get YOU the customer the best value for money. Our sponsors understand that most of Scotties Socks customers have some sort of ties to the best dog around so are able to offer exclusive prices for YOU.</p>
        </section>
        <video id="video" src="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=video&cd=&cad=rja&uact=8&ved=2ahUKEwiIipf-1ZmFAxWkQEEAHVLjAF0QtwJ6BAgPEAI&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3Db8nnplEkdH0&usg=AOvVaw2KHNi2vRrHMORDSFwE6-9y&opi=89978449"></video>
        <h1>Subcribe to our newsletter</h1>
        <p>Subscribing to our news letter brings the latest and greatest offers to you inbox!
        <div class='email'>
          <form id='form' action='https://www.freecodecamp.com/email-submit'>
      <input id ="email" name="email" type="email" placeholder="Email">
          <input id="submit" type="submit">
          </div>
 </main>     
  </body>`
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
header {
  position: fixed;
  z-index: 1;
  width: auto;
}
h1 {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid red;
}
header img {
  width: 70px;
  height: 60px;
  left: 20rem;
}
body {
  margin: 10;
  font-family: sans-serif;
  background: #f5f6f7;
  position: relative;
}
.gallery {
  display: flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 200px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}
.gallery img {
  width: 20%;
  max-width: 350px;
  height: 100px;
  object-fit: cover;
  border-radius: 50px;
}
.email {
  text-align: center;
}


Could someone have a look at my Code and point me in the right direction please. and on a side note, do you know how I fix my header and page scrolling, although that part passes the test it does look/work right.

1 Like

you should have this only once, why do you have it twice? That’s confusing the tests.

it’s display: flex

I just noticed I missed my media query out of it, I have been stuck for nearly a week and have no idea on the amount of changes I’ve made.

Thank you SO MUCH! =)

Hi there! In addition to @ilenia’s comments:

<div class="gallery" class='flex-container'>

  1. Check how to add multiple classes properly in “Multiple Classes” section:
    HTML Classes - The Class Attribute

  2. Note, img tag is self-closing tag

  3. And how to do a media query:
    CSS Media Queries

  4. You can NOT have more than one <title> element in an HTML document

Thank you, I will check them out, along with the top navigation bar, although it passed the test it doesn’t sit right when viewing the page.

1 Like