Difference between revisions of "Team:INSA-UPS France"

 
(16 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{INSA-UPS_France/CSS}}
+
{{INSA-UPS_France/Links_new}}
−
{{INSA-UPS_France/Links}}
+
{{INSA-UPS_France/Header_new}}
  
−
<!-- HEADER -->
 
−
{{INSA-UPS_France/Header1}}
 
−
Home
 
−
{{INSA-UPS_France/Header2}}
 
−
 
−
<!-- CONTENT -->
 
 
<html>
 
<html>
  
−
<!-- STYLE -->
+
<style>  
−
<style>
+
/* Clear the default wiki settings */
−
@font-face {
+
−
  font-family: "Gatalike";
+
−
  src: url('T--INSA-UPS_France--Font_Gatalike.ttf');
+
−
}
+
−
    body{
+
−
      padding:0px;
+
−
      margin:0px;
+
−
    }
+
  
−
    .appearing-container{
+
.subnav{
−
      overflow: hidden;
+
  margin:0!important;
−
      font-size:0;
+
−
      width:80%;
+
−
      margin:20px auto;
+
−
      min-width: 740px;
+
−
      font-family: Scope One, serif;
+
−
    }
+
−
    .appearing-item{
+
−
      font-size:20pt;
+
−
      opacity: 0;
+
−
 
+
−
    }
+
−
    .appearing-item.no-background{
+
−
      background: none;
+
−
    }
+
−
    .appearing-content{
+
−
      padding:25px;
+
−
      position:relative;
+
−
    }
+
−
    .appearing-image{
+
−
      padding-left:25px;
+
−
      text-align: center;
+
−
    }
+
−
 
+
−
    .double-item{
+
−
      width:50%;
+
−
      display:table-cell;
+
−
      vertical-align: top;     
+
−
    }
+
−
    .triple-item{
+
−
      width:33%;
+
−
      display:table-cell;
+
−
      vertical-align: top;
+
−
    }
+
−
 
+
−
    .light-green-background{
+
−
      background:#aebd38;
+
−
      color:white;
+
−
    }
+
−
    .dark-green-background{
+
−
      background:#598234;
+
−
 
+
−
    }
+
−
    .light-beige-background{
+
−
      background:rgba(221,188,149,0.5);
+
−
    }
+
−
    .brown-background{
+
−
      background:#7f6049;
+
−
      color:white;
+
−
    }
+
−
 
+
−
    .circle-year{
+
−
      text-align:center;
+
−
      margin:0px auto;
+
−
      width:150px;
+
−
      height:150px;
+
−
      line-height:150px;
+
−
      border-radius: 50%;
+
−
      vertical-align: middle;
+
−
    }
+
−
    .descr-year{
+
−
      margin-top:20px;
+
−
      text-align:center;
+
−
    }
+
−
    .solutions{
+
−
      text-align:center;
+
−
    }
+
−
 
+
−
    /* ANIMATIONS */
+
−
.appearing-item.is-visible {
+
−
  opacity:1;
+
 
}
 
}
−
.appearing-item.animate-it.bounceLeft {
+
 
−
  -webkit-animation: bounceInLeft 1s;
+
  #home_logo, #sideMenu { display:none; }
−
  -moz-animation: bounceInLeft 1s;
+
  #sideMenu, #top_title, .patrollink  {display:none;}
−
     animation: bounceInLeft 1s;
+
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px; line-height: normal;background-color:#212121;}
 +
body {font-size:medium;}
 +
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h5 { margin-bottom: 0px; border-bottom:none !important;}
 +
#globalWrapper{
 +
     font-size:100%;
 
   }
 
   }
−
.appearing-item.animate-it.bounceRight {
 
−
  -webkit-animation: bounceInRight 1.2s;
 
−
  -moz-animation: bounceInRight 1.2s;
 
−
    animation: bounceInRight 1.2s;
 
−
}
 
  
−
.appearing-item.animate-it.moveDown {
+
p{
−
   -webkit-animation: moveDown 0.8s;
+
   padding:0;
−
  -moz-animation: moveDown 0.8s;
+
−
    animation: moveDown 0.8s;
+
 
}
 
}
−
.appearing-item.animate-it.fadeInUp {
+
table{
−
   -webkit-animation: fadeInUp 1s;
+
   background:none;
−
  -moz-animation: fadeInUp 1s;
+
−
    animation: fadeInUp 1s;
+
 
}
 
}
−
.appearing-item.animate-it.fadeInUp2 {
+
ul{
−
   -webkit-animation: fadeInUp 2s;
+
   list-style-image: none;
−
  -moz-animation: fadeInUp 2s;
+
−
    animation: fadeInUp 2s;
+
−
}
+
−
.appearing-item.animate-it.fadeInUp3 {
+
−
  -webkit-animation: fadeInUp 3s;
+
−
  -moz-animation: fadeInUp 3s;
+
−
    animation: fadeInUp 3s;
+
−
}
+
−
.appearing-item.animate-it.bounceIn {
+
−
  -webkit-animation: bounceIn 2s;
+
−
  -moz-animation: bounceIn 2s;
+
−
    animation: bounceIn 2s;
+
 
}
 
}
  
  
−
 
