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

Line 1: Line 1:
 +
 +
 +
 
{{INSA-UPS_France/Links_new}}
 
{{INSA-UPS_France/Links_new}}
 
{{INSA-UPS_France/Style_new}}
 
{{INSA-UPS_France/Style_new}}
 
{{INSA-UPS_France/Header_new}}
 
{{INSA-UPS_France/Header_new}}
 
<html>
 
<html>
 +
  
  
 
<!-- C O N T E N T -->
 
<!-- C O N T E N T -->
  
 +
 +
 +
  <main class="site-main">
 
   <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 style="margin:0px auto;max-width:1000px;">
 
 
     <section style="background:none;padding:0px !important;z-index:100; ">
 
     <section style="background:none;padding:0px !important;z-index:100; ">
−
       <h1 style="font-size:60pt;letter-spacing: 0.2em;z-index:120;text-align: center;">Students</h1>
+
       <h1 style="font-size:5vw;letter-spacing: 1vw;z-index:120;text-align: center;">Integrated Human Practices </h1>
 
        
 
        
−
      <div class="img-hover-reveal" style="width:100%;border-top-right-radius: 20px; border-top-left-radius: 20px; ">
+
     </section>  
−
          <img src="https://static.igem.org/mediawiki/2017/9/9d/T--INSA-UPS_France--Team-allteam.JPG" class="img-visible" alt="" >
+
−
          <img src="https://static.igem.org/mediawiki/2017/4/4d/T--INSA-UPS_France--Team-allteam2.JPG" class="img-invisible" alt="">
+
−
        </div>
+
−
     </section>
+
  
−
     <section style="margin-top:-30px; padding-left:100px;padding-right:100px;">
+
     <div class="hp-container">
−
       <p style="margin-top: 50px;">
+
       <div class="top-hp">
−
      9 crocodiles fans working in the lab, with the help of 11 supervisors. We come from from 3 different schools: Paul Sabatier University, INSA Lyon and INSA Toulouse.
+
              <style>
−
      </p>
+
       .steps-container{
−
    </section>
+
         display:table;
−
 
+
        width:100%;
−
    <style>
+
        font-size:20pt;
−
       .middle_container{
+
        text-align: center;
−
         min-width:900px;
+
 
       }
 
       }
−
       .member{
+
       .steps-container > div{
−
         overflow: hidden;
+
         display:table-cell;
−
         position:relative;
+
         text-align: center;
−
        height:370px;
+
−
        margin-top: 0px;
+
−
        padding:20px;
+
 
       }
 
       }
−
     
+
       .step{      
−
       .member-text{
+
         width:50px;
−
         margin-left:370px;
+
 
       }
 
       }
−
     
+
       .step > div{
−
       .img-hover-reveal-inv{
+
        width:50px;
−
         width:370px;
+
        height:50px;
−
         position:absolute;
+
        border-radius:50px;
−
         left:0px;
+
        border:2px solid black;
−
         top:0px;
+
        display:inline-block;
 +
        line-height: 50px;
 +
         vertical-align: middle;
 +
         position:relative;
 +
         border:solid 4px rgba(255,255,255,0.2);
 +
         background:rgba(255,255,255,0.2);
 +
        cursor:pointer;
 +
      }
 +
      .step-path{
 +
        width:30px;
 
       }
 
       }
−
       .img-hover-reveal-inv img{
+
       .step-path > div{
 
         width:100%;
 
         width:100%;
−
         position:absolute;
+
         height:10px;
−
         left:0px;
+
         background:rgba(255,255,255,0.2);
−
        top:0px;
+
−
      }   
+
−
      .img-visible-inv{
+
−
        z-index:20;
+
−
          -webkit-transition:0.5s;
+
−
          -moz-transition:0.5s;
+
−
        transition:0.5s;
+
 
       }
 
       }
−
       .img-invisible-inv{
+
       .step > div:hover{
−
         z-index:10;
+
         border:solid 4px #e06666;
−
       
+
 
       }
 
       }
−
       .img-hover-reveal-inv:hover > .img-visible-inv{
+
       .step-path > div.active-path{
−
          -webkit-transition:0.5s;
+
         background:#e06666;
−
          -moz-transition:0.5s;
+
−
         transition: 0.5s;
+
−
        left: -100%;
+
 
       }
 
       }
−
      /*@media*/
+
       .step > div.selected-step{
−
       .member_name{
+
         border:solid 4px #e06666;
−
         background: none;
+
−
        margin:0px;
+
 
       }
 
       }
−
       .member_name h1{
+
       .step > div.previous-step{
−
        position:absolute;
+
         border:solid 4px #e06666;
−
        bottom:-30px;
+
         background: #e06666;
−
        right:15px;
+
         color:white;
−
        z-index: 100;
+
−
      }
+
−
      .member-text h3{
+
−
         font-family:'Quicksand', sans-serif;
+
−
         font-style: italic;
+
−
         font-weight:300;
+
−
      }
+
−
      .member-text p{
+
−
        font-family: 'Merriweather', serif;
+
−
       
+
 
       }
 
       }
 
     </style>
 
     </style>
  
−
     <section class="member_name">
+
     <div style="text-align: center;display:inline-block;">
−
       <h1>Margaux Cescato</h1>
+
       <div class="steps-container">
−
    </section>
+
        <div class="step"><div class="selected-step" data-target="1">1</div></div>
−
    <section class="member">
+
        <div class="step-path"><div id="path-2"></div></div>
−
      <div class="img-hover-reveal-inv">
+
        <div class="step"><div data-target="2">2</div></div>
−
         <img src="https://static.igem.org/mediawiki/2017/3/34/T--INSA-UPS_France--Team-members_Croco_Margot.png" alt="" class="img-invisible-inv">
+
         <div class="step-path"><div id="path-3"></div></div>
−
         <img src="https://static.igem.org/mediawiki/2017/3/3d/T--INSA-UPS_France--Team-members_Margot.jpg" alt="" class="img-visible-inv">
+
        <div class="step"><div data-target="3">3</div></div>
−
      </div>    
+
        <div class="step-path"><div id="path-4"></div></div>
−
      <div class="member-text">
+
        <div class="step"><div data-target="4">4</div></div>
−
       
+
        <div class="step-path"><div id="path-5"></div></div>
−
         <h3>Studies biotechnology at Paul Sabatier University</h3>
+
         <div class="step"><div data-target="5">5</div></div>
−
         <h3>Collaboration master</h3>
+
        <div class="step-path"><div id="path-6"></div></div>
−
        <p>
+
        <div class="step"><div data-target="6">6</div></div>
−
          With her incredible amount of knowledge in biology, Margaux is the one who first lead us through the crocodile&rsquo;s world. She is the ears and voice of the team, always cheerful when a skype is planned with another team&hellip; and very calm in front of communication technology mysteries (&ldquo;Can you hear us??&rdquo;). Last but not least, Margaux is definitely the queen of the cell schemes on the wiki!
+
        <div class="step-path"><div id="path-7"></div></div>
−
        </p>
+
        <div class="step"><div data-target="7">7</div></div>
 +
         <div class="step-path"><div id="path-8"></div></div>
 +
         <div class="step"><div data-target="8">8</div></div>
 +
      </div>  
 +
    </div>
 
       </div>
 
       </div>
−
    </section>
 
  
−
    <section class="member_name">
+
       <style>
−
       <h1>Le&iuml;la Dumas </h1>
+
        .hp-container{
−
    </section>
+
          height:80vh;
−
    <section class="member">
+
          position:relative;
−
      <div class="img-hover-reveal-inv">
+
          margin-top:50px;
−
         <img src="https://static.igem.org/mediawiki/2017/3/3c/T--INSA-UPS_France--Team-members_Croco_Leila.png" alt="" class="img-invisible-inv">
+
        }
−
        <img src="https://static.igem.org/mediawiki/2017/0/00/T--INSA-UPS_France--Team-members_Leila.jpg" alt="" class="img-visible-inv">
+
         .top-hp{
−
      </div>     
+
          height:10%;
−
      <div class="member-text">
+
          text-align: center;
−
          
+
        }
−
         <h3>Studies biological engineering at INSA Toulouse</h3>
+
        .bot-hp{
−
         <h3>Device engineer</h3>
+
          height:90%;
−
         <p>
+
          position: relative;
−
           Le&iuml;la studies biological engineering at INSA Toulouse. Think about her as a real biology lover, singing lullaby to her transformants and amazed by organisms as weird as <i>Crepidula fornicata</i>. Straightforward, she will always tell you what&rsquo;s in her mind, but without changing her usual calm voice. One last thing: don&rsquo;t even think disturbing her during her daily nap after lunch ;)
