Difference between revisions of "Team:Montpellier/Team"

 
(55 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+
<head>
    <head>
+
  <meta charset="utf-8" />
        <meta charset="utf-8" />
+
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />  
+
  <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
        <title>Team</title>
+
  <title>Team</title>
        <script
+
  <script
 
   src="https://code.jquery.com/jquery-3.3.1.min.js"
 
   src="https://code.jquery.com/jquery-3.3.1.min.js"
 
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 
   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
 
   crossorigin="anonymous"></script>
 
   crossorigin="anonymous"></script>
</head>
 
  
<style>
+
  <style>
/*iciici*/
+
@font-face {
+
  font-family: 'gothic';
+
  src: url('./gothic_mtp.eot');
+
  src: local('gothic_mtp'), url('./gothic_mtp.woff') format('woff'), url('./gothic_mtp.ttf') format('truetype');
+
}
+
  
 +
  p {
 +
    text-align: justify;
 +
  }
  
/*Barre de navigation ******************************************************************************************************************************************************/
+
   .advisors
 
+
   {
* {
+
   font-family: 'gothic', sans-serif;
+
}
+
 
+
body {
+
  margin: 0;
+
  padding: 0;
+
  font-family: 'gothic', sans-serif;
+
}
+
 
+
header > nav {
+
  display: flex;
+
  flex-direction: row;
+
  align-items: center;
+
  justify-content: flex-start;
+
  margin: 0;
+
  background: #ffffff;
+
  flex-shrink: 0;
+
  flex-wrap: no-wrap;
+
  text-transform: capitalize;
+
}
+
 
+
.logo_vagineering_navbar {
+
   padding: 1em;
+
  align-self: center;
+
}
+
 
+
.menus {
+
  display: flex;
+
  flex-direction: row;
+
  align-items: stretch;
+
  justify-content: flex-start;
+
  margin: 0;
+
  background: #ffffff;
+
  flex-wrap: wrap;
+
  max-width: 100%;
+
  align-content: space-between;
+
}
+
 
+
nav a {
+
  display: flex;
+
  background-color: #ffffff;
+
  padding: 1.5em 1em 1em 1em;
+
  transition: all 0.2s;
+
  margin: 0;
+
  color: black;
+
  flex-direction: column;
+
  justify-content: flex-end;
+
  align-items: center;
+
}
+
 
+
nav a:hover {
+
  background-color: #f9f4eb;
+
}
+
 
+
nav a img {
+
  margin: 0px 10px 10px 10px;
+
}
+
 
+
/*Big links only*/
+
 
+
nav > a {
+
  border-bottom: 1px solid black;
+
}
+
 
+
nav > a:hover, nav > a.expanded {
+
  border-bottom: 1px dotted black;
+
}
+
 
+
nav nav { /*submenus*/
+
  display: flex;
+
  flex-direction: row;
+
  justify-content: stretch;
+
  align-items: stretch;
+
  opacity: 1;
+
  margin: 0px 10px 0.5em 0.5em;
+
}
+
 
+
nav nav.invisible {
+
 
+
}
+
 
+
nav nav > div /*subitems*/{
+
  display: flex;
+
  flex-direction: column;
+
  justify-content: flex-start;
+
  position: absolute;
+
}
+
 
+
nav > div > a {
+
  opacity: 0;
+
  padding: 1em;
+
}
+
 
+
/*All sublinks except the last*/
+
nav > div > a:not(:last-child) {
+
  border-bottom: 1px dotted black;
+
}
+
 
+
.icone_navbar {
+
  height: 3em;
+
}
+
 
+
.logo_vagineering_navbar {
+
  height: 4.9em;
+
}
+
 
+
/*formatage du texte**************************************************************************************************************************/
+
 
+
section
+
{
+
  margin-left: 150px;
+
  margin-right: 150px;
+
  text-align: justify;
+
}
+
 
+
h1 {
+
  color:#E64254;
+
  font-size: 2.5em;
+
  text-transform: uppercase;
+
}
+
 
+
h2 {
+
  color:#ea6171;
+
  font-size: 1.8em;
+
  margin-top: 50px;
+
  margin-bottom: 50px;
+
}
+
 
+
h3 {
+
  color:#ed7885;
+
  font-size: 1.3em;
+
}
+
 
+
h4 {
+
  color:#f08e9a;
+
  font-size: 1.2em;
+
}
+
 
+
h1,h2,h3,h4 {
+
  text-align: center;
+
}
+
 
+
p {
+
  font-size: 1.1em;
+
  padding: 0px;
+
}
+
 
+
table {
+
  margin: auto;
+
  font-size: 1.1em;
+
  border-collapse: collapse;
+
  width: 95%;
+
}
+
 
+
td, th {
+
  border: 2px solid #ddc0a8;
+
  padding: 8px;
+
  text-align: center;
+
}
+
 
+
caption {
+
  text-align: left;
+
  caption-side: bottom;
+
  margin: 5px;
+
}
+
 
+
li {
+
  font-size: 1.1em;
+
  line-height: 1.2;
+
}
+
 
+
hr {
+
  width: 300px;
+
  margin-bottom: 50px;
+
  border: none;
+
  border-top: 2px solid #557081;
+
  border-radius: 6px;
+
}
+
 
+
.underline {
+
  text-decoration: underline;
+
}
+
 
+
.red {
+
  color: #f85a7a;
+
  font-weight: bold;
+
}
+
 
+
.bold {
+
  font-weight: bold;
+
}
+
 
+
/******REFERENCES STYLE**********************************************************************************************************************************************************/
+
 
+
.references_title {
+
  color:#ea6171;
+
  font-size: 1.5em;
+
}
+
 
+
.references_table {
+
  font-size: 1em;
+
}
+
 
+
.references_left {
+
  border: none;
+
  border-left: 2px solid #ddc0a8;
+
}
+
 
+
.references_right {
+
  border: none;
+
  border-right: 2px solid #ddc0a8;
+
}
+
 
+
.references_bottom_left {
+
  border: none;
+
  border-bottom: 2px solid #ddc0a8;
+
  border-left: 2px solid #ddc0a8;
+
}
+
 
+
.references_bottom_right {
+
  border: none;
+
  border-bottom: 2px solid #ddc0a8;
+
  border-right: 2px solid #ddc0a8;
+
}
+
 
+
/**********************************************************************/
+
 
+
.legende {
+
  text-align:center;
+
  text-decoration: underline;
+
}
+
 
+
.image {
+
    display: block;
+
    margin-left: auto;
+
    margin-right: auto;
+
}
+
 
+
.ordinateur {
+
    text-align : center;
+
}
+
 
+
 
+
 
+
/* .fleche{
+
    justify-content: center;
+
    position:fixed;
+
    vertical-align:middle;
+
    z-index:10;
+
    width:2%;
+
    top:42%;
+
    right:30px;
+
}
+
 
+
.fleche :hover{
+
  color: #3298CB;
+
} */
+
 
+
/******FOOTER************************************************************************************************************************************************/
+
 
+
footer {
+
  margin-top: 70px;
+
}
+
 
+
.p_footer
+
{
+
    margin: none !important;
+
    padding: none !important;
+
}
+
 
+
.footer_snetwork
+
{
+
    border-top: solid 1px black;
+
    margin-top: 10px;
+
    padding-top: 20px;
+
 
     display: flex;
 
     display: flex;
 +
    flex-direction: row;
 
     justify-content: space-around;
 
     justify-content: space-around;
}
+
  }
  
#conteneur
 
{
 
    display: flex;
 
    flex-wrap: wrap;
 
    justify-content: space-around;
 
}
 
  
.lienimage
+
  .phototeamcenter  {
{
+
     transform: rotate(-90deg);
     text-decoration: none !important;
+
    transform-origin: center;
}
+
    margin: auto;
 +
    height: 200px;
 +
    max-width: 200px;
 +
    flex: 0 0 auto;
 +
    object-fit: scale-down;
 +
  }
  
.image_snetwork
+
   .element, .advisor {
{
+
    height: 60px;
+
    padding: 1% 3%;
+
    opacity : 0.5;
+
    filter: grayscale(100%);
+
}
+
 
+
/************FA_ICONS_REACTIVE****************************************************************************************************************************************************/
+
 
+
.fa-facebook
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-facebook:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-instagram
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-instagram:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-twitter-square
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-twitter-square:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-home
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-home:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-heart
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-heart:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-envelope
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-envelope:hover
+
{
+
    color: #e64254;
+
}
+
 
+
.fa-map-marker-alt
+
{
+
    -o-transition:.5s;
+
    -ms-transition:.5s;
+
    -moz-transition:.5s;
+
    -webkit-transition:.5s;
+
    transition: .5s;
+
    color: #000000;
+
}
+
 
+
.fa-map-marker-alt:hover
+
{
+
    color: #e64254;
+
}
+
 
+
/******************************FA_ICONS************************************************************************************************************************************************/
+
 
+
.fab fa-facebook:before
+
{
+
    content: "\f09a";
+
}
+
 
+
.fab fa-instagram:before
+
{
+
    content: "\f16d";
+
}
+
 
+
.fab fa-twitter-square:before
+
{
+
    content: "\f081";
+
}
+
 
+
.fas fa-home:before
+
{
+
    content: "\f015";
+
}
+
 
+
.fas fa-heart:before
+
{
+
    content: "\f004";
+
}
+
 
+
.fas fa-map-marker-alt:before
+
{
+
    content: "\f3c5";
+
}
+
 
+
.fas fa-envelope:before
+
{
+
    content: "\f0e0";
+
}
+
 
+
.far fa-arrow-alt-circle-right:before
+
{
+
   content: "\f35a";
+
}
+
 
+
/******END_FA_ICONS*************************************************************************************************************************************************************************/
+
 
+
.usefull_links
+
{
+
    text-align: center;
+
    width: 33.3%;
+
}
+
 
+
.follow_us
+
{
+
    text-align: center;
+
    border-right: solid 1px black;
+
    border-left: solid 1px black;
+
    width: 33.3%;
+
}
+
 
+
.follow_us_icons
+
{
+
 
     display: flex;
 
     display: flex;
     justify-content: space-around;
+
    flex-direction: column;
}
+
     justify-content: center;
 
+
.contact_us
+
{
+
 
     text-align: center;
 
     text-align: center;
     width: 33.3%;
+
     width: 33%;
}
+
    margin: auto;
 +
  }
  
/****************PROTOCOLES_TABLE****************************************************************************************************************************************/
+
  .element h3, .advisor h3 {
 +
    font-size: 20px;
 +
  }
  
.accordion {
+
   .team {
    background-color: #fee7ea;
+
    font-size: 1.2em;
+
    text-align: left;
+
    cursor: pointer;
+
    width: 100%;
+
    outline: none;
+
    transition: 0.4s;
+
    border: none;
+
    padding: 13px;
+
    margin-bottom: 2px;
+
    border-radius: 5px;
+
}
+
 
+
.active, .accordion:hover {
+
    background-color: #fdced4;
+
}
+
 
+
.panel {
+
    padding: 0 18px;
+
    background-color: white;
+
    max-height: 0;
+
    overflow: hidden;
+
    transition: max-height 0.2s ease-out;
+
}
+
 
+
.accordion:after {
+
    content: '\002B'; /* Unicode character for "plus" sign (+) */
+
    float: right;
+
    margin-left: 5px;
+
    font-size: 18px;
+
}
+
 
+
.active:after {
+
    content: "\2212"; /* Unicode character for "minus" sign (-) */
+
    font-size: 18px;
+
}
+
 
+
.protocols_subpart {
+
   text-decoration: underline;
+
  font-weight: bold;
+
}
+
 
+
.protocols_title {
+
  text-align: left !important;
+
  color:#3a8f9c !important;
+
  font-size: 1.6em !important;
+
}
+
 
+
li table {
+
  font-size: 1em;
+
}
+
 
+
li p {
+
  font-size: 1em;
+
}
+
 
+
li li {
+
  font-size: 1em;
+
}
+
 
+
/*****************BOXES_ANTIBODIES******************************************************************************************************************************************************/
+
 
+
.boxbox {
+
  clear: both;
+
  display: inline-block;
+
  width: 100%;
+
  background-color: #FFFFFF;
+
  /* [disabled]min-width: 400px;
+
*/
+
  padding-bottom: 35px;
+
  padding-top: 0px;
+
  margin-top: -5px;
+
  margin-bottom: 0px;
+
}
+
 
+
.boxes {
+
  width: 23%;
+
  height: 615px;
+
  text-align: center;
+
  float: left;
+
  margin-top: 35px;
+
  background-color: #F8F8F8;
+
  padding-bottom: 20px;
+
  margin-left: 1%;
+
  margin-right: 1%;
+
  border-radius: 3px;
+
  padding-top: 20px;
+
  border-bottom: 4px solid #3a8f9c;
+
}
+
 
+
.cards {
+
  width: 300px;
+
  /*width: 100%;
+
  height: auto;
+
  max-width: 400px;
+
  max-height: 200px;*/
+
  opacity: 0.8;
+
  margin-top: -15px;
+
  margin-bottom: -20px;
+
}
+
 
+
.text_boxes {
+
  text-align: justify;
+
  margin: 10px;
+
  font-size: 1em;
+
}
+
 
+
/*********antibodies 2 colonnes********************************************************************************************************************************************/
+
 
+
.deux_colonnes {
+
  display: flex;
+
  align-content: space-between;
+
}
+
 
+
.colonne_1 {
+
  width: 50%;
+
  margin-right: 15px;
+
}
+
 
+
.colonne_2 {
+
  width: 50%;
+
  margin-left: 15px;
+
}
+
 
+
p {
+
  text-align: justify;
+
}
+
 
+
.advisors
+
{
+
    display: flex;
+
    justify-content: space-around;
+
   
+
}
+
 
+
 
+
.phototeamcenter  {
+
  transform: rotate(-90deg);
+
    height:200px;
+
 
+
 
+
}
+
 
+
.element {
+
  text-align: center;
+
}
+
.advisor {
+
  text-align:center;
+
}
+
 
+
 
+
.team {
+
 
     display: flex;
 
     display: flex;
 
     justify-content: center;
 
     justify-content: center;
 
     align-items: center;
 
     align-items: center;
}
+
  }
  
  
  
.imageBox {
+
  .imageBox, .photo {
  position: relative;
+
    position: relative;
  float: left;
+
    float: left;
}
+
  }
 +
  .imageBox .hoverImg {
 +
    position: absolute;
 +
    left: 0;
 +
    top: 0;
 +
    display: none;
  
.imageBox .hoverImg {
+
   }
   position: absolute;
+
  left: 0;
+
  top: 0;
+
  display: none;
+
+
}
+
  
.imageBox:hover .hoverImg {
+
  .imageBox:hover .hoverImg {
  display: block;
+
    display: block;
  
}  
+
  }
  
.phototeam {
+
  .phototeam {
  height:400px;
+
    max-height:400px;
  display: block;
+
    display: block;
 
     margin-left: auto;
 
     margin-left: auto;
     margin-right: auto
+
     margin-right: auto;
 +
  }
  
 +
  #bodyContent h1 {
 +
    margin: 1em;
 +
    line-height: 100%;
 +
  }
 +
  </style>
  
}
+
</head>
/*iciici*/
+
<body>
p {
+
text-align: justify;
+
}
+
  