+
/* GENERAL STYLE */  
−
 
+
*{
−
 
+
   margin:0;
−
  /* KEYFRAMES FOR ANIMATIONS */
+
   padding:0;
−
 
+
−
 
+
−
@-webkit-keyframes bounceIn{
+
−
   0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: scale(.3);
+
−
   }
+
−
 
+
−
  50% {
+
−
    -webkit-transform: scale(1.05);
+
−
  }
+
−
 
+
−
  70% {
+
−
    -webkit-transform: scale(.9);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: scale(1);
+
−
  }
+
 
}
 
}
−
 
+
  body {
−
@-moz-keyframes bounceIn{
+
   margin: 0;
−
   0% {
+
   font: 400 16px/1.5 "Quicksand", sans-serif;
−
    opacity: 0;
+
−
    -moz-transform: scale(.3);
+
−
   }
+
−
 
+
−
  50% {
+
−
    -moz-transform: scale(1.05);
+
−
  }
+
−
 
+
−
  70% {
+
−
    -moz-transform: scale(.9);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: scale(1);
+
−
  }
+
 
}
 
}
−
 
+
a {
−
@keyframes bounceIn {
+
     -moz-transition: 0.2s ease-in-out;
−
  0% {
+
     -webkit-transition: 0.2s ease-in-out;
−
     opacity: 0;
+
   transition: 0.2s ease-in-out;
−
    transform: scale(.3);
+
−
  }
+
−
 
+
−
  50% {
+
−
     transform: scale(1.05);
+
−
   }
+
−
 
+
−
  70% {
+
−
    transform: scale(.9);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: scale(1);
+
−
  }
+
 
}
 
}
  
−
@-webkit-keyframes bounceInLeft{
+
main{
−
   0% {
+
   position:relative;
−
    opacity: 0;
+
   overflow:hidden;
−
    -webkit-transform: translateX(-2000px);
+
   height:100%;
−
   }
+
−
 
+
−
  60% {
+
−
    -webkit-transform: translateX(20px);
+
−
   }
+
−
 
+
−
  80% {
+
−
    -webkit-transform: translateX(-5px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(0);
+
−
  }
+
 
}
 
}
  
−
@-moz-keyframes bounceInLeft{
+
.main_content{
−
   0% {
+
   position:fixed;   
−
    opacity: 0;
+
  top:90px;
−
    -moz-transform: translateX(-2000px);
+
  right:0px;
−
   }
+
   left:0px;
 +
  bottom:0px;
  
−
   60% {
+
   background-image: linear-gradient(45deg, #4296c1 0%, #e4efe9 100%);
−
    -moz-transform: translateX(20px);
+
−
  }
+
−
 
+
−
  80% {
+
−
    -moz-transform: translateX(-5px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
−
 
+
.middle_container{
−
@keyframes bounceInLeft {
+
   padding-bottom: 80px;
−
   0% {
+
−
    opacity: 0;
+
−
    transform: translateX(-2000px);
+
−
  }
+
−
 
+
−
  60% {
+
−
    transform: translateX(20px);
+
−
  }
+
−
 
+
−
  80% {
+
−
    transform: translateX(-5px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0);
+
−
  }
+
 
}
 
}
  
−
 
+
.section_container{
−
@-webkit-keyframes bounceInRight{
+
   width:60%;
−
   0% {
+
  min-width: 600px;
−
    opacity: 0;
+
   max-width: 1100px;
−
    -webkit-transform: translateX(2000px);
+
   min-height:100%;
−
   }
+
   position:relative;
−
 
+
  margin:0px auto;
−
  60% {
+
−
    -webkit-transform: translateX(-20px);
+
−
   }
+
−
 
+
−
  80% {
+
−
    -webkit-transform: translateX(5px);
+
−
   }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateX(0);
+
−
  }
+
 
}
 
}
  
−
@-moz-keyframes bounceInRight{
+
section{
−
   0% {
+
   background-color: rgba(255,255,255,0.2);
−
    opacity: 0;
+
   padding:40px 80px;
−
    -moz-transform: translateX(2000px);
+
   text-align: center;
−
   }
+
   position:relative;
−
 
+
−
  60% {
+
−
    -moz-transform: translateX(-20px);
+
−
   }
+
−
 
+
−
  80% {
+
−
    -moz-transform: translateX(5px);
+
−
   }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(0);
+
−
  }
+
 
}
 
}
  
−
@keyframes bounceInRight {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: translateX(2000px);
 
−
  }
 
  
−
  60% {
+
/* HOME SECTIONS */
−
    transform: translateX(-20px);
+
.home_section {
−
  }
+
  vertical-align: middle;
−
 
+
   text-align: center;
−
  80% {
+
    
−
    transform: translateX(5px);
+
−
   }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0);
+
−
   }
+
 
}
 
}
−
 
+
.home_section h1{
−
@-webkit-keyframes moveDown{
+
   text-align: center;
−
   0% {
+
  font-family: 'Quicksand', sans-serif;
−
    opacity: 1;
+
   font-size: 36pt;
−
    -webkit-transform: translateY(-40px);
+
−
   }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateY(0);
+
−
  }
+
 
}
 
}
−
 
