Difference between revisions of "Team:Pasteur Paris/essai4"

Line 142: Line 142:
  
  
−
/*slide gallery*/
+
/*slide gallery APPLICATION PART*/
 
* {
 
* {
 
   box-sizing: border-box; }
 
   box-sizing: border-box; }
  
 +
img{ 
 +
-moz-border-radius:7px;
 +
-webkit-border-radius:7px;
 +
border-radius:7px;
 +
}
 
a {
 
a {
 
   text-decoration: none;
 
   text-decoration: none;
Line 152: Line 157:
 
.gallery {
 
.gallery {
 
   position: relative;
 
   position: relative;
−
   height: 500px;  
+
   height: 600px;  
−
   margin-left:13%;
+
   margin-left:15%;
−
   margin-top:5%;
+
   margin-top:0%;
 +
  text-align : justify;
 
    
 
    
 
}
 
}
Line 161: Line 167:
 
     top: 0;
 
     top: 0;
 
     left: 0;
 
     left: 0;
−
     width: 90%;
+
     width: 80%;
−
     height: 100%;
+
     height: 600px;
−
     background: #A8D5D8 ;
+
     background: #FFFFFF ;
 
     opacity: 0;
 
     opacity: 0;
−
     transition: opacity 0.25s; }
+
     transition: opacity 0.25s;  
 +
}
  
 
.gallery .item:first-of-type {
 
.gallery .item:first-of-type {
Line 173: Line 180:
 
.gallery .controls {
 
.gallery .controls {
 
     color: whiteSmoke;
 
     color: whiteSmoke;
−
     color: rgba(255, 255, 255, 0.4);
+
     color: #A8D5D8;
 
     position: absolute;
 
     position: absolute;
−
     bottom: 0;
+
     bottom:0;  
−
     width: 90%;
+
     width: 80%;
 +
    margin-left:2%;
 
     font-size: 3.5em;
 
     font-size: 3.5em;
 
     text-align: center;  
 
     text-align: center;  
Line 186: Line 194:
  
 
.gallery .controls a:hover {
 
.gallery .controls a:hover {
−
       color: white;  
+
       color: #17A3B5 ;  
−
       color: white;  
+
       color: #17A3B5 ;  
 
}
 
}
  
Line 204: Line 212:
 
   0% {
 
   0% {
 
     color: whiteSmoke;
 
     color: whiteSmoke;
−
     color: rgba(255, 255, 255, 0.4); }
+
     color: #A8D5D8; }
  
 
   9.5%, 33% {
 
   9.5%, 33% {
−
     color: white;
+
     color: #17A3B5 ;
−
     color: white; }
+
     color: #17A3B5 ; }
  
 
   42.9%, 100% {
 
   42.9%, 100% {
 
     color: whiteSmoke;
 
     color: whiteSmoke;
−
     color: rgba(255, 255, 255, 0.4); } }
+
     color: #A8D5D8; } }
 +
 
  
−
.gallery .item {
 
−
  animation: galleryAnimation 21s infinite;
 
−
}
 
−
.gallery .controls .control-item {
 
−
  animation: controlAnimation 21s infinite;
 
−
}
 
 
.gallery .control-operator {
 
.gallery .control-operator {
 
   display: none;  
 
   display: none;  
Line 228: Line 231:
 
.gallery .control-operator:target ~ .controls .control-item {
 
.gallery .control-operator:target ~ .controls .control-item {
 
   color: whiteSmoke;
 
   color: whiteSmoke;
−
   color: rgba(255, 255, 255, 0.4);
+
   color: #A8D5D8;
 
   animation: none;  
 
   animation: none;  
 
}
 
}
Line 235: Line 238:
 
}
 
}
 
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-item:nth-of-type(1) {
 
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-item:nth-of-type(1) {
−
   color: white;
+
   color: #17A3B5 ;
−
   color: white;
+
   color: #17A3B5 ;  
−
}
+
−
.gallery .item:nth-of-type(1),
+
−
.gallery .control-item:nth-of-type(1) {
+
−
  animation-delay: -2s;  
+
 
}
 
}
 +
 
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
 
   opacity: 1;  
 
   opacity: 1;  
 
}
 
}
 
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-item:nth-of-type(2) {
 
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-item:nth-of-type(2) {
−
   color: white;
+
   color: #17A3B5 ;
−
   color: white;
+
   color: #17A3B5 ;  
−
}
+
−
.gallery .item:nth-of-type(2),
+
−
.gallery .control-item:nth-of-type(2) {
+
−
  animation-delay: 5s;  
+
 
}
 
}
 +
 
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
 
   opacity: 1;  
 
   opacity: 1;  
 
}
 
}
 
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-item:nth-of-type(3) {
 
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-item:nth-of-type(3) {
−
   color: white;
+
   color: #17A3B5 ;
−
   color: white;  
+
   color: #17A3B5 ;  
 
}
 
}
−
.gallery .item:nth-of-type(3),
 
−
.gallery .control-item:nth-of-type(3) {
 
−
  animation-delay: 12s;
 
−
}
 
−
 
  
 
</style>
 
</style>
Line 321: Line 313:
  
 
<h2><B>APPLICATION</B></h2>
 
<h2><B>APPLICATION</B></h2>
 +
<div class="gallery">
 +
    <div id="class="control-item" " class="control-operator"></div>
 +
    <div id="item-2" class="control-operator"></div>
 +
    <div id="item-3" class="control-operator"></div>
 +
 +
 +
    <figure class="item">
 +
      <p>1<figure><center><a href="#"><img class="Photo paysage" src="https://static.igem.org/mediawiki/2016/5/55/IMAC_Pasteur_application_design.png" width="70%" alt="Photo de présentation TRAP" /></a></center></figure>
 +
    </p>
 +
    </figure>
 +
    <figure class="item">
 +
      <p>2<figure><center><a href="#"><img class="Photo paysage" src="https://static.igem.org/mediawiki/2016/5/55/IMAC_Pasteur_application_design.png" width="70%" alt="Photo de présentation TRAP" alt="2em photo" /></a></center></figure>
 +
    </figure>
 +
    <figure class="item">
 +
      <p>3<figure><center><a href="#"><img class="Photo paysage" src="https://static.igem.org/mediawiki/2016/5/55/IMAC_Pasteur_application_design.png" width="70%" alt="Photo de présentation TRAP" alt="2em photo" /></a></center></figure>
 +
    </figure>
 +
 +
    <div class="controls">
 +
      <a class="control-item" href="#item-1">•</a>
 +
      <a class="control-item" href="#item-2">•</a>
 +
      <a class="control-item" href="#item-3">•</a>
 +
    </div>
 +
  </div>
 +
  
  

Revision as of 13:02, 28 September 2016