about the lab - Liveweave

<!DOCTYPE html>
<html>
<head>
  <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>HTML, CSS and JavaScript demo</title>
</head>
<body>

<div class="headernav">
  <div class="headernav-item">
    <img src="https://i.imgur.com/l4FDnZ5.png" width="300">
  </div>
 
  
  <div class="headernav-item">
    <ul class="sf-menu sf-navbar"> 
      <li><a href="#">LAB</a>
        <ul>
          <li><a href="#">ABUOT LAB</a></li>
          <li><a href="#">MEMBERSHIP</a></li>
          <li><a href="#">OPEN PROJECT</a></li>
        </ul>
      </li>
      <li><a href="#">CLASS</a></li>
      <li><a href="#">EVENT</a></li>
      <li><a href="#">COMMUNITY</a>
        <ul>
          <li><a href="#">HIGH SCHOOL</a></li>
          <li><a href="#">HIGH EDUCATION</a></li>
          <li><a href="#">OUTREACH</a></li>
         </ul>
      </li>
      <li><a href="#">ABOUT</a>
        <ul>
          <li><a href="#">PEOPLE</a></li>
          <li><a href="#">PRESS</a></li>
          <li><a href="#">SUPPORT US</a></li>
         </ul>
      </li>
    </ul>  
  </div>
  
 
</div>
<div class="page-header">
  <h1> ABOUT LAB</h1>
</div>

<div class="slideshow-container">
  <div class="slider">
    <div> <img src="https://i.imgur.com/UyMUPdy.jpg" ></div>
    <div> <img src="https://i.imgur.com/GjwZgqF.jpg"></div>
  </div>
  <div class="lab-info">
    <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.<br><br>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.</p>
  </div>
</div>  
<div class="button">
  <p>Join Membership!</p>
</div>

<div class="tabs">
	<input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
	<label for="tab-1" class="label">Equipments</label>
	<div class="panel">
	  <ul>
        <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>
        <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>   
      </ul>
	</div>

<input name="tabs" type="radio" id="tab-2" class="input"/>
	<label for="tab-2" class="label">Disposables</label>
	<div class="panel">
	  <ul>
        <li>Centrifuge tubes (1.5, 15 & 50 mL) and spectrophotometer cuvettes 
 </li>
        <li>5, 10 and 25 mL serological pipettes</li>
        <li>Microscopes</li>
        <li>Refrigerators, -20 and -80Â°C Freezers</li>
        <li>Gloves</li> 
        <li>Petri Dishes</li>
        <li>Pipette tips</li>
      </ul>
	</div>

<input name="tabs" type="radio" id="tab-3" class="input"/>
	<label for="tab-3" class="label">Clemantine</label>
	<div class="panel">
	  <ul>
        <li>SDefined and Complex Bacterial  Media +/- Aga </li>
        <li>Selection antibiotics (Amp, Kan. Chlor)</li>
        <li>Agarose, loading buffer, DNA ladders, 50x TAE, gel stains</li>
        <li>Assorted buffers and common reagents</li>
      </ul>
	</div>
</div>
  
  
  

  </body>
</html>

.headernav {
  display: grid;
  grid-template-columns: 30% 70% ;

}

.headernav-item {
  padding: 0px 0px 20px 50px;
  font-size: 18px;
 display: inline-block;
/* text-align: right; */
}

}
/* nav */
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0  auto;
	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: inherit;
}
.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:.5em 2em;
	text-decoration: none;
	zoom: 1; /* IE7 */
}
.sf-menu a {
	color: #6A5ACD;
}
.sf-menu li {
	background: #BDD2FF;
	white-space: nowrap; /* no need for Supersubs plugin */
	transition: background .2s;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* 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;
}

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
	background: #BDD2FF;
	position: fixed;
	margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;

height: 200%;
	width: 100%;
}
.sf-navbar ul {
	box-shadow: none;
}
.sf-navbar li {
	background: #AABDE6;
	position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
	border: none;
}
.sf-navbar > li > ul {
	min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
	background: #BDD2FF;
	position: relative;
}
.sf-navbar ul ul {
	left: 0;
	top: 100%;
}
.sf-navbar ul ul li {
	width: 100%;
}
.sf-navbar > li > ul > li {
	float: left;
}
.sf-navbar li.current {
	background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
	background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
	background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
	background: #E6EEFF;
}
.sf-navbar ul li.current > a {
	font-weight: bold;
}

/*** point all arrows down ***/
.sf-arrows.sf-navbar ul .sf-with-ul:after {
	margin-top: -3px;
	margin-right: 0;
	border-color: transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}

.sf-arrows.sf-navbar ul > li > .sf-with-ul:focus:after,
.sf-arrows.sf-navbar ul > li:hover > .sf-with-ul:after,
.sf-arrows.sf-navbar ul > .sfHover > .sf-with-ul:after {
	border-color: transparent;
	border-top-color: white;
}

/* header */
.page-header{
  padding: 50px 0px 50px ;
  color: orange;
  margin: 0px 0px 0px 100px;
}

/* slideshow */
.bx-wrapper {
  margin: 10px auto;
  width:1000px; 
  height:700px; 
  text-align: center; 
  background-color: #0000FF;
}
.bx-wrapper img{
  height: 680;
  margin: auto;
  display: inline-block;
}

.lab-info{
  width: 800px;
  margin: 0 auto;
  color: #FFA500;
}

.button{
  background-color: #FFA500;
  width: 200px;
  margin: 50 auto;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
}

/* tab */
* {
	box-sizing: border-box;
}

body {
	padding: 10px;
	background: #6a5acd;
    font-family: "Andale Mono", AndaleMono, monospace;
}

.tabs {
	display: flex;
	flex-wrap: nowrap;
	max-width: 800px;
	background: #efefef;
    margin: 20 auto;
}
.input {
	position: absolute;
	opacity: 0;
}
.label {
	width: 25%;
	padding: 20px 20px;
	background: #6a5acd;
	cursor: pointer;
	font-weight: bold;
	font-size: 18px;
	color: #fff;
	transition: background 0.1s, color 0.1s;
    border-right: 1px solid white ;
}

.label:hover {
	background: #d8d8d8;
    color:#6a5acd;
    border: 1px solid white;
}

.label:active {
	background: #ccc;
}

.input:focus + .label {
	z-index: 1;
}

.input:checked + .label {
	background: orange;
	color:#fff ;
}
.panel {
	display: none;
    min-height: 300px;
    max-height: 450px;
	padding: 20px 30px 30px;
	background:orange;
    color: #6a5acd;
}

.input:checked + .label + .panel {
	display: block;
}