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

Line 28: Line 28:
 
     0% {opacity:0;}
 
     0% {opacity:0;}
 
     100% {opacity:1;}
 
     100% {opacity:1;}
}
+
}        
         
+
  
               
+
/* ************************ MINIATURES ******************** */               
  
            /*Miniature*/
 
 
             .image1{
 
             .image1{
 
                 width: 20%;
 
                 width: 20%;
Line 39: Line 37:
 
                 opacity:1;
 
                 opacity:1;
 
             }
 
             }
            /*Miniature*/
+
 
 
             .image1:hover{
 
             .image1:hover{
 
               opacity: 0.8;
 
               opacity: 0.8;
 
 
            }
 
            /*image dans PopUp*/
 
            img{
 
                width: 100%;
 
            }
 
           
 
            /* Popup */
 
            .popup {
 
                position: relative;
 
                display: block;
 
                cursor: pointer;
 
 
             }
 
             }
  
            /*Popup et texte */
+
/* ************************ POP UP ******************** */
            .popup .popuptext1 {
+
 
                visibility: hidden;
+
.popup-content {
                width: 100%;
+
  padding-top: 1%;
                background-color: #364A5E ;
+
  padding-bottom: 1%;
                color: #fff;
+
  margin-bottom: 0%;
                text-align: center;
+
  margin-top: 0%;
                padding: 0.7% 0% 8% 0%;
+
  background-color:#364A5E;
                padding-bottom: 1.5%;
+
  opacity: 1;
                position: absolute;
+
  }
                transform: translateY(100%);
+
 
                z-index: 1;
+
.popup {
                bottom: 125%;
+
  display:none;
                left: 0%;
+
  height:100%;
            }
+
  top:0;
 
+
  left:0;
 +
  }
 +
 
 +
.popup:target {
 +
  display: block;
 +
  position:fixed;
 +
  width: 100%;
 +
  overflow-y: scroll;
 +
  overflow-x:hidden;
 +
  z-index: 999;
 +
  -webkit-animation: fadeIn 1s;
 +
  animation: fadeIn 1s
 +
  }
 +
 
 +
.popup-photo {
 +
    width: 100%;
 +
    padding: 0%;
 +
    opacity: 1;
 +
    }
 +
 
 +
 
 +
.popup-nom{
 +
  color:  #fff;
 +
  text-align: center;
 +
  }
 +
 
 +
.popup-etude{
 +
  color:  #fff;
 +
  text-align: center;
 +
  }
 +
 
 +
.popup-citation{
 +
  color:  #fff;
 +
  text-align: center;
 +
  }
 +
 
 +
.popup-description{
 +
  color:  #fff;
 +
  }
 
    
 
    
            /* Apparition du PopUp*/
+
/* Animation du PopUp*/
            .popup .show {
+
                visibility: visible;
+
                -webkit-animation: fadeIn 1s;
+
                animation: fadeIn 1s
+
            }
+
  
            /* Animation du PopUp*/
 
 
             @-webkit-keyframes fadeIn {
 
             @-webkit-keyframes fadeIn {
 
                 from {opacity: 0;}  
 
                 from {opacity: 0;}  
Line 162: Line 179:
 
             }
 
             }
 
              
 
              
        /* ************************ POP UP ******************** */
 
 
.popup1-content {
 
  padding-top: 1%;
 
  padding-bottom: 1%;
 
  margin-bottom: 0%;
 
  margin-top: 0%;
 
  background-color:black;
 
  opacity: 1;
 
  }
 
 
.popup1 {
 
  height:100%;
 
  top:0;
 
  left:0;
 
  display: none;
 
  position:fixed;
 
  width: 100%;
 
  overflow-y: scroll;
 
  overflow-x:hidden;
 
  z-index: 999;
 
  }
 
 
.popup1-photo {
 
    width: 50%;
 
    padding: 0%;
 
    opacity: 1;
 
    }
 
 
.popup1-cadre {
 
  border: 1px solid #bdc3c7;
 
  margin: 2% 20% 2% 20%;
 
  padding: 3% 3% 3% 3%;
 
  opacity: 1;
 
  }
 
 
.popup1-cadre p{
 
  color: #ecf0f1;
 
  }
 
 
 
  
 
         </style>
 
         </style>
 
          
 
          
 
         <script>
 
         <script>
            //Fonction PopUp (Une par image)(N° de la fonction=numero de l'image)
+
            
            function myFunction() {
+
            var popup = document.getElementById("myPopup");
+
            popup.classList.toggle("show");
+
        }
+
            function myFunction2() {
+
            var popup = document.getElementById("myPopup2");
+
            popup.classList.toggle("show");
+
        }
