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

Line 48: Line 48:
 
               opacity: 0.8;
 
               opacity: 0.8;
 
             }
 
             }
 +
/********************NEW POPUP  *********************/
 +
 +
.modal {
 +
  display: none;
 +
  position: fixed;
 +
  z-index: 1;
 +
  padding-top: 100px;
 +
  left: 0;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow-y: scroll;
 +
  overflow-x:hidden;
 +
  background-color: black;
 +
}
 +
 +
/* Modal Content */
 +
.modal-content {
 +
  background-color: #fefefe;
 +
  padding-top: 0%;
 +
  padding-bottom: 0%;
 +
  margin-bottom: 20%;
 +
  margin-top: 0%;
 +
  opacity: 1;
 +
}
 +
 +
/* The Close Button */
 +
.close {
 +
  color: white;
 +
  position: absolute;
 +
  top: 10px;
 +
  right: 25px;
 +
  font-size: 35px;
 +
  font-weight: bold;
 +
}
 +
 +
.close:hover,
 +
.close:focus {
 +
  color: #999;
 +
  text-decoration: none;
 +
  cursor: pointer;
 +
}
 +
 +
.mySlides {
 +
  display: none;
 +
}
 +
 +
/* Next & previous buttons */
 +
.prev,
 +
.next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  padding: 16px;
 +
  margin-top: -50px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 20px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  user-select: none;
 +
  -webkit-user-select: none;
 +
}
 +
 +
/* Position the "next button" to the right */
 +
.next {
 +
  right: 0;
 +
  border-radius: 3px 0 0 3px;
 +
}
 +
 +
/* On hover, add a black background color with a little bit see-through */
 +
.prev:hover,
 +
.next:hover {
 +
  background-color: rgba(0, 0, 0, 0.8);
 +
}
 +
 +
/* Number text (1/3 etc) */
 +
.numbertext {
 +
  color: #f2f2f2;
 +
  font-size: 12px;
 +
  padding: 8px 12px;
 +
  position: absolute;
 +
  top: 0;
 +
}
 +
 +
.caption-container {
 +
  text-align: center;
 +
  background-color: black;
 +
  padding: 2px 16px;
 +
  color: white;
 +
}
 +
 +
img.demo {
 +
  opacity: 0.6;
 +
}
 +
 +
.active,
 +
.demo:hover {
 +
  opacity: 1;
 +
}
 +
 +
img.hover-shadow {
 +
  transition: 0.3s
 +
}
 +
 +
.hover-shadow:hover {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
 +
}
 +
 +
 +
 +
  
 
/* ************************ POP UP ******************** */
 
/* ************************ POP UP ******************** */
Line 212: Line 325:
  
 
         <div> <!--LIGNE 1-->
 
         <div> <!--LIGNE 1-->
−
             <a href="#membre1"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></a>  
+
             <a href="#membre1"><img id="photosmembres" class="image1" onclick="openModal();currentSlide(1)" src='https://static.igem.org/mediawiki/2017/f/f0/ClementigemgrenobleM.jpeg'></a>  
−
             <a href="#membre2"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/f/f9/NicoigemgrenobleM.jpeg'></a>   
+
             <a href="#membre2"><img id="photosmembres" class="image1" onclick="openModal();currentSlide(2)" src='https://static.igem.org/mediawiki/2017/f/f9/NicoigemgrenobleM.jpeg'></a>   
−
             <a href="#membre3"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>   
+
             <a href="#membre3"><img id="photosmembres" class="image1" onclick="openModal();currentSlide(3)" src='https://static.igem.org/mediawiki/2017/c/cc/JusufigemgrenobleM.jpeg'></a>   
 
             <a href="#membre4"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/0/00/GuillaumeigemgrenobleM.jpeg'></a>   
 
             <a href="#membre4"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/0/00/GuillaumeigemgrenobleM.jpeg'></a>   
 
             <a href="#membre5"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/5/52/MartinigemgrenobleM.jpeg'></a>                 
 
             <a href="#membre5"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/5/52/MartinigemgrenobleM.jpeg'></a>                 
Line 228: Line 341:
  
 
         <div> <!--LIGNE 3-->
 
         <div> <!--LIGNE 3-->
−
             <a href="#membre11"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/8/89/NicoiltisigemgrenobleM.jpeg'></a>  
+
             <a><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/8/89/NicoiltisigemgrenobleM.jpeg'></a>  
 
             <a href="#membre12"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/f/f3/PierrecigemgrenobleM.jpeg'></a>   
 
             <a href="#membre12"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/f/f3/PierrecigemgrenobleM.jpeg'></a>   
 
             <a href="#membre13"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/b/b9/AudreyigemgrenobleM.jpeg'></a>   
 
             <a href="#membre13"><img id="photosmembres" class="image1" src='https://static.igem.org/mediawiki/2017/b/b9/AudreyigemgrenobleM.jpeg'></a>   
Line 236: Line 349:
  
 
<!--POP UP MEMBERS-->
 
<!--POP UP MEMBERS-->
−
 
−
  <div class="popup" id="membre1"> 
 
−
    <div class="popup-content">
 
−
      <div class="close" style="position: absolute">
 
−
          <a href="#photosmembres">&times;</a>
 
−
      </div>
 
−
      <img class="popup-photo"  src='https://static.igem.org/mediawiki/2017/a/a3/ClementigemgrenobleG.jpeg'>
 
−
      <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'></a>
 
−
      <h5 class="popup-nom"> Clément Caffaratti </h5>
 
−
      <h5 class="popup-citation"> "A journey of a thousand miles begins with a single step." - Confucius </h5>
 
−
      <h5 class="popup-description"> 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>             
 
−
 
−
    </div>
 
−
  </div>
 
−
 
−
  <div class="popup" id="membre2"> 
 
−
    <div class="popup-content">
 
−
      <div class="close" style="position: absolute">
 
−
          <a href="#photosmembres">&times;</a>
 
−
      </div>
 
−
      <img class="popup-photo"  src='https://static.igem.org/mediawiki/2017/8/8d/NicoigemgrenobleG.jpeg'> 
 
−
      <a href="https://www.linkedin.com/in/nicolas-iasparro-54baab103/" target="_blank">
 
−
          <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 
−
      </a>
 
−
      <h5 class="popup-nom"> Nicolas Iasparro </h5>
 
−
      <h5 class="popup-citation"></h5>
 
−
      <h5 class="popup-description"></h5>             
 
−
    </div>
 
−
  </div>
 
−
 
−
  <div class="popup" id="membre3"> 
 
−
    <div class="popup-content">
 
−
      <div class="close" style="position: absolute">
 
−
          <a href="#photosmembres">&times;</a>
 
−
      </div>
 
−
      <img class="popup-photo"  src='https://static.igem.org/mediawiki/2017/e/e2/JusufigemgrenobleG.jpeg'> 
 
−
        <a href="https://www.linkedin.com/in/imeri-jusuf-07b100bb/" target="_blank">
 
−
        <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 
−
      </a>
 
−
      <h5 class="popup-nom"> Jusuf Imeri </h5>
 
−
      <h5 class="popup-citation"></h5>
 
−
      <h5 class="popup-description"></h5>             
 
−
    </div>
 
−
  </div>
 
−
 
−
  <div class="popup" id="membre4"> 
 
−
    <div class="popup-content">
 
−
      <div class="close" style="position: absolute">
 
−
          <a href="#photosmembres">&times;</a>
 
−
      </div>
 
−
      <img class="popup-photo"  src='https://static.igem.org/mediawiki/2017/3/3c/GuillaumeigemgrenobleG.jpeg'> 
 
−
        <a href="https://www.linkedin.com/in/guillaume-jubien-b1628b108/" target="_blank">
 
−
        <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 
−
      </a>
 
−
      <h5 class="popup-nom"> Guillaume Jubien </h5>
 
−
      <h5 class="popup-citation"></h5>
 
−
      <h5 class="popup-description"></h5>             
 
−
    </div>
 
−
  </div>
 
  
 
   <div class="popup" id="membre5">   
 
   <div class="popup" id="membre5">   
