Product Landing

In this example below you will see how to do a Product Landing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1bladesforhire ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<header id="header">
 <nav id="nav-bar" class="navbar navbar-default navbar-fixed-top">
   <div class="container-fluid">
     <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
       <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCEWa-NTQjcOusYZKb3AwNAb81IpoCieKEptawJADnwxNIj5kQwQ" alt="cackling hen image"/>
     </a>
   </div><!--      end navbar header -->

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#first" class="nav-link">Lois<span class="sr-only">(current)</span></a></li>
        <li><a href="#second" class="nav-link">Peter</a></li>
        <li><a href="#third" class="nav-link">Chris</a></li>
       </ul>
      <form class="navbar-form navbar-left" id="form" action="https://www.freecodecamp.com/email-submit">
        <div class="form-group">
          <input id="email" type="email" class="form-control" placeholder="Enter email" name="email" required>
        </div>
        <input id="submit"  type="submit" class="btn btn-default"></input>
      </form>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

  </nav>
  
</header>
<main>
  <h1>Family Guy Chicken Fights</h1>
  <section id="first" >
    <h2>Lois vs. the chicken</h2>
    <div class="row">
    
    <iframe width="560" height="315" src="https://www.youtube.com/embed/pHNd3p5FGOE?rel=0&amp;start=19" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe><video id="video" src="https://youtu.be/pHNd3p5FGOE">
      
    </video>  </div>
    <p> You gotta love that the chicken fight has been a running joke for what is it, 10 years now? Jeesh. Family guy really likes to drag things out.</p>
  </section>
  <section id="second">
    <h2>Peter vs. the chicken</h2>
    <div class="row">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/WjPFrPMlV8U?rel=0&amp;start=19" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <p>I mean Peter started fighting the chicken a long time ago. Over an expired coupon? </p>
  </section>
  <section id="third">
    <h2>Chris and the chickens</h2>
    <div class="row">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/Dd6TBAPvECU?rel=0&amp;start=196" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </div>
    <p>Chris kind of goes the other way with chickens. That chick sure does look like him!</p>
    
  </section>
  
</main>


/*Downloaded from https://www.codeseek.co/1bladesforhire/product-landing-NzRGdq */
    @media (max-width: 300px) {
  main{
    display:none;
  }
}
section{
  display: flex;
  flex-direction: column;
}
#header-img{
  width: 30px;
}
main{
  display: block;
  margin-top: 50px;
}
.row{
  background-color: grey;
}
iframe{
  margin:20px auto;
  display: block;
}
video{
  height:0;
  display: none;
}
h1, h2,p{text-align: center;}


/*Downloaded from https://www.codeseek.co/1bladesforhire/product-landing-NzRGdq */
    

Comments