Landing Page challenge

HTML-CSS
#1

Tell us what’s happening:
Hi there,

Looking for some help with my landing page assignment :slight_smile:
I can’t seem to get these to work properly:

User Story #6: I can watch an embedded product video with id="video"
User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit) that confirms the email address was entered and that it posted successfully.
User Story #14: My product landing page should have at least one media query.

Since I’m a complete new to coding, any feedback and explanation on anything is welcome.

Your code so far


<head>
  <link href="https://fonts.googleapis.com/css?family=ZCOOL+KuaiLe" rel="stylesheet">
</head>

<header id="header">
  <img src="http://www.bjjglobetrotter.com/wp-content/uploads/2014/03/logo-on-sleeve-MORE-COLORS-590x349.png" alt="logo" id="header-img">
  <nav id="nav-bar">
    <ul>
      <li><a href="#camp-info" class="nav-link">Camp-Info</a></li>
      <li><a href="#camp-video" class="nav-link">Video</a></li>
      <li><a href="#prices-box" class="nav-link">Prices</a></li>
      <li><a href="#email-submit" class="nav-link">Newsletter</a></li>
    </ul>
  </nav>
</header>

<main>
  <section id="camp-info">
    <h1> Brazilian Jiu Jitsu Globetrotters Camps</h1>
    <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia voluptas necessitatibus sunt quis ducimus repellendus nam incidunt, sapiente inventore provident quaerat obcaecati ullam aperiam similique, tempore mollitia pariatur tenetur impedit.</p> 
  </section>
  
  <section id="camp-video">
    <h1>Previous Camp Video's</h1>
    <p>Have a look at this amazing video of last years Zen Camp:</p>
    
    <div id="video">
      <iframe id="video" width="500" height="250" src="https://www.youtube.com/watch?v=MxP1ty--Slc" autoplay>    </iframe>
    </div>
  </section>
  
  <div id="camp-photos">
    <h1>Upcoming Camps for 2019</h1>
    <img src="https://bjjglobetrotters-puifaiiu.netdna-ssl.com/wp-content/uploads/2018/10/Spring-Camp-2019-930x540.jpg" alt="upocoming camps" id="camp-img">
    <img src="https://bjjglobetrotters-puifaiiu.netdna-ssl.com/wp-content/uploads/2019/01/Iceland-Camp-2019-930x540-Soldout.jpg" alt="upcoming camps" id="camp-img">
    <img src="https://bjjglobetrotters-puifaiiu.netdna-ssl.com/wp-content/uploads/2018/10/Summer-Camp-Germany-Ver-1.jpg" alt="upcoming camps" id="camp-img">
  </div>
  
  
  <div id="prices-box">
    <div id="prices-header">
      <h1>Prices</h1>
    </div>
    <div id="price-tallinn">
      <h3>Tallinn</h3>
      <p>Lorem ipsum<br>$$$</p>
    </div>
    <div id="price-iceland">
      <h3>Iceland</h3>
      <p>Lorem ipsum<br>$$$</p>
    </div>
    <div id="price-heidelberg">
      <h3>Heidelberg</h3>
      <p>Lorem ipsum<br>$$$</p>
     </div>
  </div> 
  
  <section id="email-submit">
    <h1>Sign up for our newsletter</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, officia maiores aspernatur placeat ea, recusandae iste laborum necessitatibus harum minus provident asperiores facere obcaecati, inventore rem cum! Nemo, ad qui.</p>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input type="email" id="email" required placeholder="Enter your email"></input>
    <input type="submit" id="submit" placeholder="Submit"></input>
  </form>
  </section>
</main>
    
<footer>
</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.2 Safari/605.1.15.

Link to the challenge:

#2

You can’t have duplicate ids. Give only one element id of video. It probably should be video tag with the id.

to send data to a static page. Your form element should have a method and action attribute. Do a little research on it. https://www.w3schools.com/tags/att_form_action.asp

Media queries are what makes your page responsive or look good on other screens with different lengths. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#4