Product Landing Page - Build a Product Landing Page

HTML-CSS
1

my code doesnt work, i still get the nav-bar must stay at the top but when i do it on codepen fork it passes.

<body>
  <div id="page-wrapper">
  <header id="header">
    <div class="logo">
  <img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    
    </div> 
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</header>
  
  <section id="hero">
    <h2>Hancrafted masterpieces</h2>
    <!--this is the form to order products -->

<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email" 
         id="email" 
         name="email" 
         placeholder="enter email"
         required>
   <input id="submit" type="submit" value="Get Started" class="btn">
</form>
  </section>
  
  <!--this will be a container-->
   <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>Fast Shipping</h2>
           <p>We make sure you recive your amp                  as fast as possible with no        delays.  We provides 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 your amplifier.</p>
         </div>
       </div>
     </section>
     
     <section id="how-it-works">
       <video id="video" width="620" height="440" controls>
  <source src="https://marshalldotcom.blob.core.windows.net/assetrecovery/content/uploads/07d9e2c0-b2a9-4d54-b0d6-8e0d6cfda4c6.mp4?20210924124105" type="video/mp4">
 
Your browser does not support the video tag.
</video> 
     </section>
 <!--this is for the pricing section-->
     <section id="pricing">
       <div class="product" id="dsl">
         <div class="level">
           DSL
         </div>
         <h2>$600</h2>
         <ol>
          <li>Turn up the gain</li>
          <li>Play anywhere</li>
          <li>Stand out from the crowd</li>
         </ol>
         <button class="btn">Select</button>
       </div>
       
          <div class="product" id="original">
         <div class="level">
           ORIGINAL
         </div>
         <h2>$800</h2>
         <ol>
          <li>A little extra boost</li>
          <li>Tilt and control</li>
          <li>You have the power</li>
         </ol>
         <button class="btn">Select</button>
       </div>
 
     
        <div class="product" id="studio">
         <div class="level">
           STUDIO
         </div>
         <h2>$750</h2>
         <ol>
          <li>Studio classic</li>
          <li>Studio jubilee</li>
          <li>Studio vintage</li>
         </ol>
         <button class="btn">Select</button>
       </div>
     </section>
     <!--footer-->
     <footer>
       <ul>
         <li><a href="#">Terms</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
       <span>Copyright 2022, Marshall</span>
     </footer>
     </div>
  </div>
 </body>
</html>


@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

*{
  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;
}

/** global classes styleing **/

.container {
  max-width: 1000px;
  width: 100%;
  margin:0 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;
}

#header-img {
  height: 100px;
}

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

.logo {
  width: 6vw;
}

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

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

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

#nav-bar {
  position:fixed;
  top: 0px;
}

nav {
  display: block;
  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: 130px;
}

#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: orange;
  transition: background-color 1s;
}

@media (max-width: 650px) {
  #hero{
    margin-top: 120px;
  }
}

#features .icon {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}

@media (max-width: 550px) {
  #features.icon {
    display: none;
  }
}

#features .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  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 #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.product > h2 {
  margin-top: 15px;
}

.product > ol {
  margin: 15px;
}

.product > ol > li {
  padding: 5px 0;
}

.product > button {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
}

.product > button:hover {
  background-color: orange;
  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;
}
2

i have moved your post to its own topic.
Can you post a link to the challenge you need help with?

3

Responsive Web Design Projects: Build a Product Landing Page | freeCodeCamp.org

4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

5

ok Thank you for the info…

6

i just finished copying your code into the challenge, right now the navbar is not at the top of the viewport. There is an image above it?

7 
 <header id="header">
    <div class="logo">
  <img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">

The img tag is below the header tag

8 
  <div id="page-wrapper">
  <header id="header">
    <div class="logo">
  <img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    
    </div> 
  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</header>

Incase you need more code

9

but the location of the image is higher (what I mean is, when you look at the preview pane, you see the image is higher than the navbar)

10

Ok so is that an issue?

11

yes the challenge is expecting the navbar to be ‘at the top of the viewport’ which means we need to see that its position on the y-axis is right at the top with nothing above it.

12 
<body>
  <header id="header">
   <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
    </ul>
  </nav>
  <div id="page-wrapper">
 <img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="photo-ofmarshall-amp">
 </div>
 </header>

