homepage - Liveweave

<!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>
<title>homepage</title>
</head>
<body>

<div class="canves">
    <div class="header-container">
      <div class="grid-container">
        <div class="grid-item">
            <img src="https://i.imgur.com/RAOdbmr.gif"/ width="150">
        </div>
        <div class="grid-item">
          <div class="navigation">
          
         <ul class="sf-menu">
            <li><a href="#">JOIN US</a>
              <ul>
                <li><a href="#">MEMBERSHIPS</a></li>
                <li><a href="#">CLASS</a></li>
              </ul>
            </li>

<li><a href="#">COMMUNITY</a>
              <ul>
                <li><a href="#">PROJECTS</a></li>
                <li><a href="#">EVENTS</a></li>
              </ul>

</li>

<li><a href="#">ABOUT</a></li>

<li><a href="#">CONTACT</a>
              <ul>
                <li><a href="#">PEOPLE</a></li>
                <li><a href="#">JOBS</a></li>
             </ul>
            </li>

<li id="white-back"class="green"><a href="#">SUPPORT US </a></li>

</ul>
        </div>
      </div>
     </div>
    </div>
  
  
  <div class="slider">
    <img src="https://i.imgur.com/SVlKaYT.png"/>
    <img src="https://i.imgur.com/SVlKaYT.png"/>
  </div>
 
    <div class="genspace-intro">
      <p><strong><i>Genspace</i></strong> is the worldâ€™s first community labâ€”a place where anyone can learn and work on biotechnology. Since 2009, we have served the greater New York area by providing STEM educational outreach, classes for adults, cultural events, and a platform for science innovation at the grassroots level.he worldâ€™s first community labâ€”a place where anyone can learn and work on biotechnology. Since 2009, we have served the greater New York area by providing STEM educational outreach, classes for adults, cultural events, and a platform for science innovation at the grassroots level.</p>
    </div>
  
   <img class="video" src="https://i.imgur.com/DRtNk3L.png"/>
    
    <div class="image-container">
      <div class="image-item">
        <img src="https://i.imgur.com/DrL4Nf6.png"/ width="400px">
        <img src="https://i.imgur.com/Zk3ouid.png"/ width="400px">
        <img src="https://i.imgur.com/m5Gbd93.png"/ width="400px">
      </div>
    </div>
  
    <div class="information-container">
      <div class="information-item">
        <div class="info-1">
          <h2><strong><i>JOIN OUR LAB</i></strong></h2>
          <p>At Genspace, anyone can work in our biolab on their own project. Receive 24/7 access to our facility, equipment, and basic lab training from our staff.</p>
        </div>
        <div class="info-2">
          <h2><strong><i>TAKE A CLASS</i></strong></h2>
          <p>Genspace instructors come from top institutions around the New York City area to teach advanced biology in an easy-to-understand, hands-on way.</p>
        </div>
        <div class="info-3">
          <h2><strong><i>STUDENT PROGRAMS</i></strong></h2>
          <p>To meet the STEM education needs of NYC's students we provide extramural learning opportunities like internships, teacher training, and lab resources.</p>
        </div>
      </div>
    </div>

<div class="learn-container">
      <div class="learn-item">
        <img src="https://i.imgur.com/yPRM23r.png"/ width="46%">
        <img src="https://i.imgur.com/yPRM23r.png"/ width="46%">
        <img src="https://i.imgur.com/yPRM23r.png"/ width="46%">
      </div>
    </div>  
  
  <div class="line1"></div>
  <div class="line2"></div>
  
     <div class="bottom-container">
      <div class="grid-item">
        <p><strong>subscirbe</strong> to recive new email and updates<br/>contact us<br/>news</p>
      </div>
      <img src="https://i.imgur.com/2nNdq0a.png"/>
    </div>
    
    
    <div class="bottom-info">
      <img class="social" src="https://i.imgur.com/3LI1iYW.png"/ width="100">
      <div class="address"><p>132 32nd Street, Suite 108, Brooklyn, NY 11232 </p></div>
    </div>
    
    
    
    
    
  
  
  </div>

</body>
</html>

/*** 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 {
	border-left: 1px solid #fff;
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(255,255,255,.5);
	padding: .75em 1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #13a;
}
.sf-menu li {
	background: #BDD2FF;
	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: white;
}
.sf-menu ul ul li {
	background: white;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: gray;
	/* 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: gray; /* 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: gray; /* 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: gray;
}

.navigation{
  font-family: avenir;
}

.sf-menu a {
  color: #000000;
}
.sf-menu li{
  background-color: #FFFFFF;
}

.green a {
  color: green;
 
}
#white-back * {
  background-color: white;
}

.canves{
  width: 1440;
  
}
.header-container{
  height: 80px;
  width: 100%;
  
}
.grid-container{
  display: grid;
  grid-template-columns: 60% 40%;
}

.slider{
  display: block;
  margin-left: auto;
  margin-right: auto;
}
    
.genspace-intro{
  display: block;
  margin: auto;
  width: 780px;
  font-family: avenir;
  font-size: 20px;
  line-height: 150%
}

.video{
  width: 780px;
  display: block;
  margin: auto;
  margin-top: 40px;
}

.image-item{
  display: grid;
  grid-template-columns: 30% 30% 30%;
  float: right;
  column-gap: 52px;
  margin-right: 50px;
  margin-top: 50px;
}

h2{
  font-family: avenir;
  font-size: 24px;
}

p{
  font-family: avenir;
  font-size: 20px;
  line-height: 150%;
}

.information-container{
  display: block;
  margin: auto;
  margin-top: 480px;
  margin-left: 75px;
}

.information-item{
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 50px;
  
}

.learn-container{
  display: block;
  margin: auto;
  margin-left: 75px;
  margin-top: -10px;
}

.learn-item{
  display: grid;
  grid-template-columns: 30% 30% 30%;
  column-gap: 50px;
}

.line1{
  width: 100%;
  height: 1px;
  background-color: #808080;
  margin-top: 200px;
}
.line2{
  width: 100%;
  height: 1px;
  background-color: green;
  margin-top: 10px;
}

.bottom-container{
  display: grid;
  grid-template-columns: 70% 30%;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
.social{
  display: block;
  margin: auto;
}
.address{
  display: block;
  margin-left: 520px;
}

// Write JavaScript here // Write JavaScript here // Write JavaScript here // Write JavaScript here

/**
 * 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 Superfish Menu Plugin - v1.7.10
 * Copyright (c) 2018 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);

$(document).ready(function(){
      $('.slider').bxSlider();
    });