Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

Your code so far

 /* css reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.5;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

#header {
  display: flex;
}

#nav-bar {
  position: fixed;
  top: 0px;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
}
/*
@media only screen and (max-width:600px){
#nav-bar ul {
  display: flex;
}

#nav-bar ul li {
  padding: 1rem 2rem;
}

#nav-bar ul li a {
  color: #333;
  font-size: 1.2rem;
}     } */

/* UTILITY CLASSES */
#container {
  max-width: 960px;
  margin: 2rem auto 0;
  overflow: hidden;
}

.logo {
  width: 300px;
  cursor: pointer;
}

@media (min-width: 1200px) {
  body {
      background-color: rgb(255, 255, 255);
  }
}

.btn {
  display: inline-block;
  padding: 0.4rem 1.5rem;
  color: #333;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #f1c40f;
}

.nav-link {
    float: left;
    display: block;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}


.message-box {
  margin: 1.5rem;
  padding: 0.8rem;
  text-align: center;
}

.message-box h1 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.message-box input {
  display: block;
  margin: auto;
  width: 30%;
  padding: 0.4rem;
  margin-bottom: 1rem;
}

#features {
  padding: 1rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
}

#features .feature {
  display: flex;
  justify-self: center;
  align-items: center;
}

#features .feature i {
  color: #ff8c00;
}

#features .feature div {
  padding: 1rem;
  margin-left: 3rem;
}

#features .feature div h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#how-it-work {
  padding: 3rem;
  margin: auto;
  text-align: center;
}

#how-it-work #video {
  width: 600px;
  height: 340px;
}

#pricing {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 0.2rem;
}

.price-box {
  border: solid #333 3px;
  border-radius: 2px;
  text-align: center;
}

.price-box:first-child {
  margin-right: 1.2rem;
}

.price-box:last-child {
  margin-left: 1.2rem;
}

.price-box h3 {
  background-color: #ddd;
  font-size: 1.05rem;
  padding: 1rem;
}

.price-box h2 {
  padding: 1rem;
}

.price-box p {
  padding: 0 4rem 1rem;
}

.price-box .btn {
  display: inline-block;
  margin: 1rem;
}

/* FOOTER */
#main-footer {
  background-color: #ccc;
  padding: 1rem 4rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}

#main-footer div a {
  color: #333;
  padding: 0.5rem 1rem;
}

#fcs {
  text-decoration: underline;
  color: #333;
}

/* TABLET AND SMARTPHONE */
@media only screen and (max-width: 800px) {
  #navbar {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0.3rem;
  }

  #navbar ul li {
    padding: 1rem 1rem;
  }

  #features .feature {
    flex-direction: column;
  }

  #features .feature div {
    padding: 1rem;
    margin: 0.5rem;
    text-align: center;
    margin-bottom: 2rem;
  }

  #how-it-work {
    padding: 1rem;
  }

  #how-it-work #video {
    width: 80%;
    height: 30%;
  }

  #pricing {
    flex-direction: column;
  }

  #pricing .price-box {
    margin: 1rem;
  }

  .price-box:first-child {
    margin-right: 0;
  }

  .price-box:last-child {
    margin-left: 0;
  }

  #main-footer {
    padding: 2.5rem 0.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #main-footer .my-name {
    margin: 1rem 0;
  }
}

this is my styles.css i think when i run the test it tells me this; * Failed:Your #nav-bar should always be at the top of the viewport.

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

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.
    This are the ones which i have not completed whta the issue in my code
    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.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

its telling me that that i ahve failed in this areas what is this area:

  • Failed:Your #nav-bar should always be at the top of the viewport.

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

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

Make sure the ID names match between the CSS and HTML.
The code snippet you provided contains some bugs and potential problems.

In the .price-box selector, you have margin properties set, but in the first and last elements rules (:first-child and :last-child), you try to override those margins by setting margin-right and margin- left to 0. Instead, you could simply remove those properties from the first and last elements.
The first error is an incorrectly formatted comment. You should use /* to open a comment and */ to close it.

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