Difference between revisions of "Team:Northwestern"

 
(839 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{Northwestern_Page_Head}}
+
{{Northwestern_Page_Head_temp}}
 +
{{Navbar_temp}}
 +
 
 
<html>
 
<html>
<title>Northwestern Template</title>
+
<style>
 +
p.big {
 +
    line-height: 1.8;
 +
}
 +
</style>
 +
<head>
 +
 
 +
 
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <title>Home</title>
 +
    <!-- Bootstrap -->
 +
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Northwestern/CSS?action=raw&ctype=text/css" />
  
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<style>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
.foo img:last-child{display:none}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+
.foo:hover img:first-child{display:none}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
.foo:hover img:last-child{display:inline-block}
 +
}
  
 +
/*h2 {
 +
padding: 0;
 +
font-weight: 300;*/
 +
}
 +
h2 span {
 +
margin-left: 1em;
 +
color: #aaa;
 +
font-size: 85%;
 +
}
  
<body>
 
  
 +
</style>
 +
 +
 +
<style>
 +
button{border: 0; background-color: #D3D3D3
 +
}
 +
</style>
 +
</head>
 +
 +
</style>
 +
 +
<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>
 +
$('.smooth').on('click', function() {
 +
    $.smoothScroll({
 +
        scrollElement: $('body'),
 +
        scrollTarget: '#' + this.id
 +
    });
 +
   
 +
    return false;
 +
});
 +
</script>
 
<!-- 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="w3-display-container w3-opacity-min" id="top">
   <div class="w3-display-middle" style="white-space:nowrap;">
+
   <div class="logo">
    <span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide w3-animate-opacity">WEBSITE <span class="w3-hide-small">UNDER</span> CONSTRUCTION</span>
+
 
   </div>
 
   </div>
</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>
  
<!-- Container (About Section) -->
 
<div class="w3-content w3-container w3-padding-64" id="about">
 
  <h3 class="w3-center">ABOUT ME</h3>
 
  <p class="w3-center"><em>I love photography</em></p>
 
  <p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
 
    qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
  <div class="w3-row">
 
    <div class="w3-col m6 w3-center w3-padding-large">
 
      <p><b><i class="fa fa-user w3-margin-right"></i>My Name</b></p><br>
 
      <img src="https://unsplash.it/g/1920/1080?image=1052" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="Photo of Me" width="500" height="333">
 
    </div>
 
  
    <!-- Hide this text on small devices -->
 
    <div class="w3-col m6 w3-hide-small w3-padding-large">
 
      <p>Welcome to my website. I am lorem ipsum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor
 
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 
    </div>
 
  </div>
 
  <p class="w3-large w3-center w3-padding-16">Im really good at:</p>
 
  <p class="w3-wide"><i class="fa fa-camera"></i>Photography</p>
 
  <div class="w3-light-grey">
 
    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:90%">90%</div>
 
  </div>
 
  <p class="w3-wide"><i class="fa fa-laptop"></i>Web Design</p>
 
  <div class="w3-light-grey">
 
    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:85%">85%</div>
 
  </div>
 
  <p class="w3-wide"><i class="fa fa-photo"></i>Photoshop</p>
 
  <div class="w3-light-grey">
 
    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:75%">75%</div>
 
  </div>
 
</div>
 
  
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
+
 
  <div class="w3-quarter w3-section">
+
 
    <span class="w3-xlarge">14+</span><br>
+
   </button>
    Partners
+
</div>
   </div>
+
  <div class="w3-quarter w3-section">
+
    <span class="w3-xlarge">55+</span><br>
+
    Projects Done
+
  </div>
+
  <div class="w3-quarter w3-section">
+
    <span class="w3-xlarge">89+</span><br>
+
    Happy Clients
+
  </div>
+
  <div class="w3-quarter w3-section">
+
    <span class="w3-xlarge">150+</span><br>
+
    Meetings
+
  </div>
+
 
</div>
 
</div>
  
<!-- Second Parallax Image with Portfolio Text -->
+
 
<div class="bgimg-2 w3-display-container w3-opacity-min">
+
<div class="bgimg-2 w3-display-container" id="first">
   <div class="w3-display-middle">
+
  <div style="padding: 5% 10%;">
    <span class="w3-xxlarge w3-text-white w3-wide">PORTFOLIO</span>
+
  <h3 style="color:white" class="w3-center w3-padding-large"><br><br>Engineering pathways for integrating functional Cas9 protein into OMVs </h3><br>
   </div>
+
<p style="padding-right: 10%; padding-left:10%; font-size:14px; color:white;" class="big">  Inappropriate use of antibiotics has escalated the growing problem of antibiotic resistance in many threatening diseases. In 2014, the World Health Organization classified antibiotic resistance as a global epidemic. Inactivating resistance genes via Cas9 nuclease-mediated cleavage has been shown to be an effective means of combating this epidemic; however, methods of in vivo delivery are currently limited. Our team aims to deliver Cas9 to antibiotic-resistant, pathogenic bacteria through submicron bacterial outer membrane vesicles (OMVs) as a companion re-sensitization therapeutic to antibiotic treatment. OMVs are naturally produced by all Gram-negative bacteria and are used for crosstalk, stress responses, and nutrient acquisition. Their ability to be modified and directed with relative ease makes them an ideal carrier of CRISPR-Cas9. Aiding conventional antibiotic treatment, our technology will model a complete protein delivery system and transport functional Cas9 to target cells.<br><br>
 +
</p>
 +
 
 +
  <ul class="ch-grid" height="50%" style=padding:0;">
 +
    <li>
 +
      <div class="ch-item ch-img-2">
 +
        <div class="ch-info">
 +
          <h3 class="ch-bubble">About us</h3>
 +
          <p class="ch-bubble">Northwestern University iGEM<br>
 +
          <a class="ch-bubble" href="https://2017.igem.org/Team:Northwestern/Team#">LEARN MORE</a></p>
 +
        </div>
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div class="ch-item ch-img-1">
 +
        <div class="ch-info">
 +
          <h3 class="ch-bubble">Project description</h3>
 +
          <p class="ch-bubble">Outer Membrane Vesicles<br>
 +
          <a class="ch-bubble" href="https://2017.igem.org/Team:Northwestern/project">LEARN MORE</a></p>
 +
        </div>
 +
      </div>
 +
    </li>
 +
    <li>
 +
      <div class="ch-item ch-img-3">
 +
        <div class="ch-info">
 +
          <h3 class="ch-bubble">Parts</h3>
 +
          <p class="ch-bubble">Cas9 fusion proteins<br>
 +
            <a class="ch-bubble" href="https://2017.igem.org/Team:Northwestern/Parts">LEARN MORE</a></p>
 +
          </div>
 +
      </div>
 +
    </li>
 +
   </ul>
 +
 
 +
 
 +
</div>
 +
<div style="z-index:1 !important;" class="w3-display-bottommiddle">
 +
<button height="80%" width="auto" style="position:relative !important; z-index:1 !important;" class="icon-button w3-hide-small w3-hide-medium" onclick="scrollWin2()">
 +
    <span style="color:white;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
 +
    </span>
 +
   </button>
 +
</div>
 
</div>
 
</div>
  
<!-- Container (Portfolio Section) -->
 
<div class="w3-content w3-container w3-padding-64" id="portfolio">
 
  <h3 class="w3-center"> Our Team </h3>
 
  <p 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>
 
  
  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
 
  <div class="w3-row-padding w3-center">
 
    <div class="w3-col m3">
 
      <img src="https://static.igem.org/mediawiki/2017/8/8a/T-Northwestern_headshot_chuck.jpeg" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt= "Charley, Major: Mechanical Engineering, Year: Junior || 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.">
 
    </div>
 
  
    <div class="w3-col m3">
+
<div class="bgimg-3 w3-display-container" id="second">
      <img src="https://unsplash.it/1920/1080?image=1054" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Coffee beans">
+
<div style="padding: 5% 10%;">
    </div>
+
<h3 style="black;" class="w3-center w3-padding-large"><br><br>Project significance</h3><br>
 +
<p style="padding-bottom:0; padding-right: 10%; padding-left:10%; black; font-size:14px;" class="big"> VesiCure aims to create a therapeutic delivery system for CRISPR gene-editing technology using bacterial outer-membrane vesicles (OMVs). We hope to be able to utilize this delivery system to target the antibiotic resistant genes in bacteria, thereby allowing antibiotic treatments to be effective by eliminating the adaptive ability of bacterial resistance. <b>By genetically altering the resistant bacteria, this treatment would help combat the problem of antibiotic resistance directly from the source</b>.<br><br> </p>
  
    <div class="w3-col m3">
