HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<body>

  <div id="navigationbar">
    
    <div id="navigation-bottom">
      <div>Logo</div>
      <div>Membership</div>
      <div>Classses</div>
      <div>Events</div>
      <div>Comunity</div>
    </div>
  </div>
  
  
  <div id="title"></div>
     <div id="introduction">
       <p id="headtitle1">ABOUT<br>
       THE<br>
       LAB<br></p>
       
      Since 2010, Genspace has provided lab space to independent researchers, scientists, artists, designers, entrepreneurs, hobbyists, teachers and students. In 2017, we moved to a new facility in Sunset Park where we can provide even more space and resources to our members.

Our lab follows Biosafety Level 1 guidelines. Learn more about becoming a member here. Starting in February 2018, we are also supporting several Community Projects for members who want to work on group research 
     </div>
  
  
  
  
  <div id="contents">
    
    <div id="equipment">
      <p id="headtitle2">Equipment</p>
      <li>Micropipettors and Tabletop Centrifuges</li>
      <li>DNA and protein gel electrophoresis equipment</li>
      <li>Thermocyclers, including qPCR machine</li>
      <li>Heat Blocks and Water Baths</li>
      <li>Separate incubators for microbiology and mycology</li>
      <li>Autoclave</li>
      <li>Spectrophotometer</li>
    <li>Plate reader</li>
    <li>Microscopes</li>
    <li>Refrigerators, -20 and -80Â°C Freezers</li>
    <li>Liquid N2 storage</li>
    <li>Clean hood</li>
    </div>
    
    <div>pic</div>
    
    <div>pic
      </div>
    
    <div>
      <p id="headtitle2">Disposables</p>
      <li>Gloves</li>
      <li>Petri Dishes</li>
      <li>Pipette tips</li>
      <li>Centrifuge tubes (1.5, 15 & 50 mL) and spectrophotometer cuvettes</li>
      <li>5, 10 and 25 mL serological pipettes</li>
    </div>
    
    <div>
          <p id="headtitle2">Reagents</p>
          <li>Agarose, loading buffer, DNA ladders, 50x TAE, gel stains</li>
          <li>Assorted buffers and common reagents</li>
          <li>Defined and Complex Bacterial Media +/- Agar</li>
          <li>Selection antibiotics (Amp, Kan. Chlor)</li>
    </div>
    
    <div>pic</div>
    
  </div>

</body>
</html>

#headtitle1
{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
  color: #FFFFFF;}

#headtitle2
{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
  color: black;}

#navigationbar {
  background-color: #000000;
  top: 0px;
  max-width: 960px;
  min-width: 960px;
  margin: 0 auto;
  left:0;
  right:0;
    margin-top: 0px;
    height: 60px;
    
}
#navigation-bottom {
  display:grid;    
  grid-template-columns:550px 100px 100px 100px 100px;
    padding: 20px 40px 15px 20px;
    margin: 0 auto;
    text-align: left;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  text-align: left;
  color: #FFFFFF;}

#title {
     background-image: url("https://www.nationalgeographic.com/content/dam/science/2018/08/07/microscopic-images/microscopic-images-01.ngsversion.1533653334923.adapt.1900.1.jpg");
  background-size: 960px;
  
  top: 100px;
  z-index: 2;
  max-width: 960px;
  min-width: 960px;
  margin: 0 auto;
  left:0;
  right:0;
  height: 600px;
  margin-top: 0px;}

#introduction{
  background-color: #000000;
  position: absolute;  
  top: 200px;
  z-index: 2;
  max-width: 270px;
  min-width: 270px;
  margin: 550px;
  left:500;
  right:0;
  height: 370px;
  margin-top: 0px;
  padding: 40px 40px 40px 40px;
  margin: 0 auto;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  text-align: left;
  color: #FFFFFF;}

#contents{
  display:grid;    
  grid-template-columns:480px 480px;
  padding: 40px 40px 40px 40px;
  top: 0px;
  max-width: 960px;
  min-width: 960px;
  margin: 0 auto;
  height: 1000px;  
}

#equipment{
  padding: 40px 40px 40px 40px;
  
}