Line 461: Line 514:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
 +
 +
 +
<div id="myModal" class="modal">
 +
  <span class="close cursor" onclick="closeModal()">&times;</span>
 +
  <div class="modal-content">
 +
 +
    <div class="mySlides">
 +
      <div class="numbertext">1 / 15 (Clément)</div>
 +
        <img src="https://static.igem.org/mediawiki/2017/a/a3/ClementigemgrenobleG.jpeg" style="width:100%">
 +
<div class="caption-container">
 +
      <p id="caption">      <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'></a>
 +
      <h5 class="popup-nom"> Clément Caffaratti </h5>
 +
      <h5 class="popup-citation"> "A journey of a thousand miles begins with a single step." - Confucius </h5>
 +
      <h5 class="popup-description"> 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>             
 +
</p>
 +
    </div>
 +
    </div>
 +
 +
    <div class="mySlides">
 +
      <div class="numbertext">2 / 15 (Nico)</div>
 +
        <img "  src='https://static.igem.org/mediawiki/2017/8/8d/NicoigemgrenobleG.jpeg' style="width:100%">
 +
      <a href="https://www.linkedin.com/in/nicolas-iasparro-54baab103/" target="_blank">
 +
          <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 +
      </a>
 +
      <h5 class="popup-nom"> Nicolas Iasparro </h5>
 +
      <h5 class="popup-citation"></h5>
 +
      <h5 class="popup-description"></h5>             
 +
    </div>
 +
 +
    <div class="mySlides">
 +
      <div class="numbertext">3 / 15 (Jusuf)</div>
 +
        <img style="width:100%" src='https://static.igem.org/mediawiki/2017/e/e2/JusufigemgrenobleG.jpeg'> 
 +
        <a href="https://www.linkedin.com/in/imeri-jusuf-07b100bb/" target="_blank">
 +
        <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 +
      </a>
 +
      <h5 class="popup-nom"> Jusuf Imeri </h5>
 +
      <h5 class="popup-citation"></h5>
 +
      <h5 class="popup-description"></h5> 
 +
    </div>
 +
 +
    <div class="mySlides">
 +
      <div class="numbertext">4 / 15 (Guillaume) </div>
 +
        <img style="width:100%" src='https://static.igem.org/mediawiki/2017/3/3c/GuillaumeigemgrenobleG.jpeg'> 
 +
        <a href="https://www.linkedin.com/in/guillaume-jubien-b1628b108/" target="_blank">
 +
        <img class="logoLinkedIn" src='https://static.igem.org/mediawiki/2017/e/e1/Logolinkedin.png'>
 +
      </a>
 +
      <h5 class="popup-nom"> Guillaume Jubien </h5>
 +
      <h5 class="popup-citation"></h5>
 +
      <h5 class="popup-description"></h5>             
 +
    </div>
 +
   
 +
 +
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
 +
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
 +
  </div>
 +
</div>
 +
 +
<script>
 +
function openModal() {
 +
  document.getElementById('myModal').style.display = "block";
 +
}
 +
 +
function closeModal() {
 +
  document.getElementById('myModal').style.display = "none";
 +
window.location.hash = '#photosmembres';
 +
}
 +
 +
var slideIndex = 1;
 +
showSlides(slideIndex);
 +
 +
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 +
function showSlides(n) {
 +
  var i;
 +
  var slides = document.getElementsByClassName("mySlides");
 +
  var captionText = document.getElementById("caption");
 +
  if (n > slides.length) {slideIndex = 1}
 +
  if (n < 1) {slideIndex = slides.length}
 +
  for (i = 0; i < slides.length; i++) {
 +
    slides[i].style.display = "none";
 +
  }
 +
  slides[slideIndex-1].style.display = "block";
 +
}
 +
</script>
  
 
         <!--Citations-->
 
         <!--Citations-->
Line 566: Line 711:
  
 
</html>
 
</html>
 +
 
{{Grenoble-Alpes/footer}}
 
{{Grenoble-Alpes/footer}}

Revision as of 09:14, 21 August 2017

TEAM

TEAM

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