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

Line 1: Line 1:
−
{{INSA-UPS_France/CSS}}
+
{{INSA-UPS_France/Links_new}}
−
{{INSA-UPS_France/Links}}
+
{{INSA-UPS_France/Style_new}}
 +
{{INSA-UPS_France/Header_new}}
  
−
<!-- HEADER -->
 
−
{{INSA-UPS_France/Header1}}
 
−
Home
 
−
{{INSA-UPS_France/Header2}}
 
−
 
−
<!-- CONTENT -->
 
 
<html>
 
<html>
  
−
<!-- STYLE -->
+
<style>  
−
<style>
+
/* HEADER HOME */
−
@font-face {
+
   .js-sticky {
−
   font-family: "Gatalike";
+
   display:none;
−
   src: url('T--INSA-UPS_France--Font_Gatalike.ttf');
+
 
}
 
}
−
    body{
+
/* HOME SECTIONS */
−
      padding:0px;
+
.home_section {
−
      margin:0px;
+
  vertical-align: middle;
−
    }
+
  box-sizing: border-box;
−
 
+
  text-align: justify;
−
    .appearing-container{
+
  min-height: 100vh;
−
      overflow: hidden;
+
    display: -webkit-box;
−
      font-size:0;
+
     display: -ms-flexbox;
−
      width:80%;
+
  display: flex;
−
      margin:20px auto;
+
     -webkit-box-orient: vertical;
−
      min-width: 740px;
+
     -webkit-box-direction: normal;
−
      font-family: Scope One, serif !important;
+
     -ms-flex-direction: column;
−
    }
+
  flex-direction: column;
−
    .appearing-item{
+
     -webkit-box-pack: center;
−
      font-size:20pt;
+
     -ms-flex-pack: center;
−
      opacity: 0;
+
  justify-content: center;
−
 
+
−
    }
+
−
    .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;    
+
−
     }
+
−
    .double-item-noapp{
+
−
      width:50%;
+
−
      display:table-cell;
+
−
      vertical-align: middle;
+
−
    }
+
−
    .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 {
+
.section__title {
−
  -webkit-animation: bounceInLeft 1s;
+
  font: 200 4em/1.5 "Quicksand", sans-serif;
−
  -moz-animation: bounceInLeft 1s;
+
  text-transform: lowercase;
−
    animation: bounceInLeft 1s;
+
   margin: 0 0 0.4em;
−
   }
+
  text-align: left;
−
.appearing-item.animate-it.bounceRight {
+
−
  -webkit-animation: bounceInRight 1.2s;
+
−
  -moz-animation: bounceInRight 1.2s;
+
−
    animation: bounceInRight 1.2s;
+
 
}
 
}
−
 
+
.section__title--main {
−
.appearing-item.animate-it.moveDown {
+
   text-align: center;
−
   -webkit-animation: moveDown 0.8s;
+
  font-size: 8em;
−
  -moz-animation: moveDown 0.8s;
+
−
    animation: moveDown 0.8s;
+
 
}
 
}
−
.appearing-item.animate-it.fadeInUp {
+
.home {
−
   -webkit-animation: fadeInUp 1s;
+
   background: white url("https://static.igem.org/mediawiki/2017/5/5c/T--INSA-UPS_France--home.png") no-repeat 50% 50%;
−
  -moz-animation: fadeInUp 1s;
+
  background-size: cover;
−
    animation: fadeInUp 1s;
+
 
}
 
}
−
.appearing-item.animate-it.fadeInUp2 {
+
.content_0 {
−
   -webkit-animation: fadeInUp 2s;
+
   background: #f3ead7 no-repeat 50% 50%;
−
  -moz-animation: fadeInUp 2s;
+
  background-size: cover;
−
    animation: fadeInUp 2s;
+
 
}
 
}
−
.appearing-item.animate-it.fadeInUp3 {
+
.content_1 {
−
   -webkit-animation: fadeInUp 3s;
+
   background: #99c18e no-repeat 50% 50%;
−
  -moz-animation: fadeInUp 3s;
+
  background-size: cover;
−
    animation: fadeInUp 3s;
+
 
}
 
}
−
.appearing-item.animate-it.bounceIn {
+
.content_2 {
−
   -webkit-animation: bounceIn 2s;
+
   background: #f3ead7 no-repeat 50% 50%;
−
  -moz-animation: bounceIn 2s;
+
  background-size: cover;
−
    animation: bounceIn 2s;
+
 
}
 
}
−
 
+
.content_3{
−
 
+
   background: #99c18e no-repeat 50% 50%;
−
 
+
   background-size: cover;
−
 
+
−
 
+
−
  /* KEYFRAMES FOR ANIMATIONS */
+
−
 
+
−
 
+
−
@-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);
+
−
  }
+
 
}
 
}
−
 
+
.content_4{
−
@-moz-keyframes bounceIn{
+
   background: #f3ead7 no-repeat 50% 50%;
−
   0% {
+
   background-size: cover;
−
    opacity: 0;
+
−
    -moz-transform: scale(.3);
+
−
  }
+
−
 
+
−
  50% {
+
−
    -moz-transform: scale(1.05);
+
−
  }
+
−
 
+
−
  70% {
+
−
    -moz-transform: scale(.9);
+
−
   }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: scale(1);
+
−
  }
+
 
}
 
}
 +
</style>
  
−
@keyframes bounceIn {
 
−
  0% {
 
−
    opacity: 0;
 
−
    transform: scale(.3);
 
−
  }
 
  
−
   50% {
+
   <main class="site-main">
−
    transform: scale(1.05);
+
−
  }
+
  
−
  70% {
+
     <section class="home_section home" id="home" style="position:relative;">
−
     transform: scale(.9);
+
      <div class="container">
−
  }
+
  
−
   100% {
+
      <!-- FIRST IMAGE TO ANIMATE -->
−
     opacity: 1;
+
      <div style="text-align: center;">
−
     transform: scale(1);
+
   <div style="width:100%;position:absolute; top:0px;font-size:60pt;font-weight:700;">
−
   }
+
      Croc'n Cholera
−
}
+
    </div>
 +
     <div style="width:100%;position:absolute;font-size:40pt; color:#295a7f;top:70pt;">
 +
      A synthetic microbial consortium
 +
  </div>
 +
  </div>
 +
     <img src="https://static.igem.org/mediawiki/2017/2/2a/T--INSA-UPS_France--Logo.png" alt="" style="width:150px; position:absolute; bottom:20px; left:20px;">
 +
   <div style="position:absolute;bottom:30px; left:170px;font-size:30pt;font-weight:bold;">
 +
    iGEM UPS-INSA Toulouse 2017
 +
  </div>
  
−
@-webkit-keyframes bounceInLeft{
 
−
  0% {
 
−
    opacity: 0;
 
−
    -webkit-transform: translateX(-2000px);
 
−
  }
 
  
−
  60% {
+
      </div>
−
     -webkit-transform: translateX(20px);
+
     </section>
−
  }
+
  
−
  80% {
+
     <style>
−
     -webkit-transform: translateX(-5px);
+
−
  }
+
  
−
  100% {
+
      #progress-bar_container{
−
    opacity: 1;
+
        width:90%;
−
    -webkit-transform: translateX(0);
+
        height:200px;
−
  }
+
        margin:0px auto;
−
}
+
        position:relative;
 +
      }
 +
      #progress-bar{
 +
        width:100%;
 +
        height:50px;
 +
        background: white;
 +
        border-radius:40px;
 +
        position:absolute;
 +
        top:75px;
 +
        z-index:0;
 +
      }
 +
      #progress-bar_inner{
 +
        width:95%;
 +
        height: 40px;
 +
        background: #FFCD71;
 +
        position:relative;
 +
        top:5px;
 +
        left:5px;
 +
        border-radius: 40px;
 +
        z-index:10;
 +
      }
 +
      .progress-point{
 +
        width:50px;
 +
        height:50px;
 +
        border-radius:50px;
 +
        background: #E06666;
 +
        z-index:20;
 +
        position:absolute;
 +
        top:0px;
 +
        left:0px;
 +
        font-size:20pt;
 +
      }
 +
      .progress-point.point-1{
 +
        left:5px;
 +
      }
 +
      .progress-point.point-1:before{
 +
        content:'1999';
 +
        color:#E06666;
 +
        position:absolute;
 +
        top:-40px;
 +
        font-weight:bold;
 +
        left:0px;
  
−
@-moz-keyframes bounceInLeft{
+
      }
−
  0% {
+
      .progress-point.point-2{
−
    opacity: 0;
+
        left:30%;
−
    -moz-transform: translateX(-2000px);
+
      }
−
  }
+
      .progress-point.point-2:after{
 +
        content:'2003';
 +
        color:#E06666;
 +
        position:absolute;
 +
        top:50px;
 +
        font-weight:bold;
 +
        left:0px;
 +
      }
 +
      .progress-point.point-3{
 +
        left:60%;
 +
      }
 +
      .progress-point.point-3:after{
 +
        content:'2010';
 +
        color:#E06666;
 +
        position:absolute;
 +
        top:-40px;
 +
        font-weight:bold;
 +
        left:0px;
 +
      }
 +
      .progress-point.point-4{
 +
        left:90%;
 +
      }
 +
      .progress-point.point-4:after{
 +
        content:'now';
 +
        color:#E06666;
 +
        position:absolute;
 +
        top:50px;
 +
        font-weight:bold;
 +
        left:0px;
 +
      }
 +
      .bubble{
 +
        width:40%;
 +
        height:200px;
 +
        background: white;
 +
        position:absolute;
 +
        border-radius:10px;
 +
        display:flex;
 +
        justify-content:center;
 +
        align-items:center;
 +
      }
 +
      .bubble p{
 +
        text-align: center;
 +
      }
 +
      .bubble p, .bubble ul{
 +
        margin:30px;
 +
        font-family: 'Merriweather', serif;
 +
        font-size:2.2vw;
  
−
  60% {
+
      }
−
    -moz-transform: translateX(20px);
+
      @media screen and (min-width: 1000px) {
−
  }
+
        .bubble p, .bubble ul {
 +
          font-size: 18pt;
 +
        }
 +
      }
 +
      .bubble ul li{
 +
        list-style-position: inside;
 +
      }
 +
      #bubble-1{
 +
        left:5px;
 +
        bottom:-200px;
 +
      }
 +
      #bubble-1:after{
 +
        content:'';
 +
        border-left: 20px solid transparent;
 +
        border-right: 20px solid transparent;
 +
        border-bottom: 20px solid white;
 +
        position:absolute;
 +
        bottom:100%;
 +
        left:4%;
 +
        width:0;
 +
        height:0;
 +
      }
 +
     
 +
      #bubble-2{
 +
        left:5%;
 +
        top:-200px;
 +
      }
 +
      #bubble-2:after{
 +
        content:'';
 +
        border-left: 20px solid transparent;
 +
        border-right: 20px solid transparent;
 +
        border-top: 20px solid white;
 +
        position:absolute;
 +
        top:100%;
 +
        left:65%;
 +
        width:0;
 +
        height:0;
 +
      }
 +
      #bubble-3{
 +
        left:50%;
 +
        bottom:-200px;
 +
      }
 +
      #bubble-3:after{
 +
        content:'';
 +
        border-left: 20px solid transparent;
 +
        border-right: 20px solid transparent;
 +
        border-bottom: 20px solid white;
 +
        position:absolute;
 +
        bottom:100%;
 +
        left:25%;
 +
        width:0;
 +
        height:0;
 +
      }
 +
      #bubble-4{
 +
        right:0;
 +
        top:-200px;
 +
      }
 +
      #bubble-4:after{
 +
        content:'';
 +
        border-left: 20px solid transparent;
 +
        border-right: 20px solid transparent;
 +
        border-top: 20px solid white;
 +
        position:absolute;
 +
        top:100%;
 +
        right:15%;
 +
        width:0;
 +
        height:0;
 +
      }
  
−
  80% {
+
    </style>
−
     -moz-transform: translateX(-5px);
+
      
−
  }
+
    <section class="home_section content_0" id="content_0">
  
−
  100% {
+
       
−
    opacity: 1;
+
        <div id="progress-bar_container">
−
    -moz-transform: translateX(0);
+
          <div id="progress-bar">
−
  }
+
            <div id="progress-bar_inner">
−
}
+
              &nbsp;
 +
            </div>
 +
            <div class="progress-point point-1"></div>
 +
            <div class="progress-point point-2"></div>
 +
            <div class="progress-point point-3"></div>
 +
            <div class="progress-point point-4"></div>
 +
          </div>
 +
          <div class="bubble" id="bubble-1">
 +
            <p>First steps of synthetic biology</p>
 +
          </div>
 +
          <div class="bubble" id="bubble-2">
 +
            <p>First edition of the iGEM competition</p>
 +
          </div>
 +
          <div class="bubble" id="bubble-3">
 +
            <p>Boolean algebra in <i>E. coli</i></p>
 +
          </div>
 +
          <div class="bubble" id="bubble-4">
 +
            <p style="margin-bottom: 0 !important;">Current challenges:</p>
 +
            <ul style="margin-top: 0 !important;">
 +
              <li>Cell-free</li>
 +
              <li>De novo life</li>
 +
              <li>Multi organisms</li>
 +
              </ul>
 +
          </div>
 +
        </div>
  
