Difference between revisions of "Team:Grenoble-Alpes"

 
(59 intermediate revisions by 4 users not shown)
Line 4: Line 4:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<title>IGEM - Grenoble Alpes</title>
 
<title>IGEM - Grenoble Alpes</title>
 +
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 
<style>
 
<style>
−
 
+
.part-text{
−
* {
+
     display: flex;
−
max-width : 100%;
+
     flex-wrap: wrap;
−
}
+
     flex-direction: row;}
−
 
+
p{font-size:1.5em!important;}
−
 
+
h3{margin:10vh;
−
 
+
font-size:2em!important;}
−
nav ul li a:visited
+
#bgvid {  
−
{
+
−
     display:block;
+
−
     color: white;
+
−
    text-decoration: none;
+
−
     font-weight:700;
+
−
    font-size:1.5em;
+
−
    line-height:32px;
+
−
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
+
−
    justify-content: center;
+
−
    text-align: center;
+
−
}
+
−
a:visited {
+
−
all:unset;
+
−
}
+
−
 
+
−
 
+
−
nav
+
−
{ 
+
−
    top: 0px;
+
−
    left: 0px;
+
 
     position: fixed;
 
     position: fixed;
−
     width: 100%;
+
     top: 50%;
−
     max-width: 100%;
+
     left: 50%;
−
        background-color: #160821;
+
    min-width: 100%;
−
     background-image: linear-gradient(62deg, #160821 0%, #362844 100%);
+
    min-height: 100%;
−
margin-top:10px;
+
     width: auto;
−
z-index:100;
+
    height: auto;
 +
    z-index: -100;
 +
    transform: translateX(-50%) translateY(-50%);
 +
background: url('https://static.igem.org/mediawiki/2018/6/6e/T--Grenoble-Alpes--home.jpg') no-repeat;
 +
  background-size: cover;
 +
  transition: 1s opacity;
 
}
 
}
−
 
−
#ulmenu
 
−
{ 
 
−
    display: flex;
 
−
    width: 97%;
 
−
    justify-content: space-around;
 
−
    list-style:none;
 
−
    float:left;
 
−
    padding:0px;
 
−
    margin: 0px;
 
−
    margin-left: 55px;
 
−
    margin-right: 30px;
 
−
 
−
}
 
−
 
−
nav ul li a
 
−
{
 
−
    display:block;
 
−
    color: white;
 
−
    text-decoration: none;
 
−
    font-weight:700;
 
−
    font-size:1.5em;
 
−
    line-height:32px;
 
−
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
 
−
    justify-content: center;
 
−
    text-align: center;
 
−
}
 
−
nav ul li a,
 
−
nav ul li a:after,
 
−
nav ul li a:before {
 
−
  transition: all .6s;
 
−
}
 
−
nav ul li a:hover {
 
−
  color: black;
 
−
}
 
−
 
−
nav ul li
 
−
{ 
 
−
    position:relative;
 
−
    float:left;
 
−
    justify-content: center;
 
−
    text-align: center;
 
−
    padding: 0 15px 0 15px;
 
−
}
 
−
 
−
nav ul li.current-menu-item
 
−
{
 
−
    background:#ddd
 
−
}
 
−
 
−
nav ul li a:hover {
 
−
  color: black;
 
−
text-decoration:none!important;
 
−
}
 
−
nav ul  a:after {
 
−
  display: block;
 
−
  position: absolute;
 
−
  top: 0;
 
−
  left: 0;
 
−
  bottom: 0;
 
−
  right: 0;
 
−
  margin: auto;
 
−
  width: 100%;
 
−
  height: 1px;
 
−
  content: '.';
 
−
  color: transparent;
 
−
  background: rgb(218, 208, 244);
 
−
  visibility: none;
 
−
  opacity: 0;
 
−
  z-index: -1;
 
−
}
 
−
nav ul li a:hover:after {
 
−
  opacity: 1;
 
−
  visibility: visible;
 
−
  height: 100%;
 
−
}
 
−
 
−
 
−
nav ul ul
 
−
{
 
−
    display:none;
 
−
    position:absolute;
 
−
    top:100%;
 
−
    left:0;
 
−
    background:#fff;
 
−
    padding:0;
 
−
    list-style: none;
 
−
}
 
−
 
−
nav ul ul li
 
−
{
 
−
    left:0;
 
−
    float:none;
 
−
    width:auto;
 
−
    min-width: 10vh;
 
−
    background-color: rgb(218, 208, 244);
 
−
    border-bottom: black solid 0.3px;
 
−
}
 
−
 
−
nav ul ul li a
 
−
{ 
 
−
    padding: auto;
 
−
    margin: auto;
 
−
    display:block;
 
−
    color: black;
 
−
    text-decoration: none;
 
−
    font-weight:700;
 
−
    font-size:1em;
 
−
    line-height:32px;
 
−
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
 
−
    text-align: left;
 
−
}
 
−
 
−
nav ul ul li:hover
 
−
{
 
−
    float:none;
 
−
    width:auto;
 
−
    background-color: rgb(235, 232, 244);
 
−
    color: rgb(191, 179, 226);
 
−
}
 
−
 
−
nav ul ul a
 
−
{
 
−
    color: black!important;
 
−
}
 
−
nav ul ul a:hover
 
−
{
 
−
    color: rgb(15, 5, 40);
 
−
text-decoration: none!important;
 
−
}
 
−
 
−
nav ul ul ul
 
−
{ 
 
−
    display: none;
 
−
    top:0;
 
−
    left:100%
 
−
}
 
−
 
−
nav ul li:hover > ul
 
−
{
 
−
    display:block;
 
−
}
 
−
#home_logo, #sideMenu
 
−
{ display:none; }
 
−
#sideMenu, #top_title, .patrollink 
 
−
{display:none;}
 
−
#content
 
−
{ width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
−
body
 
−
{background-color:white; }
 
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
#logo {
 
−
    width: 80px;
 
−
    height: 80px;
 
−
    position: absolute;
 
−
}
 
−
body {
 
−
    margin: 0px;
 
−
margin-top: 3px;
 
−
    padding: 0px;
 
−
    width: 100%;
 
−
    height: 100%;
 
−
}
 
−
#container {
 
−
    height: 100%;
 
−
    display: flex;
 
−
}
 
−
 
−
 
 
#text-container {
 
#text-container {
−
    margin-right: 3px;
+
margin-left:0!important;
−
    margin-left: 40vh;
+
z-index:20;
−
     margin-top: 100vh;
+
margin-right: 0px;
 +
     margin-top: calc(100vh - 44px);
 
     min-height: 100vh;
 
     min-height: 100vh;
 
     position: relative;
 
     position: relative;
−
     border-right: #913147 solid 10px;
+
     border-right: #9b0635 solid 10px;
 
     display: flex;
 
     display: flex;
 
     justify-content: space-around;
 
     justify-content: space-around;
Line 222: Line 40:
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     background-color: white;
 
     background-color: white;
 +
line-height:1!important;
 +
box-sizing: border-box;
 +
width:100%;}
 +
#part1-home {
 +
background-color:#9b0635;
 +
color: white;
 +
line-height:2!important;
 +
font-size:2em;
 +
padding: 5vh;
 +
margin-bottom:10vh;
 
}
 
}
−
#welcome {
+
.catch {font-size: 2em;
−
     position: absolute;
+
     margin: auto;}
−
     background-image: url("https://static.igem.org/mediawiki/2018/6/6e/T--Grenoble-Alpes--home.jpg");
+
span {margin:auto;}
−
     background-repeat: no-repeat;
+
.icon-menu {
−
     background-size: cover;
+
max-width: 20vh;
 +
     max-height: 20vh;
 +
margin:5vh;
 +
border: grey solid 10px;
 +
}
 +
.icon-menu:hover {
 +
border: white solid 10px;
 +
border-radius:360px;
 +
}
 +
.icon-home{display: flex;
 +
    flex-direction: column;}
 +
#icon-home-part1 {max-width: 30vh;
 +
     height: auto;
 +
    float: left;
 +
    padding: 5vh;}
 +
#menu-home{
 +
background-color: grey;
 +
    display: inline-flex;
 +
     justify-content: space-around;
 
     width: 100%;
 
     width: 100%;
−
     height: 100%;
+
     box-sizing: border-box;
−
     height: calc(100vh - 39px);
+
     flex-wrap: wrap;
−
     z-index: 2;
+
padding-bottom:10vh;}
 +
.icon-overlay-home {justify-content: space-around;
 +
     display: flex;
 +
    color: white;
 +
    font-size: 2em;}
 +
