HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<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="sf-menu">
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Join The LAB</a></li>
        <li><a href="#">Our Story</a></li>
        <li><a href="#">Join The Lab</a></li>
      </ul>
    </li>
    <li><a href="#">Class</a></li>
    <li><a href="#">Event</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">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>

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

.sf-menu{  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  
  
}

.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;}
  
 .grid-item{color: ffffff;}

.colum-3{
 
  display: grid;
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  padding-right: 8px;
  grid-gap: 18px;
 
  
}

.grid{
 max-width: 960;
  padding-top: 48px;
  display: grid;
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  padding-right: 8px;
  grid-gap: 18px;
  
  
 
 
  
}
.item{ color: ffffff;
  font-size: 12px;
  opacity: 0.7;
  
}
.grid-item{
  display: grid;
  margin: 0 auto;
  grid-template-columns: auto auto auto;
  
  
  
}
#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: 238px ;
  max-height: 56px;
    background-color: #1CA9EB;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display:block;
    font-size: 16px;
    margin: 0 auto;
    cursor: pointer;
  
}

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	
	
	
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #FFFFFF;
  opacity: 0.7;
}
.sf-menu li {

white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #000000;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #FF0063;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}

/*
 * jQuery Superfish Menu Plugin
 * Copyright (c) 2013 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *	http://www.opensource.org/licenses/mit-license.php
 *	http://www.gnu.org/licenses/gpl.html
 */

(function ($, w) {
	"use strict";

if (!this.parents('.' + o.hoverClass).length) {
					o.onIdle.call(getMenu(this));
					if (o.$path.length) {
						$.proxy(over, o.$path)();
					}
				}
			},
			out = function () {
				var $this = $(this),
					o = getOptions($this);
				if (ios) {
					$.proxy(close, $this, o)();
				}
				else {
					clearTimeout(o.sfTimer);
					o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
				}
			},
			touchHandler = function (e) {
				var $this = $(this),
					o = getOptions($this),
					$ul = $this.siblings(e.data.popUpSelector);

if (o.onHandleTouch.call($ul) === false) {
					return this;
				}

if ($ul.length > 0 && $ul.is(':hidden')) {
					$this.one('click.superfish', false);
					if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
						$this.trigger('focus');
					} else {
						$.proxy(over, $this.parent('li'))();
					}
				}
			},
			applyHandlers = function ($menu, o) {
				var targets = 'li:has(' + o.popUpSelector + ')';
				if ($.fn.hoverIntent && !o.disableHI) {
					$menu.hoverIntent(over, out, targets);
				}
				else {
					$menu
						.on('mouseenter.superfish', targets, over)
						.on('mouseleave.superfish', targets, out);
				}
				var touchevent = 'MSPointerDown.superfish';
				if (unprefixedPointerEvents) {
					touchevent = 'pointerdown.superfish';
				}
				if (!ios) {
					touchevent += ' touchend.superfish';
				}
				if (wp7) {
					touchevent += ' mousedown.superfish';
				}
				$menu
					.on('focusin.superfish', 'li', over)
					.on('focusout.superfish', 'li', out)
					.on(touchevent, 'a', o, touchHandler);
			};

return {
			// public methods
			hide: function (instant) {
				if (this.length) {
					var $this = this,
						o = getOptions($this);
					if (!o) {
						return this;
					}
					var not = (o.retainPath === true) ? o.$path : '',
						$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
						speed = o.speedOut;

if (instant) {
						$ul.show();
						speed = 0;
					}
					o.retainPath = false;

if (o.onBeforeHide.call($ul) === false) {
						return this;
					}

$ul.stop(true, true).animate(o.animationOut, speed, function () {
						var $this = $(this);
						o.onHide.call($this);
					});
				}
				return this;
			},
			show: function () {
				var o = getOptions(this);
				if (!o) {
					return this;
				}
				var $this = this.addClass(o.hoverClass),
					$ul = $this.children(o.popUpSelector);

if (o.onBeforeShow.call($ul) === false) {
					return this;
				}

$ul.stop(true, true).animate(o.animation, o.speed, function () {
					o.onShow.call($ul);
				});
				return this;
			},
			destroy: function () {
				return this.each(function () {
					var $this = $(this),
						o = $this.data('sfOptions'),
						$hasPopUp;
					if (!o) {
						return false;
					}
					$hasPopUp = $this.find(o.popUpSelector).parent('li');
					clearTimeout(o.sfTimer);
					toggleMenuClasses($this, o);
					toggleAnchorClass($hasPopUp);
					toggleTouchAction($this);
					// remove event handlers
					$this.off('.superfish').off('.hoverIntent');
					// clear animation's inline display style
					$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
						if (typeof style !== 'undefined') {
							return style.replace(/display[^;]+;?/g, '');
						}
					});
					// reset 'current' path classes
					o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
					$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
					o.onDestroy.call($this);
					$this.removeData('sfOptions');
				});
			},
			init: function (op) {
				return this.each(function () {
					var $this = $(this);
					if ($this.data('sfOptions')) {
						return false;
					}
					var o = $.extend({}, $.fn.superfish.defaults, op),
						$hasPopUp = $this.find(o.popUpSelector).parent('li');
					o.$path = setPathToCurrent($this, o);

$this.data('sfOptions', o);

toggleMenuClasses($this, o, true);
					toggleAnchorClass($hasPopUp, true);
					toggleTouchAction($this);
					applyHandlers($this, o);

$hasPopUp.not('.' + c.bcClass).superfish('hide', true);

o.onInit.call(this);
				});
			}
		};
	})();

