Genspace About_the_lab

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>GenSpace About the Lab</title>
  <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>
  
  
  <header>
    <img class="logo" src="https://i.imgur.com/vtOSd4G.png"/>
    <div class="nav-bar">
      <a href="#" class="active">The Lab</a>
      <a href="#">Classes & Events</a>
      <a href="#">About</a>
      <a href="#">Contact Us</a>
      <a href="#">Donate</a>
    </div>
  </header>
  
  <body>
    <div class="container">
      <img src="https://i.imgur.com/fGt7xBL.jpg" class="hero-image" style="width:75%;"/>
      <div class="title-container">
        <div class="title">
          <h1>about <br/>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>
    <div class="equipment-container">
      <h2>available equipments and supplies</h2>
      
      <div class="dropdown">
        <div onclick="myFunction()" class="dropbtn">
          <p><strong>equipment</strong></p>
            <div id="myDropdown" class="dropdown-content">
              <a href="#home">Micropipettors and Tabletop Centrifuges</a>
              <a href="#about">DNA and protein gel electrophoresis equipment</a>
              <a href="#contact">Thermocyclers, including qPCR machine</a>
              <a href="#contact">Heat Blocks and Water Baths</a>
              <a href="#contact">Separate incubators for microbiology and mycology</a>
              <a href="#contact">Autoclave</a>
              <a href="#contact">Spectrophotometer</a>
              <a href="#contact">Plate reader</a>
              <a href="#contact">Microscopes</a>
              <a href="#contact">Refrigerators, -20 and -80Â°C Freezers</a>
              <a href="#contact">Liquid N2 storage</a>
              <a href="#contact">Clean hood</a>
            </div>
         </div>
      </div>
      
      <div class="dropdown">
        <div onclick="myFunction()" class="dropbtn">
          <p><strong>disposables</strong></p>
          <div id="myDropdown" class="dropdown-content">
              <a href="#home">Gloves</a>
              <a href="#about">Petri Dishes</a>
              <a href="#contact">Pipette tips</a>
              <a href="#contact">Centrifuge tubes</a>
              <a href="#contact">Spectrophotometer cuvettes</a>
              <a href="#contact">Serological pipettes</a>
            </div>
        </div>
      </div>
      
      <div onclick="myFunction()" class="dropbtn">
        <p><strong>reagents</strong></p>
      </div>
      <div class="dropdown">
      </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="grid-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>

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

/* Nav Bar */
header{
  margin: 30px;
  overflow: hidden;
  position: fixed; 
  top: 0; 
  width: 1080px;
  z-index: 99;
}

.logo{
  width: 200px;
}

.nav-bar {
  width: 600px;
  float: right;
  padding-top: 30px;
}

.nav-bar a {
  color: white;
  display: inline-block;     
  text-decoration: none;
  text-align: right;
  line-height: 30px;
  font-size: 18px;
  margin-left: 20px;
}

.nav-bar a:hover {
  color: purple;
}

/* Body */
body{
  padding-top: 200px;
}

.hero-image{
  width: 900px;
  position: relative;
}

.title{
  font-size: 30px;
  line-height: 60px;
  float: right;
  width: 400px;
}

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

.title-container{
  max-width: 900px;
  position: absolute;
  bottom: 15%;
  right: 25%;
  padding-right:30px;
}
.container{
  margin-bottom: 100px;
  position: relative;
  text-align: left;
}

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

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

.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-container{
  display: grid;
  width: 800px;
  margin: 0 auto;
  margin-top: 100px;
}

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

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;
}
.slider{
  border-style: none;
  border: none;
}

.footer {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  text-align: left;
  line-height: 18px;
  margin-left: 20px;
  margin-bottom: 40px;
}

.grid-container{
  display: grid;
  grid-template-columns: 80% 20%;
  max-width: 1080px;
}

.social-media-footer img{
  width: 20px;
  margin-right: 10px;
}