+
          display:table;
−
         </p>
+
          width:100%;
−
      </div>
+
        }
−
    </section>
+
        .process-container, .matrix-container{
 +
          display:table-cell;
 +
          height:100%;
 +
          vertical-align: top;
 +
        }
 +
        .process-container{
 +
          width:30%;
 +
          vertical-align: middle;
 +
        }
 +
        .matrix-container{
 +
          width:70%;
 +
         }
 +
         .matrix{
 +
          display:none;
 +
          width:100%;
 +
          height:100%;
 +
         }
 +
         .matrix table{
 +
           width:100%;
 +
          height:100%;
 +
          table-layout: fixed;
 +
        }
 +
        .matrix table tr td{
 +
          border:solid 1px #eee;
 +
        }
 +
        .matrix.visible{
 +
          display:block;
 +
        }
 +
        .process-container img{
 +
          display:none;
 +
          height:65%;
 +
         }
 +
        .process-container img.visible{
 +
          display:inline-block;
 +
        }
  
−
    <section class="member_name">
+
         .green-cell{
−
      <h1>L&eacute;o Gerlin</h1>
+
          background-color:#d9ead3;
−
    </section>
+
         }
−
    <section class="member">
+
         .orange-cell{
−
      <div class="img-hover-reveal-inv">
+
           background-color:#fce5cd;
−
         <img src="https://static.igem.org/mediawiki/2017/d/d9/T--INSA-UPS_France--Team-members_Croco_Leo.png" alt="" class="img-invisible-inv">
+
         }
−
        <img src="https://static.igem.org/mediawiki/2017/5/5c/T--INSA-UPS_France--Team-members_Leo.jpg" alt="" class="img-visible-inv">
+
         .red-cell{
−
      </div>     
+
           background-color:#f4cccc;
−
      <div class="member-text">
+
         }
−
          
+
−
         <h3>Studies biological engineering at INSA Toulouse</h3>
+
−
        <h3>Pillar of modeling</h3>
+
−
        <p>
+
−
           He is mainly composed of love, and is still trying to find the best way of bringing good luck to his colonies.  L&eacute;o hasn&rsquo;t slept since the 25th of January, official date of the team creation. While he feeds us with tofu, we are all getting a hard time to feed him data for his modelisation.
+
−
         </p>
+
−
      </div>
+
−
    </section>
+
−
     
+
−
    <section class="member_name">
+
−
      <h1>Marie Grandjean</h1>
+
−
    </section>
+
−
    <section class="member">
+
−
      <div class="img-hover-reveal-inv">
+
−
         <img src="https://static.igem.org/mediawiki/2017/2/2c/T--INSA-UPS_France--Team-members_Croco_Marie.png" alt="" class="img-invisible-inv">
+
−
        <img src="https://static.igem.org/mediawiki/2017/2/27/T--INSA-UPS_France--Team-members_Marie.jpg" alt="" class="img-visible-inv">
+
−
      </div>     
+
−
      <div class="member-text">
+
−
       
+
−
        <h3>Studies molecular microbiology at Paul Sabatier University</h3>
+
−
        <h3>Human Practicer</h3>
+
−
        <p>
+
−
           Able to stay amazed 5 minutes in front of fungi growing on a petri dish, Marie is especially in love with <i>Deinococcus radiodurans</i>. Besides, she is a true hard-worker, she already stayed in the lab until the night (midnight?) to transform her cells. She is our public engagement enthusiast, always coming up with original ideas to show that microbiology is a fun field!
+
−
         </p>
+
−
      </div>
+
−
    </section>
+
  
−
    <section class="member_name">
+
       </style>
−
       <h1>T&eacute;o Hebra</h1>
+
      <div class="bot-hp">
−
    </section>
+
        <div class="process-container">
−
    <section class="member">
+
          <img id="mat-img-1" src="https://static.igem.org/mediawiki/2017/3/3a/T--INSA-UPS_France--HP-IHP_ethical-matrix-1.png" class="visible" alt="">
−
      <div class="img-hover-reveal-inv">
+
          <img id="mat-img-2" src="https://static.igem.org/mediawiki/2017/3/3c/T--INSA-UPS_France--HP-IHP_ethical-matrix-2.png" alt="">
−
        <img src="https://static.igem.org/mediawiki/2017/f/ff/T--INSA-UPS_France--Team-members_Croco_Teo.png" alt="" class="img-invisible-inv">
+
          <img id="mat-img-3" src="https://static.igem.org/mediawiki/2017/d/da/T--INSA-UPS_France--HP-IHP_ethical-matrix-3.png" alt="">
−
        <img src="https://static.igem.org/mediawiki/2017/e/ea/T--INSA-UPS_France--Team-members_Teo.jpg" alt="" class="img-visible-inv">
+
          <img id="mat-img-4" src="https://static.igem.org/mediawiki/2017/a/a8/T--INSA-UPS_France--HP-IHP_ethical-matrix-4.png" alt="">
−
      </div>    
+
          <img id="mat-img-5" src="https://static.igem.org/mediawiki/2017/6/6e/T--INSA-UPS_France--HP-IHP_ethical-matrix-5.png" alt="">
−
      <div class="member-text">
+
          <img id="mat-img-6" src="https://static.igem.org/mediawiki/2017/d/d8/T--INSA-UPS_France--HP-IHP_ethical-matrix-6.png" alt="">
−
       
+
          <img id="mat-img-7" src="https://static.igem.org/mediawiki/2017/f/f3/T--INSA-UPS_France--HP-IHP_ethical-matrix-7.png" alt="">
−
        <h3>Studies biotechnology at Université Paul Sabatier</h3>
+
           <img id="mat-img-8" src="https://static.igem.org/mediawiki/2017/3/37/T--INSA-UPS_France--HP-IHP_ethical-matrix-8.png" alt="">
−
        <h3>Lab Director</h3>
+
        </div>
−
        <p>
+
      <div  class="matrix-container">
−
           T&eacute;o is our lab director, meaning that he supervises the experiments! Need any advice? Come talk to him, he will help you with his great lab experience. Always singing, smiling and believing in our cloning strategies, he is the optimistic strength we needed in our team&hellip; except the tragic day when he spill all his miniprep tubes.  
+
−
        </p>
+
−
      </div>
+
−
    </section>
+
  
−
    <section class="member_name">
+
        <div class="matrix m-1 visible">
−
      <h1>Margaux Poulalier-Delavelle</h1>
+
          <table>
−
    </section>
+
            <tr>
−
    <section class="member">
+
              <td style="border:none; background:none;"></td>
−
      <div class="img-hover-reveal-inv">
+
              <th>Well-being</th>
−
        <img src="https://static.igem.org/mediawiki/2017/9/90/T--INSA-UPS_France--Team-members_Croco_Margol.png" alt="" class="img-invisible-inv">
+
              <th>Autonomy</th>
−
        <img src="https://static.igem.org/mediawiki/2017/0/03/T--INSA-UPS_France--Team-members_Margol.jpg" alt="" class="img-visible-inv">
+
              <th>Fairness</th>
−
      </div>    
+
            </tr>
−
      <div class="member-text">
+
            <tr>
−
       
+
              <th>iGEM team</th>
−
        <h3>Studies biochemistry &amp; biotechnologies at INSA Lyon</h3>
+
              <td class="green-cell">Technological and innovative challenge; responsible design</td>
−
        <h3>Press Manager</h3>
+
              <td class="green-cell">Design choices; no ideological/financial constraints </td>
−
        <p>
+
              <td class="green-cell">Respond to a worldwide problem</td>
−
          In the lab, Margaux never goes anywhere without her notebook, writing everything in it. Her personal globetrotting experience was a great help to organize our trip to Boston: Airbnb and Air France have no secrets for her! She is also our reference for the ravishing tongue of Shakespeare, she will be fluent in no time.
+
            </tr>
−
        </p>
+
            <tr>
−
      </div>
+
              <th>NGO</th>
−
    </section>
+
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td class="red-cell">Inclusion in the conception process</td>
 +
              <td class="green-cell">Transparency of design</td>
 +
              <td class="green-cell">Improving everyday life</td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td class="green-cell">Early risk management</td>
 +
              <td class="green-cell">Respect of biodiversity</td>
 +
              <td class="green-cell">Eco-friendly by design</td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td class="green-cell">Safe in accordance with public policies </td>
 +
              <td class="green-cell">Transparency of design</td>
 +
              <td class="green-cell">Social inclusion</td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td class="orange-cell">No long term negative impact</td>
 +
              <td class="green-cell">Transparency of design</td>
 +
              <td class="orange-cell">No long term inequalities</td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td class="orange-cell">No long term negative impact</td>
 +
              <td class="green-cell">Discussion about synthetic biology</td>
 +
              <td class="orange-cell">No long term inequalities</td>
 +
            </tr>
 +
          </table>
 +
        </div>
  
