Difference between revisions of "Team:Bordeaux/Team"

Line 6: Line 6:
 
         <meta charset="utf-8" />
 
         <meta charset="utf-8" />
 
         <style>
 
         <style>
.photos img {
+
@import url(http://fonts.googleapis.com/css?family=Anaheim);
    -webkit-transition: all 0.5s ease-out;
+
 
    -moz-transition: all 0.5s ease-out;
+
*{
    -o-transition: all 0.5s ease-out;
+
  margin: 0;
    transition: all 0.5s ease-out;
+
  padding: 0;
    padding: 10px 10px 30px 10px;
+
  outline: none;
    background: white;
+
  border: none;
    border: solid 1px black;
+
box-sizing: border-box;
 
}
 
}
.photos img:nth-of-type(1) {
+
*:before,
    left: 50px;
+
*:after{
    top: 50px;
+
box-sizing: border-box;
    -webkit-transform: rotate(5deg);
+
    -moz-transform: rotate(5deg);
+
    -o-transform: rotate(5deg);
+
    transform: rotate(5deg);
+
 
}
 
}
+
html,
.photos img:nth-of-type(2) {
+
body{
    left: 50px;
+
min-height: 100%;
    top: 50px;
+
    -webkit-transform: rotate(-10deg);
+
    -moz-transform: rotate(-10deg);
+
    -o-transform: rotate(-10deg);
+
    transform: rotate(-10deg);
+
 
}
 
}
+
body{
.photos img:nth-of-type(3) {
+
 
    left: 250px;
+
    top: 50px;
+
    -webkit-transform: rotate(7deg);
+
    -moz-transform: rotate(7deg);
+
    -o-transform: rotate(7deg);
+
    transform: rotate(7deg);
+
 
}
 
}
+
h1{
.photos img:nth-of-type(4) {
+
display: table;
    left: 350px;
+
margin: 5% auto 0;
    top: 150px;
+
text-transform: uppercase;
    -webkit-transform: rotate(-3deg);
+
font-family: 'Anaheim', sans-serif;
    -moz-transform: rotate(-3deg);
+
font-size: 4em;
    -o-transform: rotate(-3deg);
+
font-weight: 400;
    transform: rotate(-3deg);
+
text-shadow: 0 1px white, 0 2px black;
 
}
 
}
+
.container{
.photos img:nth-of-type(5) {
+
margin: 4% auto;
    left: 450px;
+
width: 210px;
    top: 50px;
+
height: 140px;
    -webkit-transform: rotate(2deg);
+
position: relative;
    -moz-transform: rotate(2deg);
+
perspective: 1000px;
    -o-transform: rotate(2deg);
+
    transform: rotate(2deg);
+
 
}
 
}
.photos img:nth-of-type(6) {
+
#carousel{
    left: 550px;
+
width: 100%;
    top: 100px;
+
height: 100%;
    -webkit-transform: rotate(10deg);
+
position: absolute;
    -moz-transform: rotate(10deg);
+
transform-style: preserve-3d;
    -o-transform: rotate(10deg);
+
animation: rotation 20s infinite linear;
    transform: rotate(10deg);
+
 
}
 
}
.photos img:nth-of-type(7) {
+
#carousel:hover{
    left: 650px;
+
animation-play-state: paused;
    top: 50px;
+
    -webkit-transform: rotate(-7deg);
+
    -moz-transform: rotate(-7deg);
+
    -o-transform: rotate(-7deg);
+
    transform: rotate(-7deg);
+
 
}
 
}
.photos img:nth-of-type(8) {
+
#carousel figure{
    left: 750px;
+
display: block;
    top: 150px;
+
position: absolute;
    -webkit-transform: rotate(-10deg);
+
width: 186px;
    -moz-transform: rotate(-10deg);
+
height: 116px;
    -o-transform: rotate(-10deg);
+
left: 10px;
    transform: rotate(-10deg);
+
top: 10px;
 +
background: black;
 +
overflow: hidden;
 +
border: solid 5px black;
 
}
 
}
.photos img:nth-of-type(9) {
+
#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}
    left: 850px;
+
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
    top: 50px;
+
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
    -webkit-transform: rotate(6deg);
+
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
    -moz-transform: rotate(6deg);
+
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
    -o-transform: rotate(6deg);
+
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
    transform: rotate(6deg);
+
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
 +
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
 +
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
 +
 
 +
img{
 +
-webkit-filter: grayscale(1);
 +
cursor: pointer;
 +
transition: all .5s ease;
 
}
 
}
.photos img:nth-of-type(10) {
+
img:hover{
    left: 950px;
+
-webkit-filter: grayscale(0);
    top: 100px;
+
  transform: scale(1.2,1.2);
    -webkit-transform: rotate(-4deg);
+
    -moz-transform: rotate(-4deg);
+
    -o-transform: rotate(-4deg);
+
    transform: rotate(-4deg);
+
}
+
.photos img:nth-of-type(11) {
+
    left: 10950px;
+
    top: 50px;
+
    -webkit-transform: rotate(5deg);
+
    -moz-transform: rotate(5deg);
+
    -o-transform: rotate(5deg);
+
    transform: rotate(5deg);
+
}
+
.photos img:nth-of-type(12) {
+
    left: 1150px;
+
    top: 150px;
+
    -webkit-transform: rotate(-4deg);
+
    -moz-transform: rotate(-4deg);
+
    -o-transform: rotate(-4deg);
+
    transform: rotate(-4deg);
+
}
+
.photos img:hover {
+
    -webkit-transform: rotate(380deg) scale(1.5);
+
    -moz-transform: rotate(380deg) scale(1.5);
+
    -o-transform: rotate(380deg) scale(1.5);
+
    transform: rotate(380deg) scale(1.5);
+
    z-index: 10;
+
 
}
 
}
  
           
+
@keyframes rotation{
 +
from{
 +
transform: rotateY(0deg);
 +
}
 +
to{
 +
transform: rotateY(360deg);
 +
}
 +
}
 
         </style>
 
         </style>
 
         <title>Premiers tests du CSS</title>
 
         <title>Premiers tests du CSS</title>
Line 499: Line 466:
 
             <div id="MascotComic"></div>
 
             <div id="MascotComic"></div>
 
             </div>
 
             </div>
<div class="photos">  
+
  <div class="container">
    <img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0101.jpg" width="250" height="250" />  
+
<div id="carousel">
    <img src="http://image.noelshack.com/fichiers/2016/42/1476740807-dsc-0123.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0101.jpg" width="250" height="250" /></figure>
    <img src="http://image.noelshack.com/fichiers/2016/42/1476740810-dsc-0127.jpg" width="250" height="250" />  
+
<figure><img src="http://lorempixel.com/186/116/nature/2" alt=""></figure>
    <img src="http://image.noelshack.com/fichiers/2016/42/1476740814-dsc-0131.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740807-dsc-0123.jpg" width="250" height="250" /> </figure>
    <img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0136.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740814-dsc-0131.jpg" width="250" height="250" /></figure>
<img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0147.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0136.jpg" width="250" height="250" /> </figure>
<img src="http://image.noelshack.com/fichiers/2016/42/1476741052-img-5112-1.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476740806-dsc-0147.jpg" width="250" height="250" /> </figure>
<img src="http://image.noelshack.com/fichiers/2016/42/1476741082-img-8826.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741052-img-5112-1.jpg" width="250" height="250" /> </figure>
<img src="http://image.noelshack.com/fichiers/2016/42/1476741084-img-8804.jpg" width="250" height="250" />  
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741082-img-8826.jpg" width="250" height="250" /> </figure>
 
+
<figure><img src="http://image.noelshack.com/fichiers/2016/42/1476741084-img-8804.jpg" width="250" height="250" /></figure>
<img src="http://image.noelshack.com/fichiers/2016/42/1476740879-dsc-0527.jpg" width="250" height="250" />  
+
</div>
<img src="http://image.noelshack.com/fichiers/2016/42/1476740849-dsc-0501.jpg" width="250" height="250" />  
+
</div>
<img src="http://image.noelshack.com/fichiers/2016/42/1476740879-dsc-0535.jpg" width="250" height="250" />
+
<div class="photos">
 +
  
 +
   
 
</div>
 
</div>
 
         </div>
 
         </div>

Revision as of 08:13, 18 October 2016

Sleep with EpiC elegans

Premiers tests du CSS

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

The mascots

Bioo

Click on the picture to know more about him!

Foo

Click on the picture to know more about him!