Difference between revisions of "Team:Northwestern/Team"

 
(307 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">
+
 
+
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora">
+
<link rel="stylesheet" href="https://cdhttps://2017.igem.org/njs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
 
+
 
+
 
<style>
 
<style>
html {
+
.foo img:last-child{display:none}
  box-sizing: border-box;
+
.foo:hover img:first-child{display:none}
 +
.foo:hover img:last-child{display:inline-block}
 
}
 
}
  
*, *:before, *:after {
+
/*h2 {
  box-sizing: inherit;
+
padding: 0;
 +
font-weight: 200;*/
 
}
 
}
  
.column {
+
h2 span {
  float: left;
+
margin-left: 1em;
  width: 33.3%;
+
color: #aaa;
  margin-bottom: 16px;
+
font-size: 32%;
  padding: 0 8px;
+
 
}
 
}
  
@media (max-width: 650px) {
+
</style>
  .column {
+
    width: 100%;
+
    display: block;
+
  }
+
}
+
  
.card {
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
}
 
  
.container {
+
<style>
  padding: 0 16px;
+
p {padding-top: 0px; padding-right: 170px; padding-bottom: 10px; padding-left: 170px;}
}
+
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>
  
.container::after, .row::after {
+
<style>
  content: "";
+
p.big {
  clear: both;
+
    line-height: 1.8;
  display: table;
+
 
}
 
}
  
.title {
 
  color: grey;
 
}
 
 
.scontainer {
 
  position: relative;
 
  width: auto;
 
}
 
 
.tcontainer {
 
  position: relative;
 
  width: auto;
 
}
 
 
.image {
 
  display: block;
 
  width: 100%;
 
  height: auto;
 
}
 
 
.overlay {
 
  position: absolute;
 
  top: 0;
 
  bottom: 0;
 
  right: 0;
 
  left: 0;
 
  height: 250px;
 
  width: 250px;
 
  opacity: 0;
 
  transition: .5s ease;
 
  background-color: #c75eed;
 
}
 
 
.goverlay {
 
  position: absolute;
 
  top: 0;
 
  bottom: 0;
 
  right: 0;
 
  left: 0;
 
  height: 250px;
 
  width: 250px;
 
  opacity: 0;
 
  transition: .5s ease;
 
  background-color: #297dd6;
 
}
 
 
.scontainer:hover .overlay {
 
  opacity: 1;
 
}
 
 
.tcontainer:hover .goverlay {
 
  opacity: 1;
 
}
 
 
 
.text {
 
  color: white;
 
  font-size: 20px;
 
  position: absolute;
 
  top: 50%;
 
  left: 50%;
 
  transform: translate(-50%, -50%);
 
  -ms-transform: translate(-50%, -50%);
 
}
 
 
.border { border: 5px solid black; }
 
 
 
#myImg {
 
    border-radius: 5px;
 
    cursor: pointer;
 
    transition: 0.3s;
 
}
 
 
#myImg:hover {opacity: 0.7;}
 
  
 +
/* Modal Image */
 
/* The Modal (background) */
 
/* The Modal (background) */
 
.modal {
 
.modal {
Line 144: Line 62:
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
     width: 80%;
+
     width: 60%;
 +
    height: 90%;
 
     max-width: 700px;
 
     max-width: 700px;
 
}
 
}
Line 152: Line 71:
 
     margin: auto;
 
     margin: auto;
 
     display: block;
 
     display: block;
     width: 80%;
+
     width: 60%;
 
     max-width: 700px;
 
     max-width: 700px;
 
     text-align: center;
 
     text-align: center;
Line 202: Line 121:
 
     }
 
     }
 
}
 
}
</style>
 
  
 +
p {
 +
  background-color: #f7f3ed;
 +
}
 +
button{
 +
  border: 0; background-color: #f7f3ed;
 +
}
 +
figure {
 +
  background-color: #f7f3ed;
 +
}
 +
h2{
 +
  background-color: #f7f3ed;
 +
}
 +
body {
 +
  background-color: #f7f3ed;
 +
}
 +
foo {
 +
text-decoration:none;
 +
}
 +
</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%;">
 
+
<div>
/* Animation for slideshow */
+
<center><h2><br><br>Meet our Team<br><br></h2>
var myIndex = 0;
+
carousel();
+
 
+
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 m4">
+
    <img src="https://static.igem.org/mediawiki/2017/8/8a/T-Northwestern_headshot_chuck.jpeg" width="200px" height="250px" class= "w3-margin-left border">
+
 
+
</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">
+
<center style="text-decoration: none;"><figure>
<div class="tcontainer">
+
<img src="https://static.igem.org/mediawiki/2017/thumb/c/ce/T--Northwestern--team.png/800px-T--Northwestern--team.png" usemap="#image-map">
<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">
+
<map name="image-map">
<div class="tcontainer">
+
    <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/9/9e/T-Northwestern-Tyler.jpg" width = "250px" height="250px" 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">
<div class="goverlay">  
+
    <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">
<div class = "text"> Tyler Lazar </div>  
+
    <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>
 
</div>
 
</div>
 
</div>
 
</div>
 
  
  
 
+
<div>
 
+
<center><h2><br><br>Meet our advisors</h2>
 
+
<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>
+
<p style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
</div>  
+
<h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
  
<div class="column">
+
<center>
<div class="scontainer">  
+
<button class="foo">  
<img src= "https://static.igem.org/mediawiki/2017/6/68/T-Northwestern-Tyo.jpg" width = "250px" height="250px" class="border">
+
<a style="text-decoration:none !important;" class="foo" href="#JL">
<div class="overlay">
+
<img src="https://static.igem.org/mediawiki/2017/c/cb/T--Northwestern--Leonard.png" width="200px"/>
<div class="text"> Dr. Keith E Tyo </div>
+
<img src="https://static.igem.org/mediawiki/2017/e/e4/T--Northwestern--Leonard4.png" width="200px"/>
</div>  
+
</a>
</div>
+
</button>
</div>
+
  
<div class="column">
+
<button class="foo">
<div class="scontainer">
+
<a style="text-decoration:none !important;" class="foo" href="#KT">
<img src="https://static.igem.org/mediawiki/2017/8/87/T-Northwestern-Tullman-Ereck.jpg" width = "250px" height="250px" class="border">  
+
<img src="https://static.igem.org/mediawiki/2017/6/66/T--Northwestern--tyo.png" width="200px" />
<div class="overlay">
+
<img src="https://static.igem.org/mediawiki/2017/9/91/T--Northwestern--Tyo.png" width="200px"/>
<div class = "text"> Dr. Danielle Tullman-Ereck </div>
+
</a>
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
  
<h2 class="w3-center"> Meet our grad students! </h2>
+
</button>
<br> <br>
+
<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>
  
<div class="w3-row">
+
<button class="foo">  
  <div class="w3-col m3">
+
<a style="text-decoration:none !important;" class="foo" href="#JM">
<div class="tcontainer">
+
<img src="https://static.igem.org/mediawiki/2017/4/44/T--Northwestern--Mordacq.png" width="200px" />
    <img src="https://static.igem.org/mediawiki/2017/7/7b/T-Northwestern_Patrick.jpg" width = "250px" height="250px" class= "w3-margin-left border">
+
<img src="https://static.igem.org/mediawiki/2017/2/29/T--Northwestern--Mordacq2.png" width="200px"/>
    <div class="goverlay w3-margin-left">
+
</a>
    <div class ="text"> Bradley Biggs </div>
+
</button>
</div>
+
</center>
</div>
+
</div>  
+
  
<div class="w3-col m3">
+
</p>
<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>
  
<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



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