#video-machine {
 +
 
 +
    max-width: 80%;
 +
    padding: auto;
 
     display: flex;
 
     display: flex;
 
     justify-content: space-around;
 
     justify-content: space-around;
−
    margin-top: 39px;
 
−
}
 
−
#titre {
 
−
    display: flex;
 
−
    padding: auto;
 
 
     margin: auto;
 
     margin: auto;
−
     text-align: center;
+
     padding-bottom: 10vh;
−
     z-index: 1;
+
     padding-top: 10vh;}
−
    max-width: 60%;
+
</style>
−
    height: auto;
+
</head>
−
}
+
<body>
−
#overlay {
+
−
    position: absolute;
+
<div id="container">
−
    width: 100%;
+
<div id="welcome">
−
    height: 100%;
+
<video poster="https://static.igem.org/mediawiki/2018/6/69/T--Grenoble-Alpes--timelapse-bg.png" id="bgvid" playsinline autoplay muted loop>
−
    background-color: blue;
+
<source src="https://static.igem.org/mediawiki/2018/1/1c/T--Grenoble-Alpes--video_home_bg.mp4" type="video/mp4" id="video"></video>
−
    background-image: linear-gradient(90deg, #a8353a 0%, #3554a8 100%);
+
<div id="overlay"></div>
−
    opacity: 0.6;
+
<img src="https://static.igem.org/mediawiki/2018/c/cc/T--Grenoble-Alpes--logohome.png" id="titre">
−
}
+
</div>
  
 +
<div id="text-container">
 +
<div id="part1-home">
 +
<img id="icon-home-part1" src="https://static.igem.org/mediawiki/2018/a/a9/T--Grenoble-Alpes--graph_home.png">
 +
<div class="part-text">
 +
<span class="catch">Antibiotic resistance</span> <span>has become a major health issue all over the world.</span>
 +
<span>The World Health Organization even forecasts that in 2050</span>
 +
<span class="catch">10 Millions people will die each year</span> <span>because of antibiotic resistance.</span>
 +
</div></div>
 +
<center><font style="font-size:30px">To answer this major health issue, our team decided to develop a fully automated system called PHAGYZER.</font></center>
 +
<br>
 +
<br>
 +
<br>
 +
<center><font style="font-size:20px">iGEM rewarded our work by a <b>bronze medal</b> and a <b><a href="https://2018.igem.org/Competition/Results">nomination in the hardware special track,</a></b> undergraduate category.</font></center>
  
 +
<div id="part2_home">
 +
<br>
 +
<video id="video-machine" controls>
 +
<source src="https://static.igem.org/mediawiki/2018/3/36/T--Grenoble-Alpes--videoIntroHome.mp4" type="video/mp4"></video>
 +
<br>
 +
<h1></h1></div>
  
−
#sous-menu {
 
−
    margin-top: 39px;
 
−
    padding-top: 40px;
 
−
    position: fixed;
 
−
    width: 30vh;
 
−
    min-width: 200px;
 
−
    height: calc(100vh - 39px);
 
−
    background-color: #e2dede;
 
−
    border-right: #362844 solid 10px;
 
−
}
 
  
−
#sous-menu ul {
+
<center><font style="font-size:30px"><br><br>Coming soon, our final presentation:</font></center>
 +
<div id="part2_home">
 +
<video id="video-machine" controls>
 +
<source src="https://static.igem.org/mediawiki/2018/e/e5/T--Grenoble-Alpes--trailer_team.mp4" type="video/mp4"></video>
 +
</div>
  
−
    position: relative;
+
<center><font style="font-size:30px">And <b><a href="https://www.youtube.com/watch?v=duKmLuBqNZU&t=48s">here</a></b>it is !</font></center>
−
    list-style: none;
+
  
−
}
 
−
#sous-menu ul li a:hover {
 
−
    text-decoration: underline;
 
−
padding-left: 10px;
 
−
border-left: #913147 solid 5px;
 
  
−
}
 
−
#sous-menu a {
 
−
    text-decoration: none;
 
−
    color: #362844;
 
−
}
 
  
−
h1 {
+
<p><br><br>Our Wiki is compatible with Chrome, Edge and Mozilla Firefox</p>
−
    font-size: 4em;
+
<div id="menu-home">
−
    border-bottom: #913147 solid 10px;
+
<div class="icon-home"><a href="https://2018.igem.org/Team:Grenoble-Alpes/biology">
−
}
+
<img class="icon-menu" src="https://static.igem.org/mediawiki/2018/b/b1/T--Grenoble-Alpes--dna.png"></a>
−
h2 {
+
<div class="icon-overlay-home"><div class="text-overlay">Biology</div></div>
−
    margin-left: 40px;
+
</div>
−
    font-size: 3em;
+
<div class="icon-home"><a href="https://2018.igem.org/Team:Grenoble-Alpes/Hardware">
−
    font-weight: 100;
+
<img class="icon-menu" src="https://static.igem.org/mediawiki/2018/4/46/T--Grenoble-Alpes--cogs.png"></a>
−
}
+
<div class="icon-overlay-home"><div class="text-overlay">Engineering</div></div>
−
</style>
+
</div>
−
</head>
+
<div class="icon-home"><a href="https://2018.igem.org/Team:Grenoble-Alpes/Model">
−
<body>
+
<img class="icon-menu" src="https://static.igem.org/mediawiki/2018/a/a1/T--Grenoble-Alpes--phage.png"></a>
−
<nav>
+
<div class="icon-overlay-home"><div class="text-overlay">Modeling</div></div>
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes">
+
</div>
−
<img src="logo.png" id="logo">
+
<div class="icon-home"><a href="https://2018.igem.org/Team:Grenoble-Alpes/Human_Practices">
−
</a>
+
<img class="icon-menu" src="https://static.igem.org/mediawiki/2018/7/70/T--Grenoble-Alpes--hp.png"></a>
−
<ul id="ulmenu">
+
<div class="icon-overlay-home"><div class="text-overlay">Human Practices</div></div>
−
+
</div>
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes">HOME</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/team">TEAM</a>
+
−
<ul>
+
−
<li><a>TEAM MEMBERS</a></li>
+
−
<li><a>ADVISORS</a></li>
+
−
<li><a>PARTNERS</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/project">PROJECT</a>
+
−
<ul>
+
−
<li><a>BIOLOGY</a></li>
+
−
<li><a>ENGINEERING</a></li>
+
−
<li><a>PROOF OF CONCEPT</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
<a>
+
−
MODELLING
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/human_pactices">HUMAN PRACTICES</a>
+
−
<ul>
+
−
<li><a href="">ACTORS & PARTNERSHIPS</a></li>
+
−
<li><a href="">ETHIC</a></li>
+
−
<li><a>EVENTS</a></li>
+
−
<li><a>SAFETY & SECURITY</a></li>
+
−
</ul>
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/ressources">RESSOURCES</a>
+
−
<ul>
+
−
<li>
+
−
<a>NOTEBOOK</a>
+
−
</li>
+
−
<li><a>PARTS</a></li>
+
−
<li><a>PROTOCOLS</a></li>
+
−
<li><a>COMPONANTS</a></li>
+
−
<li><a>MEDAL CRITERIA</a></li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
−
</nav>
+
−
<div id="container">
+
−
<div id="welcome">
+
−
<div id="overlay"></div>
+
−
<img src="https://static.igem.org/mediawiki/2018/3/32/T--Grenoble-Alpes--titre.png" id="titre">
+
−
</div>
+
−
<div id="sous-menu">
+
−
<ul>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes">HOME</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/team">TEAM</a>
+
−
<ul>
+
−
<li><a>TEAM MEMBERS</a></li>
+
−
<li><a>ADVISORS</a></li>
+
−
<li><a>PARTNERS</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/project">PROJECT</a>
+
−
<ul>
+
−
<li><a>BIOLOGY</a></li>
+
−
<li><a>ENGINEERING</a></li>
+
−
<li><a>PROOF OF CONCEPT</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
<a>
+
−
MODELLING
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/human_pactices">HUMAN PRACTICES</a>
+
−
<ul>
+
−
<li><a href="">ACTORS & PARTNERSHIPS</a></li>
+
−
<li><a href="">ETHIC</a></li>
+
−
<li><a>EVENTS</a></li>
+
−
<li><a>SAFETY & SECURITY</a></li>
+
−
</ul>
+
−
</a>
+
−
</li>
+
−
<li>
+
−
<a href="https://2018.igem.org/Team:Grenoble-Alpes/ressources">RESSOURCES</a>
+
−
<ul>
+
−
<li>
+
−
<a>NOTEBOOK</a>
+
−
</li>
+
−
<li><a>PARTS</a></li>
+
−
<li><a>PROTOCOLS</a></li>
+
−
<li><a>COMPONANTS</a></li>
+
−
<li><a>MEDAL CRITERIA</a></li>
+
−
</ul>
+
−
</li>
+
−
</ul>
+
−
</div>
+
  
