Difference between revisions of "Team:Northwestern/Team"

 
(146 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Northwestern_Page_Head_temp}}
+
{{Northwestern_Page_Head_temp}}  
 
{{Navbar_temp}}
 
{{Navbar_temp}}
  
 
<html>
 
<html>
 
<head>  
 
<head>  
−
<title>Northwestern Template</title>
+
<style>
−
<meta charset="UTF-8">
+
.foo img:last-child{display:none}
 +
.foo:hover img:first-child{display:none}
 +
.foo:hover img:last-child{display:inline-block}
 +
}
  
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
/*h2 {
−
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
padding: 0;
−
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
+
font-weight: 200;*/
−
<link rel="stylesheet" href="https://cdhttps://2017.igem.org/njs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
−
</head>
+
−
 
+
−
 
+
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+
−
<script src="https://github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.min.js"></script>
+
−
<script>
+
−
$('.smooth').on('click', function() {
+
−
    $.smoothScroll({
+
−
        scrollElement: $('body'),
+
−
        scrollTarget: '#' + this.id
+
−
    });
+
−
   
+
−
    return false;
+
−
});
+
−
 
+
−
function w3_close() {
+
−
    document.getElementById("mySidebar").style.display = "none";
+
−
    document.getElementById("myOverlay").style.display = "none";
+
 
}
 
}
  
−
// Modal Image Gallery
+
h2 span {
−
function onClick(element) {
+
margin-left: 1em;
−
  document.getElementById("img01").src = element.src;
+
color: #aaa;
−
  document.getElementById("modal01").style.display = "block";
+
font-size: 32%;
−
  var captionText = document.getElementById("caption");
+
−
  captionText.innerHTML = element.alt;
+
 
}
 
}
  
−
</script>
+
</style>
  
  
 
<style>
 
