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

Line 1: Line 1:
−
 
−
 
−
{{INSA-UPS_France/Links_new}}
 
−
{{INSA-UPS_France/Style_new}}
 
−
{{INSA-UPS_France/Header_new}}
 
 
<html>
 
<html>
 +
<head>
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 +
  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Quicksand:300,400,500,700" rel="stylesheet">
 +
  <script type="text/javascript" src="jquery.js"></script>
 +
</head>
 +
<body>
 
<style>
 
<style>
 +
*{
 +
  margin:0;
 +
  padding:0;
 +
}
 +
html, body, .site{
 +
height:100%;
 +
position:relative;
 +
overflow: hidden;
 +
}
 +
  body {
 +
  margin: 0;
 +
  font: 400 16px/1.5 'Open Sans', Roboto, Arial, sans-serif;
 +
}
 +
a {
 +
  -webkit-transition: 0.2s ease-in-out;
 +
  transition: 0.2s ease-in-out;
 +
}
  
 +
.site-header {
 +
  background: #323537;
 +
  padding: 1.25em 0;
 +
  z-index:100;
 +
}
 +
.site-header > .container {
 +
  height:50px;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-pack: justify;
 +
      -ms-flex-pack: justify;
 +
          justify-content: space-between;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
}
 +
.site-header > nav{
 +
}
 +
.site-header__title {
 +
  vertical-align: middle;
 +
  margin: 0;
 +
  color: #eee;
 +
  text-decoration: none;
 +
  font: 700 1.5em/1.25 "Quicksand", sans-serif;
 +
  text-align: center;
 +
}
 +
 +
.site-header__title:hover,
 +
.site-header__title:focus {
 +
  color: #99c18e;
 +
}
 +
.site-menu__item {
 +
  color: #eee;
 +
  text-decoration: none;
 +
  font: 300 1.25em/1.25 "Quicksand", sans-serif;
 +
  display:inline-block;
 +
}
 +
.cat_name{
 +
  text-transform: uppercase;
 +
  cursor: pointer;
 +
}
 +
.site-menu__item:hover,
 +
.site-menu__item:focus {
 +
  color: #99c18e;
 +
}
 +
.site-menu__item + .site-menu__item {
 +
  /*margin-left: 3em;*/
 +
}
 +
.site-menu__item{
 +
  display:none;
 +
}
 +
 +
.site-menu__item#scroll_down{
 +
  display:inline-block;
 +
  text-align: center;
 +
}
 +
.js-sticky.is-sticky .site-menu__item{
 +
  display:inline-block;
 +
}
 +
.js-sticky.is-sticky .site-menu__item#scroll_down{
 +
  display:none;
 +
}
 +
 +
.js-sticky.is-sticky nav.site-menu{
 +
  height:100%;
 +
  width:60%;
 +
}
 +
 +
div.site-menu__item{
 +
  position:relative;
 +
  width:17%;
 +
}
 +
div.cat_name{
 +
  line-height: 50px;
 +
  height:50px;
 +
}
 +
div.site-menu__item.no-subnav{
 +
  width:auto;
 +
}
 +
 +
ul.subnav{
 +
  position:absolute;
 +
  top:70px;
 +
  right:0px;
 +
  background:#323537;
 +
  width:100%;
 +
  max-height:0;
 +
  overflow: hidden;
 +
  transition: max-height 400ms ease;
 +
  z-index:300;
 +
}
 +
ul.subnav li{
 +
  list-style-type: none;
 +
  padding:10px;
 +
}
 +
.site-menu__item a, .site-menu__item a:visited, .site-menu__item a:active{
 +
  text-decoration: none;
 +
  color:white;
 +
}
 +
.site-menu__item a:hover{
 +
  color: #99c18e;
 +
}
 
main{
 
main{
 
   position:relative;
 
   position:relative;
Line 12: Line 133:
 
   height:100%;
 
   height:100%;
 
}
 
}
−
 
+
/*
 +
footer{
 +
  background: #323537;
 +
  width:100%;
 +
  height:200px;
 +
 
 +
}*/
  
 
.main_content{
 
.main_content{
Line 29: Line 156:
 
   width:90%;
 
   width:90%;
 
   min-height:100%;
 
   min-height:100%;
−
  max-width:1200px;
 
 
   margin:0px auto;
 
   margin:0px auto;
 
   position:relative;
 
   position:relative;
Line 40: Line 166:
 
section{
 
section{
 
   background-color: rgba(255,255,255,0.2);
 
   background-color: rgba(255,255,255,0.2);
−
   padding:3% 20px;
+
   padding:3% 10%;
 
   text-align: justify;
 
   text-align: justify;
 
   border-radius:20px;
 
   border-radius:20px;
 
   position:relative;
 
   position:relative;
 
   margin-top:100px;
 
   margin-top:100px;
−
}
 
−
.main_title{
 
−
  height:300px;
 
−
  font: 700 4em/1.5 'Quicksand', sans-serif;
 
−
  position:relative;
 
−
  letter-spacing: 0.1em;
 
−
  z-index:10;
 
−
  margin-bottom:50px;
 
−
  width:100%;
 
−
 
 
−
}
 
−
.main_title > div{
 
−
  width:100%;
 
−
  position:absolute;
 
−
  bottom:-10px;
 
−
  background:rgba(255,255,255,0.2);
 
−
  border-radius: 20px;
 
 
}
 
}
  
−
.main_title p{
 
−
  padding:30px;
 
−
}
 
  
−
.main_title img{
+
/*for now*/
−
   position:absolute;
+
sup{
−
  right:0;
+
   display: none;
−
  width:400px;
+
−
  bottom:-25px;
+
 
}
 
}
−
 
  
 
</style>
 
</style>
  
 +
<!-- C O N T E N T -->
 +
 
 +
<div class="site">
 +
  <header class="site-header js-sticky is-sticky">
 +
 +
    <div class="container" style="position:relative; ">
 +
    <a href="#" class="site-header__title">
 +
      <img src="logo.png" alt="" style="width:70px;">
 +
    </a>
 +
    <div class="site-header__title">
 +
    Croc'n Cholera <br/>
 +
    <span style="font-size:12pt;">iGEM UPS-INSA Toulouse 2017</span>
 +
    </div>
 +
 +
    <nav class="site-menu" style="text-align: center;">
 +
     
 +
      <div class="site-menu__item no-subnav">
 +
        <a href="index3.html"><i class="fa fa-home"></i></a>
 +
      </div>
 +
      <div class="site-menu__item">
 +
        <div class="cat_name">Team <i class="fa fa-caret-down"></i></div>
 +
        <ul class="subnav">
 +
          <li><a href="members.html">Members</a></li>
 +
          <li><a href="supports.html">Supports</a></li>
 +
          <li><a href="attributions.html">Attributions</a></li>
 +
          <li><a href="funfacts.html">Fun facts</a></li>
 +
          <li><a href="collaborations.html">Collaborations</a></li>
 +
        </ul>
 +
      </div>
 +
      <div class="site-menu__item">
 +
        <div class="cat_name">Project <i class="fa fa-caret-down"></i></div>
 +
        <ul class="subnav">
 +
          <li><a href="description.html">Description</a></li>
 +
          <li><a href="design.html">Design</a></li>
 +
          <li><a href="results.html">Results</a></li>
 +
          <li><a href="parts.html">Parts</a></li>
 +
          <li><a href="entrepreneurship.html">Entrepreneurship</a></li>
 +
        </ul>
 +
      </div>
 +
      <div class="site-menu__item">
 +
        <div class="cat_name">Model <i class="fa fa-caret-down"></i></div>
 +
        <ul class="subnav">
 +
          <li><a href="modeloverview.html">Overview</a></li>
 +
          <li><a href="sbgnrepresentation.html">SBGN Representation</a></li>
 +
          <li><a href="odesystem.html">ODE System</a></li>
 +
          <li><a href="modelresults.html">Results</a></li>
 +
        </ul>
 +
      </div>
 +
      <div class="site-menu__item">
 +
        <div class="cat_name">Notebook <i class="fa fa-caret-down"></i></div>
 +
        <ul class="subnav">
 +
          <li><a href="labbook.html">Lab Book</a></li>
 +
          <li><a href="experiments.html">Experiments</a></li>
 +
          <li><a href="safety.html">Safety</a></li>
 +
        </ul>
 +
      </div>
 +
      <div class="site-menu__item">
 +
        <div class="cat_name">Outreach <i class="fa fa-caret-down"></i></div>
 +
        <ul class="subnav">
 +
          <li><a href="hpoverview.html">Overview</a></li>
 +
          <li><a href="publicengagement.html">Public Engagements</a></li>
 +
          <li><a href="hpsilver.html">Silver</a></li>
 +
          <li><a href="ihp">Integrated Human Practices</a></li>
 +
          <li><a href="press.html">Press</a></li>
 +
        </ul>
 +
      </div>
 +
      <div class="site-menu__item no-subnav">
 +
        <a href="achievements.html"><i class="fa fa-trophy"></i></a>
 +
      </div>
 +
 +
      </nav>
 +
    </div>
 +
  </header>
  
 
    
 
    
 
   <style>
 
   <style>
−
  section{
+
 
−
  margin-bottom: 40px;
+
−
  }
+
 
   section img{
 
   section img{
 
       /**/
 
       /**/
Line 90: Line 264:
 
       font-family: 'Quicksand', sans-serif;
 
       font-family: 'Quicksand', sans-serif;
 
       font-size:34pt;
 
       font-size:34pt;
−
       margin-top:-125px;
+
       margin-bottom:0px;
−
      text-align: right;
+
 
     }
 
     }
 
     section h2{
 
     section h2{
Line 109: Line 282:
 
   <div class="main_content">
 
   <div class="main_content">
 
   <div class="middle_container">
 
   <div class="middle_container">
 +
 +
  <style>
 +
    .img-hover-reveal{
 +
      overflow: hidden;
 +
      position:relative;
 +
    }
 +
    .img-hover-reveal img{
 +
      width:100%;
 +
    }   
 +
    .img-visible{
 +
      position:relative;
 +
    }
 +
    .img-invisible{
 +
      position:absolute;
 +
      left:-100%;
 +
      top:0px;
 +
      transition:0.5s;
 +
    }
 +
    .img-hover-reveal:hover > .img-invisible{
 +
      transition: 0.5s;
 +
      left: 0px;
 +
    }
 +
  </style>
  
 
   <div class="section_container">
 
   <div class="section_container">
  
−
     <div class="main_title">
+
     <div style="margin:0px auto;max-width:1000px;">
−
      <div>
+
    <section style="background:none;padding:0px !important;z-index:100; ">
−
        <p style="margin-bottom: 0px;">Results</p>
+
      <h1 style="font-size:5vw;letter-spacing: 1vw;z-index:120;text-align: center;">Human Practices</h1>
−
      </div>
+
     </section>
−
      <img src="https://static.igem.org/mediawiki/2017/4/4d/T--INSA-UPS_France--Results_Overview_croco.png" alt="">
+
−
     </div>
+
  
  
−
<!-- R E S U L T S  -->
+
    <style>
 +
      .middle_container{
 +
        min-width:900px;
 +
      }
 +
      .member{
 +
        overflow: hidden;
 +
        position:relative;
 +
        height:370px;
 +
        margin-top: 0px;
 +
        padding:20px;
 +
      }
 +
     
 +
      .member-text{
 +
        margin-left:370px;
 +
      }
 +
     
 +
      .img-ov{
 +
        width:370px;
 +
        position:absolute;
 +
        left:0px;
 +
        top:0px;
 +
      }
 +
      .img-ov img{
 +
        width:100%;
 +
        position:absolute;
 +
        left:0px;
 +
        top:0px;
 +
      }   
 +
     
 +
      /*@media*/
 +
      .member_name{
 +
        background: none;
 +
        margin:0px;
 +
      }
 +
      .member_name h1{
 +
        position:absolute;
 +
        bottom:-30px;
 +
        right:15px;
 +
        z-index: 100;
 +
      }
 +
      .member-text h3{
 +
        font-family:'Quicksand', sans-serif;
 +
        font-style: italic;
 +
        font-weight:300;
 +
      }
 +
     
 +
      .pe_img{
 +
        width:24%;
 +
        display: inline-block;
 +
      }
 +
      .pe_img{
 +
        width:50px;
 +
        height:50px;
 +
      }
 +
    </style>
  
−
<style>
+
    <section class="member_name">
−
section img{
+
      <h1>Human Practices Logbook</h1>
−
width:100%;
+
    </section>
−
}
+
    <section class="member">
−
</style>
+
      <div class="img-ov">
−
<section style="background:none;">
+
        <img src="https://static.igem.org/mediawiki/2017/3/34/T--INSA-UPS_France--Team-members_Croco_Margot.png" alt="" >
−
<img src="https://static.igem.org/mediawiki/2017/0/0a/T--INSA-UPS_France--Results_Overview.png" alt="">
+
      </div>     
−
</section>
+
      <div class="member-text">
 +
        <p>
 +
          We did a Human Practices logbook and built an ethical matrix in order to think about ethics inside the globality of our projet, for every aspect of it.
 +
        </p>
 +
      </div>
 +
    </section>
  
−
<section>
+
    <section class="member_name">
−
<h1>We are able to mimic vibrios quorum sensing molecules</h1>
+
      <h1>Public Engagement &amp; Education</h1>
−
<p>
+
    </section>
−
CAI-1 like molecule are crucial to start our system and gather the information of the presence of high quantity of <i>Vibrio cholerae</i>, here we prove with mass spectrometry (MS) and nuclear magnetic resonance (NMR) approaches that we are able to produce C8-CAI-1 using <i>E.coli</i>.
+
    <section class="member" id="pe">
−
</p>
+
        <div>
−
</section>
+
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/8/86/T--INSA-UPS_France--HP-Overview_PE_school.jpg" alt="">
 +
            <p>Intervene in primary schools</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/2/2f/T--INSA-UPS_France--HP-Overview_PE_game.JPG.jpg" alt="">
 +
            <p>Create of a card game about microbiology</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/d/dc/T--INSA-UPS_France--HP-Overview_PE_night.jpg" alt="">
 +
            <p>Participate in the European Researcher's Nigh</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/1/18/T--INSA-UPS_France--HP-Overview_PE_conf.png" alt="">
 +
            <p>Leading a conference about the future of synthetic biology</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/a/a2/T--INSA-UPS_France--HP-Overview_PE_high-school.jpg" alt="">
 +
            <p>Inspire high schoolers to pursue a scientific career</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/1/1f/T--INSA-UPS_France--HP-Overview_PE_exposciences.jpg" alt="">
 +
            <p>Show fun experiments to children</p>
 +
          </div>         
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/d/de/T--INSA-UPS_France--HP-Overview_PE_bib.jpg" alt="">
 +
            <p>Exhibitions on campus for future iGEMers</p>
 +
          </div>
 +
          <div class="pe_img">
 +
            <img src="https://static.igem.org/mediawiki/2017/b/ba/T--INSA-UPS_France--HP-Overview_PE_press.jpg" alt="">
 +
            <p>Communicate to local and national press</p>
 +
          </div>
 +
        </div>
 +
        <p>
 +
          We wanted to show that it is possible to talk about biology, science in general and ethics with people from all ages and with different knowledge. We articulated our outreach strategy around three actions: discover, practice and discuss, to empower citizens or future citizens about their capability of thinking and acting on science. These three milestones are essential for us to give people a better understanding of the current challenges of science in the society.
 +
        </p>
 +
    </section>
  
−
<section>
+
    <section class="member_name">
−
<h1><i>Vibrio harveyi</i> JMH626 is able to detect CAI-1 like molecules </h1>
+
      <h1>Microbioworld</h1>
−
<p>
+
    </section>
−
Based on our C8-CAI-1 production, we induced quorum sensing pathway ending in bioluminesnce in <i>V. harveyi</i> JMH626 using a self made protocol.
+
    <section class="member">
−
</p>
+
      <div class="img-ov">
−
<img src="https://static.igem.org/mediawiki/2017/1/13/T--INSA-UPS_France--Results_Coli_biolum.png" alt="">
+
        <img src="https://static.igem.org/mediawiki/2017/3/34/T--INSA-UPS_France--Team-members_Croco_Margot.png" alt="" >
−
</section>
+
      </div>     
 +
      <div class="member-text">
 +
        <p>
 +
          While doing several interventions in schools is in our opinion clearly a nice way for pupils to &lsquo;learn by doing&rsquo;, we thought is was also a good idea to bring scientific knowledge outside of the classroom. That&rsquo;s why we came up with the idea of creating a strategy card game about biology. With this game, we are hoping to draw attention to the hidden world of microorganisms and make it visible elsewhere than on the bench of a scientist or inside a biology student&rsquo;s notebook.
 +
        </p>
 +
      </div>
 +
    </section>
 +
   
  
−
<section>
+
    <section class="member_name">
−
<h1><i>Vibrio harveyi</i> can be used a molecular chassis</h1>
+
      <h1>Integrated Human Practices</h1>
−
<p>
+
    </section>
−
Using <i>Vibrio harveyi</i> and inserting iGEM biobrik through conjugaison has been successfully made with the insertion of RFP.
+
    <section class="member">
−
+
      <div class="img-ov">
−
</p>
+
        <img src="https://static.igem.org/mediawiki/2017/3/34/T--INSA-UPS_France--Team-members_Croco_Margot.png" alt="" >
−
</section>
+
      </div>    
−
 
+
      <div class="member-text">
−
<section>
+
        <p>
−
<h1>Core discussion between prokariotic and eukaryotic is on the way</h1>
+
          We expand our Silver Human Practices activity and went further in the exploitation of our ethical matrix by including it in the life cycle of our device.
−
<p>
+
        </p>
−
We found a common media where our two microorganisms were able to growth, leading to possible co-culture and further communications.
+
      </div>
−
</p>
+
    </section>
−
</section>
+
−
 
+
−
<section>
+
−
<h1><i>Pichia pastoris</i> is able to produce functional antimicrobial peptides</h1>
+
−
<p>
+
−
We show that <i>Pichia pastoris</i> is able to produce antimicrobial peptdides that are able to inhibit <i>Vibrio harveyi</i> growth on plate.
+
−
</p>
+
−
</section>
+
 
      
 
      
−
    <!-- fin section -->  
+
 
 +
  </div>
  
 
   </div>
 
   </div>
Line 265: Line 554:
 
   </main>
 
   </main>
  
 +
<!--
 +
  -->
  
 +
</div>
  
  
Line 271: Line 563:
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
  
−
</html>
 
  
−
{{INSA-UPS_France/General_script}}
+
<script type="text/javascript">
−
{{INSA-UPS_France/Header_script}}
+
 
 +
    // NAV BAR SUBNAV CLICK
 +
 
 +
  $(document).on("click",".cat_name", function(){
 +
    if($(this).parent().children('.subnav').css("max-height")=="0px"){
 +
      $('.subnav').css("max-height","0px");
 +
      $(this).parent().children('.subnav').css("max-height","1000px");
 +
    }
 +
    else{
 +
      $(this).parent().children('.subnav').css("max-height","0px");
 +
    }  
 +
  });
 +
</script>
 +
 
 +
<script type="text/javascript">
 +
  var contentSections = $('.article_offset'),
 +
  navigationItems = $('.left_container .aside-nav__item:after');
 +
 
 +
  updateNavigation();
 +
  $('.main_content').on('scroll', function(){
 +
    updateNavigation();
 +
    });
 +
 
 +
 
 +
  function updateNavigation() {
 +
    contentSections.each(function(){
 +
      $this = $(this);
 +
 
 +
      var activeSection = $('.left_container a[href="#'+$this.attr('id')+'"]').data('number') - 1;
 +
      /*if ( ( $this.offset().top - $(window).height()/2 < $(window).scrollTop() ) && ( $this.offset().top + $this.height() - $(window).height()/2 > $(window).scrollTop() ) ) {
 +
        navigationItems.eq(activeSection).addClass('is-selected');
 +
      }else {
 +
        navigationItems.eq(activeSection).removeClass('is-selected');
 +
      }*/
 +
    });
 +
  }
 +
 
 +
  function smoothScroll(target) {
 +
        $('body,html').animate(
 +
          {'scrollTop':target.offset().top},
 +
          600
 +
        );
 +
  }
 +
</script>
 +
 
 +
</body>
 +
</html>

Revision as of 20:53, 6 October 2017

Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Human Practices

Human Practices Logbook

We did a Human Practices logbook and built an ethical matrix in order to think about ethics inside the globality of our projet, for every aspect of it.

Public Engagement & Education

Intervene in primary schools

Create of a card game about microbiology

Participate in the European Researcher's Nigh

Leading a conference about the future of synthetic biology

Inspire high schoolers to pursue a scientific career

Show fun experiments to children

Exhibitions on campus for future iGEMers

Communicate to local and national press

We wanted to show that it is possible to talk about biology, science in general and ethics with people from all ages and with different knowledge. We articulated our outreach strategy around three actions: discover, practice and discuss, to empower citizens or future citizens about their capability of thinking and acting on science. These three milestones are essential for us to give people a better understanding of the current challenges of science in the society.

Microbioworld

While doing several interventions in schools is in our opinion clearly a nice way for pupils to ‘learn by doing’, we thought is was also a good idea to bring scientific knowledge outside of the classroom. That’s why we came up with the idea of creating a strategy card game about biology. With this game, we are hoping to draw attention to the hidden world of microorganisms and make it visible elsewhere than on the bench of a scientist or inside a biology student’s notebook.

Integrated Human Practices

We expand our Silver Human Practices activity and went further in the exploitation of our ethical matrix by including it in the life cycle of our device.