Difference between revisions of "Team:Northwestern/Home temp"

 
(238 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Northwestern_Page_Head_temp}}
 
{{Northwestern_Page_Head_temp}}
 +
{{Navbar_temp}}
 
<html>
 
<html>
<head>
 
<title>Northwestern Home Page</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://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
</head>
 
 
<style>
 
 
#wrapper
 
{
 
  margin: 0 auto;
 
  padding: 0;
 
}
 
 
a{
 
  text-decoration: none;
 
}
 
 
.menu {
 
  position: relative;
 
  margin-top: 4%;
 
  left: 54%;
 
  width: 0px;
 
  transform: translate(-50%, 50%);
 
}
 
.toggle {
 
  display: none;
 
}
 
 
.toggle + .style {
 
    width: 200px;
 
    height: 200px;
 
    border-radius: 50%;
 
    cursor: pointer;
 
    transform: translate(-50%, -50%) scale(1.1);
 
    z-index: 5;
 
    display: block;
 
    max-width: 250px;
 
    margin-bottom: 0;
 
    background: #a82db4;
 
    color: #fff;
 
    font-size: 2.5em;
 
    padding-top: 75px;
 
    text-align: center;
 
  -webkit-transition: all .8s;
 
  -moz-transition: all .8s;
 
  -o-transition: all .8s;
 
  -ms-transition: all .8s;
 
  transition: all .8s;
 
}
 
 
.menu p{
 
    max-width: 85px;
 
    text-align: center;
 
    margin: 0 auto;
 
    line-height: 15px;
 
    padding-top: 50px;
 
    font-weight: 700;
 
    font-size: 2em;
 
}
 
 
 
.toggle + .style:hover{
 
-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
 
    -moz-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
 
    -ms-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
 
    -o-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
 
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .7);
 
}
 
 
.toggle:checked + .style {
 
  transform: translate(-50%, -50%) scale(.5);
 
}
 
 
 
.menu input[type=checkbox] + label:before {
 
    content:"";
 
    position: absolute;
 
}
 
 
.toggle + .style:before, .toggle + .style:after {
 
  content: "";
 
  position: absolute;
 
  margin: -3px;
 
  border-radius: 5px;
 
  transition: all 0.3s;
 
}
 
 
.toggle + .style:before {
 
  width: 30px;
 
  height: 0px;
 
  left: 10px;
 
  top: 25px;
 
}
 
 
.toggle + .style:after {
 
  width: 0px;
 
  height: 30px;
 
  left: 25px;
 
  top: 10px;
 
}
 
 
.toggle:checked + .style:before, .toggle:checked + .style:after {
 
  transform: rotate(135deg);
 
}
 
 
.toggle ~ .tab {
 
    position: absolute;
 
    background: #a82db4;
 
    color: #fff;
 
    width: 120px;
 
    height: 120px;
 
    left: 0px;
 
    top: 0px;
 
    transform: translate(-50%, -50%) scale(0);
 
    transition: all 0.3s;
 
    opacity: 0;
 
    border-radius: 50%;
 
}
 
 
.toggle:checked ~ .tab {
 
  opacity: 1;
 
  transform: translate(-50%, -50%) scale(1);
 
}
 
 
/* parts Bubble */
 
 
.menu > .toggle:checked ~ .tab:nth-of-type(1) {
 
  top: -335px;
 
  left: 0px;
 
  transition-delay: 0s;
 
}
 
 
/* Team Bubble */
 
 
.menu > .toggle:checked ~ .tab:nth-of-type(2) {
 
  top: -285px;
 
  left: 195px;
 
  transition-delay: 0.125s;
 
}
 
 
/* Lab bubble */
 
.menu > .toggle:checked ~ .tab:nth-of-type(3) {
 
  top:  290px;
 
  left: 195px;
 
  transition-delay: 0.25s;
 
}
 
 
/*project*/
 
.menu > .toggle:checked ~ .tab:nth-of-type(4) {
 
  top: 340px;
 
  left: 0px;
 
  transition-delay: 0.375s;
 
}
 
 
/*human pract*/
 
.menu > .toggle:checked ~ .tab:nth-of-type(5) {
 
  top: 290px;
 
  left: -195px;
 
  transition-delay: 0.5s;
 
}
 
 
/*medal*/
 
.menu > .toggle:checked ~ .tab:nth-of-type(6) {
 
  top: -285px;
 
  left: -195px;
 
  transition-delay: 0.625s;
 
}
 
 
 
</style>
 
 
 
<body style="font-family: josefin-sans, sans-serif;">
 
 
 
 
 
<!-- First Parallax Image with Logo Text -->
 
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
+
<div class="bgimg-1 w3-display-container w3-opacity-min" id="top">
 
+
  <div class="logo">
<div class="w3-display-middle">
+
 
+
<span class="w3-center w3-padding-large  w3-xlarge w3-wide w3-animate-opacity">
+
<img src="https://static.igem.org/mediawiki/2017/b/ba/T-nlogo.jpg" class="w3-hide-small w3-hide-medium" id="spin"> <span class="w3-hide-small"> </span> </span>
+
 
   </div>
 
   </div>
     
+
<div style="z-index:1 !important;" class="w3-display-bottommiddle w3-hide-medium w3-hide-small">
<div class="w3-display-middle" style="white-space:nowrap;">
+
<button style="position:relative !important; z-index:1 !important;" class="icon-button" onclick="scrollWin1()">
<span class="w3-center w3-padding-large  w3-xlarge w3-wide w3-animate-opacity">
+
    <span style="color:white;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
<div class="container">
+
    </span>
<div class='menu'>
+
  </button>
  <input class='toggle' id='menu' type='checkbox'>
+
</div>
       
+
        <label class='style' for='menu'>
+
          <i class = "fa fa-bars"> </i>
+
       
+
  </label>
+
  <a class='tab' href="https://2017.igem.org/Team:Northwestern/project">
+
  <p  style = "font-size: 20px"> Project </p>
+
  </a>
+
  <a class='tab' href="https://2017.igem.org/Team:Northwestern/Team">
+
  <p  style = "font-size: 20px">Team</p>
+
  </a>
+
  <a class='tab' href="https://2017.igem.org/Team:Northwestern/Lab">
+
  <p style = "font-size: 18px">Lab</p>
+
  </a>
+
  <a class='tab' href='#'>
+
  <p style = "font-size: 20px">Parts </p>
+
  </a>
+
  <a class='tab' href='https://2017.igem.org/Team:Northwestern/humanpractices'>
+
  <P style="font-size: 16px">Human <br> Practices</P>
+
  </a>
+
  <a class='tab' href='#'>
+
  <P style="font-size: 14px">Medal <br> Requirements</P>
+
  </a>
+
</div><!-- menu -->
+
</div><!-- container -->
+
</span>
+
 
</div>
 
</div>
  
 +
<div style="padding:15%;" class="bgimg-2 w3-display-container" id="first">
 +
  <div>
 +
  <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>
 
</div>
<br>
 
  
<div id="cn-overlay" class="cn-overlay"></div>
 
  
<h1 style=" font-family: aladin, sans-serif; color: #551A8B" class="w3-center"> What is antibiotic resistance? </h1> <br>
+
<div style="padding:15%;" class="bgimg-3 w3-display-container" id="second">
 
+
  <div>
<p class="body-cont w4-center" style="font-family: josefin-sans, sans-serif; font-size:22px">  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 have 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>  
+
  <h1 style="color:white;" class="w3-center w3-padding-large">What is CRISPR-CAS9 system?</h1><br>  
 
+
  <p style="color:white;" class="body-cont">
<p class="body-cont w4-center" style="font-family:josefin-sans, sans-serif; font-size:22px;> 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>  
+
  Discovered in 2012 at UC Berkely, CRISPR-CAS9 is the most powerful gene editing tool to date. When bacteria are under attack by viruses, their immune system grabs viral RNA and “tucks” the sequence into CRISPR-short for “clustered regularly interspaced short palindromic repeats” located in the viruses genome. The next time the virus attacks the bacterium is prepared: using the appropriate CRISPR sequence in the genome, a guide RNA (gRNA) is synthesized that directs a protein, Cas9, to the viral DNA. Acting as molecular scissors, the Cas-gRNA complex binds to the viral DNA and dices up the genetic material.  
 
+
  </p><br>
 
+
  </div>
 
+
<div style="z-index:1 !important;" class="w3-display-bottommiddle">
<h1 style=" font-family: aladin, sans-serif; color: #551A8B" class="w3-center"> What is CRISPR-CAS9 system? <br><br> </h1>  
+
<button style="position:relative !important; z-index:1 !important;" class="icon-button w3-hide-small" onclick="scrollWin3()">
<p class="body-cont w4-center" style="font-family:josefin-sans, sans-serif; font-size:22px">
+
    <span style="color:white;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
Discovered in 2012 at UC Berkely, CRISPR-CAS9 is the most powerful gene editing tool to date. When a bacterium is under attack by virus, the immune system of the bacteria grabs viral RNA and “tucks” the sequence into CRISPR-short for “clustered regularly interspaced short palindromic repeats” located in the viruses genome. The next time the virus attacks the bacterium is prepared: using the appropriate CRISPR sequence in the genome, a guide RNA (gRNA) is synthesized that directs a protein, Cas 9, to the viral DNA. Acting as molecular scissors, the Cas-gRNA complex binds to the viral DNA and dices up the genetic material. </p> <br>
+
    </span>
 
+
  </button>
<h1 style="font-family: aladin, sans-serif; color: #551A8B" class="w3-center"> Why does CRISPR-CAS9 matter? </h1> <br>
+
</div>
 
+
</div>
<p class="body-cont w4-center" style="font-family:josefin-sans, sans-serif; font-size:22px"> An application of CRISPR-CAS9 is that of treating drug resistant infections. CRISPR-CAS9 should be able to cut out the resistant gene in an antibiotic resistant bacterium, thereby making the bacteria susceptible to antibiotics. However, for CAS9 to be effective, it has to get to that bacterium.  
+
<div style="padding:15%;" class="bgimg-4 w3-display-container" id="third">
We hope to use signal peptides and protein fusions to lead Cas9 and a guiding gRNA into an OMVs. OMVs are naturally occurring extracellular vesicles that are used for cross talk between bacteria. Hence, they make strong candidates for transportation of Cas9/gRNA to the site of infection. </p>  
+
  <div>
 
+
  <h1 style"margin-left:auto;" class="w3-center w3-padding-large">Why does CRISPR-CAS9 matter?</h1><br>
 
+
  <p style"padding-left:5%;padding-right:50%;" class="body-cont">   An application of CRISPR-CAS9 is that of treating drug resistant infections. CRISPR-CAS9 should be able to cut out the resistant gene in an antibiotic resistant bacterium, thereby making the bacteria susceptible to antibiotics. However, for CAS9 to be effective, it has to be successfully delivered.  
<h1 style="font-family: aladin, sans-serif; color: #551A8B" class="w3-center"> Check out the video below to learn more about our project! </h1> <br> <br>
+
Our team aims to use signal peptide-protein fusions to direct Cas9 and a guiding gRNA sequence into OMVs. OMVs are naturally occurring extracellular vesicles that are used for cross talk between bacteria. Hence, they make strong candidates for transportation of Cas9/gRNA to target bacteria.  
+
  </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="scrollWin4()">
 +
    <span style="color:black;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
 +
    </span>
 +
  </button>
 +
</div>
 +
</div>
 +
<div class="w3-display-container">
 +
<div>
 +
  <h1 class="w3-center w3-padding-large">Check out the video below to learn more about our project!</h1><br>
 +
</div>
 
<div class="w3-center container">  
 
<div class="w3-center container">  
 
<span class="w3-center"> <video class="w3-center" controls><source src="https://static.igem.org/mediawiki/2016/4/48/T--Northwestern--project_video.mp4" type="video/mp4"></video> </span>  
 
<span class="w3-center"> <video class="w3-center" controls><source src="https://static.igem.org/mediawiki/2016/4/48/T--Northwestern--project_video.mp4" type="video/mp4"></video> </span>  
 
</div>  
 
</div>  
+
</div>
 
     <!-- Hide this text on small devices -->
 
     <!-- Hide this text on small devices -->
 
</div>
 
</div>
 
    
 
    
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
 
  <div class="w3-quarter w3-section">
 
    <span class="w3-xlarge">8</span><br>
 
    Teammates
 
  </div>
 
  <div class="w3-quarter w3-section">
 
    <span class="w3-xlarge">XXX</span><br>
 
    Sponsors
 
  </div>
 
  <div class="w3-quarter w3-section">
 
    <span class="w3-xlarge">XXX</span><br>
 
    Hours in Lab
 
  </div>
 
  <div class="w3-quarter w3-section">
 
    <span class="w3-xlarge">XXX</span><br>
 
    Cells transformed
 
  </div>
 
</div>
 
 
 
 
 
<!-- Container (Team Section) -->
 
<!-- Container (Team Section) -->
  
Line 293: Line 86:
  
 
</body>
 
</body>
 
 
 
</html>
 
</html>
 
 
{{Northwestern_Page_Foot_temp}}
 
{{Northwestern_Page_Foot_temp}}

Latest revision as of 20:29, 11 September 2017

Northwestern Template Northwestern Template

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.

What is CRISPR-CAS9 system?


Discovered in 2012 at UC Berkely, CRISPR-CAS9 is the most powerful gene editing tool to date. When bacteria are under attack by viruses, their immune system grabs viral RNA and “tucks” the sequence into CRISPR-short for “clustered regularly interspaced short palindromic repeats” located in the viruses genome. The next time the virus attacks the bacterium is prepared: using the appropriate CRISPR sequence in the genome, a guide RNA (gRNA) is synthesized that directs a protein, Cas9, to the viral DNA. Acting as molecular scissors, the Cas-gRNA complex binds to the viral DNA and dices up the genetic material.


Why does CRISPR-CAS9 matter?


An application of CRISPR-CAS9 is that of treating drug resistant infections. CRISPR-CAS9 should be able to cut out the resistant gene in an antibiotic resistant bacterium, thereby making the bacteria susceptible to antibiotics. However, for CAS9 to be effective, it has to be successfully delivered. Our team aims to use signal peptide-protein fusions to direct Cas9 and a guiding gRNA sequence into OMVs. OMVs are naturally occurring extracellular vesicles that are used for cross talk between bacteria. Hence, they make strong candidates for transportation of Cas9/gRNA to target bacteria.

Check out the video below to learn more about our project!