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

Line 1: Line 1:
 
{{INSA-UPS_France/Links_new}}
 
{{INSA-UPS_France/Links_new}}
−
{{INSA-UPS_France/Style_new}}
 
 
{{INSA-UPS_France/Header_new}}
 
{{INSA-UPS_France/Header_new}}
  
Line 6: Line 5:
  
 
<style>  
 
<style>  
 +
/* Clear the default wiki settings */
 +
 +
.subnav{
 +
  margin:0!important;
 +
}
 +
 
 +
  #home_logo, #sideMenu { display:none; }
 +
  #sideMenu, #top_title, .patrollink  {display:none;}
 +
  #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%;
 +
  }
 +
 +
p{
 +
  padding:0;
 +
}
 +
table{
 +
  background:none;
 +
}
 +
ul{
 +
  list-style-image: none;
 +
}
 +
 +
 +
/* GENERAL STYLE */
 +
*{
 +
  margin:0;
 +
  padding:0;
 +
}
 +
  body {
 +
  margin: 0;
 +
  font: 400 16px/1.5 "Quicksand", sans-serif;
 +
}
 +
a {
 +
    -moz-transition: 0.2s ease-in-out;
 +
    -webkit-transition: 0.2s ease-in-out;
 +
  transition: 0.2s ease-in-out;
 +
}
 +
 +
main{
 +
  position:relative;
 +
  overflow:hidden;
 +
  height:100%;
 +
}
 +
 +
.main_content{
 +
  position:fixed;   
 +
  top:90px;
 +
  right:0px;
 +
  left:0px;
 +
  bottom:0px;
 +
 +
  background-image: linear-gradient(45deg, #4296c1 0%, #e4efe9 100%);
 +
}
 +
.middle_container{ 
 +
  padding-bottom: 80px;
 +
}
 +
 +
.section_container{
 +
  width:60%;
 +
  min-width: 600px;
 +
  max-width: 1100px;
 +
  min-height:100%;
 +
  position:relative;
 +
  margin:0px auto;
 +
}
 +
 +
section{
 +
  background-color: rgba(255,255,255,0.2);
 +
  padding:40px 80px;
 +
  text-align: center;
 +
  position:relative;
 +
}
 +
  
 
/* HOME SECTIONS */  
 
/* HOME SECTIONS */  
 
.home_section {
 
.home_section {
 
   vertical-align: middle;
 
   vertical-align: middle;
−
  box-sizing: border-box;
+
   text-align: center;
−
   text-align: justify;
+
    
−
  min-height: 100vh;
+
−
    display: -webkit-box;
+
−
    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;
+
 
}
 
}
 
.home_section h1{
 
.home_section h1{
−
   margin-left: 5%;
+
   text-align: center;
−
    font-family: 'Quicksand', sans-serif;
+
  font-family: 'Quicksand', sans-serif;
−
    font-size: 30pt;
+
  font-size: 36pt;
−
  }
+
}
 
.home {
 
.home {
 
   background: white url("https://static.igem.org/mediawiki/2017/archive/5/5c/20171002220813%21T--INSA-UPS_France--home.png") no-repeat 50% 50%;
 
   background: white url("https://static.igem.org/mediawiki/2017/archive/5/5c/20171002220813%21T--INSA-UPS_France--home.png") no-repeat 50% 50%;
 
   background-size: cover;
 
   background-size: cover;
 +
  min-height: 90vh;
 
}
 
}
 
.content_0 {
 
.content_0 {
 
   background: #f3ead7 no-repeat 50% 50%;
 
   background: #f3ead7 no-repeat 50% 50%;
 
   background-size: cover;
 
   background-size: cover;
 +
  padding-top:90px;
 
}
 
}
 
.content_1 {
 
.content_1 {
Line 53: Line 119:
 
   background-size: cover;
 
   background-size: cover;
 
}
 
}
 +
 
</style>
 
</style>
  
Line 73: Line 140:
 
       </div>
 
       </div>
 
     </section>
 
     </section>
−
 
−
    <style>
 
−
 
−
      #progress-bar_container{
 
−
        width:90%;
 
−
        height:200px;
 
−
        margin:0px auto;
 
−
        position:relative;
 
−
        margin-top:-200px;
 
−
      }
 
−
      #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: #78b6cf;
 
−
        position:relative;
 
−
        top:5px;
 
−
        left:5px;
 
−
        border-radius: 40px;
 
−
        z-index:10;
 
−
      }
 
−
      .progress-point{
 
−
        width:50px;
 
−
        height:50px;
 
−
        border-radius:50px;
 
−
        background: #1f4861;
 
−
        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:#1f4861;
 
−
        position:absolute;
 
−
        top:-40px;
 
−
        font-weight:bold;
 
−
        left:0px;
 
−
 
−
      }
 
−
      .progress-point.point-2{
 
−
        left:30%;
 
−
      }
 
−
      .progress-point.point-2:after{
 
−
        content:'2003';
 
−
        color:#1f4861;
 
−
        position:absolute;
 
−
        top:50px;
 
−
        font-weight:bold;
 
−
        left:0px;
 
−
      }
 
−
      .progress-point.point-3{
 
−
        left:60%;
 
−
      }
 
−
      .progress-point.point-3:after{
 
−
        content:'2010';
 
−
        color:#1f4861;
 
−
        position:absolute;
 
−
        top:-40px;
 
−
        font-weight:bold;
 
−
        left:0px;
 
−
      }
 
−
      .progress-point.point-4{
 
−
        left:90%;
 
−
      }
 
−
      .progress-point.point-4:after{
 
−
        content:'now';
 
−
        color:#1f4861;
 
−
        position:absolute;
 
−
        top:50px;
 
−
        font-weight:bold;
 
−
        left:0px;
 
−
      }
 
−
      .bubble{
 
−
        width:40%;
 
−
        height:180px;
 
−
        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.1vw;
 
−
 
−
      }
 
−
      @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:-160px;
 
−
      }
 
−
      #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:-160px;
 
−
      }
 
−
      #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:-160px;
 
−
      }
 
−
      #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:-160px;
 
−
      }
 
−
      #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;
 
−
      }
 
−
 
−
 
−
      #content_0{
 
−
        justify-content: space-around;
 
−
      }
 
−
    </style>
 
−
 
  
 
      
 
      
−
     <section class="home_section content_0" id="content_0">
+
     <section class="home_section content_0" id="content_0" style="position:relative;">
−
 
+
           <h1 style="margin-bottom: 100px;">Multiorganism approach: a new challenge for Synthetic Biology</h1>
−
        <div>
+
           <img style="height:500px;max-height:90%;" src="https://static.igem.org/mediawiki/2017/7/77/T--INSA-UPS_France--home_frise.png" alt="">
−
           <h1>Multiorganism approach: a new challenge for Synthetic Biology</h1>
+
−
        </div>
+
−
        <div id="progress-bar_container">
+
−
           <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>
+
−
 
+
 
     </section>
 
     </section>
  
Line 424: Line 280:
  
 
     <style>
 
     <style>
−
      #content_4 h1{
 
−
        color: #eee;
 
−
      }
 
−
      .icons_contact{ 
 
−
        display:inline-block;
 
−
        margin:40px 0;
 
−
        text-align: center;
 
−
      }
 
  
−
      .icons_contact > a{
+
/* CONTACT ICONS */
−
        color:black;
+
−
        margin:10px;
+
−
        text-shadow:2px 2px 0px white;
+
−
      }
+
  
−
      #fbIcon:hover{
+
.icons_contact{
−
        color:#3b5998;
+
  display:inline-block;
−
        text-shadow:2px 2px 0 #000000;
+
  margin:40px 0;
−
      }
+
}
  
−
      #twitterIcon:hover{
+
.icons_contact > a{
−
        color:#55acee;
+
  color:black;
−
        text-shadow:2px 2px 0 #000000;
+
  margin:10px;
−
      }
+
  text-shadow:2px 2px 0px white;
 +
}
 +
 
 +
#fbIcon:hover{
 +
  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;
 +
}
  
−
      #contactIcon:hover{
+
/* SPONSORS IMG */
−
        color:#e5e5e5;
+
#content_4 h1{
−
        text-shadow:2px 2px 0 #000000;
+
  color:#eee;
−
      }
+
}
−
      #instaIcon:hover{
+
#content_4 img{
−
        color:#8a3ab9;
+
  max-height:100px;
−
        text-shadow:2px 2px 0 #000000;
+
  display:inline-block;
−
      }
+
  margin:10px;
−
      .sponsors{
+
  opacity:0.5;
−
        text-align: center;
+
}
−
      }
+
#content_4 img:hover{
−
      .sponsors img{
+
  opacity:1;
−
        max-height:70px;
+
}
−
        display:inline-block;
+
−
        margin:10px;
+
−
        opacity:0.5;
+
−
      }
+
−
      .sponsors img:hover{
+
−
        opacity:1;
+
−
      }
+
 
     </style>
 
     </style>
  
−
 
+
     <section class="home_section content_4" id="content_4" style="overflow:hidden;">
−
     <section class="home_section content_4" id="content_4">
+
  
 
         <h1>Feel free to contact us or follow us on social media: </h1>
 
         <h1>Feel free to contact us or follow us on social media: </h1>
Line 497: Line 353:
 
       <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.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.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>
 +
 +
 
       <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://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>
 
       <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>

Revision as of 17:00, 30 October 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 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: