Difference between revisions of "Team:Northwestern/Team"

 
(297 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{Northwestern_Page_Head}}
+
{{Northwestern_Page_Head_temp}}  
−
{{Navbar}}
+
{{Navbar_temp}}
  
 
<html>
 
<html>
−
<title>Northwestern Template</title>
+
<head>  
−
<meta charset="UTF-8">
+
<style>
 +
.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">
+
}
 +
 
 +
h2 span {
 +
margin-left: 1em;
 +
color: #aaa;
 +
font-size: 32%;
 +
}
 +
 
 +
</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;
+
foo {
−
  font-size: 20px;
+
text-decoration:none;
−
  position: absolute;
+
−
  top: 50%;
+
−
  left: 50%;
+
−
  transform: translate(-50%, -50%);
+
−
  -ms-transform: translate(-50%, -50%);
+
 
}
 
}
−
 
−
.border { border: 5px solid black; }
 
 
</style>
 
</style>
−
 
 
</head>
 
</head>
  
−
<body style="background-color: purple">
 
  
−
<h2 class="w3-center"></h2>
 
  
−
<div class="w3-content w3-section" style="max-width:500px">
+
<body>
−
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/0/02/T--Northwestern--JackFlip.jpeg" width:"400px" height="200px">
+
−
  <img class="mySlides" src="https://static.igem.org/mediawiki/2017/f/f3/T-Northwestern_PI-.jpg" width:"400px" height="200px">">
+
−
</div>
+
  
−
<script>
+
<body style="height:100%;">
−
var myIndex = 0;
+
<div>
−
carousel();
+
<center><h2><br><br>Meet our Team<br><br></h2>
−
 
+
−
function carousel() {
+
−
    var i;
+
−
    var x = document.getElementsByClassName("mySlides");
+
−
    for (i = 0; i < x.length; i++) {
+
−
      x[i].style.display = "none"; 
+
−
    }
+
−
    myIndex++;
+
−
    if (myIndex > x.length) {myIndex = 1}   
+
−
    x[myIndex-1].style.display = "block"; 
+
−
    setTimeout(carousel, 2000); // Change image every 2 seconds
+
−
}
+
−
</script>
+
−
 
+
−
<h1 class= "w3-center" style="color: purple"> Meet the Team!</h2>
+
−
<p class="w3-center"> The <span style="color: red"> ~brains~  </span> behind the brawn </p>
+
−
<br>
+
−
 
+
−
<div class= "w3-row">
+
−
<div class="w3-col m3">
+
−
<div class="container">
+
−
<img src="https://static.igem.org/mediawiki/2017/8/8a/T-Northwestern_headshot_chuck.jpeg" width="200px" height="250px" onclick="document.getElementById('id01').style.display='block'" class="border">
+
−
 
+
−
  <div id="id01" class="w3-modal">
+
−
    <div class="w3-modal-content w3-card-4">
+
−
      <header class="w3-container w3-teal">
+
−
        <span onclick="document.getElementById('id01').style.display='none'"
+
−
        class="w3-button w3-display-topright">&times;</span>
+
−
        <h2>Charley Rees, Junior Mechanical Engineer</h2>
+
−
      </header>
+
−
      <div class="w3-container">
+
−
        <p style= "font-size: 16px">if you need any proof that irony is a fickle mistress, I am a local Evanston townie who grew up making fun of nerdy NU students. As a Wildcat, I spend my days as a mechanical engineering student who loves math and building things. Some of my many eclectic interests include product design, hydroponics, manufacturing, renewable energy, and why people are interested in the Kardashians. When I’m not doing STEM related activities, you can find me at the beach, a Will Ferrel Movie, or doing a cheesy 90’s workout video.</p>
+
−
       
+
−
      </div>
+
 
</div>
 
</div>
−
</div>
 
−
</div>
 
−
</div>
 
  
−
<div class="w3-col m3">
 
−
<div class="container">
 
−
<img src="https://static.igem.org/mediawiki/2017/f/f1/T-Northwesternkaterina.jpg" width="200px" height="250px" onclick="document.getElementById('id02').style.display='block'" class="border">
 
  
−
  <div id="id02" class="w3-modal">
+
<center style="text-decoration: none;"><figure>
−
    <div class="w3-modal-content w3-card-4">
+
<img src="https://static.igem.org/mediawiki/2017/thumb/c/ce/T--Northwestern--team.png/800px-T--Northwestern--team.png" usemap="#image-map">
−
      <header class="w3-container w3-teal">
+
−
        <span onclick="document.getElementById('id02').style.display='none'"
+
−
        class="w3-button w3-display-topright">&times;</span>
+
−
        <h2> Katerina , Junior Mechanical Engineer</h2>
+
−
      </header>
+
−
      <div class="w3-container">
+
−
        <p style= "font-size: 16px"> I am a fourth-year Biomedical Engineering student hoping to pursue medical school following graduation. Having grown up in Athens, Greece scientific terminology does not intimidate me, although I still struggle to pronounce the most obscure names of bacteria. I am currently involved in imaging research for cancer diagnostics, but recently became fascinated by the field of synthetic biology and by how we can engineer bacteria to do the unimaginable. When not in lab, I’m probably reading mystery novels, or trying to improve my tennis serve.</p>
+
−
       
+
−
      </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>  
+
  
−
<div class="w3-col m3">  
+
<map name="image-map">
−
<div class="container">  
+
    <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">
−
<img src="https://static.igem.org/mediawiki/2017/f/f1/T-Northwesternkaterina.jpg" width="200px" height="250px" onclick="document.getElementById('id02').style.display='block'" class="border">
+
    <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 id="id02" class="w3-modal">
 
−
    <div class="w3-modal-content w3-card-4">
 
−
      <header class="w3-container w3-teal">
 
−
        <span onclick="document.getElementById('id02').style.display='none'"
 
−
        class="w3-button w3-display-topright">&times;</span>
 
−
        <h2> Katerina , Junior Mechanical Engineer</h2>
 
−
      </header>
 
−
      <div class="w3-container">
 
−
        <p style= "font-size: 16px"> I am a fourth-year Biomedical Engineering student hoping to pursue medical school following graduation. Having grown up in Athens, Greece scientific terminology does not intimidate me, although I still struggle to pronounce the most obscure names of bacteria. I am currently involved in imaging research for cancer diagnostics, but recently became fascinated by the field of synthetic biology and by how we can engineer bacteria to do the unimaginable. When not in lab, I’m probably reading mystery novels, or trying to improve my tennis serve.</p>
 
−
       
 
−
      </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
  
−
<div class="w3-col m3">
 
−
<div class="container">
 
−
<img src="https://static.igem.org/mediawiki/2017/f/f1/T-Northwesternkaterina.jpg" width="200px" height="250px" onclick="document.getElementById('id02').style.display='block'" class="border">
 
  
−
  <div id="id02" class="w3-modal">
+
<div>
−
    <div class="w3-modal-content w3-card-4">
+
<center><h2><br><br>Meet our advisors</h2>
−
      <header class="w3-container w3-teal">  
+
−
        <span onclick="document.getElementById('id02').style.display='none'"
+
−
        class="w3-button w3-display-topright">&times;</span>
+
−
        <h2> Katerina , Junior Mechanical Engineer</h2>
+
−
      </header>
+
−
      <div class="w3-container">
+
−
        <p style= "font-size: 16px"> I am a fourth-year Biomedical Engineering student hoping to pursue medical school following graduation. Having grown up in Athens, Greece scientific terminology does not intimidate me, although I still struggle to pronounce the most obscure names of bacteria. I am currently involved in imaging research for cancer diagnostics, but recently became fascinated by the field of synthetic biology and by how we can engineer bacteria to do the unimaginable. When not in lab, I’m probably reading mystery novels, or trying to improve my tennis serve.</p>
+
−
       
+
−
      </div>
+
 
</div>
 
</div>
−
</div>
+
<p style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
−
</div>
+
<h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
−
</div>  
+
  
 +
<center>
 +
<button class="foo">
 +
<a style="text-decoration:none !important;" class="foo" href="#JL">
 +
<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>
  
−
</div>
+
<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>
  
−
 
+
</p>
−
 
+
−
 
+
−
<h2 class="w3-center"> Meet our Advisors! </h2> <br> <br>
+
−
 
+
−
<div class="row">
+
−
  <div class="column">
+
−
<div class="scontainer">
+
−
    <img src="https://static.igem.org/mediawiki/2017/5/58/T-Northwestern_jewett.jpeg" width = "250px" height="250px"class="border">
+
−
    <div class="overlay">
+
−
    <div class ="text"> Dr. Michael Jewett </div>
+
 
</div>
 
</div>
−
</div>
 
−
</div>
 
  
−
<div class="column">
 
−
<div class="scontainer">
 
−
<img src= "https://static.igem.org/mediawiki/2017/6/68/T-Northwestern-Tyo.jpg" width = "250px" height="250px" class="border">
 
−
<div class="overlay">
 
−
<div class="text"> Dr. Keith E Tyo </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="column">
 
−
<div class="scontainer">
 
−
<img src="https://static.igem.org/mediawiki/2017/8/87/T-Northwestern-Tullman-Ereck.jpg" width = "250px" height="250px" class="border">
 
−
<div class="overlay">
 
−
<div class = "text"> Dr. Danielle Tullman-Ereck </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<h2 class="w3-center"> Meet our grad students! </h2>
 
−
<br> <br> 
 
−
 
−
<div class="w3-row">
 
−
  <div class="w3-col m3">
 
−
<div class="tcontainer">
 
−
    <img src="https://static.igem.org/mediawiki/2017/7/7b/T-Northwestern_Patrick.jpg" width = "250px" height="250px" class= "w3-margin-left border">
 
−
    <div class="goverlay w3-margin-left">
 
−
    <div class ="text"> Bradley Biggs </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="w3-col m3">
 
−
<div class="tcontainer">
 
−
<img src= "https://static.igem.org/mediawiki/2017/c/c6/T-Northwestern-Bradley.jpg" width = "250px" height="250px" class="border">
 
−
<div class="goverlay">
 
−
<div class="text"> Patrick Donahue </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="w3-col m3">
 
−
<div class="tcontainer">
 
−
<img src="https://static.igem.org/mediawiki/2017/5/5e/T-Northwestern-Bon.jpeg" width = "250px" height="250px" class="border">
 
−
<div class="goverlay">
 
−
<div class = "text"> Bon Ikwuagwu </div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
 
−
<div class="w3-col m3">
 
−
<div class="tcontainer">
 
−
<img src="https://static.igem.org/mediawiki/2017/9/9e/T-Northwestern-Tyler.jpg" width = "250px" height="250px" class="border">
 
−
<div class="goverlay">
 
−
<div class = "text"> Tyler Lazar </div>
 
−
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<br>
 
−
<br>
 
  
 +
<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>
  
−
</html>  
+
</body>
−
{{ Northwestern Page Foot}}
+
</html>

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