.advisors
+
<img class="banniere" src="https://static.igem.org/mediawiki/2018/f/fa/T--Montpellier--banniere_team.png"/>
{
+
    display: flex;
+
    justify-content: space-around;
+
   
+
}
+
  
 +
  <section>
  
.phototeamcenter  {
+
     <img src="https://static.igem.org/mediawiki/2018/8/88/T--Montpellier--team_MTP.JPG" class="phototeam" />
transform: rotate(-90deg);
+
     height:200px;
+
  
 +
    <br/>
 +
    <br/>
 +
    <br/>
 +
    <br/>
 +
    <br/>
  
}
+
    <!-- Lea---------------------------------------------------------------------------------------------------------------------------------------------->
 +
    <div class="team">
  
.element {
+
      <div class="texte"><h2>Léa Meneu</h2><p>Early bird and night owl at the same time, Léa is the one spending the most time working at the bench. She is responsible for the good atmosphere in the lab with her music and party stories. Also her knowledge of Synthetic Biology is very helpful for the team throughout the months.</p></div>
text-align: center;
+
      <div class="imageBox">
}
+
        <div class="imageInn">
.advisor {
+
          <img src="https://static.igem.org/mediawiki/2018/7/74/T--Montpellier--lea1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
  text-align:center;
+
        </div>
}
+
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/3/36/T--Montpellier--lea2_mtp.png" alt="lea" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
      </div>
 +
    </div>
  
 +
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
.team {
 
    display: flex;
 
    justify-content: center;
 
    align-items: center;
 
}
 
  
 +
    <!-- Elsa------------------------------------------------------------------------------------------------------------------------------------------->
  
  
.imageBox {
+
    <div class="team">
  position: relative;
+
      <div class="imageBox">
  float: left;
+
        <div class="imageInn">
}
+
          <img src="https://static.igem.org/mediawiki/2018/c/cd/T--Montpellier--elsa1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/2/26/T--Montpellier--elsa2_mtp.png" alt="Elsa" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
  
.imageBox .hoverImg {
+
      </div>
  position: absolute;
+
      <div class="texte"><h2>Elsa Fristot</h2><p>Elsa is studying drug engineering at the Faculty of Pharmacy. This allows her to have a better vision of the future of our project. She worked with Tamara on the illustrations and she came up with the cool project title and logo.</p></div>
  left: 0;
+
  top: 0;
+
  display: none;
+
+
}
+
  
.imageBox:hover .hoverImg {
+
    </div>
  display: block;
+
  
}
 
  
.phototeam {
 
height:400px;
 
display: block;
 
    margin-left: auto;
 
    margin-right: auto
 
  
 +
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
}
+
    <!-- Tamara-------------------------------------------------------------------------------------------------------------------------------------------->
  
 +
    <div class="team">
 +
      <div class="texte"><h2>Tamara Yehouessi </h2><p>Tamara is a self-made artist studying Biotechnologies. She’s the one that had the original idea of the project. Together with Elsa she is responsible of a  the graphic and communication of Vagineering. She did a huge job at designing sequences (#SUF) and still managed to create the comic book.</p></div>
 +
      <div class="imageBox">
 +
        <div class="imageInn">
 +
          <img src="https://static.igem.org/mediawiki/2018/c/cc/T--Montpellier--tamara1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/d/de/T--Montpellier--tamara2_mtp.png" alt="Tamara" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
      </div>
 +
    </div>
  
</style>
+
    <br/><br/><br/>
<section>
+
    <br/><br/><br/>
<p><h1>The team </h1></p>
+
<img src="https://static.igem.org/mediawiki/2018/8/88/T--Montpellier--team_MTP.JPG" class="phototeam" />
+
  
<br>
+
    <!-- Younes------------------------------------------------------------------------------------------------------------------------------------------------->
<br>
+
  
<hr/>
+
    <div class="team">
<br>
+
      <div class="imageBox">
<br>
+
        <div class="imageInn">
<br>
+
          <img src="https://static.igem.org/mediawiki/2018/d/d0/T--Montpellier--younes1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/1/1a/T--Montpellier--younes2_mtp.png" alt="lea" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
  
<!--Lea---------------------------------------------------------------------------------------------------------------------------------------------->
+
      </div>
<div class="team">
+
      <div class="texte"><h2>Younes Babaaziz</h2><p>This Moroccan Biophysics student is responsible for the Spermatozoa Tracking software. He spends his days in front of his computer. Rarely taking a break, Younes is able to eat his lunch in up to 5 minutes to go back to work.</p></div>
  
<div class="texte"><h2>Léa</h2><p>Early bird and night owl at the same time, Léa is the one spending the most time working at the lab. She is responsible for the good atmosphere in the lab with her music and party stories. Also her knowledge of Synthetic Biology is very helpful for the team throughout the months.</p></div>
+
     </div>
<div class="imageBox">
+
  <div class="imageInn">
+
     <img src="https://static.igem.org/mediawiki/2018/d/d4/T--Montpellier--lea2.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
  <div class="hoverImg">
+
    <img src="https://static.igem.org/mediawiki/2018/6/6d/T--Montpellier--lea_lab2_mtp.JPG" alt="lea" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
</div>
+
</div>
+
  
</div>
 
  
<br>
 
<br>
 
  
 +
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
<!--Elsa------------------------------------------------------------------------------------------------------------------------------------------->
 
  
 +
    <!-- Marie---------------------------------------------------------------------------------------------------------------------------------------------------->
  
<div class="team"> 
 
<div class="imageBox">
 
  <div class="imageInn">
 
    <img src="https://static.igem.org/mediawiki/2018/1/13/T--Montpellier--Elsa_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
  <div class="hoverImg">
 
    <img src="https://static.igem.org/mediawiki/2018/0/0a/T--Montpellier--elsa_lab2_mtp.JPG" alt="Elsa" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
  
</div>
+
    <div class="team">
<div class="texte"><h2>Elsa</h2><p>Elsa is studying drug engineering at the Pharmacy University. This allowed her to have the better vision of the futures project. She worked with Tamara to create us designs and she went up with the cool project title and logo.</p></div>
+
      <div class="texte"><h2>Marie Peras</h2><p>Marie is the head of the wiki team. She is as able to spend hours coding as to stay very late at the lab for experiments. She is also in charge of the Sperm Motility Assay experiments. Her knowledge and experience in Biology, Computer Science and Physics opened a lot of doors.</p></div>
 +
      <div class="imageBox">
 +
        <div class="imageInn">
 +
          <img src="https://static.igem.org/mediawiki/2018/d/d6/T--Montpellier--marie1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/a/a9/T--Montpellier--marie2_mtp.png" alt="lea" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
      </div>
 +
    </div>
  
</div>
+
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
 +
    <!-- Julien----------------------------------------------------------------------------------------------------------------------------->
  
 +
    <div class="team">
 +
      <div class="imageBox">
 +
        <div class="imageInn">
 +
          <img src="https://static.igem.org/mediawiki/2018/4/47/T--Montpellier--julien1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/5/55/T--Montpellier--julien2_mtp.png" alt="lea" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
  
<br>
+
      </div>
<br>
+
      <div class="texte"><h2>Julien Mathieu</h2><p>Julien is our IT guy doing the bioinformatic part of the project. Doing a Master Degree in Biophysics he is always enthusiastic for doing Molecular Biology in the lab which allowed him to get away from his computer for some times (even though he would quickly go back to it). He always has an anecdote to tell during lunch times.</p></div>
  
<!--Tamara-------------------------------------------------------------------------------------------------------------------------------------------->
+
    </div>
  
<div class="team">
 
  <div class="texte"><h2>Tamara</h2><p>Tamara is a self-made artist studying Biotechnologies. She’s the one that had the original idea of the project. She is responsible for a big part of graphics and communication for the team along with Elsa. She did a huge job at designing sequences (#SUF) and still managed to create the comic book.</p></div>
 
<div class="imageBox">
 
  <div class="imageInn">
 
    <img src="https://static.igem.org/mediawiki/2018/9/97/T--Montpellier--Tamara_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
  <div class="hoverImg">
 
    <img src="https://static.igem.org/mediawiki/2018/2/26/T--Montpellier--tamara_lab2_mtp.JPG" alt="Tamara" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
</div>
 
</div>
 
  
</div>
 
<br>
 
<br>
 
  
<!--Younes------------------------------------------------------------------------------------------------------------------------------------------------->
+
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
  <div class="team"> 
+
     <!-- Léo------------------------------------------------------------------------------------------------------------------------------------->
<div class="imageBox">
+
  <div class="imageInn">
+
     <img src="https://static.igem.org/mediawiki/2018/b/bc/T--Montpellier--Younes_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
  <div class="hoverImg">
+
    <img src="https://static.igem.org/mediawiki/2018/3/37/T--Montpellier--Younes_lab_MTP.JPG" alt="lea" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
  
</div>
+
    <div class="team">
<div class="texte"><h2>Younes</h2><p>This Moroccan Biophysics student is responsible for the Modelling and Spermatozoa Tracking. He spends his days in front of his computer. Rarely taking a break Younes is able to eat his lunch in up to 5 minutes to go back to work. </p></div>
+
      <div class="texte"><h2>Leo Carrillo</h2><p>Léo is the best team manager we could have ever hoped for. (He forced me to write this, he is a tyrant, help us please &#9785;). Always there to remind us that it’s not time to go back home ... but we will follow like baby sheep our leader to the gold medal.</p></div>
 +
      <div class="imageBox">
 +
        <div class="imageInn">
 +
          <img src="https://static.igem.org/mediawiki/2018/c/cb/T--Montpellier--leo1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
        <div class="hoverImg">
 +
          <img src="https://static.igem.org/mediawiki/2018/1/1e/T--Montpellier--leo2_mtp.png" alt="lea" style = "transform: rotate(-90deg); height:200px">
 +
        </div>
 +
      </div>
  
</div>
+
    </div>
  
 +
    <br/><br/><br/>
 +
    <br/><br/><br/>
  
 +
    <!-- Miguel---------------------------------------------------------------------------------------------------------------------------------------->
  
<br>
 
<br>
 
  
  
<!--Marie---------------------------------------------------------------------------------------------------------------------------------------------------->
+
    <div class="team">
+
      <div class="photo"><img src="https://static.igem.org/mediawiki/2018/4/41/T--Montpellier--miguel1_mtp.png" style = "height:200px; transform: rotate(-90deg); "/></div>
 +
      <div class="texte"><h2>Miguel Enrique Camacho Rufino</h2><p>Miguel is from Peru. He never hesitates to tell us how much the things that we do here seem weird to him. He is the main reason lab working is fun for us. He always has a fun story to say and some of his sentences became very popular in the team. His knowledge of molecular biology helped us in many occasions.</p></div>
 +
      </div>
  
<div class="team">
+
      <br/><br/><br/>
  <div class="texte"><h2>Marie</h2><p>Marie is the head of the wiki team. She is as able to spend hours coding as to stay very late at the lab for experiments. She is also in charge of the Sperm Motility Assay experiments. Her knowledge and experience in Biology, Computer Science and Physics opened a lot of doors.</p></div>
+
     <br/><br/><br/>
<div class="imageBox">
+
  <div class="imageInn">
+
     <img src="https://static.igem.org/mediawiki/2018/a/a2/T--Montpellier--Marie_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
  <div class="hoverImg">
+
    <img src="https://static.igem.org/mediawiki/2018/3/3f/T--Montpellier--marie_lab2_mtp.JPG" alt="lea" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
</div>
+
</div>
+
  
</div>
+
      <!-- Maxime----------------------------------------------------------------------------------------------------------------------------------------------->
<br>
+
<br>
+
  
<!-----------------------Julien----------------------------------------------------------------------------------------------------------------------------->
+
      <div class="team">
 +
        <div class="texte"><h2>Maxime Heintzé</h2><p>Maxime is a curly-haired longboard-rider Biotechnology student. He’s very good at making very bad puns. He’s part of the wiki team with Marie and likes to spend his afternoons coding in a couch.</p></div>
  
<div class="team"> 
+
        <div class="imageBox">
<div class="imageBox">
+
          <div class="imageInn">
  <div class="imageInn">
+
            <img src="https://static.igem.org/mediawiki/2018/1/1a/T--Montpellier--maxime1_mtp.png" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
    <img src="https://static.igem.org/mediawiki/2018/9/92/T--Montpellier--Julien_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
+
          </div>
  </div>
+
          <div class="hoverImg">
  <div class="hoverImg">
+
            <img src="https://static.igem.org/mediawiki/2018/8/86/T--Montpellier--maxime2_mtp.png" alt="Maxime" style = "transform: rotate(-90deg); height:200px">
    <img src="https://static.igem.org/mediawiki/2018/8/8d/T--Montpellier--Julien_labo_MTP.JPG" alt="lea" style = "transform: rotate(-90deg); height:200px">
+
          </div>
  </div>
+
        </div>
  
</div>
+
      </div>
<div class="texte"><h2>Julien</h2><p>Julien is our IT guy doing the bioinformatic part of the project. Doing a Master Degree in Biophysics he is always enthusiastic for doing Molecular Biology in the lab which allowed him to get away from his computer for some times (even though he would quickly go back to it). He always has an anecdote to tell during lunch times.</p></div>
+
  
</div>
 
  
 +
      <br/><br/><br/>
 +
    <br/><br/><br/>
  
  
<br>
+
      <h1>Principal Instructors</h1>
<br>
+
      <div class="advisors">
 +
        <div class="element">
 +
          <img src="https://static.igem.org/mediawiki/2018/7/71/T--Montpellier--Luca_Montpellier.JPG" class="phototeamcenter"/>
 +
          <h3>Luca Ciandrini</h3>
 +
        </div>
 +
      <div class="element">
 +
        <img src="https://static.igem.org/mediawiki/2018/5/5f/T--Montpellier--Jerome_Montpellier.JPG" class="phototeamcenter"/>
 +
        <h3>Jérôme Bonnet</h3>
 +
      </div>
 +
      <div class="element">
 +
        <img src="https://static.igem.org/mediawiki/2018/e/e5/T--Montpellier--Guillaume_Montpellier.JPG" class="phototeamcenter"/>
 +
        <h3>Guillaume Cambray</h3>
 +
      </div>
 +
    </div>
  
<!----------------Léo------------------------------------------------------------------------------------------------------------------------------------->
+
    <h1>Instructors</h1>
  
 +
    <div class="advisors">
  
<br>
+
      <div class="element">
<br>
+
        <img src="https://static.igem.org/mediawiki/2018/d/d2/T--Montpellier--Hung_Ju_Montpellier.JPG" class="phototeamcenter"/>
 +
        <h3>Hung Ju Chang</h3>
 +
      </div>
 +
      <div class="element">
 +
        <img src="https://static.igem.org/mediawiki/2018/2/29/T--Montpellier--Ana_Montpellier.JPG" class="phototeamcenter"/>
 +
        <h3>Ana Zuniga</h3>
 +
      </div>
 +
      <div class="element">
 +
        <img src="https://static.igem.org/mediawiki/2018/2/28/T--Montpellier--Peter_Montpellier.JPG" class="phototeamcenter"/>
 +
        <h3>Peter Voyvodic</h3>
 +
      </div>
 +
    </div>
  
 +
    <h1>Advisor</h1>
  
 +
    <div class="advisor">
 +
      <img src="https://static.igem.org/mediawiki/2018/7/76/T--Montpellier--Sarah_Montpellier.JPG" class="phototeamcenter"/>
 +
      <h3>Sarah Guiziou</h3>
 +
    </div>
  
<div class="team">
+
   </section>
   <div class="texte"><h2>Leo</h2><p>Léo is the best team manager we could have ever hoped for. (He forced me to write this, he is a tyrant, help us please &#9785;). </p></div>
+
<div class="imageBox">
+
  <div class="imageInn">
+
    <img src="https://static.igem.org/mediawiki/2018/a/a1/T--Montpellier--Leo_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
  <div class="hoverImg">
+
    <img src="https://static.igem.org/mediawiki/2018/5/59/T--Montpellier--Leo_labo_MTP.JPG" alt="lea" style = "transform: rotate(-90deg); height:200px">
+
  </div>
+
</div>
+
  
</div>
+
</body>
  
</div>
+
</html>
  
<br>
 
<br>
 
  
<!----------Miguel---------------------------------------------------------------------------------------------------------------------------------------->
 
  
 
 
<div class="team">
 
<div class="photo"><img src="https://static.igem.org/mediawiki/2018/9/92/T--Montpellier--Miguel_Montpellier.JPG" class="phototeamcenter"/></div>
 
<div class="texte"><h2>Miguel</h2><p>Miguel is from Peru. He never hesitates to tell us how much the things that we do here seem weird to him. He is the main reason labworking is fun for us. He always has a fun story to say and some of his sentences became very famous in the team.
 
His knowledge of molecular biology helped us on many occasions.</p></div>
 
</div>
 
 
<br>
 
<br>
 
 
<!----Maxime----------------------------------------------------------------------------------------------------------------------------------------------->
 
 
<div class="team">
 
  <div class="texte"><h2>Maxime</h2><p>Maxime is a curly-haired longboard-rider Biotechnologies student. He’s very good at making very bad puns. He’s part of the wiki team with Marie and likes to spend his afternoons coding in a couch.</p></div>
 
 
 
<div class="imageBox">
 
  <div class="imageInn">
 
    <img src="https://static.igem.org/mediawiki/2018/e/ea/T--Montpellier--Maxime_Montpellier.JPG" alt="Default Image" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
  <div class="hoverImg">
 
    <img src="https://static.igem.org/mediawiki/2018/3/33/T--Montpellier--maxime_lab2_mtp.JPG" alt="Maxime" style = "transform: rotate(-90deg); height:200px">
 
  </div>
 
</div>
 
 
</div>
 
 
</div>
 
 
 
<br>
 
<br>
 
<br>
 
 
 
 
 
 
 
 
 
 
 
 
<p><h1>Personal Instrutors</h1></p>
 
<br>
 
<br>
 
<br>
 
 
<div class="advisors">
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/7/71/T--Montpellier--Luca_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Luca Ciandrini</h3></p></div>
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/5/5f/T--Montpellier--Jerome_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Jérôme Bonnet</h3></p></div>
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/e/e5/T--Montpellier--Guillaume_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Guillaume Cambray</h3></p></div>
 
</div>
 
 
<p><h1>Instructors</h1></p>
 
<br>
 
  <br>
 
  <br>
 
 
<div class="advisors">
 
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/d/d2/T--Montpellier--Hung_Ju_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Hung Ju Chang</h3></p></div>
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/2/29/T--Montpellier--Ana_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Ana Zuniga</h3></p></div>
 
    <div class="element"><img src="https://static.igem.org/mediawiki/2018/2/28/T--Montpellier--Peter_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Peter Voyvodic</h3></p></div>
 
</div>
 
 
<h1>Advisor</h1>
 
 
<br>
 
<br>
 
<br>
 
 
<div class="advisor"><img src="https://static.igem.org/mediawiki/2018/7/76/T--Montpellier--Sarah_Montpellier.JPG" class="phototeamcenter"/><p><br><h3>Sarah Guiziou</h3></p></div>
 
 
</section>
 
 
</body>
 
 
</html>
 
  
 
{{Template:Montpellier/Footer}}
 
{{Template:Montpellier/Footer}}

Latest revision as of 16:23, 7 December 2018

Team






Léa Meneu

Early bird and night owl at the same time, Léa is the one spending the most time working at the bench. She is responsible for the good atmosphere in the lab with her music and party stories. Also her knowledge of Synthetic Biology is very helpful for the team throughout the months.

Default Image
lea






Default Image
Elsa

Elsa Fristot

Elsa is studying drug engineering at the Faculty of Pharmacy. This allows her to have a better vision of the future of our project. She worked with Tamara on the illustrations and she came up with the cool project title and logo.







Tamara Yehouessi

Tamara is a self-made artist studying Biotechnologies. She’s the one that had the original idea of the project. Together with Elsa she is responsible of a the graphic and communication of Vagineering. She did a huge job at designing sequences (#SUF) and still managed to create the comic book.

Default Image
Tamara






Default Image
lea

Younes Babaaziz

This Moroccan Biophysics student is responsible for the Spermatozoa Tracking software. He spends his days in front of his computer. Rarely taking a break, Younes is able to eat his lunch in up to 5 minutes to go back to work.







Marie Peras

Marie is the head of the wiki team. She is as able to spend hours coding as to stay very late at the lab for experiments. She is also in charge of the Sperm Motility Assay experiments. Her knowledge and experience in Biology, Computer Science and Physics opened a lot of doors.

Default Image
lea






Default Image
lea

Julien Mathieu

Julien is our IT guy doing the bioinformatic part of the project. Doing a Master Degree in Biophysics he is always enthusiastic for doing Molecular Biology in the lab which allowed him to get away from his computer for some times (even though he would quickly go back to it). He always has an anecdote to tell during lunch times.







Leo Carrillo

Léo is the best team manager we could have ever hoped for. (He forced me to write this, he is a tyrant, help us please ☹). Always there to remind us that it’s not time to go back home ... but we will follow like baby sheep our leader to the gold medal.

Default Image
lea






Miguel Enrique Camacho Rufino

Miguel is from Peru. He never hesitates to tell us how much the things that we do here seem weird to him. He is the main reason lab working is fun for us. He always has a fun story to say and some of his sentences became very popular in the team. His knowledge of molecular biology helped us in many occasions.







Maxime Heintzé

Maxime is a curly-haired longboard-rider Biotechnology student. He’s very good at making very bad puns. He’s part of the wiki team with Marie and likes to spend his afternoons coding in a couch.

Default Image
Maxime






Principal Instructors

Luca Ciandrini

Jérôme Bonnet

Guillaume Cambray

Instructors

Hung Ju Chang

Ana Zuniga

Peter Voyvodic

Advisor

Sarah Guiziou