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

 
(44 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{INSA-UPS_France/CSS}}
+
{{INSA-UPS_France/Links_new}}
−
{{INSA-UPS_France/script_scroll}}
+
{{INSA-UPS_France/Header_new}}
  
 
<html>
 
<html>
  
−
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Quicksand">
+
<style>  
−
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lobster">
+
/* Clear the default wiki settings */
−
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Scope+One">
+
 
−
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
.subnav{
 +
   margin:0!important;
 +
}
 
    
 
    
−
<div class="index">
+
  #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%;
 +
  }
  
−
</html>
+
p{
 +
  padding:0;
 +
}
 +
table{
 +
  background:none;
 +
}
 +
ul{
 +
  list-style-image: none;
 +
}
  
−
{{INSA-UPS_France/Header}}
 
  
−
<html>
+
/* GENERAL STYLE */
−
<!-- SECTION -->
+
*{
 +
  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;
 +
}
  
−
<div class="container_section" >
 
−
<section>
 
−
  <!--<h2 class="pageTitle">Home</h2>-->
 
  
 +
/* HOME SECTIONS */
 +
.home_section {
 +
  vertical-align: middle;
 +
  text-align: center;
 
    
 
    
 +
}
 +
.home_section h1{
 +
  text-align: center;
 +
  font-family: 'Quicksand', sans-serif;
 +
  font-size: 36pt;
 +
}
 +
.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-size: cover;
 +
  min-height: 90vh;
 +
}
 +
.content_0 {
 +
  background: #f3ead7 no-repeat 50% 50%;
 +
  background-size: cover;
 +
  padding-top:90px;
 +
}
 +
.content_1 {
 +
  background: #99c18e no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
 +
.content_2 {
 +
  background: #f3ead7 no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
 +
.content_3{
 +
  background: #99c18e no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
 +
.content_4{
 +
  background: #323537 no-repeat 50% 50%;
 +
  background-size: cover;
 +
}
  
 +
</style>
  
−
  <div class="article_offset" id="a1">
 
−
  <div class="article_container">
 
−
  <h3>Special Prize : Best Wiki</h3>
 
−
  <article>
 
−
    <p>
 
−
      The team Wiki is the &ldquo;face&rdquo; of your iGEM project. The team Wikis serve as the main project information resource for future iGEM students and teams, as well as the rest of the world. This award honors the &ldquo;model&rdquo; Wiki page, which exemplifies what the following year&rsquo;s Wikis should strive for.
 
−
    </p>
 
−
  </article>
 
−
  </div>
 
−
  </div>
 
  
−
   <div class="article_offset" id="a2">
+
   <main class="site-main">
−
  <div class="article_container">
+
−
    <h3>Test image</h3>   
+
−
    <article>
+
−
      <img src="img1_lab.JPG" alt="img1" class="left w200">
+
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt voluptatibus porro ducimus dolor ad at. Vero autem porro maiores eaque provident nisi placeat quo quas quisquam nam omnis sapiente possimus, tempore ad at, sed maxime hic quos, molestiae impedit magnam magni eum consequatur explicabo? Voluptas corrupti nihil est consequuntur culpa.</p>
+
−
      <figure class="right w400">
+
−
        <img src="img2_lab.JPG" alt="img2" class="right w400">
+
−
        <figcaption>Avec une l&eacute;gende</caption>
+
−
      </figure>
+
−
     
+
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis est delectus ab eligendi quo error quasi. Nulla quasi velit ipsum, fugit ad ea maiores non officiis laboriosam repellendus impedit, iure pariatur, fugiat quo beatae eius expedita consectetur vel praesentium. Harum autem quos dolorum eaque quidem dolores maiores libero! Quibusdam ducimus rerum, dolorem recusandae aspernatur illo, voluptate aliquid tenetur voluptas ut fuga dolores maxime dolorum alias fugit suscipit dignissimos repudiandae! Explicabo architecto, distinctio tenetur vitae vel culpa ducimus recusandae quidem blanditiis!</p>
+
−
    </article>
+
−
    <h3>Test plusieurs images</h3>
+
−
   
+
  
−
     <article>
+
     <section class="home_section home" id="home" style="position:relative;">
−
    <div class="carousel w400 left">
+
      <div class="container">
  
−
        <div class="indicators">
+
      <!-- FIRST IMAGE TO ANIMATE -->
−
          <div class="active" id="ind_img1"></div>
+
      <div style="text-align: center;">
−
          <div id="ind_img2"></div>
+
        <div style="width:100%;position:absolute; top:50pt;font-size:60pt;font-weight:700;">
−
          <div id="ind_img3"></div>
+
        Croc'n Cholera
 +
        </div>
 +
        <div style="width:100%;position:absolute;font-size:40pt; color:#295a7f;top:120pt;">
 +
        A synthetic microbial consortium
 
         </div>
 
         </div>
−
        <img src="team.jpg" alt="" class="active" id="img1" data-target="img2">
 
−
        <img src="logo1.png" alt="" id="img2" data-target="img3">
 
−
        <img src="logo2.png" alt="" id="img3" data-target="img1">
 
−
       
 
 
       </div>
 
       </div>
−
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut aliquid accusantium dolore cupiditate unde, vel, laudantium commodi quis veritatis. Non sequi amet doloribus, odio asperiores provident harum, placeat neque incidunt error quibusdam odit vero aperiam eum nemo. Illum, earum, saepe.</p>
+
 
−
     </article>
+
       </div>
 +
    </section>
 +
 
 +
   
 +
    <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="">
 +
    </section>
 +
 
 +
     <style>
 +
      #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;
 +
      }
 
        
 
        
−
  </div>
+
    </style>
−
  </div>
+
−
 
+
−
 
+
  
−
  <div class="article_offset" id="a3">
 
−
  <div class="article_container" id="a3">
 
−
    <h3>Iure molestiae laudantium placeat!</h3>
 
−
    <article>
 
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga quis nemo assumenda tenetur, sint praesentium minus. Doloremque mollitia nobis voluptatibus, ullam culpa adipisci aliquam rem possimus fugiat numquam in natus cumque modi magnam soluta recusandae enim omnis tempora sed, quos id placeat dolorum debitis. Similique minus magni possimus labore eligendi suscipit, iure ab necessitatibus fuga nam, illum, numquam. Cum nihil optio enim illum fuga atque omnis, necessitatibus, totam et ea beatae? Ab voluptatum eveniet iure, autem laudantium. Repudiandae, necessitatibus repellat nisi. Mollitia voluptatibus obcaecati autem quas tempore enim hic quis ut. Harum ex at laborum odit quod quisquam quae expedita necessitatibus maxime veritatis laudantium, inventore, repudiandae! Harum quis mollitia sequi exercitationem nobis ad reiciendis odio. Vero placeat est doloribus reprehenderit modi nobis corporis, porro laboriosam tenetur? Ratione officiis quo quae voluptatibus illo quisquam odit facilis, excepturi, quas modi similique! Esse vero, nisi ducimus possimus veniam iste asperiores reiciendis exercitationem provident aperiam illo dolor libero aliquid minus, rerum quae molestias dolores dignissimos consequuntur ex in facere. Qui asperiores, molestias esse debitis. Officiis sunt quibusdam, error aperiam adipisci officia totam, mollitia, autem ipsa, rem modi numquam tenetur. Sint ab esse laborum assumenda, debitis autem sunt commodi, suscipit enim sequi, ipsa illum maxime.</p>
 
−
      <p>Exercitationem, voluptatem omnis placeat doloribus voluptatum fugiat reiciendis pariatur quibusdam obcaecati dolor laudantium qui cumque doloremque minus ipsum facere reprehenderit unde deleniti sapiente molestiae odit voluptates distinctio, quas provident. Eos quod atque corporis, reprehenderit sunt libero sed fuga. A, hic ipsa. Aut corporis praesentium mollitia, commodi voluptates nostrum voluptatum, laudantium repudiandae suscipit error, magnam reiciendis est possimus libero cupiditate omnis ipsam modi id quod dolor eius nobis cumque. Laudantium tempora quibusdam accusamus, repellat placeat minus sapiente quo error. Eaque saepe voluptas blanditiis minima delectus neque iusto rem, aperiam, perspiciatis pariatur officiis cum hic similique facere quia, ratione commodi nobis. Temporibus impedit eveniet voluptatibus numquam sequi iusto at, modi facere, inventore voluptatum, quam repudiandae earum quidem aspernatur! Dolores tempora earum corrupti quod fugiat iure eos asperiores ratione optio? Praesentium perferendis error a aliquid officia deleniti impedit saepe ducimus, omnis reprehenderit ipsa corporis, dolorem quo quos, nulla illo asperiores nobis maxime voluptatibus dicta similique. Excepturi ex cupiditate blanditiis provident amet a minus molestias rerum id fugiat voluptas in porro alias dicta mollitia, sit, aliquid tempora neque nihil ut at laborum. Nulla architecto, ab porro harum optio ipsam a explicabo nesciunt ea praesentium delectus dignissimos repellat eum deserunt culpa mollitia, impedit iste fugit!</p>
 
−
    </article>
 
−
  </div>
 
−
  </div>
 
  
−
  <div class="article_offset" id="a4">
+
    <section class="home_section content_1" id="content_1">
−
  <div class="article_container">
+
      <h1>Biodiversity entails a lot of possibilities...</h1>
−
    <h3>Excepturi optio enim quis.</h3>
+
      <table>
−
    <article>
+
        <tr>
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis corporis, hic non vero, beatae molestiae nobis nesciunt molestias dolorum perspiciatis necessitatibus quisquam, quidem. Odio tenetur molestias doloremque, obcaecati nobis veniam totam eaque rerum hic quibusdam. Fugiat magnam odit dolorum sed facilis repudiandae optio natus suscipit. Accusantium, cupiditate, corporis! Mollitia tenetur dolorem, eum rerum aut ex natus delectus ad. Aperiam labore, assumenda a enim repudiandae? Eum autem suscipit amet illo esse eos, quibusdam saepe quae voluptates rerum, tempora molestias itaque eius, dolore provident sunt, nisi nam pariatur porro cumque ea. Sint dicta animi ipsum, est, praesentium distinctio saepe maiores aliquid, quibusdam, odio blanditiis consequuntur magnam maxime voluptatibus labore illum similique tempore fugit cupiditate! Aliquid libero neque deserunt temporibus accusantium facilis, ea soluta culpa ad adipisci quod, eaque unde quisquam suscipit numquam rem alias distinctio odio nobis! Quas adipisci quae quia dignissimos deleniti, aliquid ducimus minima mollitia enim quos molestiae ipsa suscipit! Consequatur quibusdam magni nemo, dicta quia blanditiis suscipit incidunt ullam eligendi quis facilis dolorem autem velit? Saepe tenetur ut, quisquam rerum voluptatem. Culpa illum cum est, consequuntur aliquam, libero recusandae, animi minus commodi officiis assumenda nulla molestias ab nemo quis porro. Ratione eveniet deleniti reiciendis corporis similique, sit, dicta fugit.</p>
+
          <td><img src="https://static.igem.org/mediawiki/2017/a/af/T--INSA-UPS_France--home_quorum.png" alt=""></td>
−
      <p>Hic sequi expedita, id nobis beatae ut maiores, cum blanditiis iure aut a omnis obcaecati fugiat molestias, nisi rerum suscipit reprehenderit ipsum adipisci? Veniam ratione atque, veritatis est perspiciatis eius molestiae, id quod architecto! Atque optio quae quis, similique, incidunt modi, quasi quod illo necessitatibus facilis in, ratione rerum totam laboriosam explicabo nihil ducimus! Quaerat unde saepe inventore. Fugiat quibusdam asperiores velit ad quasi corporis vel hic, ipsa libero necessitatibus unde fugit nesciunt sapiente aliquid reiciendis dolor, doloribus cum incidunt suscipit sequi. Nulla doloribus quis, esse nesciunt aliquid, dolor eveniet consequuntur tenetur labore necessitatibus iusto sit quasi, illo temporibus illum laborum. Impedit aspernatur qui voluptate sequi dolorem modi suscipit tempore odio nemo commodi, ut praesentium, numquam ducimus odit accusantium aliquam sit quia aperiam beatae ad rerum est voluptatem? Sed delectus architecto, praesentium, ducimus unde omnis deleniti ad voluptate modi magni cupiditate sequi doloremque at, dolores tempora repellat accusamus soluta veritatis, fuga doloribus corporis dignissimos placeat iure. Non molestiae natus temporibus atque dolor distinctio obcaecati nisi voluptate asperiores, nemo. Impedit, quo voluptas quae maiores. Amet ut incidunt, ab nesciunt id dolorem voluptate labore facere quas ipsam. Nostrum porro beatae vero quos repellendus veniam rem consectetur consequuntur autem repellat voluptate explicabo, cupiditate!</p>
+
          <td><img src="https://static.igem.org/mediawiki/2017/c/cd/T--INSA-UPS_France--home_light.png" alt=""></td>
−
    </article>
+
          <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>
 +
        <tr>
 +
          <td>Quorum sensing</td>
 +
          <td>Light sensitive</td>
 +
          <td>Proteins secretion</td>
 +
          <td>High thermostability</td>
 +
        </tr>
 +
      </table>
 +
    </section>
  
−
  <div class="article_offset" id="a5">
+
    <style>
−
  <div class="article_container">
+
      #content_2, #content_3{
−
    <h3>Ab non, illum nobis.</h3>
+
        text-align: center;
−
    <article>
+
        display:flex;
−
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem repellendus, veniam odit vero quisquam in odio ipsum, quam debitis ipsa libero id esse enim dignissimos ad neque. Similique incidunt ratione quisquam eos obcaecati accusamus quibusdam impedit commodi, fugiat dolor, ullam quasi quos! Suscipit architecto soluta eius quae? Porro fugiat voluptatem, voluptate nihil incidunt adipisci, doloribus iste odio, inventore enim iure! Debitis quia possimus cumque corporis perferendis esse atque unde iste, libero sint dolor repudiandae porro aut, consequuntur maxime dignissimos ut. Minima delectus itaque nemo dolore omnis asperiores, labore consequatur consectetur autem quaerat temporibus id atque eos dicta facilis aliquid. Iste, obcaecati ab dolorum iusto a laboriosam inventore dolores libero dolor officiis, molestias nemo dignissimos magni distinctio sint doloremque suscipit! Perferendis architecto quia, dolore animi quibusdam natus fugit voluptatem adipisci ullam voluptas totam illo fugiat eos magni, illum eum voluptate sint odio, consequatur repudiandae vero hic! Unde quia, ipsa ullam vero quos ea inventore officiis sunt aperiam qui omnis vel dolorum voluptatem. Dolor earum vero numquam reprehenderit omnis soluta reiciendis ex aspernatur incidunt nesciunt beatae et, ipsa aliquam optio voluptatibus illum labore culpa, maiores dolores! Obcaecati vero, sit dolore vel. Earum hic maiores ratione laudantium consequuntur ut nihil vel ab sequi?</p>
+
        flex-direction: row;
−
       <p>Est, recusandae, ratione! Sequi beatae nostrum perferendis nihil, vel voluptatem fuga eveniet repellat dolor ullam qui eius voluptates consequatur voluptatibus quae non eaque optio suscipit quam! Quam amet pariatur aliquid omnis commodi facere porro optio consequuntur dolores placeat fuga fugiat repellat modi, in et unde nostrum minima id, molestiae labore voluptates nesciunt nobis. Atque aperiam quibusdam nemo molestias odit cum, inventore sint commodi. Quam ea, ad sed neque voluptates cumque, quisquam illo totam consequatur a eligendi deserunt voluptas earum voluptatum facilis alias at vitae consequuntur placeat. Similique consequatur rem, ad illo, doloribus nesciunt soluta saepe. Illo enim eum similique dignissimos minus expedita consequuntur aspernatur nulla vel, eos, ipsa eveniet vero nobis! Praesentium a totam maiores laboriosam, laborum cumque nisi ab laudantium repellat! Iure dicta tenetur quasi consectetur quam. Fuga, sint distinctio, rerum voluptatibus quae porro magnam tenetur laborum nulla fugit quaerat expedita, excepturi illo reiciendis provident dignissimos debitis sequi ratione natus suscipit ab eaque. Quod nihil fugit dignissimos obcaecati, tenetur facere earum officia exercitationem perferendis dolorum. Enim expedita omnis beatae sunt impedit et, recusandae soluta eveniet harum quos mollitia iusto! Corporis sequi, hic reprehenderit molestias nemo explicabo illum earum vero et iure molestiae neque optio aspernatur. Molestiae error perspiciatis, eligendi.</p>
+
      }
−
    </article>
+
      .block{
−
  </div>
+
        width:50%;
−
  </div>
+
        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;
 +
        }
 +
      }
  
−
  <div class="article_offset" id="a6">
+
     </style>
−
  <div class="article_container">
+
−
     <h3>Impedit, aut, error! Dolor?</h3>
+
−
    <article>
+
−
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error dolorem, laborum, molestiae labore hic numquam ullam adipisci accusamus quidem voluptatum eius fugit incidunt voluptatibus! Fuga perspiciatis repellendus, nisi eaque quas cumque illo laboriosam voluptatibus aperiam totam obcaecati molestiae illum enim beatae numquam voluptate architecto quam iste? Doloremque, consequuntur velit error quisquam doloribus possimus. Saepe earum aut sed tempore asperiores fugit, amet possimus mollitia aperiam accusamus modi ipsa voluptates tempora est explicabo optio dolorem, repellendus vero culpa beatae quisquam exercitationem illo? Similique aperiam a voluptates nulla est temporibus laboriosam suscipit, corrupti soluta officia aut laudantium beatae ipsam obcaecati atque cum, at ratione adipisci id rerum. Neque, qui eum vero quo ipsum distinctio vitae laborum perspiciatis nulla aut aspernatur, recusandae fugit ipsam est eius. Nobis totam, voluptas itaque, repellat sint pariatur minima! Voluptates mollitia tenetur iure odio dolores magni a animi, voluptatum dolorum id non, rerum quibusdam dolorem fugiat, dolore deleniti possimus laborum maxime explicabo quas assumenda eligendi consequatur est. Rerum officiis repellat possimus dolorum ab. Dolorum laudantium ad voluptas voluptatibus eos cum! Ratione accusantium omnis nostrum natus molestias architecto neque, cupiditate voluptatibus consequatur animi odio ullam eaque quibusdam commodi non suscipit consequuntur autem numquam aperiam? Obcaecati rerum ullam, animi laudantium aliquid.</p>
+
−
      <p>Vel eveniet aliquid enim incidunt dolore totam qui. Corporis saepe ipsum sint, tempora error, commodi eveniet provident impedit. Blanditiis aut quasi, incidunt, unde deserunt, ea sapiente adipisci consectetur sequi, recusandae officia doloribus! Facere eaque sequi eos suscipit excepturi totam veritatis et facilis quibusdam ipsam! Quaerat unde, natus voluptatem cum earum odio aspernatur eum dolore nemo, atque dicta modi harum id, eveniet dignissimos at? Quaerat sed, velit! Maxime officiis saepe facilis magnam voluptate dolorum, eum voluptas exercitationem, tempore, repellat minus harum aut eaque fugiat iure illum iste. Nam harum quasi exercitationem consequatur dolores, dicta eum minima accusantium vel nulla officiis delectus quos optio iste deleniti explicabo perferendis facere excepturi debitis! Id ratione, delectus illo natus, enim sapiente voluptas? Sed non reprehenderit ipsa dolorem sequi deleniti natus placeat tenetur, at laborum esse dolores aut ut quibusdam repellat maxime nemo perspiciatis magnam animi saepe asperiores odio unde. Consequuntur veniam omnis laudantium optio beatae minima at vel voluptates nesciunt maxime ipsam facere assumenda labore aliquid est modi cupiditate molestias, quod rem accusantium fuga magnam quisquam porro? Velit ut non quo nostrum rerum neque est quia, ipsum itaque molestiae nemo, laboriosam? Est iure dolor voluptas, nobis dignissimos perspiciatis modi! Deleniti assumenda ipsa, enim molestias tempore.</p>
+
−
    </article>
+
−
  </div>
+
−
  </div>
+
  
 +
    <section class="home_section content_2" id="content_2">
 +
      <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>
  
−
 
 
−
 
 
−
</section>
 
−
</div>
 
  
−
<!-- VERTICAL NAV -->
 
  
−
<aside id="vertical_nav">
+
    <section class="home_section content_3" id="content_3">
  
−
    <div class="aside_circle"><a href="#a1" data-number="1">Special Prize : Best Wiki</a></div>
+
      <div class="block text_block">
−
    <div class="aside_circle"><a href="#a2" data-number="2">Test image</a></div>
+
      <div class="block_content">
−
    <div class="aside_circle"><a href="#a3" data-number="3">Iure molestiae laudantium placeat!</a></div>
+
        <h1>Our proof of concept : a fight against cholera</h1>
−
    <div class="aside_circle"><a href="#a4" data-number="4">Excepturi optio enim quis.</a></div>
+
        <p>
−
    <div class="aside_circle"><a href="#a5" data-number="5">Ab non, illum nobis.</a></div>
+
          <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.
−
    <div class="aside_circle"><a href="#a6" data-number="6">Impedit, aut, error! Dolor?</a></div>
+
        </p>
 +
        <p>
 +
        Our project is about creating a multi organisms system which is able to sense and wipe cholera out in contaminated water.
 +
        </p>
 +
      </div>
 +
      </div>
  
−
</aside>
+
      <div class="block">
−
</html>
+
      <div class="block_content">
 +
        <img src="https://static.igem.org/mediawiki/2017/archive/b/bc/20171003092137%21T--INSA-UPS_France--home_blupuriloop_crocncholera.png" alt="" class="img_home">
 +
      </div>
 +
      </div>
 +
 
 +
     
 +
    </section>
 +
 
 +
    <style>
 +
 
 +
/* CONTACT ICONS */
 +
 
 +
.icons_contact{ 
 +
  display:inline-block;
 +
  margin:40px 0;
 +
}
 +
 
 +
.icons_contact > a{
 +
  color:black;
 +
  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;
 +
}
 +
 
 +
/* 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" style="overflow:hidden;">
 +
 
 +
        <h1>Feel free to contact us or follow us on social media: </h1>
 +
        <div class="icons_contact">
 +
          <a id="fbIcon" href="https://www.facebook.com/IGEM-Toulouse-1604834019761538/?fref=ts"><i class="fa fa-facebook fa-4x"></i></a>
 +
      <a id="twitterIcon" href="https://twitter.com/iGEM_Toulouse"><i class="fa fa-twitter fa-4x"></i></a>
 +
      <a id="instaIcon" href="https://www.instagram.com/igem_toulouse/"><i class="fa fa-instagram fa-4x"></i></a>
 +
      <a id="contactIcon" href="mailto:igem.toulouse@gmail.com"><i class="fa fa-envelope fa-4x"></i></a> 
 +
        </div>
 +
        <h1>We want to thank all our sponsors: </h1>
 +
        <div class="sponsors">
 +
          <a href="http://www.lisbp.fr/en/index.html"><img src="https://static.igem.org/mediawiki/2017/3/3e/T--INSA-UPS_France--Logo_lisbp.png" alt=""></a>
 +
          <a href="http://www.toulouse-white-biotechnology.com/en/"><img src="https://static.igem.org/mediawiki/2017/5/56/T--INSA-UPS_France--Logo_twb.png" alt=""></a>
 +
          <a href="http://fondation.insa-lyon.fr/"><img src="https://static.igem.org/mediawiki/2017/6/6d/T--INSA-UPS_France--Logo_fondationinsal.png" alt=""></a>
 +
          <a href="https://fr-fr.facebook.com/insaadnconceptclub/"><img src="https://static.igem.org/mediawiki/2017/b/b7/T--INSA-UPS_France--Logo_ia2c.png" alt=""></a>
 +
          <a href="http://www.biomerieux.com/en"><img src="https://static.igem.org/mediawiki/2017/8/83/T--INSA-UPS_France--Logo_biomerieux.png" alt=""></a>
 +
          <a href="http://www.sunwaterlife.com/en/"><img src="https://static.igem.org/mediawiki/2017/0/09/T--INSA-UPS_France--Logo_sunwaterlife.png" style="width:150px;" alt=""></a>
 +
          <a href="http://www.univ-tlse3.fr/home/home-page-en-379161.kjsp?RH=ACCUEIL"><img src="https://static.igem.org/mediawiki/2017/2/28/T--INSA-UPS_France--Logo_ups.png" alt=""></a>
 +
          <a href="http://www.fsi.univ-tlse3.fr/"><img src="https://static.igem.org/mediawiki/2017/a/ab/T--INSA-UPS_France--Logo_fsi.png" alt=""></a>
 +
          <a href="https://www.kbs-frb.be/"><img src="https://static.igem.org/mediawiki/2017/c/cf/T--INSA-UPS_France--Logo_ernestsolvay.png" alt=""></a>
 +
          <a href="http://www.insa-toulouse.fr/fr/institution/fondation-insa-toulouse.html#"><img src="https://static.igem.org/mediawiki/2017/6/62/T--INSA-UPS_France--Logo_fondationinsat.png" alt=""></a>
 +
      <a href="http://www.adisseo.com/en/"><img src="https://static.igem.org/mediawiki/2017/9/96/T--INSA-UPS_France--Logo_adisseo.png" alt=""></a>
 +
      <a href="http://www.insa-toulouse.fr/fr/index.html"><img src="https://static.igem.org/mediawiki/2017/2/2d/T--INSA-UPS_France--Logo_insatoulouse.png" style="width:150px;" alt=""></a>
 +
      <a href="https://www.veolia.com/en"><img src="https://static.igem.org/mediawiki/2017/9/91/T--INSA-UPS_France--Logo_veolia.png" alt=""></a>
 +
      <a href="https://www.france-science.org/-Homepage-English-.html"><img src="https://static.igem.org/mediawiki/2017/1/1a/T--INSA-UPS_France--Logo_ambassade.jpg" alt=""></a>
 +
 
 +
      <a href="https://www-lbme.biotoul.fr/"><img src="https://static.igem.org/mediawiki/2017/5/51/T--INSA-UPS_France--Logo_LBME.png" alt=""></a>
 +
      <a href="https://www6.toulouse.inra.fr/metatoul_eng/"><img src="https://static.igem.org/mediawiki/2017/1/16/T--INSA-UPS_France--Logo_metatoul.png" alt=""></a>
 +
 
 +
 
 +
      <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="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>
 +
 
 +
 
 +
     
 +
    </section>
 +
 
 +
 
 +
 
 +
  </main>
 +
 
 +
<!-- C O N T E N T -->
  
−
<!-- FOOTER -->
 
−
{{INSA-UPS_France/Footer}}
 
−
<html>
 
−
</div>
 
 
</html>
 
</html>
 +
{{INSA-UPS_France/General_script}}
 +
{{INSA-UPS_France/Header_script}}

Latest revision as of 23:22, 1 November 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Croc'n Cholera
A synthetic microbial consortium

Multiorganism approach: a new challenge for Synthetic Biology

Biodiversity entails a lot of possibilities...

Quorum sensing Light sensitive Proteins secretion High thermostability

What if they could communicate?

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

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

Our proof of concept : a fight against cholera

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

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

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

We want to thank all our sponsors: