Difference between revisions of "Team:Bordeaux/Team"

(Pre loader implement)
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{:Team:Bordeaux/Template/Navbar}}
 
{{:Team:Bordeaux/Template/Navbar}}
 
<html>
 
<html>
    <head>
 
        <meta charset="utf-8">
 
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link rel="stylesheet" href="https://2018.igem.org/Team:Bordeaux/Template/bootstrapcss?action=raw&ctype=text/css">
 
        <link rel="stylesheet" href="https://2018.igem.org/Team:Bordeaux/Template/css?action=raw&ctype=text/css">
 
  
<style>
+
<head>
            /* Main page background */
+
    <meta charset="utf-8">
             #bodyContent{
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
                background-color: #efefef;
+
    <link rel="stylesheet" href="https://2018.igem.org/Team:Bordeaux/Template/bootstrapcss?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" href="https://2018.igem.org/Team:Bordeaux/Template/css?action=raw&ctype=text/css">
 +
    <style>
 +
        /* Main page background */
 +
 
 +
        .bg-bgteam {
 +
             background-image: url("https://static.igem.org/mediawiki/2018/9/96/T--Bordeaux--cardbgteam.jpg");
 +
            background-position: 50% 50%;
 +
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
            height: 100vh;
 +
            position: fixed;
 +
            width: 100%;
 +
        }
 +
 
 +
        #bodyContent {
 +
            background-color: #efefef;
 +
        }
 +
 
 +
        /* Top Banner */
 +
 
 +
        .team_banner {
 +
            width: 100%;
 +
        }
 +
 
 +
        .text_title {
 +
            font-size: 3vw;
 +
            position: absolute;
 +
            left: 4vw;
 +
            bottom: 50px;
 +
            color: #ffffff;
 +
            text-shadow: 2px 2px 5px #00000080;
 +
            mix-blend-mode: hard-light;
 +
            background-color: #36353599;
 +
            padding: 10px;
 +
            width: 100%;
 +
        }
 +
 
 +
        /* Presentation text*/
 +
 
 +
        .text_intro {
 +
            background-color: #ffffff !important;
 +
            padding: 4% 4% 4% 4%;
 +
            position: relative;
 +
        }
 +
 
 +
        .bg-glass {
 +
            position: relative;
 +
            z-index: 1;
 +
            background-color: #ffffffe6;
 +
            padding-top: 50px;
 +
        }
 +
 
 +
        .popup {
 +
            z-index: 99999;
 +
        }
 +
 
 +
        /* Card management */
 +
 
 +
        .card-memb {
 +
            margin-top: 50px;
 +
            margin-bottom: 20px;
 +
            z-index: 0;
 +
            /* margin-right: 35px;
 +
            padding-left: 35px; */
 +
        }
 +
 
 +
        .card {
 +
            margin: 0;
 +
            background-color: transparent;
 +
            border: transparent;
 +
            text-align: center;
 +
            margin-bottom: 50px;
 +
            overflow: hidden;
 +
        }
 +
 
 +
        .card .img-profile {
 +
            z-index: 1;
 +
            display: block;
 +
            min-width: 350px;
 +
            min-height: 350px;
 +
            width: auto;
 +
            height: auto;
 +
            margin-bottom: 25%;
 +
        }
 +
 
 +
        .card-text {
 +
            font-size: 14px;
 +
        }
 +
 
 +
        .rectangle {
 +
            background-color: #ffffff;
 +
            position: absolute;
 +
            z-index: 3;
 +
            top: 86%;
 +
            width: 100%;
 +
            height: 100%;
 +
            color: black;
 +
            -webkit-transition: all .3s ease-out;
 +
            -moz-transition: all .3s ease-out;
 +
            -o-transition: all .3s ease-out;
 +
            transition: all 0.3s ease-out;
 +
        }
 +
 
 +
        .card:hover>.rectangle {
 +
            top: 80%;
 +
        }
 +
 
 +
        .hidden-text {
 +
            display: none;
 +
            margin-bottom: 20px;
 +
        }
 +
 
 +
        @media screen and (max-width: 1200px) and (min-width: 768px) {
 +
            .card .img-profile {
 +
                min-width: 300px;
 +
                min-height: 300px;
 
             }
 
             }
            /* Top Banner */
+
             .rectangle {
             .team_banner{
+
                 top: 84%;
                 width: 100%;
+
 
             }
 
             }
             .text_title{
+
             .card:hover>.rectangle {
                 font-size: 4vw;
+
                 top: 78%;
                position: relative;
+
                left: 2vw;
+
                bottom: 8vw;
+
                color: #ffffff;
+
                text-shadow: 2px 2px 5px;
+
 
             }
 
             }
             /* Presentation text*/
+
             .hidden-text {
            .text_intro{
+
                 font-size: 14px !important;
                 background-color: #ffffff !important;
+
                padding: 4% 4% 4% 4%;
+
 
             }
 
             }
            /* Card management */
+
        }
            .card-memb {
+
 
                margin-top: 50px;
+
        @media screen and (max-width: 768px) and (min-width: 574px) {
                margin-bottom: 20px;
+
            .text_intro {
                 z-index:0;
+
                 font-size: 14px !important;
 
             }
 
             }
             .card{
+
             .card .img-profile {
                 margin:0;
+
                 min-width: 250px;
                background-color: transparent;
+
                 min-height: 250px;
                 border: transparent;
+
                text-align: center;
+
                margin-bottom: 50px;
+
                overflow:hidden;  
+
 
             }
 
             }
             .card .img-profile{
+
             .rectangle {
                 z-index:1;
+
                 top: 84%;
                display: block;
+
                min-width:350px;
+
                min-height:350px;
+
                width: auto;
+
                height: auto;
+
                margin-bottom:25%;
+
 
             }
 
             }
             .card-text {
+
             .card:hover>.rectangle {
                 font-size : 14px;
+
                 top: 74%;
 
             }
 
             }
             .rectangle{
+
             .hidden-text {
                 background-color:#ffffff;
+
                 font-size: 12px !important;
                position:absolute;
+
                z-index:3;
+
                top:86%;
+
                width:100%;
+
                height:100%;
+
                color:black;
+
                -webkit-transition: all .3s ease-out;
+
                -moz-transition: all .3s ease-out;
+
                -o-transition: all .3s ease-out;
+
                transition: all 0.3s ease-out;
+
 
             }
 
             }
            .card:hover > .rectangle{
+
        }
                 top:80%;
+
 
 +
        @media screen and (max-width: 574px) and (min-width: 374px) {
 +
            .text_intro {
 +
                 font-size: 14px !important;
 
             }
 
             }
             .hidden-text{
+
             .card .img-profile {
                 display:none;
+
                 min-width: 350px;
                 margin-bottom: 20px;
+
                min-height: 350px;
 +
                 margin-bottom: 18%;
 
             }
 
             }
              
+
             .rectangle {
            @media screen and (max-width: 1200px) and (min-width : 768px) {
+
                 top: 88%;
                .card .img-profile{
+
                    min-width:300px;
+
                    min-height:300px;
+
                }
+
                .rectangle {
+
                    top:84%;
+
                 }
+
                .card:hover > .rectangle{
+
                    top:78%;
+
                }
+
                .hidden-text{
+
                    font-size: 14px !important;
+
                }
+
 
             }
 
             }
             @media screen and (max-width: 768px) and (min-width : 574px) {
+
             .card:hover>.rectangle {
                .text_intro{
+
                top: 80%;
                    font-size: 14px !important;
+
                }
+
                .card .img-profile{
+
                    min-width:250px;
+
                    min-height:250px;
+
                }
+
                .rectangle {
+
                    top:84%;
+
                }
+
                .card:hover > .rectangle{
+
                    top:74%;
+
                }
+
                .hidden-text{
+
                    font-size: 12px !important;
+
                }
+
 
             }
 
             }
            @media screen and (max-width : 574px) and (min-width: 374px) {
+
        }
                .text_intro{
+
 
                    font-size: 14px !important;
+
        @media screen and (max-width: 374px) {
                }
+
            .text_intro {
                .card .img-profile{
+
                font-size: 12px !important;
                    min-width:350px;
+
                    min-height:350px;
+
                    margin-bottom: 18%;
+
                }
+
                .rectangle {
+
                    top:88%;
+
                }
+
                .card:hover > .rectangle{
+
                    top:80%;
+
                }
+
 
             }
 
             }
             @media screen and (max-width: 374px) {
+
             .card .img-profile {
                .text_intro{
+
                min-width: 250px;
                    font-size: 12px !important;
+
                min-height: 250px;
                }
+
                margin-bottom: 25%;
                .card .img-profile{
+
                    min-width:250px;
+
                    min-height:250px;
+
                    margin-bottom: 25%;
+
                }
+
                .rectangle {
+
                    top:84%;
+
                }
+
                .card:hover > .rectangle{
+
                    top:72%;
+
                }
+
                .hidden-text{
+
                    font-size: 12px !important;
+
                }
+
 
             }
 
             }
        </style>     
+
            .rectangle {
    </head>
+
                top: 84%;
    <body>
+
            }
        <!-- Presentation banner -->
+
            .card:hover>.rectangle {
        <img class="team_banner" src="https://static.igem.org/mediawiki/2018/9/96/T--Bordeaux--cardbgteam.jpg" alt="Team Bordeaux">
+
                top: 72%;
         <h1 class="text_title"> We are IGEM Bordeaux 2018 </h1>
+
            }
 +
            .hidden-text {
 +
                font-size: 12px !important;
 +
            }
 +
         }
  
    <!-- Main Content-->
+
        .jumbotron-img {
 +
            height: 74vh;
 +
            background-position: 50% 50%;
 +
            background-repeat: no-repeat;
 +
            background-size: cover;
 +
        }
  
         <!-- Intro Team IGEM-->
