Difference between revisions of "Team:INSA-UPS France/test/description"

Line 4: Line 4:
  
 
<html>
 
<html>
−
<style>
 
  
−
main{
+
<style>
−
  position:relative;
+
−
  overflow: auto;
+
−
  height:100%;
+
−
}
+
  
−
.main_content{
+
/* HOME SECTIONS */
−
   position:fixed;  
+
.home_section {
−
   top:90px;
+
   vertical-align: middle;
−
   right:0px;
+
   box-sizing: border-box;
−
   left:0px;
+
   text-align: justify;
−
  bottom:0px;
+
   min-height: 100vh;
−
   overflow:auto;
+
    display: -webkit-box;
−
   background-image: linear-gradient(45deg, #4296c1 0%, #e4efe9 100%);
+
    display: -ms-flexbox;
 +
   display: flex;
 +
    -webkit-box-orient: vertical;
 +
    -webkit-box-direction: normal;
 +
    -ms-flex-direction: column;
 +
   flex-direction: column;
 +
    -webkit-box-pack: center;
 +
    -ms-flex-pack: center;
 +
  justify-content: center;
 
}
 
}
−
.middle_container{
+
.section__title {
−
   padding-bottom: 80px;
+
   font: 200 4em/1.5 "Quicksand", sans-serif;
 +
  text-transform: lowercase;
 +
  margin: 0 0 0.4em;
 +
  text-align: left;
 
}
 
}
−
.section_container{
+
.section__title--main {
−
   width:90%;
+
   text-align: center;
−
   min-height:100%;
+
   font-size: 8em;
−
  margin:0px auto;
+
−
  position:relative;
+
 
}
 
}
−
@media screen and (max-width: 900px){
+
.home {
−
    .section_container{
+
  background: white url("https://static.igem.org/mediawiki/2017/5/5c/T--INSA-UPS_France--home.png") no-repeat 50% 50%;
−
      width:100%;
+
  background-size: cover;
−
    }
+
}
−
   }
+
.content_0 {
−
section{
+
  background: #f3ead7 no-repeat 50% 50%;
−
   background-color: rgba(255,255,255,0.2);
+
   background-size: cover;
−
   padding:3% 6%;
+
}
−
   text-align: justify;
+
.content_1 {
−
   border-radius:20px;
+
   background: #99c18e no-repeat 50% 50%;
−
   position:relative;
+
  background-size: cover;
−
   margin-top:100px;
+
}
 +
.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: #f3ead7 no-repeat 50% 50%;
 +
   background-size: cover;
 
}
 
}
−
 
−
 
 
</style>
 
</style>
  
−
<!-- C O N T E N T -->
 
  
 +
  <main class="site-main">
  
−
 
+
    <section class="home_section home" id="home" style="position:relative;">
 +
      <div class="container">
  
 +
      <!-- FIRST IMAGE TO ANIMATE -->
 +
      <div style="text-align: center;">
 +
  <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>
  
−
  <main class="site-main">
 
−
  <div class="main_content">
 
−
  <div class="middle_container">
 
  
−
  <div class="section_container">
+
       </div>
−
 
+
−
    <section style="margin-top:200px;">
+
−
       <h1 style="text-align: left;margin-top:-110px;font-size:5vw;letter-spacing: 1vw;">Testimonies</h1>
+
−
      <p style="margin-top: 50px;">
+
−
        In order to achieve the most real entrepreneurship approach possible, we first met with some professionals to talk about our idea and to give us advice to better integrate our system into the cholera market. The people we get in touch with have knowledge in the areas of business creation, support for the creation of start-ups and about the daily life of villages affected by cholera. We also took into account the feelings of the western population in relation to our project.
+
−
      </p>
+
 
     </section>
 
     </section>
  
 
     <style>
 
     <style>
−
    /* ASIDE NAV */
 
−
      .left_container{
 
−
        width:15%;
 
−
        position:absolute;
 
−
        top:400px;
 
−
        padding:0;
 
−
        display:inline-block;
 
−
        font-family: 'Quicksand', sans-serif;
 
−
        font-weight: 400;
 
−
        font-size:16pt;
 
−
        text-align: right;
 
−
      }
 
  
−
       .aside-nav__item + .aside-nav__item{
+
       #progress-bar_container{
−
         margin-top:20px;
+
        width:90%;
 +
        height:200px;
 +
         margin:0px auto;
 +
        position:relative;
 
       }
 
       }
−
       .aside-nav__item{
+
       #progress-bar{
 
         width:100%;
 
         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;
 
         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;
 +
 +
      }
 +
      .progress-point.point-2{
 +
        left:30%;
 +
      }
 +
      .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%;
 
       }
 
       }
−
       .aside-nav__item:after{
+
       .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;
 +
 
 +
      }
 +
      @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:'';
 
         content:'';
−
         border:solid #3377a8 3px;
+
         border-left: 20px solid transparent;
 +
        border-right: 20px solid transparent;
 +
        border-bottom: 20px solid white;
 
         position:absolute;
 
         position:absolute;
−
         right:-30px;
+
         bottom:100%;
−
         top:40%;
+
         left:4%;  
−
         width:12px;
+
         width:0;
−
         height:12px;
+
         height:0;
−
        border-radius: 12px;   
+
−
        margin-left:20px;  
+
 
       }
 
       }
−
       .aside-nav__item.selected-item:after{
+
        
−
         background:#3377a8;
+
      #bubble-2{
 +
         left:5%;
 +
        top:-200px;
 
       }
 
       }
−
       .aside-fixed{
+
       #bubble-2:after{
−
         position:fixed;
+
        content:'';
−
         top:100px;
+
        border-left: 20px solid transparent;
−
         width:12.5%;
+
        border-right: 20px solid transparent;
 +
        border-top: 20px solid white;
 +
         position:absolute;
 +
         top:100%;
 +
         left:65%;
 +
        width:0;
 +
        height:0;
 
       }
 
       }
−
       .aside-nav__item a, .aside-nav__item a:focus, .aside-nav__item a:visited, .aside-nav__item a:hover{
+
       #bubble-3{
−
         text-decoration: none;
+
         left:50%;
−
         color:black;
+
         bottom:-200px;
 
       }
 
       }
−
       .aside-nav__item a:hover{
+
       #bubble-3:after{
−
         font-weight: 700;
+
         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;
 +
      }
 +
 
     </style>
 
     </style>
 +
   
 +
    <section class="home_section content_0" id="content_0">
  
−
    <div class="left_container">
+
       
−
    <div class="left_container__inside">
+
        <div id="progress-bar_container">
−
      <div class="aside-nav__item">
+
          <div id="progress-bar">
−
      <a href="#a1" data-number="1">
+
            <div id="progress-bar_inner">
−
        Antabio
+
              &nbsp;
−
      </a>
+
            </div>
−
      </div>
+
            <div class="progress-point point-1"></div>
−
      <div class="aside-nav__item">
+
            <div class="progress-point point-2"></div>
−
      <a href="#a2" data-number="2">
+
            <div class="progress-point point-3"></div>
−
        TWB
+
            <div class="progress-point point-4"></div>
−
      </a>
+
          </div>
−
      </div>
+
          <div class="bubble" id="bubble-1">
−
      <div class="aside-nav__item">
+
            <p>First steps of synthetic biology</p>
−
      <a href="#a3" data-number="3">
+
          </div>
−
        CRITT Bio-Industries
+
          <div class="bubble" id="bubble-2">
−
      </a>
+
            <p>First edition of the iGEM competition</p>
−
      </div>
+
          </div>
−
      <div class="aside-nav__item">
+
          <div class="bubble" id="bubble-3">
−
      <a href="#a4" data-number="4">
+
            <p>Boolean algebra in <i>E. coli</i></p>
−
        Sunwaterlife
+
          </div>
−
      </a>
+
          <div class="bubble" id="bubble-4">
−
      </div>
+
            <p style="margin-bottom: 0 !important;">Current challenges:</p>
−
      <div class="aside-nav__item">
+
            <ul style="margin-top: 0 !important;">
−
      <a href="#a5" data-number="5">
+
              <li>Cell-free</li>
−
        Médecins sans frontières
+
              <li>De novo life</li>
−
      </a>
+
              <li>Multi organisms</li>
−
      </div>
+
              </ul>
−
      <div class="aside-nav__item">
+
          </div>
−
      <a href="#a6" data-number="6">
+
        </div>
−
        UNICEF
+
 
−
      </a>
+
    </section>
−
      </div>
+
−
      <!--<div class="aside-nav__item">
+
−
      <a href="#a7" data-number="7">
+
−
        Survey
+
−
      </a>
+
−
      </div>-->
+
−
    </div>
+
−
    </div>
+
  
 
     <style>
 
     <style>
−
    section img{
+
       #content_1 table{
−
       width:100%;
+
         width:90%;
−
    }
+
         margin:0px auto;
−
    section h1{
+
         margin-top:100px;
−
      font-family: 'Quicksand', sans-serif;
+
−
      font-size:34pt;
+
−
      margin-top:-60px;
+
−
      text-align: right;
+
−
    }
+
−
    section p{
+
−
      font-family: 'Merriweather', serif;
+
−
      font-size:14pt;
+
−
      font-weight: 300;
+
−
      margin-top:20px;
+
−
    }
+
−
    section ul{
+
−
      list-style-position: inside;
+
−
      font-family: 'Merriweather', serif;
+
−
      font-size:14pt;
+
−
      font-weight: 300;
+
−
    }
+
−
    figcaption{
+
−
      font-family: 'Merriweather', serif;
+
−
      font-size:12pt;
+
−
      font-weight: 300;
+
−
      font-style: italic;
+
−
      text-align: center;
+
−
    }
+
−
    .right_container{
+
−
         width:80%;
+
−
         margin-left:20%;
+
−
    }
+
−
    .article_offset{
+
−
      margin-bottom:20px;
+
−
      border: solid 1px transparent;
+
−
    }
+
−
      section h2{
+
−
         font-family: 'Quicksand', sans-serif;
+
−
      font-size:26pt;
+
−
      margin-top: 50px;
+
 
       }
 
       }
−
 
+
      #content_1 table tr td{
−
    .img-right{
+
        text-align: center;
−
      float:right;
+
        padding:5px;
−
      width:40%;
+
       }
−
       margin:30px;
+
      #content_1 table tr td img{
−
    }
+
−
    .img-right img{
+
 
         width:100%;
 
         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>
 
     </style>
−
 
 
−
   
 
−
    <div class="right_container">
 
  
−
    <div class="article_offset" id="a1"></div>
 
−
    <section>
 
−
      <h1>Marc Lemonnier</h1>
 
  
−
       <img src="https://static.igem.org/mediawiki/2017/6/69/T--INSA-UPS_France--Entrepreneurship_Antabio-logo.png" alt="">
+
    <section class="home_section content_1" id="content_1">
−
      <div class="img-right">
+
       <h1>Biodiversity entails a lot of possibilities...</h1>
−
        <figure>
+
      <table>
−
          <img src="https://static.igem.org/mediawiki/2017/1/1c/T--INSA-UPS_France--Entrepreneurship_Antabio-twitt.JPG" alt="">
+
        <tr>
−
          <figcaption>Marc Lemonnier answering to our Tweet to thank him</figcaption>
+
          <td><img src="https://static.igem.org/mediawiki/2017/a/af/T--INSA-UPS_France--home_quorum.png" alt=""></td>
−
        </figure>
+
          <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>
−
      </div>
+
           <td><img src="https://static.igem.org/mediawiki/2017/0/01/T--INSA-UPS_France--home_thermo.png" alt=""></td>
−
      <div>
+
        </tr>
−
        <h2>Who is he?</h2>
+
        <tr>
−
        <p>
+
           <td>Quorum sensing</td>
−
          Marc Lemonnier is the founding CEO of ANTABIO. This start-up, based at Lab&egrave;ge (France) is a private biopharmaceutical company developing novel therapies to treat drug-resistant infections by the most critical Gram-negative pathogens.
+
           <td>Light sensitive</td>
−
        </p>
+
           <td>Proteins secretion</td>
−
        <h2>His advice?</h2>
+
           <td>High thermostability</td>
−
        <p>
+
         </tr>
−
           To set up a business with his idea, you must be able to answer the problem of the &ldquo;man in the street&rdquo;. It is not easy to implement an advanced technology in the developing world. The device will have to be as user friendly as possible.
+
       </table>
−
        </p>
+
−
        <p>
+
−
          The steps to follow to ensure a permanent business are:
+
−
        </p>
+
−
        <ul>
+
−
          <li>
+
−
            to have a <b>proof of concept</b> of the system,
+
−
          </li>
+
−
          <li>
+
−
            to be able to <b>test it on <i>V. cholerae</i></b> by having access to a P2 laboratory,
+
−
          </li>
+
−
          <li>
+
−
            to speak to the <b>scientist community</b> (but not only) around us to <b>collect opinions, advice and recruit people</b> to support us in the project,
+
−
          </li>
+
−
          <li>
+
−
            to meet with <b>preindustrial demonstrators</b> like TWB (Toulouse White Biotechnology) to help us think about the development of our large-scale product for commercialization,
+
−
          </li>
+
−
          <li>
+
−
            do not hesitate to go to <b>support structures</b> for start-up projects such as the &quot;Incubateur Mipy&quot; in Toulouse (France),
+
−
          </li>
+
−
          <li>
+
−
            to learn about the <b>regulatory aspect</b> of the sale of GMOs,
+
−
           </li>
+
−
          <li>
+
−
            to find where <b>people reluctance</b> may come, why and how to stop them,
+
−
           </li>
+
−
          <li>
+
−
            making a <b>business plan</b> and a <b>SWOT</b> (Strengths, Weaknesses, Opportunities and Threats) analysis,
+
−
           </li>
+
−
          <li>
+
−
            learning about <b>intellectual property</b>: an investor will want the system to be protected by a patent for example,
+
−
           </li>
+
−
          <li>
+
−
            and last but not least, build a <b>complementary team</b> and <b>keep in mind that one day, the product will arrive in the customers&rsquo; hands.</b>
+
−
          </li>
+
−
         </ul>
+
−
       </div>
+
−
     
+
 
     </section>
 
     </section>
  
 
     <style>
 
     <style>
−
       .logo-center{
+
       #content_2, #content_3{
−
        width: 100%;
+
 
         text-align: center;
 
         text-align: center;
 +
        display:flex;
 +
        flex-direction: row;
 
       }
 
       }
−
       .logo-center img{
+
       .block{
−
         width:40%;
+
         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>
 
     </style>
  
−
   
+
     <section class="home_section content_2" id="content_2">
−
     <div class="article_offset" id="a2"></div>
+
       <div class="block">
−
    <section>
+
       <div class="block_content">
−
       <h1>Pierre Monsan and V&eacute;ronique Paquet</h1>
+
         <img src="https://static.igem.org/mediawiki/2017/8/88/T--INSA-UPS_France--home_blupuriloop.png" alt="" class="img_home">
−
 
+
−
       <div class="logo-center">
+
−
         <img src="https://static.igem.org/mediawiki/2017/5/56/T--INSA-UPS_France--Logo_twb.png" alt="" style="max-width: 150px;">
+
 
       </div>
 
       </div>
−
      <div class="img-right">
 
−
        <figure>
 
−
          <img src="https://static.igem.org/mediawiki/2017/d/d8/T--INSA-UPS_France--Sponsors_photo_TWB.jpg" alt="" >
 
−
          <figcaption>Our team with Pierre Monsan (Founding Director of TWB) and V&eacute;ronique Paquet (External Relations Director)</figcaption>
 
−
        </figure>
 
−
       
 
 
       </div>
 
       </div>
−
       <div>
+
       <div class="block text_block">
−
         <h2>Who are they?</h2>
+
      <div class="block_content">
 +
         <h1>What if they could communicate?</h1>
 
         <p>
 
         <p>
−
           Pierre Monsan is the founding CEO of TWB (Toulouse White Biotechnology) and V&eacute;ronique Paquet is the External Relations Director. This is a preindustrial demonstrator whose goal is to speed up the development of industrial biotechnology by facilitating exchanges between public research and industry. It contributes to the expansion of a bioeconomy based on the use of renewable carbon in the fields of chemistry, materials and energy.
+
           The living world offers a lot of possibilities, but their use is still limited in synthetic biology.  
 
         </p>
 
         </p>
−
        <h2>Their advice?</h2>
 
 
         <p>
 
         <p>
−
        We are proud to have <b>submitted our project</b> to TWB which is an entity helping many companies and research projects in their development. TWB is also one of our biggest <b>sponsors</b>, helping us to get the scientific equipment we needed during the iGEM competition to allow our project to start in the best possible conditions. They proposed us to get in touch with <b>business developers</b>, an <b>ethicist</b> and <b>industrialists</b>. Then, as part of the development of a start-up for our project, TWB could, for example, provide us <b>premises</b> and <b>equipment</b>.
+
          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>
 
         </p>
−
       </div>
+
       </div>
 +
      </div> 
 
        
 
        
 
     </section>
 
     </section>
  
  
−
    <div class="article_offset" id="a3"></div>
 
−
    <section>
 
−
      <h1>Pierre-Alain Hoffmann</h1>
 
  
−
      <div class="logo-center">
+
    <section class="home_section content_3" id="content_3">
−
        <img src="https://static.igem.org/mediawiki/2017/7/70/T--INSA-UPS_France--Entrepreneurship_CRITT-logo.png" alt="" style="max-width: 500px;">
+
−
      </div>
+
−
      <div class="img-right">
+
−
        <figure>
+
−
          <img src="https://static.igem.org/mediawiki/2017/b/bd/T--INSA-UPS_France--Entrepreneurship_CRITT-photo.png" alt="" >
+
−
          <figcaption>Pierre-Alain Hoffmann (Deputy Director of CRITT Bio-Industrie) with two members of our team: Le&iuml;la and L&eacute;o</figcaption>
+
−
        </figure>
+
−
       
+
−
      </div>
+
−
      <div>
+
−
        <h2>Who is he?</h2>
+
−
        <p>
+
−
          Pierre-Alain Hoffmann is Deputy Director of CRITT Bio-Industries based in Toulouse. It is a center that connects research to industry in the field of biotechnological processes. They help to develop process projects or new products in the field of R&amp;D and assist them from the concept to an industrial scale.
+
−
        </p>
+
−
        <h2>His advice?</h2>
+
−
        <p>
+
−
        His knowledge and skills in companies' creation and development, and in the bioprocesses field, were helpful to consider our scientific concept as a potential commercial offer. Very enthusiastic about our idea detection and treatment of water system, he assured us that the market was reachable. He guided us in the <b>establishment of a business plan</b> worthy of a real start-up and helped us about the points that we had to consolidate in our approach. The <b>regulatory aspect</b> in relation to the commercialization of GMM is an essential point in our approach.
+
−
        </p>
+
−
      </div>
+
−
     
+
−
    </section>
+
  
−
    <div class="article_offset" id="a4"></div>
+
       <div class="block text_block">
−
    <section>
+
       <div class="block_content">
−
      <h1>Christophe Camp&eacute;ri-Ginestet</h1>
+
         <h1>A fight against cholera as an application</h1>
−
 
+
−
       <div class="logo-center">
+
−
        <img src="https://static.igem.org/mediawiki/2017/0/09/T--INSA-UPS_France--Logo_sunwaterlife.png" alt="" style="max-width: 500px;">
+
−
      </div>
+
−
       <div class="img-right">
+
−
         <figure>
+
−
          <img src="https://static.igem.org/mediawiki/2017/3/30/T--INSA-UPS_France--Sponsors_photo_SWL.jpg" alt="" >
+
−
          <figcaption>Our team with Christophe Camp&eacute;ri-Ginestet in the middle (Founding Director of Sunwaterlife)</figcaption>
+
−
        </figure>
+
−
       
+
−
      </div>
+
−
      <div>
+
−
        <h2>Who is he?</h2>
+
 
         <p>
 
         <p>
−
           Christophe Camp&eacute;ri-Ginestet is the founding CEO of Sunwaterlife. Sunwaterlife is a French start-up located in Toulouse, designer of an innovative water purification system, including water contaminated with cholera. With the size of a suitcase and supplied by solar energy, it is an eco-friendly self-sustained solution, able to provide drinking water for schools, clinics, villages or in case of sanitary emergency in developing countries.
+
           <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>
−
        <h2>His advice?</h2>
 
 
         <p>
 
         <p>
−
         If we want to make a water detection and treatment <b>device</b> for the populations affected by cholera, it must be <b>as simple as possible</b> (transportable and with low maintenance) so that it is deployable on the ground. It has to <b>resist to high temperatures</b> because it is often high in the affected countries. If our system succeeds in properly filling these points, then it could be competitive with bleach, a widely used solution but which requires frequent maintenance not being stable at high temperatures.
+
         Our project is about creating a multi organisms system that is able to sense and wipe cholera out in contaminated water.
−
      </p>
+
−
      <p>
+
−
          In order to have opinions from people in the field, he put us in touch with <b>UNICEF</b>.
+
 
         </p>
 
         </p>
−
        <p>
+
      </div>
−
          To help us to <b>contain our microorganisms</b>, a partnership with the company has been established so that they provide us with their membranes that filter bacteria and viruses. As a result, this <b>collaboration</b> with Sunwaterlife, which has a great expertise in the treatment of cholera-contaminated water, gives our system a certain weight of reliability.
+
       </div>
−
        </p>
+
−
        <p>
+
−
          Besides, he explained us that, compared to the solutions that already exist, the very advantageous point in our system is the ability to <b>detect <i>V. cholerae</i></b>. Actually, the ways of detecting <i>V. cholerae</i> in water are long (several days) and the samples can not be analyzed in the field: they must be sent to an analysis laboratory.
+
−
        </p>
+
−
        <p>
+
−
          Sunwaterlife has <b>invested</b> in our project to get our research work within iGEM in relation to the cholera detection module. By adapting it to its water filtration system, it could have a fast, reliable, sensitive, colored response and in live response about the water quality inlet and outlet.
+
−
        </p>
+
−
        <figure style="width:40%;float:right;margin:30px;">
+
−
          <img src="https://static.igem.org/mediawiki/2017/c/c5/T--INSA-UPS_France--Entrepreneurship_JEI-logo.jpg" alt="" style="max-width: 300px;">
+
−
          <figcaption>Logo of the &ldquo;Jeune Entreprise Innovante&rdquo; status that we have enabled Sunwaterlife to get through our iGEM project</figcaption>
+
−
        </figure>
+
−
        <p>
+
−
          In addition, we participated in the preparation of the application form for the <b>status of &quot;Jeune Entreprise Innovante&quot;</b> (which can be translated as &quot;Young Innovative Company&quot;) for Sunwaterlife. This status is very popular among SMEs because, in exchange for an R&amp;D investment of 15% of the tax-deductible expenses for the current year, the company benefits from tax concessions and exemptions from social contributions.
+
−
        </p>
+
−
        <p>
+
−
          Therefore, this investment and collaboration between Sunwaterlife and our team enabled him to apply for a very interesting status for the start-up.
+
−
        </p>
+
−
       </div>    
+
−
    </section>
+
  
−
 
+
      <div class="block">
−
    <div class="article_offset" id="a5"></div>
+
       <div class="block_content">
−
    <section>
+
         <img src="https://static.igem.org/mediawiki/2017/b/bc/T--INSA-UPS_France--home_blupuriloop_crocncholera.png" alt="" class="img_home">
−
      <h1>Claire Salvador</h1>
+
−
       <div class="logo-center">
+
−
         <img src="https://static.igem.org/mediawiki/2017/e/e8/T--INSA-UPS_France--Entrepreneurship_MSF-logo.png" alt="">
+
 
       </div>
 
       </div>
−
       <h2>Who is she?</h2>
+
       </div>  
−
      <p>
+
−
        Claire Salvador is the responsible of the NGO MSF Midi-Pyr&eacute;n&eacute;es based in Toulouse. Created in 1971, M&eacute;decins Sans Fronti&egrave;res (or Doctors Without Borders) is a humanitarian association that provides medical assistance to populations in the event of armed conflicts, epidemics, pandemics, natural disasters, etc.
+
−
      </p>
+
−
      <h2>Her advice?</h2>
+
−
      <p>
+
−
        With her experience on the ground, Claire Salvador explained that the main problems of cholera are not in villages where the disease is endemic because the population knows perfectly the symptoms and water treatment facilities are increasingly installed. Moreover, countries affected by cholera hide tourists from epidemics to avoid scaring them. Our system should therefore not be aimed at the populations accustomed to this disease, nor to tourists. However, it would be interesting to <b>adapt it to remote villages</b>, which have difficulty access to the cholera camps and do not necessarily take the time to boil water before using it. The <b>portable</b> and <b>simple</b> aspects of our device are advantages.
+
−
      </p>
+
−
    </section>
+
  
−
    <div class="article_offset" id="a6"></div>
+
        
−
    <section>
+
−
       <h1>Alama Keita</h1>
+
−
      <div class="logo-center">
+
−
        <img src="https://static.igem.org/mediawiki/2017/8/80/T--INSA-UPS_France--Entrepreneurship_UNICEF-logo.png" alt="">
+
−
      </div>
+
−
      <h2>Who is he?</h2>
+
−
      <p>
+
−
        Alama Keita works with UNICEF and is a cholera specialist. It moves between Niger, Nigeria, Cameroon, and Democratic Republic of Congo to manage the cholera outbreaks. Created in 1946, the UNICEF or United Nations International Children's Emergency Fund is an agency of the United Nations that aims to improve the condition of children.
+
−
      </p>
+
−
      <h2>His advice?</h2>
+
−
      <p>
+
−
        Creating a solution for remote villages is a great idea. The challenge is still to get a system with <b>GMMs accepted by NGOs and villagers</b>. NGOs must prove to their donors that they have total control over the products they use (both on the use and on the GMMs waste treatment), show their effectiveness, show that their costs remain reasonable, etc. Moreover, the <b>treatment capacity</b> of our device must be higher than 1 sachet per 1 liter. Indeed, for a village of 15 families with 7 people each, knowing that each person uses about 15 L of water per day, villagers need 11,025 L of water in a week. The use of 11,025 sachets per week is not suitable, especially from a  waste management point of view.
+
−
      </p>
+
−
      <p>
+
−
        The key to success would be to create a system <b>independent of NGOs</b>: they should not have to travel to these villages every day to bring our bags or to recover MMGs waste. For example, even if it requires maintenance, the advantage of bleach is that it leaves no waste. <b>Villagers' information and product accessibility</b> will be essential.
+
−
      </p>
+
 
     </section>
 
     </section>
  
−
     <section>
+
     <style>
−
       <h1>Conclusion about the testimonies</h1>
+
       .icons_contact{ 
−
      <p>
+
         display:inline-block;
−
        First of all, we would like to <b>thank</b> all those people we met. These exchanges helped us to identify the approach to be followed in order to create a business, the possible partners, and the cholera market in order to develop an application that is as appropriate as possible.
+
         margin:40px 0;
−
      </p>
+
       }
−
      <p>
+
−
         In order to start a business, you first need to have <b>proof of concept</b>, talk to scientific and non-scientific (marketing, ethics, communication, law, etc.) people about it in order to get other feedback and ideas, analyze the market through a <b>business plan</b> and not hesitate to see actors who are used to <b>assist projects</b> development such as TWB or the CRITT Bio-Industrie. We must not hide the negative points of our product and <b>provide solutions</b>.
+
−
      </p>
+
−
      <p>
+
−
         Following discussions with cholera experts, we were advised to target those living in <b>isolated village</b>s. The device we will create must be <b>simple, portable</b>. and <b>as independent as possible to NGOs</b>. Ideally, villagers should manage the system from beginning to end, without assistance.
+
−
       </p>
+
−
      <p>
+
−
        Thanks to all these feedbacks, we have been able to draw up a <b>scope statement</b> covering all the specific features our system must meet.
+
−
      </p>
+
−
    </section>
+
  
 +
      .icons_contact > a{
 +
        color:black;
 +
        margin:10px;
 +
        text-shadow:2px 2px 0px white;
 +
      }
  
−
    </div>
+
      #fbIcon:hover{
−
    <!-- fin section -->   
+
        color:#3b5998;
 +
        text-shadow:2px 2px 0 #000000;
 +
      }
  
−
  </div>
+
      #twitterIcon:hover{
−
  </div>
+
        color:#55acee;
−
  <style>
+
        text-shadow:2px 2px 0 #000000;
 +
      }
  
−
footer{
+
      #contactIcon:hover{
−
  position:relative;
+
        color:#e5e5e5;
−
  text-align:center;
+
        text-shadow:2px 2px 0 #000000;
−
  margin-top:20px;
+
      }
−
  background: #323537;
+
      #instaIcon:hover{
−
  width:100%;
+
        color:#8a3ab9;
−
}
+
        text-shadow:2px 2px 0 #000000;
 +
      }
  
−
/* CONTACT ICONS */
+
      .sponsors img{
 +
        max-height:50px;
 +
        display:inline-block;
 +
        margin:10px;
 +
        opacity:0.5;
 +
      }
 +
      .sponsors img:hover{
 +
        opacity:1;
 +
      }
 +
    </style>
  
−
.icons{ 
 
−
  display:inline-block;
 
−
  margin:40px 0;
 
  
 +
    <section class="home_section content_4" id="content_4">
  
−
}
+
        <h1>Feel free to contact us or follow us on social media: </h1>
−
 
+
        <div class="icons_contact">
−
.icons > a{
+
          <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-3x"></i></a>
−
  color:black;
+
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-3x"></i></a>
−
  margin:10px;
+
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-3x"></i></a>
−
  text-shadow:2px 2px 0px white;
+
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-3x"></i></a>    
−
}
+
        </div>
−
 
+
        <h1>We want to thank all our sponsors: </h1>
−
#fbIcon:hover{
+
        <div class="sponsors">
−
  color:#3b5998;
+
−
  text-shadow:2px 2px 0 #000000;
+
−
}
+
−
 
+
−
#twitterIcon:hover{
+
−
  color:#55acee;
+
−
  text-shadow:2px 2px 0 #000000;
+
−
}
+
−
 
+
−
#contactIcon:hover{
+
−
  color:#e5e5e5;
+
−
  text-shadow:2px 2px 0 #000000;
+
−
}
+
−
#instaIcon:hover{
+
−
  color:#8a3ab9;
+
−
  text-shadow:2px 2px 0 #000000;
+
−
}
+
−
 
+
−
/* SPONSORS IMG */
+
−
 
+
−
.footer_sponsors img{
+
−
  max-height:50px;
+
−
  display:inline-block;
+
−
  margin:10px;
+
−
  opacity:0.5;
+
−
}
+
−
.footer_sponsors img:hover{
+
−
   opacity:1;
+
−
}
+
−
 
+
−
</style>
+
−
  <footer>
+
−
   
+
−
    <div class="footer_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.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://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>
Line 523: Line 496:
  
  
−
       <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>  
+
       <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>
  
−
    </div>
 
−
    <div class="icons">
 
−
      <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-3x"></i></a>
 
−
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-3x"></i></a>
 
−
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-3x"></i></a>
 
−
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-3x"></i></a> 
 
−
    </div>
 
  
−
 
+
     
−
  </footer>
+
    </section>
−
  </div>
+
−
  </main>
+
  
  
  
 +
  </main>
  
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
−
<script type="text/javascript">
 
−
  $('.main_content').scroll(function(){
 
−
    console.log($('.main_content').scrollTop());
 
−
    console.log("position 1 :");
 
−
    console.log($("#a1").position().top);
 
−
    console.log("position 2 :");
 
−
    console.log($("#a2").position().top);
 
−
    var pos = $('.main_content').scrollTop();
 
−
    // BOLD ASIDE NAV
 
−
    if(pos>$("#a1").position().top-10){
 
−
      $('*[data-number="1"]').css("font-weight", "bold");
 
−
      $('*[data-number="1"]').parent().addClass("selected-item");
 
−
      $('*[data-number="2"]').css("font-weight", "normal");
 
−
      $('*[data-number="2"]').parent().removeClass("selected-item");
 
−
      $('*[data-number="3"]').css("font-weight", "normal");
 
−
      $('*[data-number="3"]').parent().removeClass("selected-item");
 
−
      $('*[data-number="4"]').css("font-weight", "normal");
 
−
      $('*[data-number="4"]').parent().removeClass("selected-item");
 
−
      $('*[data-number="5"]').css("font-weight", "normal");
 
−
      $('*[data-number="5"]').parent().removeClass("selected-item");
 
−
      $('*[data-number="6"]').css("font-weight", "normal");
 
−
      $('*[data-number="6"]').parent().removeClass("selected-item");
 
−
      if(pos>$("#a2").position().top-10){
 
−
        $('*[data-number="1"]').css("font-weight", "normal");
 
−
        $('*[data-number="1"]').parent().removeClass("selected-item");
 
−
        $('*[data-number="2"]').css("font-weight", "bold");
 
−
        $('*[data-number="2"]').parent().addClass("selected-item");
 
−
        $('*[data-number="3"]').css("font-weight", "normal");
 
−
        $('*[data-number="3"]').parent().removeClass("selected-item");
 
−
        $('*[data-number="4"]').css("font-weight", "normal");
 
−
        $('*[data-number="4"]').parent().removeClass("selected-item");
 
−
        $('*[data-number="5"]').css("font-weight", "normal");
 
−
        $('*[data-number="5"]').parent().removeClass("selected-item");
 
−
        $('*[data-number="6"]').css("font-weight", "normal");
 
−
        $('*[data-number="6"]').parent().removeClass("selected-item");
 
−
        if(pos>$("#a3").position().top-10){
 
−
          $('*[data-number="1"]').css("font-weight", "normal");
 
−
          $('*[data-number="1"]').parent().removeClass("selected-item");
 
−
          $('*[data-number="2"]').css("font-weight", "normal");
 
−
          $('*[data-number="2"]').parent().removeClass("selected-item");
 
−
          $('*[data-number="3"]').css("font-weight", "bold");
 
−
          $('*[data-number="3"]').parent().addClass("selected-item");
 
−
          $('*[data-number="4"]').css("font-weight", "normal");
 
−
          $('*[data-number="4"]').parent().removeClass("selected-item");
 
−
          $('*[data-number="5"]').css("font-weight", "normal");
 
−
          $('*[data-number="5"]').parent().removeClass("selected-item");
 
−
          $('*[data-number="6"]').css("font-weight", "normal");
 
−
          $('*[data-number="6"]').parent().removeClass("selected-item");
 
−
          if(pos>$("#a4").position().top-10){
 
−
            $('*[data-number="1"]').css("font-weight", "normal");
 
−
            $('*[data-number="1"]').parent().removeClass("selected-item");
 
−
            $('*[data-number="2"]').css("font-weight", "normal");
 
−
            $('*[data-number="2"]').parent().removeClass("selected-item");
 
−
            $('*[data-number="3"]').css("font-weight", "normal");
 
−
            $('*[data-number="3"]').parent().removeClass("selected-item");
 
−
            $('*[data-number="4"]').css("font-weight", "bold");
 
−
            $('*[data-number="4"]').parent().addClass("selected-item");
 
−
            $('*[data-number="5"]').css("font-weight", "normal");
 
−
            $('*[data-number="5"]').parent().removeClass("selected-item");
 
−
            $('*[data-number="6"]').css("font-weight", "normal");
 
−
            $('*[data-number="6"]').parent().removeClass("selected-item");
 
−
            if(pos>$("#a5").position().top-10){
 
−
              $('*[data-number="1"]').css("font-weight", "normal");
 
−
              $('*[data-number="1"]').parent().removeClass("selected-item");
 
−
              $('*[data-number="2"]').css("font-weight", "normal");
 
−
              $('*[data-number="2"]').parent().removeClass("selected-item");
 
−
              $('*[data-number="3"]').css("font-weight", "normal");
 
−
              $('*[data-number="3"]').parent().removeClass("selected-item");
 
−
              $('*[data-number="4"]').css("font-weight", "normal");
 
−
              $('*[data-number="4"]').parent().removeClass("selected-item");
 
−
              $('*[data-number="5"]').css("font-weight", "bold");
 
−
              $('*[data-number="5"]').parent().addClass("selected-item");
 
−
              $('*[data-number="6"]').css("font-weight", "normal");
 
−
              $('*[data-number="6"]').parent().removeClass("selected-item");
 
−
              if(pos>$("#a6").position().top-10){
 
−
                $('*[data-number="1"]').css("font-weight", "normal");
 
−
                $('*[data-number="1"]').parent().removeClass("selected-item");
 
−
                $('*[data-number="2"]').css("font-weight", "normal");
 
−
                $('*[data-number="2"]').parent().removeClass("selected-item");
 
−
                $('*[data-number="3"]').css("font-weight", "normal");
 
−
                $('*[data-number="3"]').parent().removeClass("selected-item");
 
−
                $('*[data-number="4"]').css("font-weight", "normal");
 
−
                $('*[data-number="4"]').parent().removeClass("selected-item");
 
−
                $('*[data-number="5"]').css("font-weight", "normal");
 
−
                $('*[data-number="5"]').parent().removeClass("selected-item");
 
−
                $('*[data-number="6"]').css("font-weight", "bold");
 
−
                $('*[data-number="6"]').parent().addClass("selected-item");
 
−
              }
 
−
            }
 
−
          }
 
−
        }
 
−
      }
 
−
    }
 
−
    // FIXED ASIDE NAV
 
−
    if(pos>371){
 
−
      $('.left_container').addClass("aside-fixed");
 
−
    }
 
−
    else{
 
−
      $('.left_container').removeClass("aside-fixed");
 
−
    }
 
−
  });
 
−
 
−
</script>
 
−
 
−
<script type="text/javascript">
 
−
  $('.js-sticky').addClass('is-sticky');
 
−
</script>
 
  
 
</html>
 
</html>
 
{{INSA-UPS_France/General_script}}
 
{{INSA-UPS_France/General_script}}
 
{{INSA-UPS_France/Header_script}}
 
{{INSA-UPS_France/Header_script}}

Revision as of 21:52, 2 October 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: