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

 
(10 intermediate revisions by 3 users not shown)
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>  
−
/* HEADER HOME */  
+
/* Clear the default wiki settings */
−
  .js-sticky {
+
 
−
   display:none;
+
.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;
+
−
}
+
−
.section__title {
+
−
  font: 200 4em/1.5 "Quicksand", sans-serif;
+
−
  text-transform: lowercase;
+
−
  margin: 0 0 0.4em;
+
−
  text-align: left;
+
 
}
 
}
−
.section__title--main {
+
.home_section h1{
 
   text-align: center;
 
   text-align: center;
−
   font-size: 8em;
+
  font-family: 'Quicksand', sans-serif;
 +
   font-size: 36pt;
 
}
 
}
 
.home {
 
.home {
−
   background: white url("https://static.igem.org/mediawiki/2017/5/5c/T--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 58: Line 116:
 
}
 
}
 
.content_4{
 
.content_4{
−
   background: #f3ead7 no-repeat 50% 50%;
+
   background: #323537 no-repeat 50% 50%;
 
   background-size: cover;
 
   background-size: cover;
 
}
 
}
 +
 
</style>
 
</style>
  
Line 71: Line 130:
 
       <!-- FIRST IMAGE TO ANIMATE -->
 
       <!-- FIRST IMAGE TO ANIMATE -->
 
       <div style="text-align: center;">
 
       <div style="text-align: center;">
−
  <div style="width:100%;position:absolute; top:0px;font-size:60pt;font-weight:700;">
+
        <div style="width:100%;position:absolute; top:50pt;font-size:60pt;font-weight:700;">
−
      Croc'n Cholera
+
        Croc'n Cholera
−
    </div>
+
        </div>
−
    <div style="width:100%;position:absolute;font-size:40pt; color:#295a7f;top:70pt;">
+
        <div style="width:100%;position:absolute;font-size:40pt; color:#295a7f;top:120pt;">
−
      A synthetic microbial consortium
+
        A synthetic microbial consortium
−
  </div>
+
        </div>
−
  </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>
+
−
 
+
  
 
       </div>
 
       </div>
 
     </section>
 
     </section>
  
−
    <style>
 
−
 
−
      #progress-bar_container{
 
−
        width:90%;
 
−
        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;
 
−
 
−
      }
 
−
      .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%;
 
−
      }
 
−
      .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:'';
 
−
        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;
 
−
      }
 
−
 
−
    </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>
−
       
+
          <img style="height:500px;max-height:90%;" src="https://static.igem.org/mediawiki/2017/7/77/T--INSA-UPS_France--home_frise.png" alt="">
−
        <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 408: Line 260:
 
       <div class="block text_block">
 
       <div class="block text_block">
 
       <div class="block_content">
 
       <div class="block_content">
−
         <h1>A fight against cholera as an application</h1>
+
         <h1>Our proof of concept : a fight against cholera</h1>
 
         <p>
 
         <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.
 
           <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>
 
         <p>
 
         <p>
−
         Our project is about creating a multi organisms system that is able to sense and wipe cholera out in contaminated water.
+
         Our project is about creating a multi organisms system which is able to sense and wipe cholera out in contaminated water.
 
         </p>
 
         </p>
 
       </div>   
 
       </div>   
Line 420: Line 272:
 
       <div class="block">
 
       <div class="block">
 
       <div class="block_content">
 
       <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">
+
         <img src="https://static.igem.org/mediawiki/2017/archive/b/bc/20171003092137%21T--INSA-UPS_France--home_blupuriloop_crocncholera.png" alt="" class="img_home">
 
       </div>
 
       </div>
 
       </div>  
 
       </div>  
Line 428: Line 280:
  
 
     <style>
 
     <style>
−
      .icons_contact{ 
 
−
        display:inline-block;
 
−
        margin:40px 0;
 
−
      }
 
  
−
      .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;
 +
}
  
−
      #contactIcon:hover{
+
#fbIcon:hover{
−
        color:#e5e5e5;
+
  color:#3b5998;
−
        text-shadow:2px 2px 0 #000000;
+
  text-shadow:2px 2px 0 #000000;
−
      }
+
}
−
      #instaIcon:hover{
+
−
        color:#8a3ab9;
+
−
        text-shadow:2px 2px 0 #000000;
+
−
      }
+
  
−
      .sponsors img{
+
#twitterIcon:hover{
−
        max-height:50px;
+
  color:#55acee;
−
        display:inline-block;
+
  text-shadow:2px 2px 0 #000000;
−
        margin:10px;
+
}
−
        opacity:0.5;
+
−
      }
+
−
      .sponsors img:hover{
+
−
        opacity:1;
+
−
      }
+
−
    </style>
+
  
 +
#contactIcon:hover{
 +
  color:#e5e5e5;
 +
  text-shadow:2px 2px 0 #000000;
 +
}
 +
#instaIcon:hover{
 +
  color:#8a3ab9;
 +
  text-shadow:2px 2px 0 #000000;
 +
}
 +
 +
/* SPONSORS IMG */
 +
#content_4 h1{
 +
  color:#eee;
 +
}
 +
#content_4 img{
 +
  max-height:100px;
 +
  display:inline-block;
 +
  margin:10px;
 +
  opacity:0.5;
 +
}
 +
#content_4 img:hover{
 +
  opacity:1;
 +
}
 +
    </style>
  
−
     <section class="home_section content_4" id="content_4">
+
     <section class="home_section content_4" id="content_4" style="overflow:hidden;">
  
 
         <h1>Feel free to contact us or follow us on social media: </h1>
 
         <h1>Feel free to contact us or follow us on social media: </h1>
 
         <div class="icons_contact">
 
         <div class="icons_contact">
−
           <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-3x"></i></a>
+
           <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-4x"></i></a>
−
       <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-3x"></i></a>
+
       <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-4x"></i></a>
−
       <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-3x"></i></a>
+
       <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-4x"></i></a>
−
       <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-3x"></i></a>   
+
       <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-4x"></i></a>   
 
         </div>
 
         </div>
 
         <h1>We want to thank all our sponsors: </h1>
 
         <h1>We want to thank all our sponsors: </h1>
Line 495: 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>
Line 512: Line 375:
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
  
−
<script type="text/javascript">
 
−
 
−
// ONE PAGE LAYOUT
 
−
 
−
var stickyMenu = document.querySelector('.js-sticky');
 
−
var stickyOffset = window.innerHeight - stickyMenu.offsetHeight;
 
−
var stickyClassName = 'is-sticky';
 
−
 
−
window.addEventListener('scroll', function() {
 
−
  if (window.pageYOffset >= stickyOffset) {
 
−
    stickyMenu.classList.add(stickyClassName);
 
−
  }
 
−
  else {
 
−
    stickyMenu.classList.remove(stickyClassName);
 
−
  }
 
−
});
 
−
 
−
</script>
 
 
</html>
 
</html>
 
{{INSA-UPS_France/General_script}}
 
{{INSA-UPS_France/General_script}}
 
{{INSA-UPS_France/Header_script}}
 
{{INSA-UPS_France/Header_script}}

Latest revision as of 23:22, 1 November 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Croc'n Cholera
A synthetic microbial consortium

Multiorganism approach: a new challenge for Synthetic Biology

Biodiversity entails a lot of possibilities...

Quorum sensing Light sensitive Proteins secretion High thermostability

What if they could communicate?

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

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

Our proof of concept : a fight against cholera

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

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

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

We want to thank all our sponsors: