Difference between revisions of "Team:Bordeaux/Team"

Line 2: Line 2:
  
 
<html>
 
<html>
−
 
−
    <head>
 
−
        <meta charset="utf-8" />
 
−
        <style>
 
−
@import url(http://fonts.googleapis.com/css?family=Anaheim);
 
−
 
−
*{
 
−
  margin: 0;
 
−
  padding: 0;
 
−
  outline: none;
 
−
  border: none;
 
−
box-sizing: border-box;
 
−
}
 
−
*:before,
 
−
*:after{
 
−
box-sizing: border-box;
 
−
}
 
−
html,
 
−
body{
 
−
min-height: 100%;
 
−
}
 
−
body{
 
−
 
−
}
 
−
h1{
 
−
display: table;
 
−
margin: 5% auto 0;
 
−
text-transform: uppercase;
 
−
font-family: 'Anaheim', sans-serif;
 
−
font-size: 4em;
 
−
font-weight: 400;
 
−
text-shadow: 0 1px white, 0 2px black;
 
−
}
 
−
.container{
 
−
margin: 4% auto;
 
−
width: 210px;
 
−
height: 140px;
 
−
position: relative;
 
−
perspective: 1000px;
 
−
}
 
−
#carousel{
 
−
width: 100%;
 
−
height: 100%;
 
−
position: absolute;
 
−
transform-style: preserve-3d;
 
−
animation: rotation 20s infinite linear;
 
−
}
 
−
#carousel:hover{
 
−
animation-play-state: paused;
 
−
}
 
−
#carousel figure{
 
−
display: block;
 
−
position: absolute;
 
−
width: 186px;
 
−
height: 116px;
 
−
left: 10px;
 
−
top: 10px;
 
−
background: black;
 
−
overflow: hidden;
 
−
border: solid 5px black;
 
−
}
 
−
#carousel figure:nth-child(1) {transform: rotateY(10deg) translateZ(500px);}
 
−
#carousel figure:nth-child(2) { transform: rotateY(25deg) translateZ(500px);}
 
−
#carousel figure:nth-child(3) { transform: rotateY(51deg) translateZ(500px);}
 
−
#carousel figure:nth-child(4) { transform: rotateY(77deg) translateZ(500px);}
 
−
#carousel figure:nth-child(5) { transform: rotateY(102deg) translateZ(500px);}
 
−
#carousel figure:nth-child(6) { transform: rotateY(128deg) translateZ(500px);}
 
−
#carousel figure:nth-child(7) { transform: rotateY(154deg) translateZ(500px);}
 
−
#carousel figure:nth-child(8) { transform: rotateY(180deg) translateZ(500px);}
 
−
#carousel figure:nth-child(9) { transform: rotateY(205deg) translateZ(500px);}
 
−
#carousel figure:nth-child(10) { transform: rotateY(231deg) translateZ(500px);}
 
−
#carousel figure:nth-child(11) { transform: rotateY(257deg) translateZ(500px);}
 
−
#carousel figure:nth-child(12) { transform: rotateY(282deg) translateZ(500px);}
 
−
#carousel figure:nth-child(13) { transform: rotateY(310deg) translateZ(500px);}
 
−
#carousel figure:nth-child(14) { transform: rotateY(360deg) translateZ(500px);}
 
−
 
−
img{
 
−
 
−
cursor: pointer;
 
−
transition: all .5s ease;
 
−
}
 
−
img:hover{
 
−
 
−
  transform: scale(1.2,1.2);
 
−
}
 
−
 
−
@keyframes rotation{
 
−
from{
 
−
transform: rotateY(0deg);
 
−
}
 
−
to{
 
−
transform: rotateY(360deg);
 
−
}
 
−
}
 
−
        </style>
 
−
        <title>Premiers tests du CSS</title>
 
−
    </head>
 
  
 
<!-- JQUERY for bubble title -->
 