+
<figure>  
      <img src="https://unsplash.it/g/1920/1080?image=1055" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Bear closeup">
+
<br><br><br>
    </div>
+
<center><img src="https://static.igem.org/mediawiki/2017/c/c0/T--Northwestern--GlobePractices.png" width="350px" border="0">
 +
</center></figure>
  
    <div class="w3-col m3">
 
      <img src="https://unsplash.it/1920/1080?image=1056" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Quiet ocean">
 
    </div>
 
  </div>
 
  
  <div class="w3-row-padding w3-center w3-section">
 
    <div class="w3-col m3">
 
      <img src="https://unsplash.it/1920/1080?image=1057" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="The mist">
 
    </div>
 
  
    <div class="w3-col m3">
 
      <img src="https://unsplash.it/g/1920/1080?image=1058" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="My beloved typewriter">
 
    </div>
 
  
    <div class="w3-col m3">
 
      <img src="https://unsplash.it/1920/1080?image=1059" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Empty ghost train">
 
    </div>
 
  
    <div class="w3-col m3">
+
<div style="z-index:1 !important;" class="w3-display-bottommiddle">
      <img src="https://unsplash.it/g/1920/1080?image=1060" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity" alt="Sailing">
+
<button style="margin:0; padding:0; position:relative !important; z-index:1 !important;" class="icon-button w3-hide-small w3-hide-medium" onclick="scrollWin3()">
     </div>
+
     <span style="color:black;" class="w3-xxxlarge glyphicon glyphicon-chevron-down">
    <button class="w3-button w3-padding-large w3-light-grey" style="margin-top:64px">LOAD MORE</button>
+
    </span>
   </div>
+
   </button>
 +
</div></p>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
 +
 +
<div class="w3-display-container">
 +
<div>
 +
  <h3 class="w3-center w3-padding-large">Check out the video below to learn more about our project!</h3><br>
 +
</div>
 +
<div class="w3-center container">
 +
<span class="w3-center"> <video class="w3-center" controls><source src= "https://static.igem.org/mediawiki/2017/6/60/T--Northwestern--videofast.mp4" type="video/mp4" type="video/mp4"></video> </span>
 +
</div>
 +
</div>
 +
    <!-- Hide this text on small devices -->
 +
</div>
 +
 
 +
<!-- Container (Team Section) -->
 +
 +
  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width)
 +
 +
  
 
<!-- Modal for full size images on click-->
 
<!-- Modal for full size images on click-->
Line 132: Line 175:
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
<br>
 +
<br>
 +
 
</body>
 
</body>
 
</html>
 
</html>
{{Northwestern_Page_Foot}}
+
{{Northwestern_Page_Foot_temp}}

Latest revision as of 17:09, 20 November 2017

Northwestern Template Northwestern Template

Home



Engineering pathways for integrating functional Cas9 protein into OMVs


Inappropriate use of antibiotics has escalated the growing problem of antibiotic resistance in many threatening diseases. In 2014, the World Health Organization classified antibiotic resistance as a global epidemic. Inactivating resistance genes via Cas9 nuclease-mediated cleavage has been shown to be an effective means of combating this epidemic; however, methods of in vivo delivery are currently limited. Our team aims to deliver Cas9 to antibiotic-resistant, pathogenic bacteria through submicron bacterial outer membrane vesicles (OMVs) as a companion re-sensitization therapeutic to antibiotic treatment. OMVs are naturally produced by all Gram-negative bacteria and are used for crosstalk, stress responses, and nutrient acquisition. Their ability to be modified and directed with relative ease makes them an ideal carrier of CRISPR-Cas9. Aiding conventional antibiotic treatment, our technology will model a complete protein delivery system and transport functional Cas9 to target cells.



Project significance


VesiCure aims to create a therapeutic delivery system for CRISPR gene-editing technology using bacterial outer-membrane vesicles (OMVs). We hope to be able to utilize this delivery system to target the antibiotic resistant genes in bacteria, thereby allowing antibiotic treatments to be effective by eliminating the adaptive ability of bacterial resistance. By genetically altering the resistant bacteria, this treatment would help combat the problem of antibiotic resistance directly from the source.




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