+
         .animdna ul {
 +
            overflow: hidden;
 +
            perspective: 900px;
 +
            list-style: none;
 +
            height: 100vh;
 +
            max-height: 100vh;
 +
            min-height: 100vh;
 +
            text-align: center;
 +
            letter-spacing: 4px;
 +
            width: 120%;
 +
            position: absolute;
 +
            z-index: 36;
 +
            white-space: nowrap;
 +
            margin-left: 0px !important;
 +
        }
 +
 
 +
        @keyframes width-sway {
 +
            0%,
 +
            100% {
 +
                width: 500px;
 +
            }
 +
            50% {
 +
                width: 100%;
 +
            }
 +
        }
 +
 
 +
        .animdna {
 +
            padding-left: 0px !important;
 +
            margin-left: 0px !important;
 +
        }
 +
 
 +
        .animdna li {
 +
            position: absolute;
 +
            top: 0;
 +
            width: 100%;
 +
            transform: translateY(100vh);
 +
            font-size: 1.5rem;
 +
            font-family: sans-serif;
 +
            font-weight: bold;
 +
            animation: 16s spiral-staircase linear infinite;
 +
        }
 +
 
 +
        .animdna li:nth-child(1) {
 +
            animation-delay: 1s;
 +
        }
 +
 
 +
        .animdna li:nth-child(2) {
 +
            animation-delay: 2s;
 +
        }
 +
 
 +
        .animdna li:nth-child(3) {
 +
            animation-delay: 3s;
 +
        }
 +
 
 +
        .animdna li:nth-child(4) {
 +
            animation-delay: 4s;
 +
        }
 +
 
 +
        .animdna li:nth-child(5) {
 +
            animation-delay: 5s;
 +
        }
 +
 
 +
        .animdna li:nth-child(6) {
 +
            animation-delay: 6s;
 +
        }
 +
 
 +
        .animdna li:nth-child(7) {
 +
            animation-delay: 7s;
 +
        }
 +
 
 +
        .animdna li:nth-child(8) {
 +
            animation-delay: 8s;
 +
        }
 +
 
 +
        .animdna li:nth-child(9) {
 +
            animation-delay: 9s;
 +
        }
 +
 
 +
        .animdna li:nth-child(10) {
 +
            animation-delay: 10s;
 +
        }
 +
 
 +
        .animdna li:nth-child(11) {
 +
            animation-delay: 11s;
 +
        }
 +
 
 +
        .animdna li:nth-child(12) {
 +
            animation-delay: 12s;
 +
        }
 +
 
 +
        .animdna li:nth-child(13) {
 +
            animation-delay: 13s;
 +
        }
 +
 
 +
        .animdna li:nth-child(14) {
 +
            animation-delay: 14s;
 +
        }
 +
 
 +
        .animdna li:nth-child(15) {
 +
            animation-delay: 15s;
 +
        }
 +
 
 +
        .animdna li:nth-child(16) {
 +
            animation-delay: 16s;
 +
        }
 +
 
 +
        .animdna li:nth-child(1) {
 +
            right: 1rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(1) {
 +
            right: 1rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(2) {
 +
            right: 2rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(2) {
 +
            right: 2rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(3) {
 +
            right: 3rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(3) {
 +
            right: 3rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(4) {
 +
            right: 4rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(4) {
 +
            right: 4rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(5) {
 +
            right: 5rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(5) {
 +
            right: 5rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(6) {
 +
            right: 6rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(6) {
 +
            right: 6rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(7) {
 +
            right: 7rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(7) {
 +
            right: 7rem;
 +
        }
 +
 
 +
        .animdna li:nth-child(8) {
 +
            right: 8rem;
 +
        }
 +
 
 +
        .animdna li:nth-last-child(8) {
 +
            right: 8rem;
 +
        }
 +
 
 +
        @keyframes spiral-staircase {
 +
            0% {
 +
                transform: rotateY(90deg) translateY(105vh) rotate(0deg);
 +
            }
 +
            50% {
 +
                transform: rotateY(0deg) translateY(50vh) rotate(0deg);
 +
            }
 +
            100% {
 +
                transform: rotateY(-90deg) translateY(-5vh) rotate(0deg);
 +
            }
 +
        }
 +
    </style>
 +
</head>
 +
 
 +
<body>
 +
    <!-- Presentation banner -->
 +
    <div class="bg-bgteam"></div>
 +
    <div class="col-12 jumbotron-img">
 +
        <h1 class="text_title"> We are IGEM Bordeaux 2018 </h1>
 +
    </div>
 +
    <!-- <img class="team_banner" src="https://static.igem.org/mediawiki/2018/9/96/T--Bordeaux--cardbgteam.jpg" alt="Team Bordeaux"> -->
 +
    <!-- Main Content-->
 +
    <!-- Intro Team IGEM-->
 +
    <div class="bg-glass">
 
         <div class="container text_intro">
 
         <div class="container text_intro">
 
             <p>
 
             <p>
                 Among the 56000 student-trees of the University of Bordeaux was living XX motivated and ambitious young-trees. All scattered into the green mass, they reunited on this day of November 2017 to learn more about the iGEM competition. Their wise predecessors told them the adventure they lived last year. Envious and dreamers, they decided to take up the challenge too. Our 15 trees come from different horizons, with different backgrounds and future perspectives but they are all reunited by the desire to expand their branches of knowledge. As the time passed, only the trees with very resistant roots survived to the “let it go” storm. After that our 15 young little trees were reunited to form a stronger gathering ready to start the competition.
+
                 Among the 56000 student-trees of the University of Bordeaux was living 17 motivated and ambitious young-trees. All scattered
 +
                into the green mass, they reunited on this day of November 2017 to learn more about the iGEM competition.
 +
                Their wise predecessors told them the adventure they lived last year. Envious and dreamers, they decided
 +
                to take up the challenge too. Our 17 trees come from different horizons, with different backgrounds and future
 +
                perspectives but they are all reunited by the desire to expand their branches of knowledge. As the time passed,
 +
                only the trees with very resistant roots survived to the “let it go” storm. After that our 17 young little
 +
                trees were reunited to form a stronger gathering ready to start the competition.
 
             </p>
 
             </p>
 
         </div>
 
         </div>
 
 
         <!-- Cards Members -->
 
         <!-- Cards Members -->
         <div class="container card-memb">
+
         <div class="card-memb">
          <div class="row">
+
            <div class="col-md-4 animdna" style="position: sticky;top: 0;">
 +
                <ul>
 +
                    <li>
 +
                        Our IGEM TEAM
 +
                    </li>
 +
                    <li>
 +
                        Marguerite Batsale
 +
                    </li>
 +
                    <li>
 +
                        Yasmine Amrani
 +
                    </li>
 +
                    <li>
 +
                        Arthur Grimaud
 +
                    </li>
 +
                    <li>
 +
                        Sandro Papaïs
 +
                    </li>
 +
                    <li>
 +
                        Sebastien Goncalves Claro
 +
                    </li>
 +
                    <li>
 +
                        Maëlle Allender
 +
                    </li>
 +
                    <li>
 +
                        David Mauboules
 +
                    </li>
 +
                    <li>
 +
                        Thomas Favraud
 +
                    </li>
 +
                    <li>
 +
                        Ines Baghou
 +
                    </li>
 +
                    <li>
 +
                        Lorine Debande
 +
                    </li>
 +
                    <li>
 +
                        Jean-Clément Gallardo
 +
                    </li>
 +
                    <li>
 +
                        Anaïs Labecot
 +
                    </li>
 +
                    <li>
 +
                        Estelle Lesbros
 +
                    </li>
 +
                    <li>
 +
                        François Hebrard
 +
                    </li>
 +
                    <li>
 +
                        Pierre Jacquet
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <div class="row offset-md-4">
 
                 <div id="Denis" class="card mx-auto">
 
                 <div id="Denis" class="card mx-auto">
 
                     <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2016/5/55/T--Bordeaux--Dupuy.png'); background-size:cover; background-position:center;"></div>
 
                     <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2016/5/55/T--Bordeaux--Dupuy.png'); background-size:cover; background-position:center;"></div>
Line 176: Line 470:
 
                         <p class="hidden-text">
 
                         <p class="hidden-text">
 
                             <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
 
                             <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                             He is in some sort the founder father of the forest.  
+
                             He is in some sort the founder father of the forest. He is nothing less than a researcher officer at the National Institute
                            He is nothing less than a researcher officer at the National Institute of Health and Medical Research (INSEREM).
+
                            of Health and Medical Research (INSEREM). It is him who sowed the seeds since 6 years now, and
                            It is him who sowed the seeds since 6 years now, and watch them to grow until the Jamboree.
+
                            watch them to grow until the Jamboree.
 
                         </p>
 
                         </p>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
             <div class="row">
+
             <div class="row" style="padding-left: 35px; padding-right: 35px;">
 
+
                 <div class="col-md-8 offset-md-4">
                 <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                    <div class="row">
                    <div id="Marguerite" class="card">
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/1/19/T--Bordeaux--margueritte.png'); background-size:cover; background-position:center;"></div>
+
                            <div id="Marguerite" class="card">
                        <div class="card-body rectangle">
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/1/19/T--Bordeaux--margueritte.png'); background-size:cover; background-position:center;"></div>
                            <h5 class="card-title memb-name">
+
                                <div class="card-body rectangle">
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                    <h5 class="card-title memb-name">
                                Marguerite
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                            </h5>
+
                                        Marguerite
                            <i class="card-text">
+
                                    </h5>
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                    <i class="card-text">
                                The ginkgo
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                            </i>
+
                                        The ginkgo
                            <p class="hidden-text">
+
                                    </i>
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                    <p class="hidden-text">
                                She is a first year Plant Biotechnology Masters student.  
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                This ancestral tree is very powerful.  
+
                                        She is a first year Plant Biotechnology Masters student. This ancestral tree is very powerful. Indeed, she is both president
                                Indeed, she is both president of the team, and in charge of the Human practice pole.  
+
                                        of the team, and in charge of the Human practice pole. It is good to have a ginkgo
                                It is good to have a ginkgo around it brings many health benefits.
+
                                        around it brings many health benefits.
                            </p>
+
                                    </p>
 +
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Yasmine" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/2/29/T--Bordeaux--yasmine1.png'); background-size:cover; background-position:center;"></div>
                    <div id="Yasmine" class="card">
+
                                <div class="card-body rectangle">
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/2/29/T--Bordeaux--yasmine1.png'); background-size:cover; background-position:center;"></div>
+
                                    <h5 class="card-title memb-name">
                        <div class="card-body rectangle">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                            <h5 class="card-title memb-name">
+
                                        Yasmine
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                    </h5>
                                Yasmine
+
                                    <i class="card-text">
                            </h5>
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                            <i class="card-text">
+
                                        The fir
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                    </i>
                                The fir
+
                                    <p class="hidden-text">
                            </i>
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                            <p class="hidden-text">
+
                                        She graduated this year with a Bachelor in Molecular and Cellular Biology. She is our team leader and has to coordinate all
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        the progresses from the different poles. In addition she is at the head of the thorny
                                She graduated this year with a Bachelor in Molecular and Cellular Biology. She is our team leader and has to coordinate all the progresses from the different poles. In addition she is at the head of the thorny Scientific pole to organize and motivate the lab work. Her needles shelter someone who loves to escape the everyday grind by traveling or having deep readings.
+
                                        Scientific pole to organize and motivate the lab work. Her needles shelter someone
                            </p>
+
                                        who loves to escape the everyday grind by traveling or having deep readings.
 +
                                    </p>
 +
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Ines" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/b/bb/T--Bordeaux--ines.jpg'); background-size:cover; background-position:center"
                    <div id="Ines" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/b/bb/T--Bordeaux--ines.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Ines
                                Ines
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The cherry tree
                                The cherry tree
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        She is a first year bioinformatics Master student. In charge of the Communication pole, her aim is to make shining the team
                                She is a first year bioinformatics Master student.  
+
                                        as much as her flowers in lovely day of spring.
                                In charge of the Communication pole, her aim is to make shining the team as much as her flowers in lovely day of spring.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Pierre" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/4/48/T--Bordeaux--pierre1.png'); background-size:cover; background-position:top center"
                    <div id="Pierre" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/4/48/T--Bordeaux--pierre1.png'); background-size:cover; background-position:top center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Pierre
                                Pierre
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The stick insect
                                The stick insect
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He is a first year Bioinformatics Masters student. Passionate about computing, he delved the topic until to perfectly match
                                He is a first year Bioinformatics Masters student.  
+
                                        to it. Most of the time he hides behind a screen to code and build the wiki.
                                Passionate about computing, he delved the topic until to perfectly match to it.  
+
                                    </p>
                                Most of the time he hides behind a screen to code and build the wiki.
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Lorine" class="card">
 
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/thumb/f/f4/T--Bordeaux--lorine2.jpg/600px-T--Bordeaux--lorine2.jpg'); background-size:cover; background-position:center;"></div>
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="card-body rectangle">
                    <div id="Lorine" class="card">
+
                                    <h5 class="card-title memb-name">
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/thumb/f/f4/T--Bordeaux--lorine2.jpg/600px-T--Bordeaux--lorine2.jpg'); background-size:cover; background-position:center;"></div>
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                        <div class="card-body rectangle">
+
                                        Lorine
                            <h5 class="card-title memb-name">
+
                                    </h5>
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                    <i class="card-text">
                                Lorine
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                            </h5>
+
                                        The eucalyptus
                            <i class="card-text">
+
                                    </i>
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                    <p class="hidden-text">
                                The eucalyptus
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                            </i>
+
                                        She graduated this year with a Bachelor in Molecular and Cellular Biology. She is not from Australia but her determination
                            <p class="hidden-text">
+
                                        is from the same size. She leads the wiki construction, et make sure everything is
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        written on time. This tree needs a minimum of sun each day.
                                She graduated this year with a Bachelor in Molecular and Cellular Biology.  
+
                                    </p>
                                She is not from Australia but her determination is from the same size.
+
                                </div>
                                She leads the wiki construction, et make sure everything is written on time.  
+
                            </div>
                                This tree needs a minimum of sun each day.
+
                            </p>
+
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="David" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/1/1a/T--Bordeaux--david1.jpg'); background-size:cover; background-position:center"
                    <div id="David" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/1/1a/T--Bordeaux--david1.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        David
                                David
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The oak
                                The oak
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year with a Bachelor in Molecular and Cellular Biology. His branches are active in the scientific pole.
                                He graduated this year with a Bachelor in Molecular and Cellular Biology.
+
                                        Caution, this tree is robust and cannot be grown inside.
                                His branches are active in the scientific pole.  
+
                                    </p>
                                Caution, this tree is robust and cannot be grown inside.
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Estelle" class="card">
<div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/a/a7/T--Bordeaux--estelle.jpg'); background-size:cover; background-position:center"
                    <div id="Estelle" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/a/a7/T--Bordeaux--estelle.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Estelle
                                Estelle
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The olive tree
                                The olive tree
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        She graduated of a Master in genetics. From the Southern of France, this mediterranean tree participates to the competition
                                She graduated of a Master in genetics. From the Southern of France, this mediterranean tree participates to the competition for the second time. After squeezing her fruits you obtain an intersting oil rich in laugh, travel and science fiction.  
+
                                        for the second time. After squeezing her fruits you obtain an intersting oil rich
                                 It is him who sowed the seeds since 6 years now, and watch them to grow until the Jamboree.
+
                                        in laugh, travel and science fiction.</p>
                             </p>
+
                                 </div>
 +
                             </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Thomas" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/f/fc/T--Bordeaux--thoams.jpg'); background-size:cover; background-position:center"
                    <div id="Thomas" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/f/fc/T--Bordeaux--thoams.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Thomas
                                Thomas
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The Japenese Maple
                                The Japenese Maple
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year of a Biotechnology Engineering School. Symbol of ideas communication, he is at the head of the partnerships
                                He graduated this year of a Biotechnology Engineering School.  
+
                                        and funding pole. He participates to the competition for the second time, therefore
                                Symbol of ideas communication, he is at the head of the partnerships and funding pole.  
+
                                        this tree is always here to give an attentive leaf to the needs of the team.
                                He participates to the competition for the second time, therefore this tree is always here to give an attentive leaf to the needs of the team.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="François" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/9/95/T--Bordeaux--francois.jpg'); background-size:cover; background-position:center"
                    <div id="François" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/9/95/T--Bordeaux--francois.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        François
                                François
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The poplar
                                The poplar
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year with a Bachelor degree in Molecular and Cellular Biology. This tree is tall such as his implication
                                He graduated this year with a Bachelor degree in Molecular and Cellular Biology.  
+
                                        in the work lab for iGEM. A healthy mind in a healthy trunk is his motto.
                                This tree is tall such as his implication in the work lab for iGEM.  
+
                                    </p>
                                A healthy mind in a healthy trunk is his motto.
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Maëlle" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/5/5d/T--Bordeaux--maelle.jpg'); background-size:cover; background-position:center"
                    <div id="Maëlle" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/5/5d/T--Bordeaux--maelle.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Maëlle
                                Maëlle
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The maple
                                The maple
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        She is in third year of Biotech Engineering School. She takes part of the iGEM lab experiments. Some other trees reported
                                She is in third year of Biotech Engineering School.  
+
                                        she regularly use 5mL propipette to share her mapple syrup.
                                She takes part of the iGEM lab experiments.  
+
                                    </p>
                                Some other trees reported she regularly use 5mL propipette to share her mapple syrup.
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Sandro" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/d/da/T--Bordeaux--sandro1.jpg'); background-size:cover; background-position:center"
                    <div id="Sandro" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/d/da/T--Bordeaux--sandro1.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Sandro
                                Sandro
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The weeping willow
                                The weeping willow
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year with a Bachelor in Cells and Organisms Biology. Apparently he did not whimper to participate to the
                                He graduated this year with a Bachelor in Cells and Organisms Biology.  
+
                                        iGEM lab work, and he is not wailing neither during his working time.
                                Apparently he did not whimper to participate to the iGEM lab work, and he is not wailing neither during his working time.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Jean-Clément" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/4/40/T--Bordeaux--jean_clement.jpg'); background-size:cover; background-position:center"
                    <div id="Jean-Clément" class="card">
+
                                    ;></div>
                    <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/4/40/T--Bordeaux--jean_clement.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Jean Clément
                                Jean Clément
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The pine
                                The pine
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year in Biology of Cells and Organisms. He grows straight up, like a rocket that wants to discover the
                                He graduated this year in Biology of Cells and Organisms.  
+
                                        world.
                                He grows straight up, like a rocket that wants to discover the world.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Frederic" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/a/a0/T--Bordeaux--frederic.jpg'); background-size:cover; background-position:center"
                    <div id="Frederic" class="card">
+
                                    ;></div>
                    <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/a/a0/T--Bordeaux--frederic.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Frederic
                                Frederic
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The linden
                                The linden
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He is a first year Bioinformatics Masters student. Curious about new technology he planned to build an algorithm to calculate
                                He is a first year Bioinformatics Masters student.  
+
                                        the exact time needed for a perfect infusion.
                                Curious about new technology he planned to build an algorithm to calculate the exact time needed for a perfect infusion.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Anaïs" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/d/d8/T--Bordeaux--anais.jpg'); background-size:cover; background-position:center"
                    <div id="Anaïs" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/d/d8/T--Bordeaux--anais.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Anaïs
                                Anaïs
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The cocoa tree
                                The cocoa tree
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        She graduated with a Bachelor in Cells and Organisms Biology. Very coveted for her fruits. Well managed and processed you
                                She graduated with a Bachelor in Cells and Organisms Biology.  
+
                                        can extract from her a piece of heaven
                                Very coveted for her fruits.  
+
                                    </p>
                                Well managed and processed you can extract from her a piece of heaven
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Arthur" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/0/05/T--Bordeaux--arthur.jpg'); background-size:cover; background-position:center"
                    <div id="Arthur" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/0/05/T--Bordeaux--arthur.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Arthur
                                Arthur
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The pistachio
                                The pistachio
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He graduated this year with a Bachelor in Molecular and Cellular Biology. His green ideas intermingle music, DIY, and computer
                                He graduated this year with a Bachelor in Molecular and Cellular Biology.  
+
                                        science. All in one shell.
                                His green ideas intermingle music, DIY, and computer science.  
+
                                    </p>
                                All in one shell.
+
                                </div>
                            </p>
+
                            </div>
 
                         </div>
 
                         </div>
                    </div>
+
                        <div class="col-xs-12 col-md-6 col-xl-4">
                </div>
+
                            <div id="Sebastien" class="card">
                <div class="col-xs-12 col-sm-6 col-lg-4" >
+
                                <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/9/9b/T--Bordeaux--seb.jpg'); background-size:cover; background-position:center"
                    <div id="Sebastien" class="card">
+
                                    ;></div>
                        <div class="img-profile" style="background-image:url('https://static.igem.org/mediawiki/2018/9/9b/T--Bordeaux--seb.jpg'); background-size:cover; background-position:center";></div>
+
                                <div class="card-body rectangle">
                        <div class="card-body rectangle">
+
                                    <h5 class="card-title memb-name">
                            <h5 class="card-title memb-name">
+
                                        <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE NOM EN DESSOUS #####-->
+
                                        Sebastien
                                Sebastien
+
                                    </h5>
                            </h5>
+
                                    <i class="card-text">
                            <i class="card-text">
+
                                        <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
                                <!-- ##### ECRIRE L'ARBRE EN DESSOUS ###### -->
+
                                        The catalpa
                                The catalpa
+
                                    </i>
                            </i>
+
                                    <p class="hidden-text">
                            <p class="hidden-text">
+
                                        <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
                                <!-- ##### ECRIRE LE TEXTE EN DESSOUS #####-->
+
                                        He is a first year Bioinformatics Master student. Hiding in the shadow, he is here to support the Bioinformatic team of Bordeaux.
                                He is a first year Bioinformatics Master student.  
+
                                        Ready to respond for any computing matters, his mind will always respond to the call
                                Hiding in the shadow, he is here to support the Bioinformatic team of Bordeaux.  
+
                                        of programming.
                                Ready to respond for any computing matters, his mind will always respond to the call of programming.
+
                                    </p>
                            </p>
+
                                </div>
 +
                            </div>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
Line 519: Line 823:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
              <!-- <div class="sponso separator">
+
    </div>
 +
    <!-- <div class="sponso separator">
 
             <a href="https://www.u-bordeaux.fr/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/8/80/T--Bordeaux--sponsobordeaux.png"></a>
 
             <a href="https://www.u-bordeaux.fr/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/8/80/T--Bordeaux--sponsobordeaux.png"></a>
 
             <a href="https://www.france-science.org/-Homepage-English-.html" target="_blank"><img src="https://static.igem.org/mediawiki/2018/2/2e/T--Bordeaux--sponsoembassade.jpg"></a>
 
             <a href="https://www.france-science.org/-Homepage-English-.html" target="_blank"><img src="https://static.igem.org/mediawiki/2018/2/2e/T--Bordeaux--sponsoembassade.jpg"></a>
Line 529: Line 834:
 
             <a href="https://international.neb.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/c/c2/T--Bordeaux--sponsoneb.jpg"></a>
 
             <a href="https://international.neb.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2018/c/c2/T--Bordeaux--sponsoneb.jpg"></a>
 
         </div>-->
 
         </div>-->
        <script href="https://2018.igem.org/Team:Bordeaux/Template/bootstrapjs?action=raw"></script>
+
    <script href="https://2018.igem.org/Team:Bordeaux/Template/bootstrapjs?action=raw"></script>
        <script>
+
    <script>
            // Preload image
+
        // Preload image
            $(function() {
+
        $(function () {
                $.preloadImages = function(data) {
+
            $.preloadImages = function (data) {
                    for (var key in data) {
+
                for (var key in data) {
                      $("<div class='img-profile';>").css("background-image",`url(${data[key]})`);
+
                    $("<div class='img-profile';>").css("background-image", `url(${data[key]})`);
                    }
+
 
                 }
 
                 }
                // Animation on mouseover : change color of cards
+
            }
                function color_change(event) {
+
            // Animation on mouseover : change color of cards
                    var img_trees = event.data.param1;
+
            function color_change(event) {
                    if($(this).find(".hidden-text").hasClass("team-toggled")) return;
+
                var img_trees = event.data.param1;
                    else {
+
                if ($(this).find(".hidden-text").hasClass("team-toggled")) return;
 +
                else {
  
                        var color_list = ["#8A2BE2"," #A52A2A","#D2691E"," #6495ED","#FF1493","#228B22","#FF69B4"];
+
                    var color_list = ["#8A2BE2", " #A52A2A", "#D2691E", " #6495ED", "#FF1493", "#228B22", "#FF69B4"];
                        var random_color = color_list[Math.floor(Math.random()*color_list.length)];
+
                    var random_color = color_list[Math.floor(Math.random() * color_list.length)];
                        var img_url = $(this).find(".img-profile")
+
                    var img_url = $(this).find(".img-profile")
                            .css("background-image"); // on hover change picture with corresponding tree
+
                        .css("background-image"); // on hover change picture with corresponding tree
                        var card_id = $(this).attr("id");
+
                    var card_id = $(this).attr("id");
                        $(this).data("profile_img",img_url);
+
                    $(this).data("profile_img", img_url);
                        $(this).find(".rectangle")
+
                    $(this).find(".rectangle")
                            .css({
+
                        .css({
                                backgroundColor: random_color,
+
                            backgroundColor: random_color,
                                color: "#ffffff"});
+
                            color: "#ffffff"
                        $(this).find(".img-profile").css("background-image",`url(${img_trees[card_id]})`)
+
                        });
                    }
+
                    $(this).find(".img-profile").css("background-image", `url(${img_trees[card_id]})`)
 
                 }
 
                 }
                function color_default() {
+
            }
                    if($(this).find(".hidden-text").hasClass("team-toggled")) return;
+
            function color_default() {
 +
                if ($(this).find(".hidden-text").hasClass("team-toggled")) return;
 +
                $(this).find(".rectangle")
 +
                    .css({
 +
                        backgroundColor: "#ffffff",
 +
                        color: "#000000"
 +
                    });
 +
                $(this).find(".img-profile")
 +
                    .css("background-image", $(this).data("profile_img"));
 +
            }
 +
 
 +
            //Animation on click card
 +
            function banner_on() {
 +
                if ($(this).find(".hidden-text").hasClass("team-toggled")) {
 +
                    var actual_background = $(this).find(".rectangle").css("background-color");
 +
                    $(this).removeAttr("style")
 
                     $(this).find(".rectangle")
 
                     $(this).find(".rectangle")
 +
                        .removeAttr("style")
 
                         .css({
 
                         .css({
                             backgroundColor: "#ffffff",
+
                             backgroundColor: actual_background,
                             color: "#000000"});
+
                             color: "#ffffff"
                     $(this).find(".img-profile")
+
                        });
                         .css("background-image",$(this).data("profile_img"));
+
                     $(this).find(".hidden-text").removeClass("team-toggled")
 +
                         .fadeToggle();
 +
                } else {
 +
                    var color_list = ["#8A2BE2", " #A52A2A", "#D2691E", " #6495ED", "#FF1493", "#228B22", "#FF69B4"];
 +
                    var random_color = color_list[Math.floor(Math.random() * color_list.length)];
 +
                    //var bg_color = $(this).find(".rectangle").css("background-color");
 +
                    var rectangle_height = $(this).find(".rectangle").css("height");
 +
                    var card_height = $(this).css("height");
 +
                    $(this).find(".rectangle")
 +
                        .css({
 +
                            top: `0%`,
 +
                            backgroundColor: random_color,
 +
                            color: "#ffffff"
 +
                        });
 +
                    $(this).find(".hidden-text").fadeToggle(1000)
 +
                        .addClass("team-toggled");
 
                 }
 
                 }
               
+
            }
                //Animation on click card
+
            // Main program
                function banner_on() {
+
            var img_trees = {
                    if($(this).find(".hidden-text").hasClass("team-toggled")) {
+
                "Denis": "https://static.igem.org/mediawiki/2018/thumb/3/35/T--Bordeaux--bonsai.jpg/800px-T--Bordeaux--bonsai.jpg",
                        var actual_background = $(this).find(".rectangle").css("background-color");
+
                "Marguerite": "https://static.igem.org/mediawiki/2018/thumb/3/38/T--Bordeaux--ginkgo.jpg/483px-T--Bordeaux--ginkgo.jpg",
                        $(this).removeAttr("style")
+
                "Estelle": "https://static.igem.org/mediawiki/2018/thumb/d/d4/T--Bordeaux--olive_tree.jpeg/800px-T--Bordeaux--olive_tree.jpeg",
                        $(this).find(".rectangle")
+
                "Thomas": "https://static.igem.org/mediawiki/2018/thumb/5/5b/T--Bordeaux--japanese_maple.jpg/800px-T--Bordeaux--japanese_maple.jpg",
                            .removeAttr("style")
+
                "Yasmine": "https://static.igem.org/mediawiki/2018/thumb/8/8b/T--Bordeaux--fir.jpg/400px-T--Bordeaux--fir.jpg",
                            .css({
+
                "Ines": "https://static.igem.org/mediawiki/2018/thumb/b/be/T--Bordeaux--cherry_tree.jpg/800px-T--Bordeaux--cherry_tree.jpg",
                                backgroundColor: actual_background,
+
                "Pierre": "https://static.igem.org/mediawiki/2018/thumb/5/56/T--Bordeaux--stick_insect.jpeg/800px-T--Bordeaux--stick_insect.jpeg",
                                color: "#ffffff"
+
                "Lorine": "https://static.igem.org/mediawiki/2018/thumb/0/05/T--Bordeaux--eucalyptus.jpg/800px-T--Bordeaux--eucalyptus.jpg",
                                });   
+
                "David": "https://static.igem.org/mediawiki/2018/thumb/5/55/T--Bordeaux--oak.jpg/800px-T--Bordeaux--oak.jpg",
                        $(this).find(".hidden-text").removeClass("team-toggled")
+
                "François": "https://static.igem.org/mediawiki/2018/thumb/4/48/T--Bordeaux--poplar.jpg/600px-T--Bordeaux--poplar.jpg",
                            .fadeToggle();
+
                "Maëlle": "https://static.igem.org/mediawiki/2018/thumb/3/38/T--Bordeaux--maple.jpeg/800px-T--Bordeaux--maple.jpeg",
                    }else{
+
                "Sandro": "https://static.igem.org/mediawiki/2018/thumb/2/24/T--Bordeaux--weeping_willow.jpg/800px-T--Bordeaux--weeping_willow.jpg",
                        var color_list = ["#8A2BE2"," #A52A2A","#D2691E"," #6495ED","#FF1493","#228B22","#FF69B4"];
+
                "Jean-Clément": "https://static.igem.org/mediawiki/2018/thumb/9/9e/T--Bordeaux--pine.jpg/436px-T--Bordeaux--pine.jpg",
                        var random_color = color_list[Math.floor(Math.random()*color_list.length)];
+
                "Frederic": "https://static.igem.org/mediawiki/2018/thumb/8/8e/T--Bordeaux--linden.jpg/800px-T--Bordeaux--linden.jpg",
                        //var bg_color = $(this).find(".rectangle").css("background-color");
+
                "Anaïs": "https://static.igem.org/mediawiki/2018/thumb/9/98/T--Bordeaux--cocoa_tree.jpg/800px-T--Bordeaux--cocoa_tree.jpg",
                        var rectangle_height = $(this).find(".rectangle").css("height");
+
                "Arthur": "https://static.igem.org/mediawiki/2018/thumb/2/22/T--Bordeaux--pistachio.jpeg/800px-T--Bordeaux--pistachio.jpeg",
                        var card_height = $(this).css("height");
+
                "Sebastien": "https://static.igem.org/mediawiki/2018/thumb/d/dc/T--Bordeaux--catalpa.jpg/400px-T--Bordeaux--catalpa.jpg"
                        $(this).find(".rectangle")
+
            };
                            .css({
+
            $.preloadImages(img_trees);
                                top: `0%`,
+
            $(document).on("click", ".card", banner_on);
                                backgroundColor: random_color,
+
            $(document).on("mouseenter", ".card", { param1: img_trees }, color_change);
                                color: "#ffffff"
+
            $(document).on("mouseleave", ".card", color_default);
                                });
+
        });
                        $(this).find(".hidden-text").fadeToggle(1000)
+
    </script>
                            .addClass("team-toggled");
+
</body>
                    }
+
                }
+
                // Main program
+
                        var img_trees = {
+
                            "Denis" : "https://static.igem.org/mediawiki/2018/thumb/3/35/T--Bordeaux--bonsai.jpg/800px-T--Bordeaux--bonsai.jpg",
+
                            "Marguerite" : "https://static.igem.org/mediawiki/2018/thumb/3/38/T--Bordeaux--ginkgo.jpg/483px-T--Bordeaux--ginkgo.jpg",
+
                            "Estelle" : "https://static.igem.org/mediawiki/2018/thumb/d/d4/T--Bordeaux--olive_tree.jpeg/800px-T--Bordeaux--olive_tree.jpeg",
+
                            "Thomas" : "https://static.igem.org/mediawiki/2018/thumb/5/5b/T--Bordeaux--japanese_maple.jpg/800px-T--Bordeaux--japanese_maple.jpg",
+
                            "Yasmine" : "https://static.igem.org/mediawiki/2018/thumb/8/8b/T--Bordeaux--fir.jpg/400px-T--Bordeaux--fir.jpg",
+
                            "Ines" : "https://static.igem.org/mediawiki/2018/thumb/b/be/T--Bordeaux--cherry_tree.jpg/800px-T--Bordeaux--cherry_tree.jpg",
+
                            "Pierre" : "https://static.igem.org/mediawiki/2018/thumb/5/56/T--Bordeaux--stick_insect.jpeg/800px-T--Bordeaux--stick_insect.jpeg",
+
                            "Lorine" : "https://static.igem.org/mediawiki/2018/thumb/0/05/T--Bordeaux--eucalyptus.jpg/800px-T--Bordeaux--eucalyptus.jpg",
+
                            "David" : "https://static.igem.org/mediawiki/2018/thumb/5/55/T--Bordeaux--oak.jpg/800px-T--Bordeaux--oak.jpg",
+
                            "François" : "https://static.igem.org/mediawiki/2018/thumb/4/48/T--Bordeaux--poplar.jpg/600px-T--Bordeaux--poplar.jpg",
+
                            "Maëlle" : "https://static.igem.org/mediawiki/2018/thumb/3/38/T--Bordeaux--maple.jpeg/800px-T--Bordeaux--maple.jpeg",
+
                            "Sandro" : "https://static.igem.org/mediawiki/2018/thumb/2/24/T--Bordeaux--weeping_willow.jpg/800px-T--Bordeaux--weeping_willow.jpg",
+
                            "Jean-Clément" : "https://static.igem.org/mediawiki/2018/thumb/9/9e/T--Bordeaux--pine.jpg/436px-T--Bordeaux--pine.jpg",
+
                            "Frederic" : "https://static.igem.org/mediawiki/2018/thumb/8/8e/T--Bordeaux--linden.jpg/800px-T--Bordeaux--linden.jpg",
+
                            "Anaïs" : "https://static.igem.org/mediawiki/2018/thumb/9/98/T--Bordeaux--cocoa_tree.jpg/800px-T--Bordeaux--cocoa_tree.jpg",
+
                            "Arthur" : "https://static.igem.org/mediawiki/2018/thumb/2/22/T--Bordeaux--pistachio.jpeg/800px-T--Bordeaux--pistachio.jpeg",
+
                            "Sebastien" : "https://static.igem.org/mediawiki/2018/thumb/d/dc/T--Bordeaux--catalpa.jpg/400px-T--Bordeaux--catalpa.jpg"
+
                        };  
+
                $.preloadImages(img_trees);
+
                $(document).on("click", ".card", banner_on);
+
                $(document).on("mouseenter", ".card", {param1: img_trees},color_change);
+
                $(document).on("mouseleave", ".card", color_default);
+
            });
+
        </script>
+
    </body>
+

Latest revision as of 15:00, 14 October 2018

Loading...

We are IGEM Bordeaux 2018

Among the 56000 student-trees of the University of Bordeaux was living 17 motivated and ambitious young-trees. All scattered into the green mass, they reunited on this day of November 2017 to learn more about the iGEM competition. Their wise predecessors told them the adventure they lived last year. Envious and dreamers, they decided to take up the challenge too. Our 17 trees come from different horizons, with different backgrounds and future perspectives but they are all reunited by the desire to expand their branches of knowledge. As the time passed, only the trees with very resistant roots survived to the “let it go” storm. After that our 17 young little trees were reunited to form a stronger gathering ready to start the competition.

  • Our IGEM TEAM
  • Marguerite Batsale
  • Yasmine Amrani
  • Arthur Grimaud
  • Sandro Papaïs
  • Sebastien Goncalves Claro
  • Maëlle Allender
  • David Mauboules
  • Thomas Favraud
  • Ines Baghou
  • Lorine Debande
  • Jean-Clément Gallardo
  • Anaïs Labecot
  • Estelle Lesbros
  • François Hebrard
  • Pierre Jacquet
Denis
The bonsai

He is in some sort the founder father of the forest. He is nothing less than a researcher officer at the National Institute of Health and Medical Research (INSEREM). It is him who sowed the seeds since 6 years now, and watch them to grow until the Jamboree.

Marguerite
The ginkgo

She is a first year Plant Biotechnology Masters student. This ancestral tree is very powerful. Indeed, she is both president of the team, and in charge of the Human practice pole. It is good to have a ginkgo around it brings many health benefits.

Yasmine
The fir

She graduated this year with a Bachelor in Molecular and Cellular Biology. She is our team leader and has to coordinate all the progresses from the different poles. In addition she is at the head of the thorny Scientific pole to organize and motivate the lab work. Her needles shelter someone who loves to escape the everyday grind by traveling or having deep readings.

Ines
The cherry tree

She is a first year bioinformatics Master student. In charge of the Communication pole, her aim is to make shining the team as much as her flowers in lovely day of spring.

Pierre
The stick insect

He is a first year Bioinformatics Masters student. Passionate about computing, he delved the topic until to perfectly match to it. Most of the time he hides behind a screen to code and build the wiki.

Lorine
The eucalyptus

She graduated this year with a Bachelor in Molecular and Cellular Biology. She is not from Australia but her determination is from the same size. She leads the wiki construction, et make sure everything is written on time. This tree needs a minimum of sun each day.

David
The oak

He graduated this year with a Bachelor in Molecular and Cellular Biology. His branches are active in the scientific pole. Caution, this tree is robust and cannot be grown inside.

Estelle
The olive tree

She graduated of a Master in genetics. From the Southern of France, this mediterranean tree participates to the competition for the second time. After squeezing her fruits you obtain an intersting oil rich in laugh, travel and science fiction.

Thomas
The Japenese Maple

He graduated this year of a Biotechnology Engineering School. Symbol of ideas communication, he is at the head of the partnerships and funding pole. He participates to the competition for the second time, therefore this tree is always here to give an attentive leaf to the needs of the team.

François
The poplar

He graduated this year with a Bachelor degree in Molecular and Cellular Biology. This tree is tall such as his implication in the work lab for iGEM. A healthy mind in a healthy trunk is his motto.

Maëlle
The maple

She is in third year of Biotech Engineering School. She takes part of the iGEM lab experiments. Some other trees reported she regularly use 5mL propipette to share her mapple syrup.

Sandro
The weeping willow

He graduated this year with a Bachelor in Cells and Organisms Biology. Apparently he did not whimper to participate to the iGEM lab work, and he is not wailing neither during his working time.

Jean Clément
The pine

He graduated this year in Biology of Cells and Organisms. He grows straight up, like a rocket that wants to discover the world.

Frederic
The linden

He is a first year Bioinformatics Masters student. Curious about new technology he planned to build an algorithm to calculate the exact time needed for a perfect infusion.

Anaïs
The cocoa tree

She graduated with a Bachelor in Cells and Organisms Biology. Very coveted for her fruits. Well managed and processed you can extract from her a piece of heaven

Arthur
The pistachio

He graduated this year with a Bachelor in Molecular and Cellular Biology. His green ideas intermingle music, DIY, and computer science. All in one shell.

Sebastien
The catalpa

He is a first year Bioinformatics Master student. Hiding in the shadow, he is here to support the Bioinformatic team of Bordeaux. Ready to respond for any computing matters, his mind will always respond to the call of programming.