Difference between revisions of "Team:Northwestern/Team"

Line 1: Line 1:
−
{{ Northwestern Page Head temp}}
+
{{Northwestern_Page_Head_temp}}
−
{{navbar_temp }}
+
{{Navbar_temp}}
−
 
+
 
<html>
 
<html>
−
<title>Northwestern Template</title>
 
−
<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">
 
−
<script src="//use.edgefonts.net/josefin-sans:n1,i1,n3,i3,n4,i4,n6,i6,n7,i7.js"></script>
 
−
<script src="//use.edgefonts.net/aladin.js"></script>
 
−
 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 
<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 src="https://github.com/kswedberg/jquery-smooth-scroll/blob/master/jquery.smooth-scroll.min.js"></script>
−
 
−
 
−
 
−
<style>
 
−
 
−
html {
 
−
  box-sizing: border-box;
 
−
}
 
−
 
−
*, *:before, *:after {
 
−
  box-sizing: inherit;
 
−
}
 
−
 
−
.column {
 
−
  float: left;
 
−
  width: 33.3%;
 
−
  margin-bottom: 16px;
 
−
  padding: 0 8px;
 
−
}
 
−
 
−
@media (max-width: 650px) {
 
−
  .column {
 
−
    width: 100%;
 
−
    display: block;
 
−
  }
 
−
}
 
−
 
−
.card {
 
−
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 
−
}
 
−
 
−
.container {
 
−
  padding: 0 16px;
 
−
}
 
−
 
−
.container::after, .row::after {
 
−
  content: "";
 
−
  clear: both;
 
−
  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; }
 
−
 
−
 
−
</style>
 
−
 
−
 
−
<body>
 
−
 
−
<div style="padding:15%;" class="bgimg-7 w3-display-container" id="first">
 
−
<div>
 
−
 
−
<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%" onclick="onClick(this)" 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%" alt="Nature again.. At its finest!">
 
−
    </div>
 
−
   
 
−
    <div class="w3-third">
 
−
      <img src="/w3images/girl.jpg" style="width:100%" onclick="onClick(this)" alt="Canoeing again">
 
−
      <img src="/w3images/girl_train.jpg" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
 
−
      <img src="/w3images/closegirl.jpg" style="width:100%" onclick="onClick(this)" alt="What a beautiful day!">
 
−
    </div>
 
−
  </div>
 
−
</div>
 
−
<div style="z-index:1 !important;" class="w3-display-bottommiddle">
 
−
<button style="position:relative !important; z-index:1 !important;" class="icon-button w3-hide-small" onclick="scrollWin2()">
 
−
    <span style="color:white;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
 
−
    </span>
 
−
  </button>
 
−
</div>
 
−
</div>
 
 
<script>
 
<script>
 
$('.smooth').on('click', function() {
 
$('.smooth').on('click', function() {
Line 168: Line 13:
 
     return false;
 
     return false;
 
});
 
});
 +
</script>
 +
<!-- First Parallax Image with Logo Text -->
 +
<div class=" w3-display-container w3-opacity-min" id="top">
 +
  <div class="logo">
 +
  </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>
  
−
function w3_close() {
+
<div style="padding:15%;" class="bgimg-2 w3-display-container" id="first">
−
    document.getElementById("mySidebar").style.display = "none";
+
  <div>
−
    document.getElementById("myOverlay").style.display = "none";
+
  <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 style="z-index:1 !important;" class="w3-display-bottommiddle">
 +
<button style="position:relative !important; z-index:1 !important;" class="icon-button w3-hide-small" onclick="scrollWin2()">
 +
    <span style="color:white;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
 +
    </span>
 +
  </button>
 +
</div>
 +
</div>
  
−
// Modal Image Gallery
+
<!-- Hide this text on small devices -->
−
function onClick(element) {
+
</div>
−
  document.getElementById("img01").src = element.src;
+
 
−
   document.getElementById("modal01").style.display = "block";
+
<!-- Container (Team Section) -->
−
  var captionText = document.getElementById("caption");
+
 
−
  captionText.innerHTML = element.alt;
+
   <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width)  
−
}
+
  
−
</script>
 
  
−
</body>  
+
 
 +
<!-- Modal for full size images on click-->
 +
<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>
 +
 
 +
</body>
 
</html>
 
</html>
 +
{{Northwestern_Page_Foot_temp}}

Revision as of 19:03, 12 September 2017

Northwestern Template Northwestern Template

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

What is antibiotic resistance?


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.

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.