<style>
−
html {
+
p {padding-top: 0px; padding-right: 170px; padding-bottom: 10px; padding-left: 170px;}
−
  box-sizing: border-box;
+
p{ background-color: #f7f3ed;}
−
}
+
center{ background-color: #f7f3ed;}
 +
button{border: 0; background-color: #f7f3ed;}
 +
figure {background-color: #f7f3ed;}
 +
h2{margin: 0; background-color: #f7f3ed;}
 +
h3{margin: 0; background-color: #f7f3ed;}
 +
body{background-color: #f7f3ed;}
 +
</style>
 +
</head>
  
−
*, *:before, *:after {
+
<style>
−
  box-sizing: inherit;
+
p.big {
 +
    line-height: 1.8;
 
}
 
}
  
−
.column {
+
 
−
  float: left;
+
/* Modal Image */
−
  width: 33.3%;
+
/* The Modal (background) */
−
  margin-bottom: 16px;
+
.modal {
−
  padding: 0 8px;
+
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 
}
 
}
  
−
@media (max-width: 650px) {
+
/* Modal Content (image) */
−
  .column {
+
.modal-content {
−
     width: 100%;
+
     margin: auto;
 
     display: block;
 
     display: block;
−
  }
+
    width: 60%;
 +
    height: 90%;
 +
    max-width: 700px;
 
}
 
}
  
−
.card {
+
/* Caption of Modal Image */
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 60%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 
}
 
}
  
−
.container {
+
/* Add Animation */
−
  padding: 0 16px;
+
.modal-content, #caption {  
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 
}
 
}
  
−
.container::after, .row::after {
+
@-webkit-keyframes zoom {
−
  content: "";
+
    from {-webkit-transform:scale(0)}
−
  clear: both;
+
    to {-webkit-transform:scale(1)}
−
  display: table;
+
 
}
 
}
  
−
.title {
+
@keyframes zoom {
−
  color: grey;
+
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 
}
 
}
  
−
.scontainer {
+
/* The Close Button */
−
  position: relative;
+
.close {
−
  width: auto;
+
    position: absolute;
 +
    top: 15px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 
}
 
}
  
−
.tcontainer {
+
.close:hover,
−
  position: relative;
+
.close:focus {
−
  width: auto;
+
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 
}
 
}
  
−
.image {
+
/* 100% Image Width on Smaller Screens */
−
  display: block;
+
@media only screen and (max-width: 700px){
−
  width: 100%;
+
    .modal-content {
−
  height: auto;
+
        width: 100%;
 +
    }
 
}
 
}
  
−
.overlay {
+
p {  
−
  position: absolute;
+
   background-color: #f7f3ed;
−
  top: 0;
+
−
  bottom: 0;
+
−
  right: 0;
+
−
  left: 0;
+
−
  height: 250px;
+
−
  width: 250px;
+
−
  opacity: 0;
+
−
  transition: .5s ease;
+
−
   background-color: #c75eed;
+
 
}
 
}
−
 
+
button{
−
.goverlay {
+
   border: 0; background-color: #f7f3ed;
−
   position: absolute;
+
−
  top: 0;
+
−
  bottom: 0;
+
−
  right: 0;
+
−
  left: 0;
+
−
  height: 250px;
+
−
  width: 250px;
+
−
  opacity: 0;
+
−
  transition: .5s ease;
+
−
  background-color: #297dd6;
+
 
}
 
}
−
 
+
figure {  
−
.scontainer:hover .overlay {
+
   background-color: #f7f3ed;
−
   opacity: 1;
+
 
}
 
}
−
 
+
h2{
−
.tcontainer:hover .goverlay {
+
   background-color: #f7f3ed;
−
   opacity: 1;
+
 
}
 
}
−
 
+
body {
−
 
+
   background-color: #f7f3ed;  
−
.text {
+
−
   color: white;
+
−
  font-size: 20px;
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  left: 50%;
+
−
  transform: translate(-50%, -50%);
+
−
  -ms-transform: translate(-50%, -50%);
+
 
}
 
}
−
 
+
foo {  
−
.border { border: 5px solid black; }
+
text-decoration:none;
−
 
+
−
hr.style11 {
+
−
height: 10px;
+
−
background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
+
−
    border: 0;
+
 
}
 
}
 +
</style>
 +
</head>
  
−
p {
 
  
−
font-family: josefin-sans, sans-serif;
 
−
size: 22px;
 
−
}
 
  
−
li {
+
<body>
  
−
font-size: 22px;
+
<body style="height:100%;">
−
font-family: josefin-sans, sans-serif;
+
<div>
 +
<center><h2><br><br>Meet our Team<br><br></h2>
 +
</div>
  
−
}
 
−
</style>
 
  
 +
<center style="text-decoration: none;"><figure>
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/c/ce/T--Northwestern--team.png/800px-T--Northwestern--team.png" usemap="#image-map">
  
−
<!-- First Parallax Image with Logo Text -->
+
<map name="image-map">
−
<div class=" w3-display-container id="top">
+
    <area target="" alt="" title="Jack" href="https://2017.igem.org/Team:Northwestern/Team/Jack" coords="185,118,176,126,186,144,192,126" shape="poly">
−
  <div>
+
    <area target="" alt="" title="Katerina" href="https://2017.igem.org/Team:Northwestern/Team/Katerina" coords="275,161,268,174,275,191,282,172" shape="poly">
 +
    <area target="" alt="" title="Ayesha" href="https://2017.igem.org/Team:Northwestern/Team/Ayesha" coords="373,169,365,179,372,197,379,179" shape="poly">
 +
    <area target="" alt="" title="Lulu" href="https://2017.igem.org/Team:Northwestern/Team/Lulu" coords="464,169,455,179,464,197,470,179" shape="poly">
 +
    <area target="" alt="" title="Will" href="https://2017.igem.org/Team:Northwestern/Team/Will" coords="553,156,545,167,552,183,558,168" shape="poly">
 +
    <area target="" alt="" title="Tyler" href="https://2017.igem.org/Team:Northwestern/Team/Tyler" coords="672,117,663,130,673,148,679,131" shape="poly">
 +
</map>
 +
</figure><p><center>Not shown: <a href="https://2017.igem.org/Team:Northwestern/Team/Charley">Charley Rees</a> and <a href="https://2017.igem.org/Team:Northwestern/Team/Karen">Karen Taylor</a></center></p></center>
  
−
<div class="w3-row">
 
−
    <div class="w3-third">
 
−
      <img src="https://static.igem.org/mediawiki/2017/7/75/T-lulu.jpeg" style="width:100%"  onclick="onClick(this)" alt="A boy surrounded by beautiful nature">
 
−
      <img src="https://static.igem.org/mediawiki/2017/2/2d/T-Northwestern_karen_.jpg" style="width:100%"    onclick="onClick(this)" alt="What a beautiful scenery this sunset">
 
−
      <img src="https://static.igem.org/mediawiki/2017/0/04/T-Northwestern_Headshot_Ayesha.jpeg" style="width:100%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
 
−
    </div>
 
  
−
    <div class="w3-third">
 
−
      <img src="https://static.igem.org/mediawiki/2017/7/75/T-Northwestern_tyler.jpeg" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
 
−
      <img src="https://static.igem.org/mediawiki/2017/8/85/Crispr_Bunch.jpg" style="width:100%" alt="Waiting for the bus in the desert">
 
−
      <img src="https://static.igem.org/mediawiki/2017/a/ac/T-northwestern_char.jpg" style="width:100%" onclick="onClick(this)" alt="Nature again.. At its finest!">
 
−
    </div>
 
−
   
 
−
    <div class="w3-third">
 
−
      <img src="https://static.igem.org/mediawiki/2017/e/ea/T-Northwestern_will.jpeg" style="width:100%" onclick="onClick(this)" alt="Canoeing again">
 
−
      <img src="https://static.igem.org/mediawiki/2017/0/0b/T-Northwestern_Kat.jpeg" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
 
−
      <img src="https://static.igem.org/mediawiki/2017/0/0d/Jack.JPG" style="width:100%" onclick="onClick(this)" alt="What a beautiful day!">
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
  </div>
 
−
<div style="z-index:1 !important;" class="w3-display-bottommiddle w3-hide-medium w3-hide-small">
 
−
<button style="position:relative !important; z-index:1 !important;" class="icon-button" onclick="window.location.href='#first'">
 
−
    <span style="color:#4C177D;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
 
−
    </span>
 
−
  </button>
 
−
</div>
 
−
</div>
 
  
−
<div style="padding:15%; background-color: #eceaea" w3-display-container" id="first">
+
<div>
−
  <div>
+
<center><h2><br><br>Meet our advisors</h2>
−
  <h1 style="color:black;" class="w3-center w3-padding-large">What is antibiotic resistance?</h1><br>  
+
−
  <p style="color:black;" class="body-cont w4-center"> If you’ve ever gone to the doctor for an ear ache, sinus infection, strep throat, or acne, you’ve probably been prescribed an antibiotic. Antibiotics fight bacteria by either stopping them from reproducing or destroying them. For example, the common antibiotic penicillin works by keeping a bacterium from building a cell wall. However, over usage of antibiotics has contributed to bacteria mutating, thereby becoming resistant to conventional antibiotics. As those bacteria go on to reproduce, in no time does a strain of bacteria become resistant to drugs.
+
−
  </p>
+
−
  <p style="color:black;" class="body-cont"> Antibiotic resistance is slowly becoming the “new black” in the world of medicine. At an ever-increasing rate, common illnesses ranging from Strep Throat to Gonorrhea are outsmarting us at every turn. Unless a solution is found to combat drug resistant infections, these common ailments could prove to be fatal.
+
−
  </p>
+
−
</div>
+
 
</div>
 
</div>
 +
<p style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
 +
<h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
  
−
<!-- Hide this text on small devices -->
+
<center>
−
</div>
+
<button class="foo">
−
 
+
<a style="text-decoration:none !important;" class="foo" href="#JL">
−
<!-- Container (Team Section) -->
+
<img src="https://static.igem.org/mediawiki/2017/c/cb/T--Northwestern--Leonard.png"  width="200px"/>
 +
<img src="https://static.igem.org/mediawiki/2017/e/e4/T--Northwestern--Leonard4.png" width="200px"/>
 +
</a>
 +
</button>
  
−
  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width)
+
<button class="foo"> 
 +
<a style="text-decoration:none !important;" class="foo" href="#KT">
 +
<img src="https://static.igem.org/mediawiki/2017/6/66/T--Northwestern--tyo.png" width="200px" />
 +
<img src="https://static.igem.org/mediawiki/2017/9/91/T--Northwestern--Tyo.png" width="200px"/>
 +
</a>
  
 +
</button>
 +
<button class="foo"> 
 +
<a style="text-decoration:none !important;" class="foo" href="#DTE">
 +
<img src="https://static.igem.org/mediawiki/2017/d/d8/T--Northwestern--dte.png"width="200px" />
 +
<img src="https://static.igem.org/mediawiki/2017/a/ae/T--Northwestern--dte2.png" width="200px"/>
 +
</a>
 +
</button>
  
 +
<button class="foo"> 
 +
<a style="text-decoration:none !important;" class="foo" href="#JM">
 +
<img src="https://static.igem.org/mediawiki/2017/4/44/T--Northwestern--Mordacq.png" width="200px" />
 +
<img src="https://static.igem.org/mediawiki/2017/2/29/T--Northwestern--Mordacq2.png" width="200px"/>
 +
</a>
 +
</button>
 +
</center>
  
−
<!-- Modal for full size images on click-->
+
</p>
−
<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
+
−
  <span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
+
−
  <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
+
−
    <img id="img01" class="w3-image">
+
−
    <p id="caption" class="w3-opacity w3-large"></p>
+
−
  </div>
+
 
</div>
 
</div>
 +
 +
 +
<h2><center><br><br>Graduate and undergraduate student network</center><br><br></h2>
 +
<center style="text-decoration: none;"><figure><img src="https://static.igem.org/mediawiki/2017/5/51/T--Northwestern--gradstudentnetwork.png" alt="" usemap="#Map" hidefocus="true" />
 +
<map style="outline: none; text-decoration: none;" name="Map" id="Map">
 +
    <area alt="Patrick" title="Patrick Donahue" shape="circle" coords="134, 107, 52">
 +
    <area alt="Bon" title="Bon Ikwuagwu" coords="604,121,54" shape="circle">
 +
    <area target="" alt="Lisa" title="Lisa Burdette" coords="47,319,46" shape="circle">
 +
    <area target="" alt="Devin" title="Devin Stanford"  coords="205,448,52" shape="circle">
 +
    <area target="" alt="Joe" title="Joe Muldoon" coords="62,548,55" shape="circle">
 +
    <area target="" alt="Taylor" title="Taylor Dickman" coords="257,675,53" shape="circle">
 +
    <area target="" alt="Han" title="Han Teng Wong" coords="497,675,59" shape="circle">
 +
    <area target="" alt="Jasmine" title="Jasmine Hershewe" coords="673,548,45" shape="circle">
 +
    <area target="" alt="Taylor" title="Taylor Dolberg" coords="714,320,52" shape="circle">
 +
<area target="" alt="Michelle Cai" title="Michelle Cai" coords="238,283,43" shape="circle">
 +
    <area target="" alt="Sam Davidson" title="Sam Davidson" coords="301,187,44" shape="circle">
 +
    <area target="" alt="Tyler Lazar" title="Tyler Lazar" coords="370,52,53" shape="circle">
 +
    <area target="" alt="Cameron Glasscock" title="Cameron Glasscock"  coords="434,174,50" shape="circle">
 +
    <area target="" alt="Chelsea Hu" title="Chelsea Hu"  coords="509,261,45" shape="circle">
 +
    <area target="" alt="Jordan Harrison" title="Jordan Harrison"  coords="625,253,47" shape="circle">
 +
    <area target="" alt="Peter Su" title="Peter Su" coords="566,375,53" shape="circle">
 +
    <area target="" alt="Paul Perkovich" title="Paul Perkovich"  coords="441,424,47" shape="circle">
 +
    <area target="" alt="Shu Huang" title="Shu Huang"  coords="326,452,51" shape="circle">
 +
    <area target="" alt="Bradley Biggs" title="Bradley Biggs"  coords="529,499,50" shape="circle">
 +
    <area target="" alt="Tasfia Azim" title="Tasfia Azim"  coords="283,562,50" shape="circle">
 +
    <area target="" alt="Sarah Stainbrook" title="Sarah Stainbrook"  coords="408,564,50" shape="circle">
 +
</map></figure></center>
  
 
</body>
 
</body>
 
</html>
 
</html>
−
{{Northwestern_Page_Foot_temp}}
 

Latest revision as of 03:07, 2 November 2017

Northwestern Template Northwestern Template

Overview Silver Gold Collaborations Engagement
Overview
Experiments Modeling Results Notebook Safety Interlab
Description Design Medal Criteria
About Us Attributions



Meet our Team

Not shown: Charley Rees and Karen Taylor



Meet our advisors



Graduate and undergraduate student network


Patrick Bon Lisa Devin Joe Taylor Han Jasmine Taylor Michelle Cai Sam Davidson Tyler Lazar Cameron Glasscock Chelsea Hu Jordan Harrison Peter Su Paul Perkovich Shu Huang Bradley Biggs Tasfia Azim Sarah Stainbrook