Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Good day guys, please I’ve been having some issues completing the product landing page. I’ve been stuck with three steps for weeks now and can’t seem to get it right (my code looks fine btw). I even had to copy the code project’s webpage code from dev-tools and tried submitting but it still says the same thing.
These are the steps i can’t seem to pass:

  1. Your #nav-bar should always be at the top of the viewport.
  2. Your Product Landing Page should use at least one media query.
  3. 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.

* {
  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 styling **/

.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;
  width: 100%;
}

@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;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

We will need you to paste your HTML in here as well. To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key.

Also, is this CSS in the styles.css editor? Or are you including it in the HTML editor using style tags?

3

Alright sir, thank you. I’ll add my HTML now and yes my stylesheet is linked to my HTML.

4

Omg, i just noticed what the problem was. I kept using “style.css” instead of “styles.css” ha ha, your response really helped me a lot :blush: :blush:.
Can’t believe this has been holding me back for weeks :expressionless: :expressionless:

5

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