+
           function myFunction3() {
+
            var popup = document.getElementById("myPopup3");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction4() {
+
            var popup = document.getElementById("myPopup4");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction5() {
+
            var popup = document.getElementById("myPopup5");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction6() {
+
            var popup = document.getElementById("myPopup6");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction7() {
+
            var popup = document.getElementById("myPopup7");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction8() {
+
            var popup = document.getElementById("myPopup8");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction9() {
+
            var popup = document.getElementById("myPopup9");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction10() {
+
            var popup = document.getElementById("myPopup10");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction11() {
+
            var popup = document.getElementById("myPopup11");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction12() {
+
            var popup = document.getElementById("myPopup12");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction13() {
+
            var popup = document.getElementById("myPopup13");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction14() {
+
            var popup = document.getElementById("myPopup14");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction15() {
+
            var popup = document.getElementById("myPopup15");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction16() {
+
            var popup = document.getElementById("myPopup16");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction17() {
+
            var popup = document.getElementById("myPopup17");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction18() {
+
            var popup = document.getElementById("myPopup18");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction19() {
+
            var popup = document.getElementById("myPopup19");
+
            popup.classList.toggle("show");
+
        }
+
          function myFunction20() {
+
            var popup = document.getElementById("myPopup20");
+
            popup.classList.toggle("show");
+
        }
+
 
         </script>
 
         </script>
 
     </head>
 
     </head>
Line 296: Line 193:
  
 
         <div> <!--LIGNE 1-->
 
         <div> <!--LIGNE 1-->
             <div class="popup" onclick="myFunction()"><!--Miniature 1 + Ancre Membre--><img id="ancre1" class="image1" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'>              
+
             <a href="#membre1"><img id="ancre1" class="image1" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></a>              
<span class="popuptext1" id="myPopup">
+
 
   
 
   
<div class="close" style="position: absolute">
+
  <div class="popup" id="membre1"> 
 +
    <div class="popup-content">
 +
      <div class="close" style="position: absolute">
 
           <a href="#ancre1">&times;</a>
 
           <a href="#ancre1">&times;</a>
 
       </div>
 
       </div>
     
+
      <img class="popup-photo"  src='https://static.igem.org/mediawiki/2017/a/a3/ClementigemgrenobleG.jpeg'>   
<!--Image 1 dans Popup--><img src='https://static.igem.org/mediawiki/2017/a/a3/ClementigemgrenobleG.jpeg'><!--Texte dans Popup-->   
+
  
 
<h5  style="color:white; text-align:center; font-family: 'Poiret One' , cursive; font-size:2vw; padding-bottom:2%;"> Clément Caffaratti </h5>
 
<h5  style="color:white; text-align:center; font-family: 'Poiret One' , cursive; font-size:2vw; padding-bottom:2%;"> Clément Caffaratti </h5>
 
                 <h5 style="color:white; text-align:center; font-family: 'Poiret One' , cursive; font-size:1.5vw; font-style:italic;"> "A journey of a thousand miles begins with a single step." - Confucius </h5>  
 
                 <h5 style="color:white; text-align:center; font-family: 'Poiret One' , cursive; font-size:1.5vw; font-style:italic;"> "A journey of a thousand miles begins with a single step." - Confucius </h5>  
 
                 <h5 style="padding-top:2%; color:white; font-size:1vw;"> I’am Clement. My curiosity is my strength. Curiosity is my gas and science my vehicle to move forward.
 
                 <h5 style="padding-top:2%; color:white; font-size:1vw;"> I’am Clement. My curiosity is my strength. Curiosity is my gas and science my vehicle to move forward.
                 <br> Why iGEM? Because, it’s for me an opportunity to learn science by practising and thinking. It’s certainly one of the best science experience in my life. It is also an open window to discover new disciplines and ways of thinking. </h5>
+
                 <br> Why iGEM? Because, it’s for me an opportunity to learn science by practising and thinking. It’s certainly one of the best science experience in my life. It is also an open window to discover new disciplines and ways of thinking. </h5>            
             
+
 
               <a href="https://www.linkedin.com/in/cl%C3%A9ment-caffaratti-82aa4113a/" target="_blank">
 
               <a href="https://www.linkedin.com/in/cl%C3%A9ment-caffaratti-82aa4113a/" target="_blank">
 
               <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 
               <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 
               </a>
 
               </a>
              </span>
 
 
             </div>
 
             </div>
  

Revision as of 09:40, 17 August 2017

TEAM

TEAM

×

Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur, non ut mos est principibus, quorum diffusa potestas localibus subinde medetur aerumnis, disponi quicquam statuit vel ex provinciis alimenta transferri conterminis, sed consularem Syriae Theophilum prope adstantem ultima metuenti multitudini dedit id adsidue replicando quod invito rectore nullus egere poterit victu.

Acknowledgements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Sponsors

Members Acknowledgements Sponsors

Designed by iGEM Grenoble-Alpes 2017 team | Site Map