Ok heres what i changed but it still doesnt work.

13

for me to test it, I need the whole thing (it is hard to swap big subsections of code)

14 
<body>
  <header id="header">
   <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
    </ul>
  </nav>
  <div id="page-wrapper">
 <img id="header-img" src="https://images.pexels.com/photos/4153708/pexels-photo-4153708.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="photo-ofmarshall-amp">
 </div>
 </header>
    <div class="logo">
    </div> 
 

  
  <section id="hero">
    <h2>Hancrafted masterpieces</h2>
    <!--this is the form to order products -->

<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input type="email" 
         id="email" 
         name="email" 
         placeholder="enter email"
         required>
   <input id="submit" type="submit" value="Get Started" class="btn">
</form>
  </section>
  
  <!--this will be a container-->
   <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>Fast Shipping</h2>
           <p>We make sure you recive your amp                  as fast as possible with no        delays.  We provides 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 your amplifier.</p>
         </div>
       </div>
     </section>
     
     <section id="how-it-works">
       <video id="video" width="620" height="440" controls>
  <source src="https://marshalldotcom.blob.core.windows.net/assetrecovery/content/uploads/07d9e2c0-b2a9-4d54-b0d6-8e0d6cfda4c6.mp4?20210924124105" type="video/mp4">
 
Your browser does not support the video tag.
</video> 
     </section>
 <!--this is for the pricing section-->
     <section id="pricing">
       <div class="product" id="dsl">
         <div class="level">
           DSL
         </div>
         <h2>$600</h2>
         <ol>
          <li>Turn up the gain</li>
          <li>Play anywhere</li>
          <li>Stand out from the crowd</li>
         </ol>
         <button class="btn">Select</button>
       </div>
       
          <div class="product" id="original">
         <div class="level">
           ORIGINAL
         </div>
         <h2>$800</h2>
         <ol>
          <li>A little extra boost</li>
          <li>Tilt and control</li>
          <li>You have the power</li>
         </ol>
         <button class="btn">Select</button>
       </div>
 
     
        <div class="product" id="studio">
         <div class="level">
           STUDIO
         </div>
         <h2>$750</h2>
         <ol>
          <li>Studio classic</li>
          <li>Studio jubilee</li>
          <li>Studio vintage</li>
         </ol>
         <button class="btn">Select</button>
       </div>
     </section>
     <!--footer-->
     <footer>
       <ul>
         <li><a href="#">Terms</a></li>
         <li><a href="#">Contact</a></li>
       </ul>
       <span>Copyright 2022, Marshall</span>
     </footer>
     </div>
  </div>
 </body>
</html>

<style>
@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

*{
  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;
}

/** global classes styleing **/

.container {
  max-width: 1000px;
  width: 100%;
  margin:0 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;
}

#header-img {
  height: 100px;
}

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

.logo {
  width: 6vw;
}

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

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

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

#nav-bar {
  position:fixed;
  top: 0px;
}

nav {
  display: block;
  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: 130px;
}

#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: orange;
  transition: background-color 1s;
}

@media (max-width: 650px) {
  #hero{
    margin-top: 120px;
  }
}

#features .icon {
  display:flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}

@media (max-width: 550px) {
  #features.icon {
    display: none;
  }
}

#features .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  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 #000;
  border-radius: 3px;
}

.product > .level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

.product > h2 {
  margin-top: 15px;
}

.product > ol {
  margin: 15px;
}

.product > ol > li {
  padding: 5px 0;
}

.product > button {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
}

.product > button:hover {
  background-color: orange;
  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>

both html and css

15

i edited the post again to make it easier to copy the files.
But I noticed you have a stray <style> tag?
(i will remove the style tags from the css file on my end)

16

there are two style tags for the css code opening and closing

17

it seems that your body element is applying a margin to the top area so it is pushing the nav-bar down from the top.

So you should find all the css code that adds a margin to the body and make it give a 0 margin to the top.

18

because the css code is in a file styles.css, you should not be using <style> tags as that is not valid css code.

19

oh and I just noticed that you haven’t linked the stylesheet. So you will need to add a link tag as well to the head element.

20

i dont understand what you mean, using what tags?