Product Landing Page Test Fail

1

I’ve been working on my product landing page all day and I’ve managed to get to 14/16 but for the life of me, I can’t fix thelast two (#12&#14).

I can’t post links yet so I am unable to post the link to my code (or the code itself because it has links in it).

Can someone please help me. I’m at my wits end with this.

2

Hi there,
I completed this project just a day before.
For the 12th one you need to submit the form using form action ,

And for the 14th one you must use at least one media query, eg @media (max-width:800px;) { p{} } Hope this one works.
3

Thanks for your help.

That’s what I thought I had done, but I must have messed up somewhere because it just won’t work.

for #12 I had the code

and for my media query I had the code

@media only screen and (min-width: 800px){
#nav-bar{
display:none;
}
.video-page{
display: none;
}
}

but i just won’t work and it’s driving me crazy.

4

I have gone through this, but you can able to copy your code and paste here, so it will be more easy to identify the error line.
Or else you can create a free account in codepen save your code and paste the link here.

5

@rasheedawilson12 Does putting the link inside a code block Ctrl + Shift + C not let you post a link? I thought it did.

If not you can break the link by adding some spaces in the URL or replacing .io with (dot) io

codepen(dot)io / name /pen/id

6

Okay. I seperated the HTML from the CSS. Hopefully it isn’t too hard to read.

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<header id="header">
  <img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/American_Ballet_Theatre_logo.png/220px-American_Ballet_Theatre_logo.png">
       
       <nav id="nav-bar">
       <ul>
         <li> <a class="nav-link" href="#audition">Audition</a></li>
         <li> <a class="nav-link" href="#fall-season">Fall Season</a></li>
         <li> <a class="nav-link" href="#ballet-camp">Ballet Camp</a></li>
         <li> <a class="nav-link" href="#contact-us">Contact Us</a></li>
       </ul>
  </nav>
</header>

    <div class=video-page>
      <div>
     <h1>Soloist Hee Seo in The Nutcracker</h1>
 <iframe id="video" width="560" height="315" src= "https://www.youtube.com/embed/FbPUX8cWmeU">
  </iframe>
      </div>
</div>

  <form id="form" action=" https://www.freecodecamp.com/email-submit">
    <h1> Get More Information </h1>
    <label> Email address </label>
    <input type="email" id="email" placeholder="Email" required>
    </label>
    <input id="submit" type="submit"> </input>
</form>


<div class="audition" id=audition></div>
<div class="season" id=fall-season></div>
<div class="ballet-camp" id=ballet-camp><div>
<div class="contact us" id=contact-us></div>

                                                                      

</div>

CSS code

#header-img {
  width: 300px;
  height: 150px;
}

#header{
  width: 100%;
  display: flex; 
  align-items: center;
  position: fixed;
  overflow: hidden;
}

ul{
  list-style: none;
  display: flex;
  justify-content: space-around;
  
}

#nav-bar{
  width:100%;
  
}

.video-page{
  height: 400px;
  background-color: pink;
  display: flex;
  flex-direction: column;
  align-items: center;
  poistion: auto;
}
  

.information-sign-up{
    height:30px;
    display:flex;
    
}

#form{
  text-align: center;
  height:300px;
  margin-botton: 20px;
}

.audition {
  height: 750px;
  background-image: url("");
  
  .fall-season {
  height: 750px;
  background-image: url("");
  
  
.ballet-camp {
  height: 750px;
  background-image: url("");
}

.contact-us {
  height: 750px;
  background-image: url("");
    }
  
    @media only screen and (min-width: 600px){
      #nav-bar{
        display:none;
      }
      .video-page{
        display: none;
      }
    }
7

  1. The .fall-season and .audition selector blocks are not closed.

  2. The #email input is missing the name attribute.

2 Likes
8

Your ballet-camp div is not closed. And also you have around 6 opening div tags but 7 closing tags. I think you need to remove the final closing div.
And also in your CSS ul it must be list-style-type:none; not list-style. Since list-style is a shorthand property where you will add a list of items .
Hope this one helps

1 Like
9

I fixed all of that and it worked!! Thank you so much for your help!!!

1 Like