Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Just like everyone else, I’m having a problem with the last two steps on the project. I’ve checked and checked and checked, and do not see where I messed up. I need at least one media query, and to use Flexbox at least once. I know I struggle with Flexbox, so any help you can offer would be appreciated.
Your code so far

<!-- file: index.html -->
<!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>Apple Seed</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="flex-container">
      <header id="header">Apple Seed
        <nav id="nav-bar">
      <img id="header-img" src="https://photos.google.com/search/_m8_Favorites/photo/AF1QipMwDTudcVob5IPLs7gehNNGPPRHL2ONcsz2kBKk"></img>
       <ul>
        <li>
          <a class="nav-link" href="#Apple_Seed">Apple Seed</a>
        </li>
        <li>
          <a class="nav-link" href="#Education">Education</a>
        </li>
        <li>
          <a class="nav-link" href="#Offers">Offers</a>
        </li>
        </ul>
      </nav>
      </header>
      <main id="main-doc">
        <title>Apple Seed</title>

        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <label>
          <input id ="email" name="email" type="email" placeholder="Email">
          <input id="submit" type="submit">
        </form>
        <section id="apple_seed">
        <h1>Apple Seed</h1>
        <p>Apple Seed was designed to be completely different than other financial education apps and software. We pride ourselves on being highly detailed to track your spending. Your financial goals are within your reach.</p>
        <h1>Education</h1>
        <p>We offer guidance of how to make your money work for you. What most people don't understand is that money is tool. And like any tool, it has a specific purpose; using it outside of its intentions causes damamge. We teach people how to get the most use of their money.</p>
        <h1>Offers</h1>
        <p>Our credit card and store card offers help keep costs low for you. Our sponsors understand that most of Apple Seed's participants undergo financial training before being accepted.The offers aren't intented for you to apply for, but apply yourself towards.</p>
        </section>
        <video id="video" src="https://www.youtube.com/watch?v=Ig9AVFPHakI&ab_channel=ChristCenteredIronworks"></video>
        <section id="Apple_Seed"></section>
        <section id="Education"></section>
        <section id="Offers"></section>

      </main>
      </div>
  </body>

/* file: styles.css */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: indigo;
  padding: 1em;
  color: #fff
}
img {
  position: fixed;
  width: 40px;
  height: 30px;
  left: 18rem;
}
body {
  font-family: verdana, tahoma;
  position: relative;
  width: 100%;
  top: 25rem;
}
#submit {
  background-color: limegreen;
}

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

.flex-container {
  display: flex;
}

h1 {
  font-family: Trebuchet MS, Segoe UI;
  text-align: center;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

So there is something weird going on. I havent fully looked at the code yet, but I noticed with your current code after I hit the submit 4 times in a row the code actually passed

2 Likes
3

Excuse me?? Come again??

4

image
image1127×772 27.5 KB

I didnt make any changes. I just hit the submit button 4-5 times after I pasted in your code

2 Likes
5

The only issue I can really see is this

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

.flex-container {
  display: flex;
}

You want your media to be at the very end of your css after all the normal styles are complete. Here you go to a media query, and then back to normal styling. You want that flex-container before the flex-wrap, but thats all I can really see. Like I said, its passing for me when I submit a few times. Even if I refresh its passing on the first click, but not all the time

6

I’ve refreshed the page, closed the browser, and it’s still not working for me. I even updated the position of the media query to the end of my CSS, but I’m getting the same errors. Should I just move on and come back??

7

One thing you can try is if you have any extensions running be sure to disable them when you submit the challenge, and then if that doesnt work you can try submitting the challenge in a different browser

2 Likes
8

I’ve noticed that you have two style sheets linked in the head of the document.

1 Like
9

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