Help with Challenge 13

HTML-CSS
1

I’m on the product landing challenge story #13. I’ve added so many things to the code that it looks like a mess. I’m not giving up. Hope someone can help me! :slight_smile:

or

HTML

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html>
<main>

  <header id="header">
  </header>
  <div id="header">
      </div>

  <div id="header">
  <nav id="nav-bar" class="navbar">

  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#about">About<span class="sr-only"></span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#genz">Generation Z</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#price">Price</a>
      </li>
    </ul>
  </div>
</nav>


  <div id="header">
  <img id="header-img"  src="http://logolog.co/wp-content/uploads/2004/09/human-logo.gif" height="200px">
</div>
</header>
  <iframe id="video" width="350" height="200" src="https://www.youtube.com/embed/2J8bDkALBicautoplay=1mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"> 

  <h3 id="about">
About
    </h3>
<p> Humans have been around for the past 2.5 billion years, and Human&#174 constantly strives to bring you the latest version of our product. </p>
<h3 id="genz"> Generation Z</h3>
<p>Order our latest Human! Now with built-in Social Anxiety&#8482!
<h3 id="price">Price</h3>
<p> Starting at $3000 USD per year subscription for 18 years, before your Human becomes self sustaining! </p>
<br>
</main>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <div id="form">
   <label id="email-label" for="email">Get a quote today!</label>
   <br>
<input id="email"
type="email"
name="email"
required
placeholder="Insert Email">
</div>
<div id="form">
  <input id="submit" type="submit">
   
  </input>

  </form>
  <footer id="footer">
<h1>Copyright 250000000AD, Human Corporation</h1>
    </footer>

CSS

.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  flex: center;
}

.navbar {  
  background: black;
  color: 999999;
text-align: start;
width: 100%;
height: 140px;
position: fixed;
left: 0;
right: 0;
padding: 10px;

}

.navbar a {
display: flex;
height: 100%;
width: 100%;
top: 0%;
right: 0%;
font-size: 20px;

}


}

.iframe  {  
  flex: 1;  
}
@media (max-width: 600px) {  
    
  .iframe {  
    flex-wrap: wrap;  
  }  
    
  .container > li {  
    flex-basis: 50%;  
  }

}
.nav-link {
  background-color: white;
  border: none;
  color: black;
  padding: 40px 40px;
  font-size: 20px;
}

@media only screen and (max-width: 600px) {
  body {
    background-color: white;
  }
}
2

Hi!

Please copy and paste your code. It is hard to help without seeing it.
Make sure you format it by highlighting and pressing this button </>. It will format it and make it easily readable.

1 Like
3

Thank you so much! The code is going to be a pain to read… I’ve tried so many things and I’m just adding too much at this point. Added index-z at a certain point but I don’t think that that’s the solution…

1 Like
4

Okay now I can see your code…

  1. You have multiple

    ’s. You can only use an ID element once in a html document. Some are completely redundant as they contain nothing and I’d advise removing them.

  2. In your css you have a erroneous bracket on line 31.

  3. Please look into css flexibox further/again. It can help you format your navbar to arrange the links in a row. Here is the W3 page on it.

  4. Check your color value in .navbar. The value is not valid.

  5. You should set the ul to display ‘none’. It will look better if there are not bullet points on the menu.

Hope this helps!

5

Hi Ella

But the challenge clearly asks for different IDs, like header ID, nav-bar ID and header-img ID. I’m so confused…

6

Ah right, I think I could have explained better. What I mean is you can only have one ID element of each name.

For example if you do this,


<header id="blue"></header>

You can’t use the id of “blue” again in the web page.

Here you’ve used the id of header multiple times.

<header id="header">
  </header>
  <div id="header">
      </div>

  <div id="header">

The challenge only asks for you to use the id header once.

The header elements are also empty, and the challenge asks you to put an image with id=“header-img” among other things inside the header element with the id of “header”.

Does that help?

7

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