$.fn.superfish = function (method, args) {
		if (methods[method]) {
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
		}
		else if (typeof method === 'object' || ! method) {
			return methods.init.apply(this, arguments);
		}
		else {
			return $.error('Method ' +  method + ' does not exist on jQuery.fn.superfish');
		}
	};

$.fn.superfish.defaults = {
		popUpSelector: 'ul,.sf-mega', // within menu context
		hoverClass: 'sfHover',
		pathClass: 'overrideThisToUse',
		pathLevels: 1,
		delay: 800,
		animation: {opacity: 'show'},
		animationOut: {opacity: 'hide'},
		speed: 'normal',
		speedOut: 'fast',
		cssArrows: true,
		disableHI: false,
		onInit: $.noop,
		onBeforeShow: $.noop,
		onShow: $.noop,
		onBeforeHide: $.noop,
		onHide: $.noop,
		onIdle: $.noop,
		onDestroy: $.noop,
		onHandleTouch: $.noop
	};

})(jQuery, window);

/**
 * hoverIntent is similar to jQuery's built-in "hover" method except that
 * instead of firing the handlerIn function immediately, hoverIntent checks
 * to see if the user's mouse has slowed down (beneath the sensitivity
 * threshold) before firing the event. The handlerOut function is only
 * called after a matching handlerIn.
 *
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license. Basically that
 * means you are free to use hoverIntent as long as this header is left intact.
 * Copyright 2007, 2013 Brian Cherne
 *
 * // basic usage ... just like .hover()
 * .hoverIntent( handlerIn, handlerOut )
 * .hoverIntent( handlerInOut )
 *
 * // basic usage ... with event delegation!
 * .hoverIntent( handlerIn, handlerOut, selector )
 * .hoverIntent( handlerInOut, selector )
 *
 * // using a basic configuration object
 * .hoverIntent( config )
 *
 * @param  handlerIn   function OR configuration object
 * @param  handlerOut  function OR selector for delegation OR undefined
 * @param  selector    selector OR undefined
 * @author Brian Cherne <brian(at)cherne(dot)net>
 **/
(function($) {
    $.fn.hoverIntent = function(handlerIn,handlerOut,selector) {

// default configuration values
        var cfg = {
            interval: 100,
            sensitivity: 7,
            timeout: 0
        };

if ( typeof handlerIn === "object" ) {
            cfg = $.extend(cfg, handlerIn );
        } else if ($.isFunction(handlerOut)) {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerOut, selector: selector } );
        } else {
            cfg = $.extend(cfg, { over: handlerIn, out: handlerIn, selector: handlerOut } );
        }

// instantiate variables
        // cX, cY = current X and Y position of mouse, updated by mousemove event
        // pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
        var cX, cY, pX, pY;

// A private function for getting mouse position
        var track = function(ev) {
            cX = ev.pageX;
            cY = ev.pageY;
        };

// A private function for comparing current and previous mouse position
        var compare = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            // compare mouse positions to see if they've crossed the threshold
            if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) < cfg.sensitivity ) {
                $(ob).off("mousemove.hoverIntent",track);
                // set hoverIntent state to true (so mouseOut can be called)
                ob.hoverIntent_s = 1;
                return cfg.over.apply(ob,[ev]);
            } else {
                // set previous coordinates for next time
                pX = cX; pY = cY;
                // use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
                ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
            }
        };

// A private function for delaying the mouseOut function
        var delay = function(ev,ob) {
            ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
            ob.hoverIntent_s = 0;
            return cfg.out.apply(ob,[ev]);
        };

// A private function for handling mouse 'hovering'
        var handleHover = function(e) {
            // copy objects to be passed into t (required for event object to be passed in IE)
            var ev = jQuery.extend({},e);
            var ob = this;

// cancel hoverIntent timer if it exists
            if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }

// if e.type == "mouseenter"
            if (e.type == "mouseenter") {
                // set "previous" X and Y position based on initial entry point
                pX = ev.pageX; pY = ev.pageY;
                // update "current" X and Y position based on mousemove
                $(ob).on("mousemove.hoverIntent",track);
                // start polling interval (self-calling timeout) to compare mouse coordinates over time
                if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}

// else e.type == "mouseleave"
            } else {
                // unbind expensive mousemove event
                $(ob).off("mousemove.hoverIntent",track);
                // if hoverIntent state is true, then call the mouseOut function after the specified delay
                if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
            }
        };

// listen for mouseenter and mouseleave
        return this.on({'mouseenter.hoverIntent':handleHover,'mouseleave.hoverIntent':handleHover}, cfg.selector);
    };
})(jQuery);

jQuery(document).ready(function(){
		jQuery('ul.navbar').superfish();
	});