ABOUT THE LAB - Liveweave

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>About the Lab</title>
  <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>
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
</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="#" class="active">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="main-container">
    
    <div class="title-container">
      <div class="hero-image">
        <img src="https://i.imgur.com/fc6lpwj.jpg"/>
      </div>
      <div class="title">
        <h1>about the lab</h1>
        <p>
        Since 2010, Genspace has provided lab space to independent researchers, scientists, artists, designers, entrepreneurs, hobbyists, teachers and students. Our lab follows Biosafety Level 1 guidelines. Starting in February 2018, we are also supporting several Community Projects for members who want to work on group research. 
        </p>
      </div>
    </div>
    
    <div class="equipment-container">
      <h2>available equipments and supplies</h2>
      
      <div class="dropdown">
        <div onclick="showEquipment()" class="dropbtn">
          <p><strong>equipment</strong></p>
            <div id="equipment-list" class="dropdown-content">
              <a href="#">Micropipettors and Tabletop Centrifuges</a>
              <a href="#">DNA and protein gel electrophoresis equipment</a>
              <a href="#">Thermocyclers, including qPCR machine</a>
              <a href="#">Heat Blocks and Water Baths</a>
              <a href="#">Separate incubators for microbiology and mycology</a>
              <a href="#">Autoclave</a>
              <a href="#">Spectrophotometer</a>
              <a href="#">Plate reader</a>
              <a href="#">Microscopes</a>
              <a href="#">Refrigerators, -20 and -80Â°C Freezers</a>
              <a href="#">Liquid N2 storage</a>
              <a href="#">Clean hood</a>
            </div>
         </div>
      </div>
      
      <div class="dropdown">
        <div onclick="showDisposables()" class="dropbtn">
          <p><strong>disposables</strong></p>
          <div id="disposable-list" class="dropdown-content">
              <a href="#">Gloves</a>
              <a href="#">Petri Dishes</a>
              <a href="#">Pipette tips</a>
              <a href="#">Centrifuge tubes</a>
              <a href="#">Spectrophotometer cuvettes</a>
              <a href="#">Serological pipettes</a>
            </div>
        </div>
      </div>
      
      <div class="dropdown">
        <div onclick="showReagents()" class="dropbtn">
          <p><strong>Reagents</strong></p>
          <div id="reagent-list" class="dropdown-content">
              <a href="#">Agarose, loading buffer, DNA ladders, 50x TAE, gel stains</a>
              <a href="#">Assorted buffers and common reagents</a>
              <a href="#">Defined and Complex Bacterial Media +/- Agar</a>
              <a href="#">Selection antibiotics (Amp, Kan. Chlor)</a>
            </div>
        </div>
      </div>
      
    </div>
    
    <div class="slider-container">
      <div class="slider">
        <div><img src="https://i.imgur.com/tSBziAC.jpg"/></div>
        <div><img src="https://i.imgur.com/KO1CGrV.jpg"/></div>
        <div><img src="https://i.imgur.com/5vGIMNo.jpg"/></div>
        <div><img src="https://i.imgur.com/w52Ylk0.jpg"/></div>
        <div><img src="https://i.imgur.com/c1WYqco.jpg"/></div>
      </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>
  </div>

</body>
</html>

.lw { font-size: 60px; }

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 Body Content */
.main-container{
  padding-top: 20vh;
}

.hero-image{
  display: block;
}

.hero-image img{
  width: 100vw;
}

.title-container{
  text-align: center;
  position: relative;
  width: 100vw;
}

.title{ 
  position: absolute;
  width: 40vw;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.title h1{
  font-size: 80px;
  line-height: 80px;
}

.title p{
  font-size: 25px;
  line-height: 27px;
  font-weight: 300;
}

/** Dropdown List **/

.equipment-container{
  max-width: 1080px;
  padding-top: 150px;
  padding-bottom: 100px;
  text-align: center;
  margin: auto;
}

.dropbtn p{
  text-align: left;
  padding-left: 20px;
}

.dropdown{
  position: relative;
  display: inline-block;
}

.dropbtn{
  width: 600px;
  border: 1px solid white;
  margin: auto;
  margin-bottom: 20px;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  width: 602px;
  position: absolute;  
  overflow: auto;
  right: 0;
  z-index: 1;
  text-align: center;
  margin: auto;
}

.dropdown-content a {
    color: #824abe;
  background-color:white;
  width: 600px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: white;}

.show {display: block;}

/** Slider **/
.slider{
  border-style: none;
  border: none;
}

.slider-container{
  display: grid;
  width: 900px;
  margin: 0 auto;
  margin-top: 100px;
}

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

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

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;
}

/** 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 showEquipment() {
    document.getElementById("equipment-list").classList.toggle("show");
}

function showDisposables() {
    document.getElementById("disposable-list").classList.toggle("show");
}

function showReagents() {
    document.getElementById("reagent-list").classList.toggle("show");
}

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');
      }
    }
  }
};

$(document).ready(function(){
    $('.slider').bxSlider();
  
  });