−
@keyframes bounceInLeft {
+
     </section>
−
  0% {
+
−
     opacity: 0;
+
−
    transform: translateX(-2000px);
+
−
  }
+
  
−
  60% {
+
    <style>
−
    transform: translateX(20px);
+
      #content_1 table{
−
  }
+
        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>
  
−
  80% {
 
−
    transform: translateX(-5px);
 
−
  }
 
  
−
  100% {
+
     <section class="home_section content_1" id="content_1">
−
     opacity: 1;
+
      <h1>Biodiversity entails a lot of possibilities...</h1>
−
    transform: translateX(0);
+
      <table>
−
  }
+
        <tr>
−
}
+
          <td><img src="https://static.igem.org/mediawiki/2017/a/af/T--INSA-UPS_France--home_quorum.png" alt=""></td>
 +
          <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>
  
 +
    <style>
 +
      #content_2, #content_3{
 +
        text-align: center;
 +
        display:flex;
 +
        flex-direction: row;
 +
      }
 +
      .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;
 +
        }
 +
      }
  
−
@-webkit-keyframes bounceInRight{
+
     </style>
−
  0% {
+
−
     opacity: 0;
+
−
    -webkit-transform: translateX(2000px);
+
−
  }
+
  
−
  60% {
+
     <section class="home_section content_2" id="content_2">
−
     -webkit-transform: translateX(-20px);
+
      <div class="block">
−
  }
+
      <div class="block_content">
 +
        <img src="https://static.igem.org/mediawiki/2017/8/88/T--INSA-UPS_France--home_blupuriloop.png" alt="" class="img_home">
 +
      </div>
 +
      </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>
  
−
  80% {
 
−
    -webkit-transform: translateX(5px);
 
−
  }
 
  
−
  100% {
 
−
    opacity: 1;
 
−
    -webkit-transform: translateX(0);
 
−
  }
 
−
}
 
  
−
@-moz-keyframes bounceInRight{
+
     <section class="home_section content_3" id="content_3">
−
  0% {
+
−
     opacity: 0;
+
−
    -moz-transform: translateX(2000px);
+
−
  }
+
  
−
  60% {
+
      <div class="block text_block">
−
    -moz-transform: translateX(-20px);
+
      <div class="block_content">
−
  }
+
        <h1>A fight against cholera as an application</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 that is able to sense and wipe cholera out in contaminated water.
 +
        </p>
 +
      </div> 
 +
      </div> 
  
−
  80% {
+
      <div class="block">
−
    -moz-transform: translateX(5px);
+
      <div class="block_content">
−
  }
+
        <img src="https://static.igem.org/mediawiki/2017/b/bc/T--INSA-UPS_France--home_blupuriloop_crocncholera.png" alt="" class="img_home">
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateX(0);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes bounceInRight {
+
−
  0% {
+
−
    opacity: 0;
+
−
    transform: translateX(2000px);
+
−
  }
+
−
 
+
−
  60% {
+
−
    transform: translateX(-20px);
+
−
  }
+
−
 
+
−
  80% {
+
−
    transform: translateX(5px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateX(0);
+
−
  }
+
−
}
+
−
 
+
−
@-webkit-keyframes moveDown{
+
−
  0% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateY(-40px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@-moz-keyframes moveDown{
+
−
  0% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateY(-40px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes moveDown {
+
−
  0% {
+
−
    opacity: 1;
+
−
    transform: translateY(-40px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@-webkit-keyframes fadeInUp{
+
−
  0% {
+
−
    opacity: 0;
+
−
    -webkit-transform: translateY(20px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -webkit-transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@-moz-keyframes fadeInUp{
+
−
  0% {
+
−
    opacity: 0;
+
−
    -moz-transform: translateY(20px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    -moz-transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@keyframes fadeInUp {
+
−
  0% {
+
−
    opacity: 0;
+
−
    transform: translateY(20px);
+
−
  }
+
−
 
+
−
  100% {
+
−
    opacity: 1;
+
−
    transform: translateY(0);
+
−
  }
+
−
}
+
−
 
+
−
@-webkit-keyframes slowlyAppear{
+
−
  from {
+
−
    opacity: 0;
+
−
  }
+
−
  to {
+
−
    opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
@-moz-keyframes slowlyAppear{
+
−
  from {
+
−
    opacity: 0;
+
−
  }
+
−
  to {
+
−
    opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
@keyframes slowlyAppear {
+
−
  from {
+
−
    opacity: 0;
+
−
  }
+
−
  to {
+
−
    opacity: 1;
+
−
  }
+
−
}
+
−
 
+
−
 
+
−
.animated-letter {
+
−
  display: inline-block;
+
−
  font-weight: 100;
+
−
  opacity: 0;
+
−
  padding: 0;
+
−
  font-size: 4.5em;
+
−
}
+
−
 
+
−
.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 {
+
−
  animation-delay: 0.2s;
+
−
}
+
−
 
+
−
.slowly-appear.ap3 {
+
−
  animation-delay: 0.3s;
+
−
}
+
−
 
+
−
.slowly-appear.ap4 {
+
−
  animation-delay: 0.4s;
+
−
}
+
−
 
+
−
.slowly-appear.ap5 {
+
−
  animation-delay: 0.5s;
+
−
}
+
−
.slowly-appear.ap6 {
+
−
  animation-delay: 0.6s;
+
−
}
+
−
 
+
−
.slowly-appear.ap7 {
+
−
  animation-delay: 0.7s;
+
−
}
+
−
 
+
−
.slowly-appear.ap8 {
+
−
  animation-delay: 0.8s;
+
−
}
+
−
 
+
−
.slowly-appear.ap9 {
+
−
  animation-delay: 0.9s;
+
−
}
+
−
 
+
−
.slowly-appear.ap10 {
+
−
  animation-delay: 1s;
+
−
}
+
−
 
+
−
.slowly-appear.ap11 {
+
−
  animation-delay: 1.1s;
+
−
}
+
−
 
+
−
.slowly-appear.ap12 {
+
−
  animation-delay: 1.2s;
+
−
}
+
−
 
+
−
.slowly-appear.ap13 {
+
−
  animation-delay: 1.3s;
+
−
}
+
−
 
+
−
.slowly-appear.ap14 {
+
−
  animation-delay: 1.4s;
+
−
}
+
−
 
+
−
.slowly-appear.ap15 {
+
−
  animation-delay: 1.5s;
+
−
}
+
−
.slowly-appear.ap16 {
+
−
  animation-delay: 1.6s;
+
−
}
+
−
.slowly-appear.ap17 {
+
−
  animation-delay: 1.7s;
+
−
}
+
−
.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;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
.appearing-title{
+
−
  color:#aebd38;
+
−
  text-shadow:2px 2px black;
+
−
  font-family: "Gatalike", Arial, sans-serif;
+
−
  text-align: center;
+
−
}
+
−
 
+
−
  </style>
+
−
 
+
−
 
+
−
<!-- HTML -->
+
−
  <div class="container_section" >
+
−
  <section>
+
−
 
+
−
<div style="margin-top:50px; width:80%;">
+
−
    <div class="double-item-noapp" style="text-align:right;">
+
−
      <img src="https://static.igem.org/mediawiki/2017/2/2a/T--INSA-UPS_France--Logo.png" alt="" style="height:200px; ">
+
−
    </div>
+
−
    <div style="text-align:center;font-size: 14pt; padding:20px;font-family: Scope One, serif;"  class="double-item-noapp">
+
−
      <div>
+
−
      We are iGEM INSA-UPS_France, a French team composed of students from Toulouse and Lyon. Our project is about crocodiles and cholera... <br /><b>Scroll to know more about it!</b>
+
 
       </div>
 
       </div>
−
       <div>
+
       </div>  
−
        <br />
+
−
        <i>Feel free to follow us on social media:</i><br />
+
−
        <div class="icons">
+
−
      <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-2x"></i></a>
+
−
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-2x"></i></a>
+
−
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-2x"></i></a>
+
−
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-2x"></i></a> 
+
−
    </div>
+
−
      </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 responsible: <br />
 
−
      <i>Vibrio cholerae</i>
 
 
        
 
        
−
     </div>
+
     </section>
−
    <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">
+
     <style>
−
     <div class="appearing-item triple-item fadeInUp">
+
       .icons_contact{ 
−
    <div class="appearing-content ">
+
         display:inline-block;
−
       <div class="circle-year brown-background">
+
         margin:40px 0;
−
         <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>
+
  
 +
      .icons_contact > a{
 +
        color:black;
 +
        margin:10px;
 +
        text-shadow:2px 2px 0px white;
 +
      }
  
−
  <div class="appearing-container">
+
      #fbIcon:hover{
−
  <div class="appearing-item bounceIn">
+
        color:#3b5998;
−
    <!--div class="dark-green-background" style="height:500px; width:70%; margin:0px auto;text-align:center; font-weight: bold;">
+
        text-shadow:2px 2px 0 #000000;
−
      <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>
+
      #twitterIcon:hover{
 +
        color:#55acee;
 +
        text-shadow:2px 2px 0 #000000;
 +
      }
  
−
  </div>
+
      #contactIcon:hover{
−
  </div>
+
        color:#e5e5e5;
 +
        text-shadow:2px 2px 0 #000000;
 +
      }
 +
      #instaIcon:hover{
 +
        color:#8a3ab9;
 +
        text-shadow:2px 2px 0 #000000;
 +
      }
  
−
  <div class="appearing-container">
+
      .sponsors img{
−
  <div class="appearing-item bounceIn">
+
        max-height:50px;
−
    <div class="appearing-content" style="text-align:center;">
+
        display:inline-block;
−
      <b>&rarr; Implemented solutions and their problems: </b>
+
        margin:10px;
−
     </div>
+
        opacity:0.5;
 +
      }
 +
      .sponsors img:hover{
 +
        opacity:1;
 +
      }
 +
     </style>
  
−
  </div>
 
−
  </div>
 
  
 +
    <section class="home_section content_4" id="content_4">
  
−
  <div class="appearing-container">
+
        <h1>Feel free to contact us or follow us on social media: </h1>
−
     
+
        <div class="icons_contact">
−
      <div class="appearing-item triple-item fadeInUp">
+
          <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-3x"></i></a>
−
      <div class="appearing-content">
+
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-3x"></i></a>
−
        <div class="solutions">
+
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-3x"></i></a>
−
          <img src="https://static.igem.org/mediawiki/2017/4/41/T--INSA-UPS_France--Home_Solutions1.png" alt="" style="width:200px;">
+
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-3x"></i></a> 
 
         </div>
 
         </div>
−
         <div class="descr-year">
+
        <h1>We want to thank all our sponsors: </h1>
−
           Too complicated to measure out
+
         <div class="sponsors">
−
        </div>
+
           <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>
−
      </div>
+
          <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>
−
      </div>
+
          <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>
−
      <div class="appearing-item triple-item fadeInUp2">
+
          <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>
−
      <div class="appearing-content">
+
           <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>
−
        <div class="solutions">
+
          <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>
−
           <img src="https://static.igem.org/mediawiki/2017/5/52/T--INSA-UPS_France--Home_Solutions2.png" alt="" style="width:200px;">
+
          <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>
−
        </div>
+
           <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>
−
        <div class="descr-year">
+
          <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>
−
           Too complicated to set up for big volumes
+
          <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>
−
        </div>
+
      <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>
−
      </div>
+
      <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>
−
      </div>
+
      <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>
−
      <div class="appearing-item triple-item fadeInUp3">
+
       <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>
−
      <div class="appearing-content">
+
       <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>
−
        <div class="solutions">
+
      <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>
−
          <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">
+
       <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="appearing-item bounceRight">
+
         </div>
−
    <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 hero:<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;">
+
  </main>
−
      <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;">
+
<!-- C O N T E N T -->
  
−
        </div>
+
<script type="text/javascript">
−
      </div>
+
−
    </div>
+
  
 +
// ONE PAGE LAYOUT
  
−
  </section>
+
var stickyMenu = document.querySelector('.js-sticky');
−
  </div>
+
var stickyOffset = window.innerHeight - stickyMenu.offsetHeight;
−
 
+
var stickyClassName = 'is-sticky';
−
</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');
+
−
        }
+
−
       
+
−
      }
+
−
     
+
−
    });
+
−
  });
+
−
 
+
  
 +
window.addEventListener('scroll', function() {
 +
  if (window.pageYOffset >= stickyOffset) {
 +
    stickyMenu.classList.add(stickyClassName);
 +
  }
 +
  else {
 +
    stickyMenu.classList.remove(stickyClassName);
 +
  }
 +
});
  
−
  </script>
+
</script>
 
</html>
 
</html>
 +
{{INSA-UPS_France/General_script}}
 +
{{INSA-UPS_France/Header_script}}

Revision as of 16:46, 20 September 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Croc'n Cholera
A synthetic microbial consortium
iGEM UPS-INSA Toulouse 2017
 

First steps of synthetic biology

First edition of the iGEM competition

Boolean algebra in E. coli

Current challenges:

  • Cell-free
  • De novo life
  • Multi organisms

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.

A fight against cholera as an application

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 that 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: