HTML5, CSS3 and JavaScript demo

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<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="container">
      <div class="logo">
        <div class="logo-full">
          <div class="top-block"></div>
          <div class="logo-png">
          <img src="https://i.imgur.com/tg4Z4cC.png" width="160"/>
          </div> 
        </div>
      </div>

<div class="navigation">
        <div class="navi-inner">ABOUT</div>
        <div class="navi-inner">JOIN US</div>
        <div class="navi-inner">EVENTS</div>
        <div class="navi-inner">CLASSES</div>
        <div class="navi-inner">COMMUNITY</div>
      </div>

<div class="navi-interaction">
        <div class="navi-block"></div> 
            <div class="inners">
              <div class="navi-block-inner">About the lab</div>
              <div class="navi-block-inner">Mission</div>
              <div class="navi-block-inner">Staff</div>
              <div class="navi-block-inner">Contact<div/>
            </div>   
      </div>

<div class="content">
        <div class="content-block"></div>
          <div class="content-block-inner">
            <div class="about-top">ABOUT</div>
            <div class="about-headline">About the Lab</div>
            <div class="slider">
              <div> <img src="https://i.imgur.com/l4nGHoj.jpg" title="image"></div>
              <div> <img src="https://i.imgur.com/75TAyEi.png" title="image"></div>
              <div> <img src="https://i.imgur.com/1feaXwx.png" title="image"></div>
              <div> <img src="https://i.imgur.com/o9ctZs3.png" title="image"></div>
            </div>
            <div class="content-text"><p>Since 2010, Genspace has provided lab space to independent researchers,</p><p>scientists, artists, designers,entrepreneurs, hobbyists, teachers and students.</p><p>In 2017, we moved to a new facility in Sunset Park where we can provide</p><p>even more space and resources to our members.</p>
              <br><p>Our lab follows Biosafety Level 1 guidelines. Learn more about becoming</p><p>a member here. Starting in February 2018, we are also supporting several</p><p>Community Projects for members who want to work on group research.</p> </div> 
          </div>
       </div>
                
       <div class="content-block-2">
         <div class="bar-elements-1">
           <div class="bar-1"></div>
           <div class="bar-2"></div>
         </div> 
         <div class="bar-headline-1"><p>In our lab, we freely provide supplies</p>
           <p>and equipments including:</p>
         </div>
         
         <div class="right-side">
           <div class="bar-elements-2">
             <div class="bar-3"></div>
             <div class="bar-4"></div>
             <div class="bar-headline-2"><p>Equipments</p>
               <div class="bar-inner-text"><br><p>- Micropipettors and Tabletop Centrifuges</p><p>- DNA and protein gel electrophoresis equipment</p>
                 <p>- Thermocyclers, including qPCR machine</p><p>- Heat Blocks and Water Baths</p><p>- Separate incubators for microbiology and mycology</p><p>- Autoclave</p></div>
             </div>
           </div>
            <div class="bar-elements-3">
             <div class="bar-3"></div>
             <div class="bar-4"></div>
             <div class="bar-headline-2"><p>Disposables</p>
               <div class="bar-inner-text"><br><p>- Gloves</p><p>- Petri Dishes</p><p>
                 - Pipette tips</p><p>- Centrifuge tube (1.5, 15&50mL)and spectrophotometer cuvettes</p><p>- 5,10 and 25mL serological pipettes</p></div>
             </div>
           </div>
           
           <div class="bar-elements-4">
             <div class="bar-3"></div>
             <div class="bar-4"></div>
             <div class="bar-headline-2"><p>Reagents</p>
               <div class="bar-inner-text"><br><p>- Agarose</p><p>- Loading buffer</p>
                 <p>- DNA ladders</p><p>- 50x TAE, gel stains</p><p>- Assorted buffers and common reagents</p><p>- Defined and Complex Bacterial Media +/- Agar</p><p>- Selection antibiotics (Amp, Kan. Chlor)</p></div>
             </div>
           </div>  
         </div> 
         
         <div class="footer">
           <div class="footer-block">
           <div class="logo-footer">
             <img src="https://i.imgur.com/tg4Z4cC.png" width="160"></div>
               <div class="footer left">
                 <div class="footer-text"><p>Phone: (929) 387-8100</p>
                 <p>info@genspace.org</p></div>
                 <div class="footer-text"><p>132 32nd Street, Suite 108</p>
                 <p>Brooklyn, NY 11232</p></div>
                 <div class="footer-text"><p>Copyright Â© 2018</p>
                </div>
               </div>
             
                 <div class="footer-right">
                   <div class="support">
                     <img src="https://i.imgur.com/UsIVY56.png" width="500"/>
                   </div>
                 </div>

</div> 
</body>
</html>

.1w { fon-size: 60px; }

.container{
 max-width: 945px;
 height: 1200px;
 margin: -8px;
}

.top-block{
  height: 55px;
  width: 200px;
  background-color: black;
}

.logo-png{
  margin-top: -52px;
  margin-left: 38px;
}
.navigation{
  margin-top: -28px;
  margin-left: 240px;
  font-size: 11px;
  font-family: inconsolata, regular;
  letter-spacing: 2.5px;
}
.navi-inner{
  display: inline-block;
  margin-top: -30px;
  margin-right: 30px;
  
}

.navi-interaction{
  margin-top: 30px;
  display: inline-block;
}

.navi-block{
  height:74px;
  width: 90px;
  margin-top: -7px;
  margin-left: 230px;
  background-color: black;
}

.inners{
  margin-top: -64px;
  margin-left: 240px;
}
.navi-block-inner{
  font-family: inconsolata, regular;
  color: white;
  font-size: 10px;
  line-height: 14px;
}

.content{
  color: #FFFFFF;
}
.content-block{
  height: 750px;
  width: 945px;
  margin-top: 40;
  margin-left: -240;
  background-color: black; 
}
.content-block-inner{
  position: absolute;
  margin-top: -130;
}
.about-top{
  font-family: inconsolata;
  margin-top: -570;
  margin-left: -180;
  letter-spacing: 2px;
  position: absolute;
  color: #FFFFFF;
}

.about-headline{
  margin-top: -520;
  margin-left: -180;
  font-family: GT Eesti Pro Display Trial, Bold;
  font-size: 50;
  position: absolute;
  color: #FFFFFF;
}

.bx-wrapper{
  width: 600px;
  height: 334;
  margin-top: -450px;
  margin-left: -110;
  
}

.content-text{
  font-family: GT Eesti Pro Display Trial, Bold;
  font-size: 13px;
  line-height: 4px;
  margin-left: -180;
}

.content-block-2{
  height: 945px;
  margin-left: -240;
  margin-bottom: 30px;
  color: black;
  background-color: #FEF220;   
}

.bar-1{
  width: 480px;
  height: 1.8px;
  margin-top: 50px;
  margin-left: 70px;
  background-color: black;
  position: absolute;
}

.bar-2 {
  width: 1.8px;
  height: 40px;
  margin-top: 50px;
  margin-left: 70px;
  background-color: black;
  position: absolute;
}

.bar-headline-1{
  margin-top: 50px;
  margin-left: 90px;
  position: absolute;
  font-size: 20px;
  font-family: fugue;
  line-height: 9px;
}

.right-side{
  margin-left: 300px;
  position: absolute;
}

.bar-elements-2{
  margin-top: 150px;
  position: absolute;
}

.bar-3{
  width: 480px;
  height: 1.8px;
  margin-top: 50px;
  margin-left: 70px;
  background-color: black;
  position: absolute;
}

.bar-4 {
  width: 1.8px;
  height: 40px;
  margin-top: 50px;
  margin-left: 70px;
  background-color: black;
  position: absolute;
}

.bar-headline-2{
  margin-top: 45px;
  margin-left: 90px;
  position: absolute;
  font-size: 30px;
  font-family: fugue;
  line-height: 9px;
}

.bar-inner-text{
  width: 550px;
  font-size: 15px;
  font-family: GT Eesti Pro Display Trial, regular;
  line-height: 4px;
  position: absolute;      
}

.bar-elements-3{
  margin-top:400px;
  position: absolute;
}

.bar-elements-4{
  margin-top:630px;
  position: absolute;
}

.footer-block{
  margin-top: 945;
  height: 200px;
  width: 945px;
  background-color: #000000;
  position: absolute;
  color: white;
  font-family: GT Pressura;
  font-size: 10px;
  line-height: 4px;
}

.logo-footer{
  margin-top: 20px;
  margin-left: 20px;
}

.footer-text{
  height: 40px;
  margin-top: -50px;
  margin-left: 220px;
  margin-bottom: 70px;

}

.support{
  position: absolute;
  margin-top: -150;
  margin-left: 420px;
}