My project "Product Landing Page."

[ertanceka]

If someone need a hint or example of project " Build a Product Landing Page " from FCC
Here is my try

New Lexus

Will be happy if helps someone!
Or for any suggestions to improve or fix something on the page.
Happy coding!

[Dark_Haze]

can someone please help me with the grid of the images, I want to put them in a row but it doesn’t seem to work, guess I’m not doing something right.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome.min.css">

<div class="page-header">
         <header id="header">
     <div>
           <img class="logo" 
         id="header-img"
         src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/230_Nike_logo-512.png" alt="Nike logo"/>
           </div>
          
        <nav id="nav-bar">
             <ul>
               <li><a href="#email" class="nav-link">Email</a></li>
               
               <li><a href="#video" class="nav-link">Video</a></li>
              
   
               <li><a href="#shoe" class="nav-link">Shoes</a></li>
               </nav>
             </header>
            
             
        <section class="home">
          <p> Would you like to know more? </p>
          <div id="#email">
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input id="email"
                   type="email"
                   name="email"
                   placeholder="Enter your email" required/>
            <input id="submit"
                   type="submit"
                   name="submit"
                   value="Send"/>
          </form>
          </div>
             </section>
             
      <section class="just-do-it">
               <div id="#video">
    <iframe class="greatness"
                 id="video"
                 height="315" src="https://www.youtube.com/embed/WA4dDs0T7sM?rel=0&amp;controls=0&amp;showinfo=0"                       frameborder="0"                       allowfullscreen
                       ></iframe>
               </div>
             </section>
             
        <section class="foot">
           <div tabindex="1"  id="#shoe">
             <div class="legs">
               <img id="shoe"
    src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/s6dp2gck3oukxj9csz5y/air-max-270-mens-shoe-KkLcGR.png" alt="Air Max"/>
             <ol><a href="https://www.nike.com/t/air-max-270-mens-shoe-KkLcGR/DJ5136-001"> Best Seller </a>
               <li><strong> Nike Air Max 270 </strong></li>
               <li> Men's Shoe </li></ol>
             </div>
             <div tabindex="2" class="legs">
               <img id="shoe"
                    src="https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/2829398b-23d0-4e88-aef8-e18606d36419/zion-1-basketball-shoe-bJ0hLJ.png" alt="Air Jordan"/>
             <ol><a href="https://www.nike.com/t/zion-1-basketball-shoe-bJ0hLJ/DA3130-400"> Best Seller</a>
               <li><strong> Zion 1 </strong></li>
               <li> Basketball Shoe</li></ol>
            </div>
          <div tabindex="3" class="legs">
               <img id="shoe"
                    src="https://static.nike.com/a/images/t_PDP_864_v1/f_auto,b_rgb:f5f5f5/f094af40-f82f-4fb9-a246-e031bf6fc411/air-force-1-07-womens-shoe-GCkPzr.png"
                    alt="Air Force"/>
             <ol><a href="https://www.nike.com/t/air-force-1-07-mens-shoe-5QFp5Z/CW2288-001">Best Seller</a>
               <li><strong> Nike Air Force 1 '07</strong> </li>
               <li> Men's Shoe </li> </ol>
             </div>
              
          </div>
             </section>
                   
      <div <hr  class="footer">
       <footer id="link-org">
         Like to know more? check it out on <a href="https://www.nike.com/">Nike</footer>
         </div>
           </div>

body{
  
}

#header{
  position: fixed;
  width: 97.5%;
  margin-top: -20px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #87b1fa;
  margin-bottom: 10px;
}
@media(max-width: 600px){
  header{
    flex-wrap: wrap;
  }
}
.logo{
  position: relative;
  max-width: 10%;
 
}
@media(max-width: 650px){
logo{
    display: flex;
}
}
.nav-link{
  color: black;
  text-decoration: none;
  font-family: georgia;
}
@media (max-width: 650px)
  
a:hover{
  color: blue;
}
ul{
  width: 35vw;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
@media(max-width: 600px){
  ul{
    flex-direction: column;
  }
}
li{
  display: inline;
  margin-top: 10px;
  padding-bottom: 5px;
}

.home{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
}
p{
  font-family: georgia;
  margin-top: 50px;
}
.home input[type=email]{
  max-width: 275px;
  width: 100%;
  padding: 5px;
}
.home input[type=submit]{
  margin: 15px 0;
  max-width: 100px;
  height: 30px;
  width: 100%;
  border-radius: 12px;
  background-color: #87fab3;
  font-family: monospace;
}
input[type=submit]:hover{
  background-color: #4CAF50;
  color: white;
  transition: 1s;
}
@media(max-width: 650px){
  home{
    margin-top: 120px;
  }
}
.just-do-it{
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
.greatness{
  max-width: 560px;
  width: 100%;
}
.foot{
  margin-top: 60px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.legs{
  width: calc(100% / 3);
  margin: 10px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#shoe{
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
ol{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
li{
  font-family: Helvetica, monospace;
  text-align: justify;
}
ol>a{
  text-decoration: none;
  color: #ff4500;
}
ol>a:hover{
  transition: 1s;
  color: 	#0000ff;
}
.footer{
  text-align: center;
  justify-content: center;
  margin-top: 30px;
}
footer>a{
  text-decoration: none;
  color: #ddd;
}
footer>a:hover{
  color: #da614e;
  transition: 1s;
}

[jwilkins.oboe]

Hi @Dark_Haze !

If you are having issues with a project, then I suggest you make a new post with your codepen link.

Thanks!