Difference between revisions of "Team:Grenoble-Alpes/Microfluidics"

(Created page with "{{Grenoble-Alpes/menu}} {{Grenoble-Alpes/CSS}} <html> <head> <title> Engineering</title> <meta charset="utf-8"> <style> header {...")
 
 
(138 intermediate revisions by 2 users not shown)
Line 38: Line 38:
 
             #resultsbanner{
 
             #resultsbanner{
 
                 text-decoration: none;
 
                 text-decoration: none;
−
                 font-family: 'Molenga', Georgia, Times, serif;
+
                 font-family: 'Lato';  
 
                 font-size: 2vw;
 
                 font-size: 2vw;
 
                 color: #FFF;
 
                 color: #FFF;
 +
                text-transform: uppercase;
 
             }  
 
             }  
 
        
 
        
 +
.fond_motor {
 +
              width: 100%;
 +
            }
 +
 +
.stator_motor {
 +
              width: 30%;
 +
              padding:2% 35% 2% 35%;
 +
              position: relative;
 +
              float:left;
 +
              display:inline;
 +
              z-index:2;
 +
            }
 +
 +
.rotor_motor {
 +
              position:absolute ;
 +
              width: 5%;
 +
              left: 47.5%;
 +
              top: 31.5%;
 +
              z-index:3;
 +
            }
 +
           
 +
.bobine_top {
 +
              position:absolute ;
 +
              width: 4%;
 +
              left: 48%;
 +
              top: 15%;
 +
              transform:rotate(90deg);
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 +
            }
 +
 +
 +
.bobine_right {
 +
              position:absolute ;
 +
              width: 4%;
 +
              left: 57.5%;
 +
              top: 42%;
 +
              transform:rotate(180deg);
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 +
                }
 +
 +
.bobine_bot {
 +
              position:absolute ;
 +
              width: 4%;
 +
              left: 48%;
 +
              top: 71%;
 +
              transform:rotate(270deg);
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 +
            }
 +
 +
.bobine_left {
 +
              position:absolute ;
 +
              width: 4%;
 +
              left: 38.5%;
 +
              top: 42%;
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 +
            }         
 +
     
 +
 +
 +
.stator_motor:hover .bobine_top {
 +
              -webkit-filter: brightness(1);
 +
              -moz-filter: brightness(1);
 +
              -o-filter: brightness(1);
 +
              -ms-filter: brightness(1);
 +
 +
              filter: brightness(1);
 +
              }
 +
 +
.stator_motor:hover .bobine_right {
 +
    -webkit-animation: illuminate_right 4s linear infinite;
 +
    -moz-animation: illuminate_right 4s linear infinite;
 +
    animation: illuminate_right 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .bobine_bot {
 +
    -webkit-animation: illuminate_bot 4s linear infinite;
 +
    -moz-animation: illuminate_bot 4s linear infinite;
 +
    animation: illuminate_bot 4s linear infinite;
 +
                }
 +
 +
.stator_motor:hover .bobine_left {
 +
    -webkit-animation: illuminate_left 4s linear infinite;
 +
    -moz-animation: illuminate_left 4s linear infinite;
 +
    animation: illuminate_left 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .bobine_top {
 +
    -webkit-animation: illuminate_top 4s linear infinite;
 +
    -moz-animation: illuminate_top 4s linear infinite;
 +
    animation: illuminate_top 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .rotor_motor {
 +
    -webkit-animation: turn 4s linear infinite;
 +
    -moz-animation: turn 4s linear infinite;
 +
    animation: turn 4s linear infinite;
 +
}
 +
 +
 +
 +
 +
@-moz-keyframes turn {
 +
    0% {transform: rotate(0deg)}
 +
    100% {transform: rotate(360deg)}
 +
}
 +
 +
@keyframes turn {
 +
    0% {transform: rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
 +
 +
@-webkit-keyframes turn {
 +
    0% {transform:rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
 +
 +
/************ Anim stepper right coal **********/
 +
 +
@-moz-keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
/************ Anim stepper bot coal **********/
 +
 +
@-moz-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
/************ Anim stepper left coal **********/
 +
 +
@-moz-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
 +
/************ Anim stepper top coal **********/
 +
 +
@-moz-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
 
       </style>
 
       </style>
 
      
 
      
Line 53: Line 507:
 
         <img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png">  
 
         <img class="couvlogogeo" src="https://static.igem.org/mediawiki/2017/c/c9/LogolocalisationiGEMGrenoble.png">  
 
         </header>
 
         </header>
 +
 +
<p> Test </p>
 +
 +
        <div class="stator_motor">
 +
 +
        <img class="fond_motor" src="https://static.igem.org/mediawiki/2017/2/2e/Stator_motor.png">
 +
 +
           
 +
            <img class="rotor_motor" src="https://static.igem.org/mediawiki/2017/3/38/Aimant_motor.png">
 +
            <img class="bobine_top" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_right" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_bot" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_left" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
 +
        </div>
 +
       
 +
<p> Test </p>
 +
 +
  
 
         <div style="background-color:#007EFD; padding: 2% 2%; text-align:center;">
 
         <div style="background-color:#007EFD; padding: 2% 2%; text-align:center;">
−
             <a href="https://2017.igem.org/Team:Grenoble-Alpes/Description#ancre2" id="resultsbanner">
+
             <a href="https://2017.igem.org/Team:Grenoble-Alpes/Demonstrate" id="resultsbanner">
−
             See our results
+
             Our results
 
             </a>
 
             </a>
 
         </div>
 
         </div>

Latest revision as of 08:21, 30 August 2017

Engineering

Microfluidics

Test

Test

Designed by iGEM Grenoble-Alpes 2017 team | Site Map