HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>About the Lab</title>
</head>
  
  <header class="container">
    
    <div>
      <div class="navbar">
        <img src="https://i.imgur.com/ZpqS2Rt.png"/>
      </div>
    </div>
    
    
    <div>
    <ul class="navbar">
        <li><a href="#About" id="active">About</a></li>
        <li><a href="#Class">Class</a></li>
        <li><a href="#Event">Event</a></li>
        <li><a href="#Contact Us">Contact Us</a></li>
        <li><a href="#Donation" id="Red">Donation</a></li>
      
      </ul>
    </div>

</header>
  
  <body>
   
    <div class="body-container">
   <div class="head-img"> 
     <img src="https://i.imgur.com/SUiRGNX.png"/>
   </div>
     <hr class="line"/>
      <div class="colum">
        <div class="OurLab">
            <h1>OUR LAB</h1>
            <h2>A home for science</h2> 
        </div>
        <div class="OurLab-text">
          <p><br>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</p>
         <div class="text-space"></div>
          <p>Our lab follows Biosafety Level 1 guidelines. Learn more about <font color="#FF0063">becoming a member here</font> Starting in February 2018, we are also supporting several <font color="#FF0063">Community Projects</font> for members who want to work on group research. 
            </p>
        </div>
        </div>
       <hr class="line"/>
      <div class="img-space"></div>
      <div class="OurSupplies">
            <h1>OUR SUPPLIES</h1>
            <h2>Science for everyone</h2> 
       </div>
      <div class="colum-3">
       
      <div class="img-space"> <img src="https://i.imgur.com/pXrumdm.png"></div>
      <div class="img-space"> <img src="https://i.imgur.com/xpBH3PT.png"></div>
      <div class="img-space"> <img src="https://i.imgur.com/jqSMqVR.png"></div>
      </div>
      <div class="img-space"></div>
    
      
       <hr class="line"/>
      <div class="colum">
        <div class="Membership">
            <h1>MEMBERSHIP</h1>
            <h2>Why join the lab</h2> 
        </div>
        <div class="text-padding">
          <p><br><br>All are welcome to work in our biolab on their own project. Members receive 24/7 access to Genspace's facility, equipment, and basic lab training from our staff. Work on anything biological as long as it meets the NIHâ€™s Biosafety Level 1 guidelines.  </p>
         <div class="text-space"></div>
          <p>If you are interested in becoming a member in order to contribute to a Community Project, then our <font color="#FF0063">Community Membership</font>, at $100/month, is right for you. If you have your own research to conduct in our lab, then our <font color="#FF0063">Individual Membership</font>>, at $250/month, is the best fit. For businesses we offer an $800/month <font color="#FF0063">Premium Membership</font>, which includes desk space outside the lab. Read more about our membership tiers below and apply by filling out this form. 
            </p>
        </div>
     
        </div>
               <hr class="line"/>
      <div class="colum-3">
        <div class="img-space"><img src="https://i.imgur.com/1lC4yAv.png"></div>
        <div class="img-space"><img src="https://i.imgur.com/bZWl9d8.png"></div>
        <div class="img-space"><img src="https://i.imgur.com/kKb0vgg.png"></div>
        
      </div>
      <div class="text-space"></div>
     
       <a href="#Join the lab" id="button">JOIN OUR MEMBER</a>
  
          <div class="text-space">
      </div>

</div>
        <div class="footer"><img src="https://i.imgur.com/iOLitxV.png"/>
         </div>
            
        
 
</body>
</html>

html{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  max-width: 1440px;
  background: #000000;
}

.container{
  display: grid;
  grid-template-columns: 50% 50%;
   max-width: 960px;
   margin: 0 auto;
  padding-top: 100px;
}

.container img {
  height: 30px;
  width: 144px;
}

.navbar{
 
 
  list-style-type: none;
  overflow: hidden;
  display: inline-block;
 
}

.navbar li {
  float: left;
}

.navbar li a {
  font-size: 13px;
  font-weight: bold;
  display: block;
  color: #828181;
  text-align: center;
  margin-left: 32px;
  text-decoration: none;
  line-height: 32px;
  
}

#red{
  color: #FF0063;
}

#active{ 
color:#ffffff;}

.body-container{
  
  max-width: 960px;
  margin: 0 auto;
  
}
.body-container .head-img{
  margin-left: 200px;
  padding-top: 20px;
}

h1{
  font-size: 36px;
  color: #ffffff;
}
h2{
  font-size: 16px;
  color: #ffffff;
  font-weight: 100;
}
p{color: #ffffff;
line-height: 32px;
font-weight: lighter;}

.colum{
  display: grid;
  margin: auto;
  grid-template-columns: 30% 70%;
  padding-right: 8px;
}

.text-padding {
  padding-bottom: 72px;
}

.line {
  background-color: #494949;
  color: #494949;
  opacity: 0.3;
}

.text-space{ margin-top: 72px;}

.img-space{ margin-top: 36px;}
  
 
.colum-3{
  display: grid;
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  padding-right: 8px;
  grid-gap: 18px;
  
}
#space{
  padding-top: 72px;
  
}

.footer-contain{
  max-width: 305px;
  padding-left: 220px;
  display: grid;
  grid-template-columns: auto auto;
  
}
.footer{
  max-width: 1440px;
  height: 494px;
  margin: 0 auto;
  background: #0A0A0A;
  
}

#button{
  max-width: 960px ;
    background-color: #1CA9EB;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 0 auto;
    cursor: pointer;
  
}