<!-- JQUERY for bubble title -->
Line 130: Line 33:
 
         </script>
 
         </script>
 
         </div>
 
         </div>
 +
    </section>
 +
 +
    <section id="Mascot">
 +
        <div class="content_wrapper">
 +
 +
            <div class="column full_size">
 +
            <h1 style="text-align:center">The mascots</h1> 
 +
            </div>
 +
 +
            <div class="column half_size">
 +
            <h1 align="center">Bioo</h1>
 +
            <p style="text-align:center"><i>Click on the picture to know more about him!</i></p>
 +
 +
            <img src=" https://static.igem.org/mediawiki/2016/a/a0/T--Bordeaux--BiooAwake.png "
 +
            style="display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
 +
            onmouseover="this.src=' https://static.igem.org/mediawiki/2016/9/97/T--Bordeaux--BiooAsleep.png ' "
 +
            style="display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
 +
            onclick="Mascot_display('Bioo')"
 +
            onmouseout="this.src=' https://static.igem.org/mediawiki/2016/a/a0/T--Bordeaux--BiooAwake.png ' "
 +
            style=" display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
 +
            id="Bioo" title="Meet Bioo!">
 +
            </div>
 +
 +
            <div class="column half_size">
 +
            <h1 align="center">Foo</h1>
 +
            <p style="text-align:center"><i>Click on the picture to know more about him!</i></p>
 +
 +
            <img src=" https://static.igem.org/mediawiki/2016/6/60/T--Bordeaux--FooAwake.png "
 +
            style="display:block ; margin-left: auto ; margin-right: auto ; width:40% ; height:auto"
 +
            onmouseover="this.src=' https://static.igem.org/mediawiki/2016/e/ef/T--Bordeaux--FooAsleep.png '"
 +
            style="display:block ; margin-left: auto ; margin-right: auto ; width:50% ; height:auto"
 +
            onclick="Mascot_display('Foo')"
 +
            onmouseout="this.src=' https://static.igem.org/mediawiki/2016/6/60/T--Bordeaux--FooAwake.png '"
 +
            style="display:block ; margin-left: auto ; margin-right: auto ; width:40% ; height:auto"
 +
            id="Foo" title="Meet Foo!">
 +
            </div>
 +
 +
            <div class="column full_size">
 +
            <div id="MascotComic"></div>
 +
            </div>
 +
 +
                  <!-- JQUERY for moving menu -->
 +
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 +
 +
        <script>
 +
 +
            $(function() {
 +
                $("#Bioo").bind('click', function(event) {
 +
                    $('html, body').stop().animate({
 +
                        scrollTop: $("#MascotComic").offset().top
 +
                    }, 1500, 'easeInOutExpo');
 +
                event.preventDefault();
 +
                });
 +
            });
 +
 +
            $(function() {
 +
                $("#Foo").bind('click', function(event) {
 +
                    $('html, body').stop().animate({
 +
                        scrollTop: $("#MascotComic").offset().top
 +
                    }, 1500, 'easeInOutExpo');
 +
                event.preventDefault();
 +
                });
 +
            });
 +
 +
            function Mascot_display(name) {
 +
                var element = document.getElementById("MascotComic");
 +
                var html="";
 +
 +
                if  (name === "Bioo") {
 +
                    html +="<img src=\"http:\/\/2016.igem.org\/wiki\/images\/8/8b\/T--Bordeaux--Tempory.jpeg\"";
 +
                    html +="style=\"display:block ; margin-left: auto ; margin-right: auto ; width:100% ; height:auto\"";
 +
                    html +="id=\"BiooBD\" title=\"(Bioo)tiful Life!\">";
 +
                }
 +
 +
                else if (name === "Foo") {
 +
                    html +="<img src=' http:\/\/2016.igem.org\/wiki\/images\/f\/fa\/T--Bordeaux--FoolishAdvendtures.png' ";
 +
                    html +="style=\"display:block ; margin-left: auto ; margin-right: auto ; width:100% ; height:auto\"";
 +
                    html +="id=\"FooBD\" title=\"(Foo)lish Adventures!\">";
 +
                }
 +
       
 +
                element.innerHTML = html;
 +
            };
 +
 +
        </script>
 +
 +
        </div>
 +
 
     </section>
 
     </section>
  
Line 376: Line 367:
 
                 html += "            <p align=\"justify\"><b>22 years old<\/b>, currently in 4th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, she started the iGEM adventure this year. She loves wandering into the wilderness to take pictures. The legend says that her bloodline comes from the love story between a woman and one of the last giants.<\/p>";
 
                 html += "            <p align=\"justify\"><b>22 years old<\/b>, currently in 4th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, she started the iGEM adventure this year. She loves wandering into the wilderness to take pictures. The legend says that her bloodline comes from the love story between a woman and one of the last giants.<\/p>";
 
                 html += "            ";
 
                 html += "            ";
−
                 html += " <h3>Alexandre DE BARROS, the Poster Designer<\/h3>";
+
                 html += "           <h3>Alexandre DE BARROS, the Poster Designer<\/h3>";
 
                 html += "            <p align=\"justify\"><b>21 years old<\/b>, currently in 3rd year of <i>Molecular Biology and Cellular Physiology (Bordeaux University)<\/i>, he started the iGEM adventure this year. At day, he is an Photoshop expert making for the team some great and wonderful banner and posters. But when the night comes, he becomes a Rock Star ... <\/p>";
 
                 html += "            <p align=\"justify\"><b>21 years old<\/b>, currently in 3rd year of <i>Molecular Biology and Cellular Physiology (Bordeaux University)<\/i>, he started the iGEM adventure this year. At day, he is an Photoshop expert making for the team some great and wonderful banner and posters. But when the night comes, he becomes a Rock Star ... <\/p>";
 
                 html += "            ";         
 
                 html += "            ";         
Line 401: Line 392:
 
                 html += "            <p align=\"justify\"><b>23 years old<\/b>, currently in 4th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, he started the iGEM adventure this year. He likes singing at loud in the lab during doing his experiments. He always success the PCR that's why, the team calls him \"Fairy fingers of PCR\".<\/p>";
 
                 html += "            <p align=\"justify\"><b>23 years old<\/b>, currently in 4th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, he started the iGEM adventure this year. He likes singing at loud in the lab during doing his experiments. He always success the PCR that's why, the team calls him \"Fairy fingers of PCR\".<\/p>";
 
                 html += "            ";
 
                 html += "            ";
−
                 html += " <h3>Noémie DUBUC, the CRISPR-CAS9 lover<\/h3>";
+
                 html += "           <h3>Noémie DUBUC, the CRISPR-CAS9 lover<\/h3>";
 
                 html += "            <p align=\"justify\"><b>23 years old<\/b>, currently in 5th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, she started the iGEM adventure this year. Always have many ideas for the CRISPR project, To continue ... <\/p>";
 
                 html += "            <p align=\"justify\"><b>23 years old<\/b>, currently in 5th year of <i>Molecular and Cellular Genetics (Bordeaux University)<\/i>, she started the iGEM adventure this year. Always have many ideas for the CRISPR project, To continue ... <\/p>";
 
                 html += "            ";  
 
                 html += "            ";  
Line 433: Line 424:
 
     </section>
 
     </section>
  
−
<section id="Mascot">
 
−
        <div class="content_wrapper">
 
  
−
            <div class="column full_size">
+
    <section id="gallery">
−
            <h1 style="text-align:center">The mascots</h1> 
+
−
            </div>
+
  
−
            <div class="column half_size">
+
    <div class="content_wrapper">
−
            <h1 align="center">Bioo</h1>
+
−
            <p style="text-align:center"><i>Click on the picture to know more about him!</i></p>  
+
  
−
            <img src=" https://static.igem.org/mediawiki/2016/a/a0/T--Bordeaux--BiooAwake.png "  
+
    <div class="column full_size">
−
            style="display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
+
−
            onmouseover="this.src=' https://static.igem.org/mediawiki/2016/9/97/T--Bordeaux--BiooAsleep.png ' "
+
−
            style="display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
+
−
            onclick="Mascot_display('Bioo')"
+
−
            onmouseout="this.src=' https://static.igem.org/mediawiki/2016/a/a0/T--Bordeaux--BiooAwake.png ' "
+
−
            style=" display:block ; margin-left: auto ; margin-right: auto; width:50% ; height:200px"
+
−
            id="Bioo" title="Meet Bioo!">
+
−
            </div>
+
  
−
            <div class="column half_size">
+
    <style>
−
            <h1 align="center">Foo</h1>
+
−
            <p style="text-align:center"><i>Click on the picture to know more about him!</i></p>  
+
  
−
            <img src=" https://static.igem.org/mediawiki/2016/6/60/T--Bordeaux--FooAwake.png "
+
.container{
−
            style="display:block ; margin-left: auto ; margin-right: auto ; width:40% ; height:auto"
+
    margin: 4% auto;
−
            onmouseover="this.src=' https://static.igem.org/mediawiki/2016/e/ef/T--Bordeaux--FooAsleep.png '"
+
    width: 210px;
−
            style="display:block ; margin-left: auto ; margin-right: auto ; width:50% ; height:auto"
+
    height: 140px;
−
            onclick="Mascot_display('Foo')"
+
    position: relative;
−
            onmouseout="this.src=' https://static.igem.org/mediawiki/2016/6/60/T--Bordeaux--FooAwake.png '"
+
    perspective: 1000px;
−
            style="display:block ; margin-left: auto ; margin-right: auto ; width:40% ; height:auto"
+
}
−
            id="Foo" title="Meet Foo!">
+
#carousel{
−
            </div>
+
    width: 100%;
 +
    height: 100%;
 +
    position: absolute;
 +
    transform-style: preserve-3d;
 +
    animation: rotation 20s infinite linear;
 +
}
 +
#carousel:hover{
 +
    animation-play-state: paused;
 +
}
 +
#carousel figure{
 +
    display: block;
 +
    position: absolute;
 +
    width: 186px;
 +
    height: 116px;
 +
    left: 10px;
 +
    top: 10px;
 +
    background: black;
 +
    overflow: hidden;
 +
    border: solid 5px black;
 +
}
 +
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(500px);}
 +
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(500px);}
 +
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(500px);}
 +
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(500px);}
 +
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(500px);}
 +
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(500px);}
 +
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(500px);}
 +
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(500px);}
 +
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(500px);}
  
−
            <div class="column full_size">
+
img{
−
            <div id="MascotComic"></div>
+
   
−
            </div>
+
    cursor: pointer;
−
  <div class="container">
+
    transition: all .5s ease;
−
<div id="carousel">
+
}
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0101.jpg"width="100%" height="100%"/></figure>
+
img:hover{
−
+
   
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740807-dsc-0123.jpg" width="100%" height="100%" /> </figure>
+
  transform: scale(1.2,1.2);
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740814-dsc-0131.jpg" width="100%" height="100%" /></figure>
+
}
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0136.jpg" width="100%" height="100%" /> </figure>
+
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0147.jpg"width="100%" height="100%" /> </figure>
+
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741052-img-5112-1.jpg"width="100%" height="100%" /> </figure>
+
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741082-img-8826.jpg"width="100%" height="100%" /> </figure>
+
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741084-img-8804.jpg"width="100%" height="100%"/></figure>
+
  
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476779752-dsc-0008.jpg"width="100%" height="100%"/></figure>
+
@keyframes rotation{
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476779798-dsc-0146.jpg"width="100%" height="100%"/></figure>
+
    from{
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476779843-dsc-0364.jpg"width="100%" height="100%"/></figure>
+
        transform: rotateY(0deg);
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476779845-dsc-0371.jpg"width="100%" height="100%"/></figure>
+
    }
−
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476779838-dsc-0334.jpg"width="100%" height="100%"/></figure>
+
    to{
−
</div>
+
        transform: rotateY(360deg);
−
</div>
+
    }
 +
}
 +
        </style>
 +
        <title>Premiers tests du CSS</title>
 +
 
 +
    <div class="container">
 +
        <div id="carousel">
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0101.jpg" style="width:100%;height:auto"></figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740807-dsc-0123.jpg" style="width:100%;height:auto"> </figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740814-dsc-0131.jpg" style="width:100%;height:auto"></figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0136.jpg" style="width:100%;height:auto"></figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0147.jpg" style="width:100%;height:auto"> </figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741052-img-5112-1.jpg" style="width:100%;height:auto"> </figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741082-img-8826.jpg" style="width:100%;height:auto"> </figure>
 +
            <figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741084-img-8804.jpg" style="width:100%;height:auto"></figure>
 
         </div>
 
         </div>
 +
    </div>
  
−
            <!-- JQUERY for moving menu -->
+
    <div class="photos">
−
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+
    </div>
−
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
+
  
−
        <script>
+
    </div>
  
−
            $(function() {
+
    </div>
−
                $("#Bioo").bind('click', function(event) {
+
−
                    $('html, body').stop().animate({
+
−
                        scrollTop: $("#MascotComic").offset().top
+
−
                    }, 1500, 'easeInOutExpo');
+
−
                event.preventDefault();
+
−
                });
+
−
            });
+
−
 
+
−
            $(function() {
+
−
                $("#Foo").bind('click', function(event) {
+
−
                    $('html, body').stop().animate({
+
−
                        scrollTop: $("#MascotComic").offset().top
+
−
                    }, 1500, 'easeInOutExpo');
+
−
                event.preventDefault();
+
−
                });
+
−
            });
+
−
 
+
−
            function Mascot_display(name) {
+
−
                var element = document.getElementById("MascotComic");
+
−
                var html="";
+
−
 
+
−
                if  (name === "Bioo") {
+
−
                    html +="<img src=\"http:\/\/2016.igem.org\/wiki\/images\/8/8b\/T--Bordeaux--Tempory.jpeg\"";
+
−
                    html +="style=\"display:block ; margin-left: auto ; margin-right: auto ; width:100% ; height:auto\"";
+
−
                    html +="id=\"BiooBD\" title=\"(Bioo)tiful Life!\">";
+
−
                }
+
−
 
+
−
                else if (name === "Foo") {
+
−
                    html +="<img src=' http:\/\/2016.igem.org\/wiki\/images\/f\/fa\/T--Bordeaux--FoolishAdvendtures.png' ";
+
−
                    html +="style=\"display:block ; margin-left: auto ; margin-right: auto ; width:100% ; height:auto\"";
+
−
                    html +="id=\"FooBD\" title=\"(Foo)lish Adventures!\">";
+
−
                }
+
−
       
+
−
                element.innerHTML = html;
+
−
            };
+
−
 
+
−
        </script>
+
 
     </section>
 
     </section>
 
</html>
 
</html>
  
 
{{Bordeaux/Footer}}
 
{{Bordeaux/Footer}}

Revision as of 08:57, 18 October 2016

Sleep with EpiC elegans

The mascots

Bioo

Click on the picture to know more about him!

Foo

Click on the picture to know more about him!

Our supervisors

Denis DUPUY

Denis DUPUY is a Research officer (CR1) at the National Institute of Health and Medical Research (INSERM). He works at the European Institute of Chemistry and Biology on tools and methods needed to perform systematic analysis of spatiotemporal gene expression in vivo in Caenorhabditis elegans.

Marie BEURTON-AIMAR

Marie BEURTON AIMAR is is the head of the Bioformatics Master of Bordeaux University. She is also a Research officer at the Bordeaux Laboratory of Research and Informatics (LaBRI) and works on the modeling and simulation of biochemical reactions and on the processing and analysis of biological images.

Together, they have been participating in the iGEM competition since 2012 and they have been supporting the student initiatives through the creation of the iGEM Bordeaux team.

The members

Hiba BEN MOHAMED, a real iGEM addict!

Hiba is the oldest member of our team.
24 years old, currently in her 5th year of Agroscience Biology specialized in Phytopathology and Mycology (Bordeaux University), she started her first iGEM adventure in 2014. Against winds and tides, she is always there (we can't get rid of her!), supporting the team with her happiness and her smile. Money (for sponsoring!) and handsome guys can't resist to her charms.

Click on the pictures to know more about each team!
(Or wait few seconds and something will appear..)

Team Survivor

Team Valor

Team Mystic

Team Instinct

How to find us ?

Feel free to email us to provide some feedback on our project, have some information on the team and our work, or to just say hello !

Mail: igembdx@gmail.com
Copyright © iGEM Bordeaux 2016