Difference between revisions of "Team:Northwestern/Team"

 
(521 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">
+
}
  
−
<body style="font-family:Lora">
+
h2 span {
 +
margin-left: 1em;
 +
color: #aaa;
 +
font-size: 32%;
 +
}
  
 +
</style>
  
−
 
 
−
<!-- !PAGE CONTENT! -->
 
  
−
<div class="w3-content w3-container w3-padding-64" id="team">
+
<style>
−
  <h3 class="w3-center" style= "color: purple"> Our Team </h3>
+
p {padding-top: 0px; padding-right: 170px; padding-bottom: 10px; padding-left: 170px;}
−
  <p style= "font-size: 24px; color: purple" class="w3-center"><em> Get to know the brains behind the brawn.<br> Click on the images to make them bigger and learn more about 2017 NU iGEM team !</em></p><br>
+
p{ background-color: #f7f3ed;}
−
<div class="w3-main w3-content w3-padding" style="max-width:1200px;margin-top:100px" style="color: purple">
+
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>
  
 +
<style>
 +
p.big {
 +
    line-height: 1.8;
 +
}
 +
 +
 +
/* Modal Image */
 +
/* The Modal (background) */
 +
.modal {
 +
    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 */
 +
}
 +
 +
/* Modal Content (image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 60%;
 +
    height: 90%;
 +
    max-width: 700px;
 +
}
 +
 +
/* Caption of Modal Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 60%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
 +
/* Add Animation */
 +
.modal-content, #caption {   
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 +
}
 +
 +
@-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
}
 +
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
 +
 +
/* The Close Button */
 +
.close {
 +
    position: absolute;
 +
    top: 15px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
}
 +
 +
.close:hover,
 +
.close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
 +
/* 100% Image Width on Smaller Screens */
 +
@media only screen and (max-width: 700px){
 +
    .modal-content {
 +
        width: 100%;
 +
    }
 +
}
 +
 +
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>
 +
 +
 +
 +
<body>
 +
 +
<body style="height:100%;">
 +
<div>
 +
<center><h2><br><br>Meet our Team<br><br></h2>
 +
</div>
 +
 +
 +
<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">
 +
 +
<map name="image-map">
 +
    <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">
 +
    <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>
 +
<center><h2><br><br>Meet our advisors</h2>
 +
</div>
 +
<p style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
 +
<h2 style="padding-top: 5%; padding-left: 15%; padding-right: 15%>
 +
 +
<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>
 +
 +
<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>
  
−
  <!-- First Photo Grid-->
 
−
  <div class="w3-row-padding w3-padding-16 w3-center">
 
−
    <div class="w3-quarter">
 
−
      <img src="https://static.igem.org/mediawiki/2017/8/8a/T-Northwestern_headshot_chuck.jpeg" width= "200px" height="250px">
 
−
      <h3 style=" color: purple"> Charley Rees (Junior, mechanical Engineering) </h3>
 
−
      <p style= "font-size: 14px"> 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 class="w3-quarter">
 
−
      <img src="https://static.igem.org/mediawiki/2017/f/f1/T-Northwesternkaterina.jpg" width= "200px" height="250px">
 
−
      <h3 style="color: purple"> Katerina (Senior, Biomedical Engineering) </h3>
 
−
      <p>  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, solving Rubik’s cube puzzles or trying to improve my tennis serve.
 
 
</p>
 
</p>
−
    </div>
+
</div>
−
    <div class="w3-quarter">
+
 
−
      <img src="/w3images/cherries.jpg" alt="Cherries" style="width:100%">
+
 
−
      <h3>Cherries, interrupted</h3>
+
<h2><center><br><br>Graduate and undergraduate student network</center><br><br></h2>
−
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
<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" />
−
      <p>What else?</p>
+
<map style="outline: none; text-decoration: none;" name="Map" id="Map">
−
    </div>
+
     <area alt="Patrick" title="Patrick Donahue" shape="circle" coords="134, 107, 52">
−
    <div class="w3-quarter">
+
    <area alt="Bon" title="Bon Ikwuagwu" coords="604,121,54" shape="circle">
−
      <img src="/w3images/wine.jpg" alt="Pasta and Wine" style="width:100%">
+
    <area target="" alt="Lisa" title="Lisa Burdette" coords="47,319,46" shape="circle">
−
      <h3>Once Again, Robust Wine and Vegetable Pasta</h3>
+
    <area target="" alt="Devin" title="Devin Stanford"  coords="205,448,52" shape="circle">
−
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
     <area target="" alt="Joe" title="Joe Muldoon" coords="62,548,55" shape="circle">
−
     </div>
+
    <area target="" alt="Taylor" title="Taylor Dickman" coords="257,675,53" shape="circle">
−
  </div>
+
    <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">
−
  <!-- Second Photo Grid-->
+
     <area target="" alt="Taylor" title="Taylor Dolberg" coords="714,320,52" shape="circle">
−
  <div class="w3-row-padding w3-padding-16 w3-center">
+
<area target="" alt="Michelle Cai" title="Michelle Cai" coords="238,283,43" shape="circle">
−
     <div class="w3-quarter">
+
    <area target="" alt="Sam Davidson" title="Sam Davidson" coords="301,187,44" shape="circle">
−
      <img src="/w3images/popsicle.jpg" alt="Popsicle" style="width:100%">
+
    <area target="" alt="Tyler Lazar" title="Tyler Lazar" coords="370,52,53" shape="circle">
−
      <h3>All I Need Is a Popsicle</h3>
+
     <area target="" alt="Cameron Glasscock" title="Cameron Glasscock"  coords="434,174,50" shape="circle">
−
      <p>Lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
     <area target="" alt="Chelsea Hu" title="Chelsea Hu"  coords="509,261,45" shape="circle">
−
     </div>
+
    <area target="" alt="Jordan Harrison" title="Jordan Harrison"  coords="625,253,47" shape="circle">
−
     <div class="w3-quarter">
+
    <area target="" alt="Peter Su" title="Peter Su" coords="566,375,53" shape="circle">
−
      <img src="/w3images/salmon.jpg" alt="Salmon" style="width:100%">
+
    <area target="" alt="Paul Perkovich" title="Paul Perkovich"  coords="441,424,47" shape="circle">
−
      <h3>Salmon For Your Skin</h3>
+
     <area target="" alt="Shu Huang" title="Shu Huang"  coords="326,452,51" shape="circle">
−
      <p>Once again, some random text to lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
     <area target="" alt="Bradley Biggs" title="Bradley Biggs"  coords="529,499,50" shape="circle">
−
     </div>
+
    <area target="" alt="Tasfia Azim" title="Tasfia Azim"  coords="283,562,50" shape="circle">
−
     <div class="w3-quarter">
+
    <area target="" alt="Sarah Stainbrook" title="Sarah Stainbrook"  coords="408,564,50" shape="circle">
−
      <img src="/w3images/sandwich.jpg" alt="Sandwich" style="width:100%">
+
</map></figure></center>
−
      <h3>The Perfect Sandwich, A Real Classic</h3>
+
−
      <p>Just some random text, lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
−
     </div>
+
−
     <div class="w3-quarter">
+
−
      <img src="/w3images/croissant.jpg" alt="Croissant" style="width:100%">
+
−
      <h3>Le French</h3>
+
−
      <p>Lorem lorem lorem lorem ipsum text praesent tincidunt ipsum lipsum.</p>
+
−
    </div>
+
−
  </div>
+
  
−
  <!-- Pagination -->
 
−
  <div class="w3-center w3-padding-32">
 
−
    <div class="w3-bar">
 
−
      <a href="#" class="w3-bar-item w3-button w3-hover-black">«</a>
 
−
      <a href="#" class="w3-bar-item w3-black w3-button">1</a>
 
−
      <a href="#" class="w3-bar-item w3-button w3-hover-black">2</a>
 
−
      <a href="#" class="w3-bar-item w3-button w3-hover-black">3</a>
 
−
      <a href="#" class="w3-bar-item w3-button w3-hover-black">4</a>
 
−
      <a href="#" class="w3-bar-item w3-button w3-hover-black">»</a>
 
−
    </div>
 
−
  </div>
 
−
 
 
−
  <hr id="about">
 
 
</body>
 
</body>
 
</html>
 
</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