−
<div id="text-container">
+
</div>
−
<h1>Welcome on the iGEM Grenoble-Alpes wiki !</h1>
+
−
<h2>Project description</h2>
+
−
<p>
+
−
According to a report from the World Health Organization (WHO), in 2050, each year ten million people will die from pathogenic bacteria that acquired antibiotic resistance if nothing is done.
+
−
</p>
+
−
<p>
+
−
This is why it is absolutely necessary to find an alternative that can counterbalance this growing antibioresistance. A solution, which is already used in Eastern European countries such as Georgia, is phagotherapy.
+
−
</p>
+
−
<p>
+
−
This medicine is based on bacteriophages (also nicknamed phages) which are little viruses (from 50 to 200 nm) that can specifically infect a bacterial strain and amplify in it, sometimes leading to the cell death (lytic phages).
+
−
</p>
+
−
<p>
+
−
This year, the goal of our team is to develop a fully automated system capable of :
+
−
<ul>
+
−
<li>identifying a pathogenic bacteria</li>
+
−
<li>detecting resistance markers </li>
+
−
<li>select the right phages for a possible phagotherapy.</li>
+
−
</ul>
+
−
</p>
+
−
<p>
+
−
To do this, we will use a DNA probe : a plasmid with a fluorescent gene and a one-stranded fraction which is complementary to the sequence we want to detect. Our automated system will achieve detection from a patient saliva sample. The device will first lyse the bacteria using the phages we are testing and lysis buffer as control. Then, DNA will be extracted using magnetic beads coated with silica. The purified DNA will be digested with the right restriction enzymes to isolate our fraction of interest. The next step will be the hybridization of these fragments with our DNA probes leading to its circularization. Following this, a transformation of the plasmid will be performed into E. Coli competent cells to allow expression of the fluorescence gene and detection.
+
−
</p>
+
−
<p>
+
−
Our system will be made so the practitioner only has to load samples, run the protocol and come to see the results a few hours later.
+
−
</p>
+
−
<p>
+
−
For our proof of concept, we will work on two pathogenic bacterial species usually found in nosocomial infection cases due to their ability to develop antibioc resistance : <i>Pseudomonas Aeruginosa</i> and <i>Staphylococcus Aureus</i>. We will make two different probes for each : one for detection of the bacteria, which consists on the recognition of housekeeping genes, and the other for detection of a resistance marker (point mutations on a gene encoding the bacterial wall for example).  The two sequences will be detected by fluorescence, using RFP (red fluorescent protein) for housekeeping genes and BFP (blue fluorescent protein) for resistance.
+
−
</p>
+
−
<p>Have a look at our video !</p>
+
 
</div>
 
</div>
 
</div>
 
</div>
 +
 
</body>
 
</body>
 +
<footer>
 +
<p>Contact Us</p>
 +
<a href="mailto:Igem.grenoble.alpes@gmail.com">Igem.grenoble.alpes@gmail.com</a>
 +
<div id="icons">
 +
<a href="https://www.facebook.com/igemfrancegrenoble/?ref=br_rs"><i class="fab fa-facebook fa-2x"></i></a>
 +
<a href="https://twitter.com/igem_grenoble?lang=fr"><i class="fab fa-twitter fa-2x"></i></a>
 +
<a href="https://www.linkedin.com/in/igem-grenoble-367974116/?originalSubdomain=fr"><i class="fab fa-linkedin  fa-2x"></i></a>
 +
<a href=""></a>
 +
</div>
 +
 +
</footer>
 +
 
</html>
 
</html>

Latest revision as of 09:24, 7 December 2018

Template loop detected: Template:Grenoble-Alpes

IGEM - Grenoble Alpes
Antibiotic resistance has become a major health issue all over the world. The World Health Organization even forecasts that in 2050 10 Millions people will die each year because of antibiotic resistance.
To answer this major health issue, our team decided to develop a fully automated system called PHAGYZER.



iGEM rewarded our work by a bronze medal and a nomination in the hardware special track, undergraduate category.




Coming soon, our final presentation:
And hereit is !



Our Wiki is compatible with Chrome, Edge and Mozilla Firefox