HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
  <title>Genspace Homepage</title>
</head>
<body>

  <div class="logo-container">
    <img class="logo" src="https://i.imgur.com/vtOSd4G.png"/>
  </div>
  
  
  <span class="toggle-button">
      <div class="menu-bar menu-bar-top"></div>
      <div class="menu-bar menu-bar-middle"></div>
      <div class="menu-bar menu-bar-bottom"></div>
  </span>
  
  
  <div class="menu-container">
    <div class="menu-contents">
      <ul class="menu">
        <li class="menu-children"><a href="#" class="show-submenu">The Lab</a>
          <ul class="sub-menu">
            <li><a href="#">About the Lab</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Community Projects</a></li>
          </ul>
        </li>
        <li><a href="#">Classes & Events</a></li>
        <li class="menu-children"><a href="#" class="show-submenu">About</a>
          <ul class="sub-menu">
            <li><a href="#">Our Mission</a></li>
            <li><a href="#">People</a></li>
          </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Donate</a></li>
      </ul>    
    </div>
  </div>
  
  <div class="video-container">
    <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/206642623?title=0&byline=0&portrait=0&autoplay=1&loop=1&autopause=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    </div><script src="https://player.vimeo.com/api/player.js"></script>
  </div>
  
  <div class="grid-container">
    <div class="title">
      <h1>new york's<br/>community<br/>biolab</h1>
    </div>
    <div class="intro">
      <p>Genspace is the worldâ€™s first community labâ€”a place where anyone can learn and work on biotechnology. We provide STEM educational outreach, classes for adults, cultural events, and a platform for science innovation at the grassroots level.</p>
      <button type="button" onclick="myFunction2()">Join the lab</button>
    </div>
  </div>
  
  <div class="section-container">
    <div class="section-content">
      <img src="https://i.imgur.com/W11YmLz.png"/>
      <button>about the lab</button>
    </div>
    <div class="section-content">
      <img src="https://i.imgur.com/tA7a6rH.png"/>
      <button>about us</button>
    </div>
    <div class="section-content">
      <img src="https://i.imgur.com/bsbr8kM.png"/>
      <button>donate</button>
    </div>
  </div>
  
  <div class="events-container">
    <h2>Upcoming Classes & Events</h2>
    <div class="event">
      <div class="event-content">
        <p>Neurohacking 101: Brain Networks and Machine Learning</p>
      </div>
      <div class="event-content-right">
        <button>rsvp</button>
        <img src="https://i.imgur.com/8gJWVRh.png"/>
      </div>
    </div>
    <div class="event">
      <div class="event-content">
        <p>Biohacker Boot Camp</p>
      </div>
      <div class="event-content-right">
        <button>rsvp</button>
        <img src="https://i.imgur.com/8gJWVRh.png"/>
      </div>
    </div>
    <div class="event">
      <div class="event-content">
        <p>Open Plant Community Project Meeting</p>
      </div>
      <div class="event-content-right">
        <button>rsvp</button>
        <img src="https://i.imgur.com/8gJWVRh.png"/>
      </div>
    </div>
    <div class="see-more">
      <button>see more</button>  
    </div>
  </div>
  
  
  <div class="join-us">
    <h3>Ready to work on your own project?</h3>
    <button type="button" onclick="myFunction2()">Join the lab</button>
  </div>
  
    
  <div class="footer-container">
    <div class="footer">
        Phone: (929) 387 - 8100
        <br/>132 32nd Street, Suite 108, Brooklyn, NY 11232 
        <br/><em>Copyright Â© 2018 Genspace, All rights reserved.</em>
    </div>
    <div class="social-media-footer">
      <img src="https://i.imgur.com/Wkpz1Bv.png"/>
      <img src="https://i.imgur.com/BAjjlC6.png"/>
      <img src="https://i.imgur.com/OrENktb.png"/>
      <img src="https://i.imgur.com/wr9fA6n.png"/>
    </div>
  </div>
  

</body>
</html>

html{
  background-image: url("https://i.imgur.com/n0uRPmV.png");
  background-size: cover;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  max-width: 100vw;
}

p{
  font-size: 20px;
  line-height: 24px;
}

.logo{
  width: 200px;
  position: fixed;
  top: 5vh;
  right: 3vw;
  z-index: 99;
}

.logo-container{
  margin: 30px;
  float: right;
  z-index: 99;
  overflow: hidden;
}

/** NavBar**/

.toggle-button {
  position: fixed;
  margin-top: 50px;
  margin-left: 30px;
  padding: 4px;
  transition: .25s;
  z-index: 99;
  
}
.toggle-button:hover {
  cursor: pointer;
}
.toggle-button .menu-bar {
  position: absolute;
  transition: .5s;
  width: 30px;
}
.toggle-button .menu-bar-top {
  border: 4px solid white;
  border-bottom: none;
  top: 0;
}
.toggle-button .menu-bar-middle {
  height: 4px;
  width: 38px;
  background-color: white;
  margin-top: 7px;
  margin-bottom: 7px;
}
.toggle-button .menu-bar-bottom {
  border: 4px solid white;
  background-color: white;
  border-top: none;
  top: 22px;
}
.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
  border: 2px solid #6559c2;
  background-color: #6559c2;
}
.button-open .menu-bar-middle {
  transition: .1s ease-out;
  opacity: 0;
}
.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -8px);
  transition: .5s;
  border: 2px solid #6559c2;
  background-color: #6559c2;
}

.menu-container {
  background-color: white;
  position: fixed;
  top: 0;
  height: 100%;
  width: 300px;
  margin-left: -300px;
  padding-top: 100px;
  overflow: auto;
  transition: .25s;
  z-index: 10;
}
.menu-show {
  margin-left: 0;
}

.menu a{
  color: #6559c2;
  display: inline-block;     
  text-decoration: none;
  text-align: left;
  line-height: 30px;
  font-size: 18px;
  font-weight: 400;
  margin-top: 15px;
}

.menu a:hover {
  text-decoration: line-through;
}

.menu a.active {
  text-decoration: line-through;
}

/** sub Menu **/
.sub-menu a{
  margin-left: -20px;
}
.menu-contents .menu-children {
    position: relative;
}
.menu-contents .menu-children .sub-menu {
    display: none;
}

/** Main content **/

.grid-container{
  display: grid;
  grid-template-columns: 40% 60%;
  padding: 100px;
  margin: auto;
  column-gap: 50px;
}

.title h1{
  font-size: 50px;
}

.intro{
  margin: auto;
}
.section-container{
  display: grid;
  grid-template-columns: 33% 33% 33%;
  padding-top: 100px;
  margin: auto;
  padding-bottom: 150px;
  padding-left: 30px;
}

.section-content button{
  margin-top: 30px;
}
.section-content{
  width: 26vw;
  margin: auto;
  text-align: center;
}

.section-container img{
  width: 26vw;
}

.events-container h2{
  text-align: center;
}

.events-container p{
  font-size: 15px;
}
.events-container{
  max-width: 850px;
  margin: auto;
  margin-bottom: 150px;
  margin-top: 50px;
}
.event{
  border: 1px solid white;
  height: 50px;
  margin: auto;
  padding-bottom: 7px;
  padding-left: 15px;
  display: grid;
  grid-template-columns: 70% 30%;
  margin-top: 20px;
}

.event-content-right{
  display: inline-block;
  text-align: right;
  margin-right: 15px;
  position: relative;
  top: 15px;
}
.event-content-right img{
  position: relative;
  top: 5px;
  margin-left: 15px;
}

.event button{
  width: 80px;
  height: 25px;
}

.see-more{
  text-align: right;
  margin-top: 20px;
  max-width: 850px;
}

button{
  border-style: none;
  border: 1px solid white;
  width: 150px;
  height: 50px;
  color: white;
  background-color: transparent;
  cursor:pointer;
  font-size: 15px;
  font-weight: bold;
}

button:hover {
  color: purple;
  background-color: white;
}

.join-us{
  text-align: center;
  margin-top: 150px;
  margin-bottom: 150px;
}

.join-us h3{
  font-size: 30px;
}

/** Footer **/
.footer {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-align: left;
  line-height: 25px;
  margin-bottom: 40px;
  cursor: pointer;
}

.footer-container{
  display: grid;
  grid-template-columns: 85% 15%;
  max-width: 100vw;
  padding: 30px;
}

.social-media-footer{
  text-align: right;
}

.social-media-footer img{
  width: 25px;
  margin-right: 10px;
  cursor: pointer;
}

// Write JavaScript here

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

$(document).ready(function() {
    var $toggleButton = $('.toggle-button'),
        $menuWrap = $('.menu-container');

$toggleButton.on('click', function() {
        $(this).toggleClass('button-open');
        $menuWrap.toggleClass('menu-show');
    });
});

// submenu

$(document).ready(function() {

var $subMenuShow = $('.show-submenu');

$subMenuShow.click(function() {
        $(this).next().slideToggle(300);
    });

});

function myFunction2() {
    alert("Thanks for joining GenSpace!");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
};

function myFunction2() {
    alert("Thanks for joining GenSpace!");
}