−
    <section class="member_name">
 
−
      <h1>Anna Thibert</h1>
 
−
    </section>
 
−
    <section class="member">
 
−
      <div class="img-hover-reveal-inv">
 
−
        <img src="https://static.igem.org/mediawiki/2017/c/ca/T--INSA-UPS_France--Team-members_Croco_Anna.png" alt="" class="img-invisible-inv">
 
−
        <img src="https://static.igem.org/mediawiki/2017/a/ad/T--INSA-UPS_France--Team-members_Anna.jpg" alt="" class="img-visible-inv">
 
−
      </div>     
 
−
      <div class="member-text">
 
−
       
 
−
        <h3>Studies bioinformatics &amp; systems biology at Paul Sabatier University</h3>
 
−
        <h3>Wiki geek</h3>
 
−
        <p>
 
−
          Anna builds the wiki with a lot of hard work, strong efficiency and a great sense of design, fueling herself with her secret coffee recipe. Even if she is an informatician, she fell in love with minipreps, analytical digestions and agarose gels, and became a great molecular biologist! She even integrated the biologist&rsquo;s humor, and always finds a way to refer to an enzyme or a plasmid. Now, she can switch from one field to the other as easily as on her rollerskates.
 
−
        </p>
 
−
      </div>
 
−
    </section>
 
  
−
    <section class="member_name">
+
        <div class="matrix m-2">
−
      <h1>Maxant Viver</h1>
+
          <table>
−
    </section>
+
            <tr>
−
    <section class="member">
+
              <td style="border:none; background:none;"></td>
−
      <div class="img-hover-reveal-inv">
+
              <th>Well-being</th>
−
        <img src="https://static.igem.org/mediawiki/2017/5/5c/T--INSA-UPS_France--Team-members_Croco_Maxant.png" alt="" class="img-invisible-inv">
+
              <th>Autonomy</th>
−
        <img src="https://static.igem.org/mediawiki/2017/6/63/T--INSA-UPS_France--Team-members_Maxant.jpg" alt="" class="img-visible-inv">
+
              <th>Fairness</th>
−
      </div>    
+
            </tr>
−
      <div class="member-text">
+
            <tr>
−
       
+
              <th>iGEM team</th>
−
        <h3>Studies biological engineering at INSA Toulouse</h3>
+
              <td></td>
−
        <h3>Treasure keeper</h3>
+
              <td></td>
−
        <p>
+
              <td></td>
−
          He works hard with treasury and sponsoring to fund our project, and suffer chronic heart failures whenever he hears: &ldquo;we need to buy another enzyme&rdquo;. He is also our hero: with him, our lab stays a clean and tidy place! He comes to master our vintage autoclave pretty well. We&rsquo;re still trying to locate his home, somehow lost in the countryside...
+
            </tr>
−
        </p>
+
            <tr>
−
      </div>
+
              <th>NGO</th>
−
    </section>
+
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
  
−
    <section class="member_name">
 
−
      <h1>Paul Zanoni</h1>
 
−
    </section>
 
−
    <section class="member">
 
−
      <div class="img-hover-reveal-inv">
 
−
        <img src="https://static.igem.org/mediawiki/2017/5/58/T--INSA-UPS_France--Team-members_Croco_Paul.png" alt="" class="img-invisible-inv">
 
−
        <img src="https://static.igem.org/mediawiki/2017/4/48/T--INSA-UPS_France--Team-members_Paul.jpg" alt="" class="img-visible-inv">
 
−
      </div>     
 
−
      <div class="member-text">
 
−
       
 
−
        <h3>Studies biochemistry &amp; biotechnologies at INSA Lyon</h3>
 
−
        <h3>Registry builder</h3>
 
−
        <p>
 
−
          Paul is responsible of Integrated Human Practices and Registry. Usually located in the ethidium bromide room, being in contact with this dangerous molecule gave him supernatural powers: he has successful cloning with strange methods, and has a special talent for ethical considerations. Ethidium bromide also transformed him into a fun facts machine, but these facts will be kept confidential...
 
−
        </p>
 
−
      </div>
 
−
    </section>
 
  
−
  </div>
+
        <div class="matrix m-3">
 +
          <table>
 +
            <tr>
 +
              <td style="border:none; background:none;"></td>
 +
              <th>Well-being</th>
 +
              <th>Autonomy</th>
 +
              <th>Fairness</th>
 +
            </tr>
 +
            <tr>
 +
              <th>iGEM team</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>NGO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
  
−
  <section style="background:none;padding:0px !important;z-index:100; margin-bottom:30px; ">
+
        <div class="matrix m-4">
−
      <h1 style="font-size:60pt;letter-spacing: 0.2em;z-index:120;text-align: center;">Advisors &amp; Instructors</h1>
+
          <table>
−
    </section>
+
            <tr>
 +
              <td style="border:none; background:none;"></td>
 +
              <th>Well-being</th>
 +
              <th>Autonomy</th>
 +
              <th>Fairness</th>
 +
            </tr>
 +
            <tr>
 +
              <th>iGEM team</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>NGO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
  
−
    <style>
+
        <div class="matrix m-5">
−
      .instr-img img{
+
          <table>
−
        width:100%;
+
            <tr>
−
      }
+
              <td style="border:none; background:none;"></td>
−
      .instr-img{
+
              <th>Well-being</th>
−
        width:100%;
+
              <th>Autonomy</th>
−
      }
+
              <th>Fairness</th>
−
      .advisors{
+
            </tr>
−
        border-collapse: separate;
+
            <tr>
−
        border-spacing:20px;
+
              <th>iGEM team</th>
−
        table-layout:fixed;
+
              <td></td>
−
      }
+
              <td></td>
−
      .advisors td{
+
              <td></td>
−
        border-radius:10px;
+
            </tr>
−
        overflow:hidden;
+
            <tr>
−
        background: rgba(255,255,255,0.2);
+
              <th>NGO</th>
−
        vertical-align: top;
+
              <td></td>
−
        width:33%;
+
              <td></td>
−
      }
+
              <td></td>
−
      .advisors td p{
+
            </tr>
−
        padding:10px;
+
            <tr>
−
      }
+
              <th>Users</th>
−
    </style>
+
              <td></td>
−
    <section style="background:none;">
+
              <td></td>
−
      <table class="advisors">
+
              <td></td>
−
        <tr>
+
            </tr>
−
          <td>
+
             <tr>
−
            <div class="instr-img"><img src="https://static.igem.org/mediawiki/2017/6/65/T--INSA-UPS_France--Team-members_Brice.jpg" alt=""></div>
+
               <th>Environment</th>
−
             <div class="instr-text">
+
               <td></td>
−
               <h2>Name</h2>
+
              <td></td>
−
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos libero, iure. Officia ab repudiandae quos perferendis temporibus doloremque beatae ipsam libero quaerat aliquid. Expedita distinctio est, molestiae porro deleniti laboriosam?</p>
+
              <td></td>
−
            </div>
+
            </tr>
−
          </td>
+
             <tr>
−
          <td>
+
              <th>Government</th>
−
             <div class="instr-img"><img src="https://static.igem.org/mediawiki/2017/0/0a/T--INSA-UPS_France--Team-members_Regis.jpg" alt=""></div>
+
              <td></td>
−
             <div class="instr-text">
+
              <td></td>
−
               <h2>Name</h2>
+
              <td></td>
−
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ratione illo sapiente quasi repellendus aliquam magnam rem, perferendis iusto. Et quidem, neque rem ipsam quisquam adipisci sequi? Quo accusamus, aperiam!</p>
+
            </tr>
−
            </div>
+
             <tr>
−
          </td>
+
               <th>WHO</th>
−
          <td>
+
               <td></td>
−
             <div class="instr-img"><img src="https://static.igem.org/mediawiki/2017/6/69/T--INSA-UPS_France--Team-members_Steph.png" alt=""></div>
+
              <td></td>
−
             <div class="instr-text">
+
              <td></td>
−
               <h2>Name</h2>
+
            </tr>
−
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit optio cumque perspiciatis blanditiis obcaecati officia, sunt sed, maiores vero harum facere fugit temporibus libero dignissimos cupiditate ipsum. Delectus, iusto, consequuntur!</p>
+
             <tr>
−
            </div>
+
              <th>Water treatment firm</th>
−
          </td>
+
              <td></td>
−
        </tr>
+
              <td></td>
−
      </table>
+
              <td></td>
−
    </section>
+
            </tr>
 +
             <tr>
 +
               <th>Non stakeholders</th>
 +
               <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
  
 +
        <div class="matrix m-6">
 +
          <table>
 +
            <tr>
 +
              <td style="border:none; background:none;"></td>
 +
              <th>Well-being</th>
 +
              <th>Autonomy</th>
 +
              <th>Fairness</th>
 +
            </tr>
 +
            <tr>
 +
              <th>iGEM team</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>NGO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
 +
 +
        <div class="matrix m-7">
 +
          <table>
 +
            <tr>
 +
              <td style="border:none; background:none;"></td>
 +
              <th>Well-being</th>
 +
              <th>Autonomy</th>
 +
              <th>Fairness</th>
 +
            </tr>
 +
            <tr>
 +
              <th>iGEM team</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>NGO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
 +
 +
        <div class="matrix m-8">
 +
          <table>
 +
            <tr>
 +
              <td style="border:none; background:none;"></td>
 +
              <th>Well-being</th>
 +
              <th>Autonomy</th>
 +
              <th>Fairness</th>
 +
            </tr>
 +
            <tr>
 +
              <th>iGEM team</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>NGO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Users</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Environment</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Government</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>WHO</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Water treatment firm</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
            <tr>
 +
              <th>Non stakeholders</th>
 +
              <td></td>
 +
              <td></td>
 +
              <td></td>
 +
            </tr>
 +
          </table>
 +
        </div>
 +
        </div>
 +
 +
      </div>
 +
    </div>
 +
   
 
   </div>
 
   </div>
−
  </div>
+
</div>
 +
 
 +
 
 +
  <style>
 +
 
 +
footer{
 +
  position:relative;
 +
  text-align:center;
 +
  margin-top:20px;
 +
  background: #323537;
 +
  width:100%;
 +
}
 +
 
 +
/* CONTACT ICONS */
 +
 
 +
.icons{ 
 +
  display:inline-block;
 +
  margin:40px 0;
 +
 
 +
 
 +
}
 +
 
 +
.icons > 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 */
 +
 
 +
.footer_sponsors img{
 +
  max-height:50px;
 +
  display:inline-block;
 +
  margin:10px;
 +
  opacity:0.5;
 +
}
 +
.footer_sponsors img:hover{
 +
  opacity:1;
 +
}
  
 +
</style>
 
   <footer>
 
   <footer>
 
      
 
      
Line 376: Line 750:
  
  
 +
 +
 +
<!-- C O N T E N T -->
 +
 +
 +
<script type="text/javascript">
 +
 +
  $(document).on("click",".step > div", function(){
 +
    var target_str=$(this).data("target");
 +
    var target=parseInt(target_str);
 +
    // Img & matrix
 +
    $('.process-container img').removeClass('visible');
 +
    $("#mat-img-"+target_str).addClass('visible');
 +
    $('.matrix').removeClass('visible');
 +
    $(".m-"+target_str).addClass('visible');
 +
    // Step & path
 +
    $('.step-path > div').removeClass('active-path');
 +
    $('.step > div').removeClass('previous-step');
 +
    $('.step > div').removeClass('selected-step');
 +
    $(this).addClass('selected-step');
 +
    for (i=1; i<=target; i++){
 +
      $('#path-'+i).addClass('active-path');
 +
      $('[data-target="'+(i-1)+'"]').addClass('previous-step');
 +
    }
 +
  });
 +
</script>
 +
 +
 +
</body>
 
</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 11:23, 25 October 2017


Croc'n Cholera
iGEM UPS-INSA Toulouse 2017

Integrated Human Practices

1
2
3
4
5
6
7
8
Well-being Autonomy Fairness
iGEM team Technological and innovative challenge; responsible design Design choices; no ideological/financial constraints Respond to a worldwide problem
NGO
Users Inclusion in the conception process Transparency of design Improving everyday life
Environment Early risk management Respect of biodiversity Eco-friendly by design
Government Safe in accordance with public policies Transparency of design Social inclusion
WHO
Water treatment firm No long term negative impact Transparency of design No long term inequalities
Non stakeholders No long term negative impact Discussion about synthetic biology No long term inequalities
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders
Well-being Autonomy Fairness
iGEM team
NGO
Users
Environment
Government
WHO
Water treatment firm
Non stakeholders