+
.home {
−
@-moz-keyframes moveDown{
+
  background: white url("https://static.igem.org/mediawiki/2017/archive/5/5c/20171002220813%21T--INSA-UPS_France--home.png") no-repeat 50% 50%;
−
   0% {
+
  background-size: cover;
−
    opacity: 1;
+
  min-height: 90vh;
−
    -moz-transform: translateY(-40px);
+
}
−
   }
+
.content_0 {
−
 
+
   background: #f3ead7 no-repeat 50% 50%;
−
   100% {
+
  background-size: cover;
−
    opacity: 1;
+
  padding-top:90px;
−
    -moz-transform: translateY(0);
+
}
−
  }
+
.content_1 {
 +
  background: #99c18e no-repeat 50% 50%;
 +
   background-size: cover;
 +
}
 +
.content_2 {
 +
   background: #f3ead7 no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
 +
.content_3{
 +
  background: #99c18e no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
 +
.content_4{
 +
  background: #323537 no-repeat 50% 50%;
 +
  background-size: cover;
 
}
 
}
  
−
@keyframes moveDown {
+
</style>
−
  0% {
+
−
    opacity: 1;
+
−
    transform: translateY(-40px);
+
−
  }
+
  
−
  100% {
 
−
    opacity: 1;
 
−
    transform: translateY(0);
 
−
  }
 
−
}
 
  
−
@-webkit-keyframes fadeInUp{
+
   <main class="site-main">
−
   0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: translateY(20px);
+
−
  }
+
  
−
  100% {
+
     <section class="home_section home" id="home" style="position:relative;">
−
     opacity: 1;
+
      <div class="container">
−
    -webkit-transform: translateY(0);
+
−
  }
+
−
}
+
  
−
@-moz-keyframes fadeInUp{
+
      <!-- FIRST IMAGE TO ANIMATE -->
−
  0% {
+
      <div style="text-align: center;">
−
    opacity: 0;
+
        <div style="width:100%;position:absolute; top:50pt;font-size:60pt;font-weight:700;">
−
    -moz-transform: translateY(20px);
+
        Croc'n Cholera
−
  }
+
        </div>
 +
        <div style="width:100%;position:absolute;font-size:40pt; color:#295a7f;top:120pt;">
 +
        A synthetic microbial consortium
 +
        </div>
 +
      </div>
  
−
  100% {
+
      </div>
−
     opacity: 1;
+
     </section>
−
    -moz-transform: translateY(0);
+
−
  }
+
−
}
+
  
−
@keyframes fadeInUp {
+
   
−
  0% {
+
     <section class="home_section content_0" id="content_0" style="position:relative;">
−
     opacity: 0;
+
          <h1 style="margin-bottom: 100px;">Multiorganism approach: a new challenge for Synthetic Biology</h1>
−
    transform: translateY(20px);
+
          <img style="height:500px;max-height:90%;" src="https://static.igem.org/mediawiki/2017/7/77/T--INSA-UPS_France--home_frise.png" alt="">
−
  }
+
    </section>
  
−
  100% {
+
    <style>
−
    opacity: 1;
+
      #content_1 table{
−
    transform: translateY(0);
+
        width:90%;
−
  }
+
        margin:0px auto;
−
}
+
        margin-top:100px;
 +
      }
 +
      #content_1 table tr td{
 +
        text-align: center;
 +
        padding:5px;
 +
      }
 +
      #content_1 table tr td img{
 +
        width:100%;
 +
        max-width: 270px;
 +
      }
 +
      #content_1 table tr td{
 +
        font-family:'Merriweather', serif;
 +
        font-size: 20pt;
 +
      }
 +
      #content_1 h1{
 +
        margin-left:5%;
 +
        font-family: 'Quicksand', sans-serif;
 +
        font-size:30pt;
 +
        margin:top:0;
 +
      }
 +
     
 +
    </style>
  
−
@-webkit-keyframes slowlyAppear{
 
−
  from {
 
−
    opacity: 0;
 
−
  }
 
−
  to {
 
−
    opacity: 1;
 
−
  }
 
−
}
 
  
−
@-moz-keyframes slowlyAppear{
+
    <section class="home_section content_1" id="content_1">
−
  from {
+
      <h1>Biodiversity entails a lot of possibilities...</h1>
−
    opacity: 0;
+
      <table>
−
  }
+
        <tr>
−
  to {
+
          <td><img src="https://static.igem.org/mediawiki/2017/a/af/T--INSA-UPS_France--home_quorum.png" alt=""></td>
−
    opacity: 1;
+
          <td><img src="https://static.igem.org/mediawiki/2017/c/cd/T--INSA-UPS_France--home_light.png" alt=""></td>
−
  }
+
          <td><img src="https://static.igem.org/mediawiki/2017/8/82/T--INSA-UPS_France--home_proteins.png" alt=""></td>
−
}
+
          <td><img src="https://static.igem.org/mediawiki/2017/0/01/T--INSA-UPS_France--home_thermo.png" alt=""></td>
 +
        </tr>
 +
        <tr>
 +
          <td>Quorum sensing</td>
 +
          <td>Light sensitive</td>
 +
          <td>Proteins secretion</td>
 +
          <td>High thermostability</td>
 +
        </tr>
 +
      </table>
 +
    </section>
  
−
@keyframes slowlyAppear {
+
    <style>
−
  from {
+
      #content_2, #content_3{
−
    opacity: 0;
+
        text-align: center;
−
  }
+
        display:flex;
−
  to {
+
        flex-direction: row;
−
    opacity: 1;
+
      }
−
  }
+
      .block{
−
}
+
        width:50%;
 +
        display:flex;
 +
        justify-content:center;
 +
        align-items:center;
 +
      }
 +
      .block img{
 +
        width:90%;
 +
        margin:0 auto;
 +
        max-width: 600px;
 +
      }
 +
      .text_block h1{
 +
        font-family: 'Quicksand', sans-serif;
 +
        font-size:3.5vw;
 +
        font-weight:700;
 +
      }
 +
      .text_block p{
 +
        font-family:'Merriweather', serif;
 +
        text-align: justify;
 +
        font-size:2.2vw;
 +
        margin:40px 40px;
 +
      }
 +
     
 +
      @media screen and (min-width: 1000px) {
 +
        .text_block p {
 +
          font-size: 20px;
 +
          margin:100px;
 +
        }
 +
        .text_block h1{
 +
          font-size:38px;
 +
        }
 +
      }
  
 +
    </style>
  
−
.animated-letter {
+
    <section class="home_section content_2" id="content_2">
−
  display: inline-block;
+
      <div class="block">
−
  font-weight: 100;
+
      <div class="block_content">
−
  opacity: 0;
+
        <img src="https://static.igem.org/mediawiki/2017/8/88/T--INSA-UPS_France--home_blupuriloop.png" alt="" class="img_home">
−
  padding: 0;
+
      </div>
−
  font-size: 4.5em;
+
      </div>
−
}
+
      <div class="block text_block">
 +
      <div class="block_content">
 +
        <h1>What if they could communicate?</h1>
 +
        <p>
 +
          The living world offers a lot of possibilities, but their use is still limited in synthetic biology.  
 +
        </p>
 +
        <p>
 +
          Our idea is about taking advantages of the characteristics of single microorganisms by making them communicate with each other to get the appropriate response.
 +
        </p>
 +
      </div> 
 +
      </div> 
 +
     
 +
    </section>
  
−
.animate-it .slowly-appear{
 
−
  animation-name: slowlyAppear;
 
−
  animation-duration: 1s;
 
−
  animation-timing: ease;
 
−
  animation-fill-mode: forwards;
 
−
}
 
  
−
.slowly-appear.ap1 {
 
−
  animation-delay: 0.1s;
 
−
}
 
  
−
.slowly-appear.ap2 {
+
    <section class="home_section content_3" id="content_3">
−
  animation-delay: 0.2s;
+
−
}
+
  
−
.slowly-appear.ap3 {
+
      <div class="block text_block">
−
  animation-delay: 0.3s;
+
      <div class="block_content">
−
}
+
        <h1>Our proof of concept : a fight against cholera</h1>
 +
        <p>
 +
          <i>V. cholerae</i> is responsible for cholera, a disease that contaminates water and affects people in developing countries, war zones and natural disaster zones.
 +
        </p>
 +
        <p>
 +
        Our project is about creating a multi organisms system which is able to sense and wipe cholera out in contaminated water.
 +
        </p>
 +
      </div> 
 +
      </div> 
  
−
.slowly-appear.ap4 {
+
      <div class="block">
−
  animation-delay: 0.4s;
+
      <div class="block_content">
−
}
+
        <img src="https://static.igem.org/mediawiki/2017/archive/b/bc/20171003092137%21T--INSA-UPS_France--home_blupuriloop_crocncholera.png" alt="" class="img_home">
 +
      </div>
 +
      </div>
  
−
.slowly-appear.ap5 {
+
     
−
  animation-delay: 0.5s;
+
    </section>
−
}
+
−
.slowly-appear.ap6 {
+
−
  animation-delay: 0.6s;
+
−
}
+
  
−
.slowly-appear.ap7 {
+
    <style>
−
  animation-delay: 0.7s;
+
−
}
+
  
−
.slowly-appear.ap8 {
+
/* CONTACT ICONS */
−
  animation-delay: 0.8s;
+
−
}
+
  
−
.slowly-appear.ap9 {
+
.icons_contact{
−
   animation-delay: 0.9s;
+
   display:inline-block;
 +
  margin:40px 0;
 
}
 
}
  
−
.slowly-appear.ap10 {
+
.icons_contact > a{
−
   animation-delay: 1s;
+
   color:black;
 +
  margin:10px;
 +
  text-shadow:2px 2px 0px white;
 
}
 
}
  
−
.slowly-appear.ap11 {
+
#fbIcon:hover{
−
   animation-delay: 1.1s;
+
   color:#3b5998;
 +
  text-shadow:2px 2px 0 #000000;
 
}
 
}
  
−
.slowly-appear.ap12 {
+
#twitterIcon:hover{
−
   animation-delay: 1.2s;
+
   color:#55acee;
 +
  text-shadow:2px 2px 0 #000000;
 
}
 
}
  
−
.slowly-appear.ap13 {
+
#contactIcon:hover{
−
   animation-delay: 1.3s;
+
   color:#e5e5e5;
 +
  text-shadow:2px 2px 0 #000000;
 
}
 
}
−
 
+
#instaIcon:hover{
−
.slowly-appear.ap14 {
+
   color:#8a3ab9;
−
   animation-delay: 1.4s;
+
  text-shadow:2px 2px 0 #000000;
 
}
 
}
  
−
.slowly-appear.ap15 {
+
/* SPONSORS IMG */
−
   animation-delay: 1.5s;
+
#content_4 h1{
 +
   color:#eee;
 
}
 
}
−
.slowly-appear.ap16 {
+
#content_4 img{
−
   animation-delay: 1.6s;
+
   max-height:100px;
 +
  display:inline-block;
 +
  margin:10px;
 +
  opacity:0.5;
 
}
 
}
−
.slowly-appear.ap17 {
+
#content_4 img:hover{
−
  animation-delay: 1.7s;
+
   opacity:1;
−
}
+
−
.slowly-appear.ap18 {
+
−
   animation-delay: 1.8s;
+
−
}
+
−
.slowly-appear.ap19 {
+
−
  animation-delay: 1.9s;
+
−
}
+
−
.slowly-appear.ap20 {
+
−
  animation-delay: 2s;
+
−
}
+
−
.slowly-appear.ap21 {
+
−
  animation-delay: 2.1s;
+
 
}
 
}
 +
    </style>
  
 +
    <section class="home_section content_4" id="content_4" style="overflow:hidden;">
  
 +
        <h1>Feel free to contact us or follow us on social media: </h1>
 +
        <div class="icons_contact">
 +
          <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-4x"></i></a>
 +
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-4x"></i></a>
 +
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-4x"></i></a>
 +
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-4x"></i></a> 
 +
        </div>
 +
        <h1>We want to thank all our sponsors: </h1>
 +
        <div class="sponsors">
 +
          <a href="http://www.lisbp.fr/en/index.html"><img src="https://static.igem.org/mediawiki/2017/3/3e/T--INSA-UPS_France--Logo_lisbp.png" alt=""></a>
 +
          <a href="http://www.toulouse-white-biotechnology.com/en/"><img src="https://static.igem.org/mediawiki/2017/5/56/T--INSA-UPS_France--Logo_twb.png" alt=""></a>
 +
          <a href="http://fondation.insa-lyon.fr/"><img src="https://static.igem.org/mediawiki/2017/6/6d/T--INSA-UPS_France--Logo_fondationinsal.png" alt=""></a>
 +
          <a href="https://fr-fr.facebook.com/insaadnconceptclub/"><img src="https://static.igem.org/mediawiki/2017/b/b7/T--INSA-UPS_France--Logo_ia2c.png" alt=""></a>
 +
          <a href="http://www.biomerieux.com/en"><img src="https://static.igem.org/mediawiki/2017/8/83/T--INSA-UPS_France--Logo_biomerieux.png" alt=""></a>
 +
          <a href="http://www.sunwaterlife.com/en/"><img src="https://static.igem.org/mediawiki/2017/0/09/T--INSA-UPS_France--Logo_sunwaterlife.png" style="width:150px;" alt=""></a>
 +
          <a href="http://www.univ-tlse3.fr/home/home-page-en-379161.kjsp?RH=ACCUEIL"><img src="https://static.igem.org/mediawiki/2017/2/28/T--INSA-UPS_France--Logo_ups.png" alt=""></a>
 +
          <a href="http://www.fsi.univ-tlse3.fr/"><img src="https://static.igem.org/mediawiki/2017/a/ab/T--INSA-UPS_France--Logo_fsi.png" alt=""></a>
 +
          <a href="https://www.kbs-frb.be/"><img src="https://static.igem.org/mediawiki/2017/c/cf/T--INSA-UPS_France--Logo_ernestsolvay.png" alt=""></a>
 +
          <a href="http://www.insa-toulouse.fr/fr/institution/fondation-insa-toulouse.html#"><img src="https://static.igem.org/mediawiki/2017/6/62/T--INSA-UPS_France--Logo_fondationinsat.png" alt=""></a>
 +
      <a href="http://www.adisseo.com/en/"><img src="https://static.igem.org/mediawiki/2017/9/96/T--INSA-UPS_France--Logo_adisseo.png" alt=""></a>
 +
      <a href="http://www.insa-toulouse.fr/fr/index.html"><img src="https://static.igem.org/mediawiki/2017/2/2d/T--INSA-UPS_France--Logo_insatoulouse.png" style="width:150px;" alt=""></a>
 +
      <a href="https://www.veolia.com/en"><img src="https://static.igem.org/mediawiki/2017/9/91/T--INSA-UPS_France--Logo_veolia.png" alt=""></a>
 +
      <a href="https://www.france-science.org/-Homepage-English-.html"><img src="https://static.igem.org/mediawiki/2017/1/1a/T--INSA-UPS_France--Logo_ambassade.jpg" alt=""></a>
  
 +
      <a href="https://www-lbme.biotoul.fr/"><img src="https://static.igem.org/mediawiki/2017/5/51/T--INSA-UPS_France--Logo_LBME.png" alt=""></a>
 +
      <a href="https://www6.toulouse.inra.fr/metatoul_eng/"><img src="https://static.igem.org/mediawiki/2017/1/16/T--INSA-UPS_France--Logo_metatoul.png" alt=""></a>
  
−
.appearing-title{
 
−
  color:#aebd38;
 
−
  text-shadow:2px 2px black;
 
−
  font-family: "Gatalike", Arial, sans-serif;
 
−
  text-align: center;
 
−
}
 
  
−
  </style>
+
      <a href="http://www.univ-tlse3.fr/associations-+/do-you-have-a-project--378066.kjsp?RH=1238417866394"><img src="https://static.igem.org/mediawiki/2017/5/5b/T--INSA-UPS_France--Logo_fsdie.png" alt=""></a>
 +
      <a href="http://en.univ-toulouse.fr/our-strengths"><img src="https://static.igem.org/mediawiki/2017/9/93/T--INSA-UPS_France--Logo_fsie.jpg" alt=""></a>
  
  
−
<!-- HTML -->
+
       <a href="https://www.crous-toulouse.fr/english/"><img src="https://static.igem.org/mediawiki/2017/3/37/T--INSA-UPS_France--Logo_crous.png" alt=""></a>
−
  <div class="container_section" >
+
−
  <section>
+
−
 
+
−
<div class="appearing-container">
+
−
    <div class="appearing-item bounceLeft">
+
−
    <div class="appearing-image">
+
−
 
+
−
       <img src="https://static.igem.org/mediawiki/2017/2/2a/T--INSA-UPS_France--Logo.png" alt="" class="center" style="width:500px;">
+
−
 
+
−
    </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
 
+
−
  <div class="appearing-container">
+
−
  <div class="appearing-item appearing-title">
+
−
    <div class="appearing-content ">
+
−
      <p>
+
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap1">W</span><span class="animated-letter slowly-appear ap2">h</span><span class="animated-letter slowly-appear ap3">a</span><span class="animated-letter slowly-appear ap4">t</span></div>
+
−
      <span class="animated-letter slowly-appear ap5">&nbsp;</span>
+
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap6">i</span><span class="animated-letter slowly-appear ap7">s</span></div>
+
−
      <span class="animated-letter slowly-appear ap8">&nbsp;</span>
+
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap9">c</span><span class="animated-letter slowly-appear ap10">h</span><span class="animated-letter slowly-appear ap11">o</span><span class="animated-letter slowly-appear ap12">l</span><span class="animated-letter slowly-appear ap13">e</span><span class="animated-letter slowly-appear ap14">r</span><span class="animated-letter slowly-appear ap15">a</span><span class="animated-letter slowly-appear ap16">?</span></div>
+
−
      </p>
+
−
    </div>
+
−
   
+
−
  </div>
+
−
  </div>
+
−
 
+
−
  <div class="appearing-container">
+
−
    <div class="appearing-item double-item bounceLeft">
+
−
    <div class="appearing-content light-beige-background" style="text-align:center; color:black; width:70%;margin:20pt auto;">
+
−
      The culprit: <br />
+
−
      <i>Vibrio cholerae</i>
+
−
     
+
−
    </div>
+
−
    <div class="appearing-content" style="text-align:center; color:black; width:70%;margin:auto auto;font-size:18pt;">
+
−
      Contaminates water and affects people in developing countries, war zones and natural disaster zones   
+
−
    </div>
+
−
    </div>
+
−
    <div class="appearing-item double-item bounceRight no-background ">
+
−
    <div class="appearing-image">
+
−
      <img src="https://static.igem.org/mediawiki/2017/0/0a/T--INSA-UPS_France--Home_Vibrio_Mean.png" alt="" width="75%">
+
−
    </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
  <div class="appearing-container">
+
−
    <div class="appearing-item triple-item fadeInUp">
+
−
    <div class="appearing-content ">
+
−
      <div class="circle-year brown-background">
+
−
        <b>2011</b>
+
−
      </div>
+
−
      <div class="descr-year">
+
−
        Last epidemy in an occidental country
+
−
      </div>
+
−
    </div>
+
−
    </div>
+
−
    <div class="appearing-item triple-item fadeInUp2 ">
+
−
    <div class="appearing-content">
+
−
      <div class="circle-year brown-background">
+
−
        <b>4 millions</b>
+
−
      </div>
+
−
      <div class="descr-year">
+
−
        Number of cases per year
+
−
      </div>
+
−
    </div>
+
−
    </div>
+
−
    <div class="appearing-item triple-item fadeInUp3 ">
+
−
    <div class="appearing-content">
+
−
      <div class="circle-year brown-background">
+
−
        <b>42</b>
+
−
      </div>
+
−
      <div class="descr-year">
+
−
        Number of concerned countries
+
−
      </div>
+
−
    </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
 
+
−
  <div class="appearing-container">
+
−
  <div class="appearing-item bounceIn">
+
−
    <!--div class="dark-green-background" style="height:500px; width:70%; margin:0px auto;text-align:center; font-weight: bold;">
+
−
      <br />
+
−
      <br />
+
−
      Video about <br />context &amp; cholera
+
−
    </div>-->
+
−
    <div class="appearing-content" style="text-align: center;">
+
−
      <video width="640" height="480" controls>
+
−
        <source src="https://static.igem.org/mediawiki/2017/f/f1/T--INSA-UPS_France--Home_context.mp4" type="video/mp4">
+
−
      Your browser does not support the video tag.
+
−
      </video>
+
−
 
+
−
    </div>
+
−
 
+
−
  </div>
+
−
  </div>
+
−
 
+
−
  <div class="appearing-container">
+
−
  <div class="appearing-item bounceIn">
+
−
    <div class="appearing-content" style="text-align:center;">
+
−
      <b>&rarr; Implemented solutions and their problems: </b>
+
−
    </div>
+
−
 
+
−
  </div>
+
−
  </div>
+
−
 
+
−
 
+
−
  <div class="appearing-container">
+
−
     
+
−
      <div class="appearing-item triple-item fadeInUp">
+
−
      <div class="appearing-content">
+
−
        <div class="solutions">
+
−
          <img src="https://static.igem.org/mediawiki/2017/4/41/T--INSA-UPS_France--Home_Solutions1.png" alt="" style="width:200px;">
+
 
         </div>
 
         </div>
−
        <div class="descr-year">
 
−
          Too complicated to measure out
 
−
        </div>
 
−
      </div>
 
−
      </div>
 
−
      <div class="appearing-item triple-item fadeInUp2">
 
−
      <div class="appearing-content">
 
−
        <div class="solutions">
 
−
          <img src="https://static.igem.org/mediawiki/2017/5/52/T--INSA-UPS_France--Home_Solutions2.png" alt="" style="width:200px;">
 
−
        </div>
 
−
        <div class="descr-year">
 
−
          Too complicated to set up for big volumes
 
−
        </div>
 
−
      </div>
 
−
      </div>
 
−
      <div class="appearing-item triple-item fadeInUp3">
 
−
      <div class="appearing-content">
 
−
        <div class="solutions">
 
−
          <img src="https://static.igem.org/mediawiki/2017/f/f7/T--INSA-UPS_France--Home_Solutions3.png" alt="" style="width:200px;">
 
−
        </div>
 
−
        <div class="descr-year">
 
−
          Too expensive
 
−
        </div>
 
−
      </div>
 
−
      </div>
 
−
    </div>
 
  
  
−
  <div class="appearing-container">
 
−
  <div class="appearing-item bounceRight">
 
−
    <div class="appearing-content">
 
−
      <p style="color:#598234; font-weight: bold; font-size:20pt; text-align:center;">
 
−
        Our solution : <br />
 
−
        A synthetic biology innovative approach!
 
−
      </p>
 
−
    </div>
 
−
    <div class="appearing-image">
 
−
      <img src="https://static.igem.org/mediawiki/2017/archive/1/10/20170703093426%21T--INSA-UPS_France--Home_Vibrio_And_Sobki.png" alt="" style="width:60%">
 
−
    </div>
 
−
    <div class="appearing-content">
 
−
      <p style="color:#598234; font-weight: bold; font-size:20pt; text-align:center;">
 
−
        Fight <i>V. cholerae</i> with crocodile antimicrobial peptides!
 
−
      </p>
 
−
    </div>
 
−
  </div>
 
−
  </div>
 
−
 
−
  <div class="appearing-container">
 
−
  <div class="appearing-item appearing-title">
 
−
    <div class="appearing-content ">
 
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap1">W</span><span class="animated-letter slowly-appear ap2">h</span><span class="animated-letter slowly-appear ap3">a</span><span class="animated-letter slowly-appear ap4">t</span>
 
−
      </div>
 
−
      <span class="animated-letter slowly-appear ap5">&nbsp;</span>
 
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap6">i</span><span class="animated-letter slowly-appear ap7">s</span></div>
 
−
      <span class="animated-letter slowly-appear ap8">&nbsp;</span>
 
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap9">o</span><span class="animated-letter slowly-appear ap10">u</span><span class="animated-letter slowly-appear ap11">r</span>
 
−
      </div>
 
−
      <span class="animated-letter slowly-appear ap12">&nbsp;</span>
 
−
      <div style="display:inline-block;"><span class="animated-letter slowly-appear ap13">p</span><span class="animated-letter slowly-appear ap14">r</span><span class="animated-letter slowly-appear ap15">o</span><span class="animated-letter slowly-appear ap16">j</span><span class="animated-letter slowly-appear ap17">e</span><span class="animated-letter slowly-appear ap18">c</span><span class="animated-letter slowly-appear ap19">t</span><span class="animated-letter slowly-appear ap20">?</span></div>
 
−
    </div>
 
−
   
 
−
  </div>
 
−
  </div>
 
−
 
−
    <div class="appearing-container">
 
−
    <div class="appearing-item double-item bounceLeft">
 
−
    <div class="appearing-content light-beige-background" style="text-align:center; color:black; width:70%;margin:20px auto;">
 
−
      Our savior:<br />
 
−
      <i>Sobki the crocodile</i>
 
 
        
 
        
−
     </div>
+
     </section>
−
    <div class="appearing-content" style="text-align:center; color:black; width:80%;margin:auto auto;font-size:18pt;">
+
−
      Can produce antimicrobial peptides that enables him to destroy <i>V. cholerae</i> in his natural habitat     
+
−
    </div>
+
−
    </div>
+
−
    <div class="appearing-item double-item bounceRight no-background ">
+
−
    <div class="appearing-image">
+
−
      <img src="https://static.igem.org/mediawiki/2017/4/4f/T--INSA-UPS_France--Home_Sobki.png" alt="" width="75%">
+
−
    </div>
+
−
    </div>
+
−
  </div>
+
  
−
 
 
  
−
    <div class="appearing-container">
 
−
      <div class="appearing-item fadeInUp">
 
−
        <div class="appearing-content">
 
−
      <p style="text-align:center;">
 
−
        Our system is made of two engineered microorganisms: <i>Vibrio harveyi</i> to detect <i>V. cholerae</i> and <i>Pichia pastoris</i> to produce crocodile AMPs. Thus one of our biggest challenge is to create an eukaryote-prokaryote communication system.
 
−
      </p>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
    <div class="appearing-container" style="margin-bottom: 100px;">
 
−
      <div class="appearing-item fadeInUp">
 
−
        <div class="appearing-image">
 
−
 
−
          <img src="https://static.igem.org/mediawiki/2017/2/21/T--INSA-UPS_France--Home_Project_Scheme.png" alt="" style="width:800px;">
 
−
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
 
−
 
−
  </section>
 
−
  </div>
 
−
 
−
</html>
 
−
 
 
−
<!-- FOOTER -->
 
−
{{INSA-UPS_France/Footer}}
 
−
 
−
<!-- SCRIPT -->
 
−
{{INSA-UPS_France/script_scroll}}
 
−
{{INSA-UPS_France/script_carousel}}
 
−
<html>
 
−
<script>
 
−
   
 
−
  var appearingBlocks = $('.appearing-item'),
 
−
    offset = 0.8;
 
−
   
 
−
 
−
  $(window).on('scroll', function(){
 
−
    appearingBlocks.each(function(){
 
−
      var docView = $(window).scrollTop();
 
−
      var docViewBottom = docView+$(window).height();
 
−
      var elemTop = $(this).offset().top;
 
−
      var offset = $(window).height()/4;
 
−
 
−
      if((elemTop+offset < docViewBottom)){
 
−
        if(!$(this).hasClass('is-visible')){
 
−
          $(this).addClass('animate-it');
 
−
          $(this).addClass('is-visible');
 
−
        }
 
−
       
 
−
      }
 
−
     
 
−
    });
 
−
  });
 
  
 +
  </main>
  
 +
<!-- C O N T E N T -->
  
−
  </script>
 
 
</html>
 
</html>
 +
{{INSA-UPS_France/General_script}}
 +
{{INSA-UPS_France/Header_script}}

Latest revision as of 23:22, 1 November 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Croc'n Cholera
A synthetic microbial consortium

Multiorganism approach: a new challenge for Synthetic Biology

Biodiversity entails a lot of possibilities...

Quorum sensing Light sensitive Proteins secretion High thermostability

What if they could communicate?

The living world offers a lot of possibilities, but their use is still limited in synthetic biology.

Our idea is about taking advantages of the characteristics of single microorganisms by making them communicate with each other to get the appropriate response.

Our proof of concept : a fight against cholera

V. cholerae is responsible for cholera, a disease that contaminates water and affects people in developing countries, war zones and natural disaster zones.

Our project is about creating a multi organisms system which is able to sense and wipe cholera out in contaminated water.

Feel free to contact us or follow us on social media:

We want to thank all our sponsors: