Difference between revisions of "Team:UANL"

Line 1: Line 1:
 
{{UANL/header}}
 
{{UANL/header}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
 
<head>
 
<head>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
 
<style>
−
* {box-sizing: border-box;}
+
* {box-sizing: border-box}
−
body {font-family: Verdana, sans-serif;}
+
body {font-family: Verdana, sans-serif; margin:0}
−
.mySlides {display: none;}
+
.mySlides {display: none}
 
img {vertical-align: middle;}
 
img {vertical-align: middle;}
−
 
  
 
/* Slideshow container */
 
/* Slideshow container */
Line 15: Line 15:
 
   position: relative;
 
   position: relative;
 
   margin: auto;
 
   margin: auto;
 +
}
 +
 +
/* Next & previous buttons */
 +
.prev, .next {
 +
  cursor: pointer;
 +
  position: absolute;
 +
  top: 50%;
 +
  width: auto;
 +
  padding: 16px;
 +
  margin-top: -22px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  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);
 
}
 
}
  
Line 39: Line 66:
 
/* The dots/bullets/indicators */
 
/* The dots/bullets/indicators */
 
.dot {
 
.dot {
 +
  cursor: pointer;
 
   height: 15px;
 
   height: 15px;
 
   width: 15px;
 
   width: 15px;
Line 45: Line 73:
 
   border-radius: 50%;
 
   border-radius: 50%;
 
   display: inline-block;
 
   display: inline-block;
−
   transition: background-color 2s ease;
+
   transition: background-color 0.6s ease;
 
}
 
}
  
−
.active {
+
.active, .dot:hover {
 
   background-color: #717171;
 
   background-color: #717171;
 
}
 
}
Line 55: Line 83:
 
.fade {
 
.fade {
 
   -webkit-animation-name: fade;
 
   -webkit-animation-name: fade;
−
   -webkit-animation-duration: 0.5s;
+
   -webkit-animation-duration: 1.5s;
 
   animation-name: fade;
 
   animation-name: fade;
−
   animation-duration: 0.5s;
+
   animation-duration: 1.5s;
 
}
 
}
  
Line 72: Line 100:
 
/* On smaller screens, decrease text size */
 
/* On smaller screens, decrease text size */
 
@media only screen and (max-width: 300px) {
 
@media only screen and (max-width: 300px) {
−
   .text {font-size: 11px}
+
   .prev, .next,.text {font-size: 11px}
 
}
 
}
 
</style>
 
</style>
Line 78: Line 106:
 
<body>
 
<body>
  
−
<br>
 
 
<div class="slideshow-container">
 
<div class="slideshow-container">
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">1 / 6</div>
+
   <div class="numbertext">1 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/2/2d/T--UANL--mty.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/2/2d/T--UANL--mty.jpg" style="width:100%">
 
   <div class="text">Monterrey, Nuevo León, México</div>
 
   <div class="text">Monterrey, Nuevo León, México</div>
Line 88: Line 115:
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">2 / 6</div>
+
   <div class="numbertext">2 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/c/c0/T--UANL--mty3.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/c/c0/T--UANL--mty3.jpg" style="width:100%">
 
   <div class="text">Universidad Autónoma de Nuevo León</div>
 
   <div class="text">Universidad Autónoma de Nuevo León</div>
Line 94: Line 121:
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">3 / 6</div>
+
   <div class="numbertext">3 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/a/ac/T--UANL--fcb.png" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/a/ac/T--UANL--fcb.png" style="width:100%">
 
   <div class="text">School of Biology, UANL</div>
 
   <div class="text">School of Biology, UANL</div>
Line 100: Line 127:
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">4 / 6</div>
+
   <div class="numbertext">4 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/d/d1/T--UANL--FCQ.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/d/d1/T--UANL--FCQ.jpg" style="width:100%">
 
   <div class="text">School of Chemistry, UANL</div>
 
   <div class="text">School of Chemistry, UANL</div>
Line 106: Line 133:
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">5 / 6</div>
+
   <div class="numbertext">5 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/e/e7/T--UANL--FIME.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/e/e7/T--UANL--FIME.jpg" style="width:100%">
 
   <div class="text">School of Mechanical and Electrical Engineering, UANL</div>
 
   <div class="text">School of Mechanical and Electrical Engineering, UANL</div>
 
</div>
 
</div>
  
 +
<div class="mySlides fade">
 +
  <div class="numbertext">6 / 7</div>
 +
  <img src="https://static.igem.org/mediawiki/2019/c/cb/T--UANL--fcfm.jpg" style="width:100%">
 +
  <div class="text">School of Mathematics and Physics</div>
 +
</div>
  
 
<div class="mySlides fade">
 
<div class="mySlides fade">
−
   <div class="numbertext">6 / 6</div>
+
   <div class="numbertext">7 / 7</div>
 
   <img src="https://static.igem.org/mediawiki/2019/8/86/T--UANL--CIDEB.jpg" style="width:100%">
 
   <img src="https://static.igem.org/mediawiki/2019/8/86/T--UANL--CIDEB.jpg" style="width:100%">
 
   <div class="text">Bilingual Education  Research and Development Center, UANL</div>
 
   <div class="text">Bilingual Education  Research and Development Center, UANL</div>
 
</div>
 
</div>
  
−
 
+
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
−
 
+
<a class="next" onclick="plusSlides(1)">&#10095;</a>
  
 
</div>
 
</div>
Line 125: Line 157:
  
 
<div style="text-align:center">
 
<div style="text-align:center">
−
   <span class="dot"></span>  
+
   <span class="dot" onclick="currentSlide(1)"></span>  
−
   <span class="dot"></span>  
+
   <span class="dot" onclick="currentSlide(2)"></span>  
−
   <span class="dot"></span>
+
   <span class="dot" onclick="currentSlide(3)"></span>  
−
   <span class="dot"></span>  
+
   <span class="dot" onclick="currentSlide(4)"></span>
−
   <span class="dot"></span>  
+
   <span class="dot" onclick="currentSlide(5)"></span>
 +
  <span class="dot" onclick="currentSlide(6)"></span>
 +
  <span class="dot" onclick="currentSlide(7)"></span>
 
</div>
 
</div>
  
 
<script>
 
<script>
−
var slideIndex = 0;
+
var slideIndex = 1;
−
showSlides();
+
showSlides(slideIndex);
  
−
function showSlides() {
+
function plusSlides(n) {
 +
  showSlides(slideIndex += n);
 +
}
 +
 
 +
function currentSlide(n) {
 +
  showSlides(slideIndex = n);
 +
}
 +
 
 +
function showSlides(n) {
 
   var i;
 
   var i;
 
   var slides = document.getElementsByClassName("mySlides");
 
   var slides = document.getElementsByClassName("mySlides");
 
   var dots = document.getElementsByClassName("dot");
 
   var dots = document.getElementsByClassName("dot");
 +
  if (n > slides.length) {slideIndex = 1}   
 +
  if (n < 1) {slideIndex = slides.length}
 
   for (i = 0; i < slides.length; i++) {
 
   for (i = 0; i < slides.length; i++) {
−
    slides[i].style.display = "none";   
+
      slides[i].style.display = "none";   
 
   }
 
   }
−
  slideIndex++;
 
−
  if (slideIndex > slides.length) {slideIndex = 1}   
 
 
   for (i = 0; i < dots.length; i++) {
 
   for (i = 0; i < dots.length; i++) {
−
    dots[i].className = dots[i].className.replace(" active", "");
+
      dots[i].className = dots[i].className.replace(" active", "");
 
   }
 
   }
 
   slides[slideIndex-1].style.display = "block";   
 
   slides[slideIndex-1].style.display = "block";   
 
   dots[slideIndex-1].className += " active";
 
   dots[slideIndex-1].className += " active";
−
   setTimeout(showSlides, 25000); // Change image every 4 seconds
+
   setTimeout(showSlides, 2500);
 
}
 
}
 
</script>
 
</script>
Line 156: Line 198:
 
</body>
 
</body>
 
</html>  
 
</html>  
 +
  
 
{{UANL/footer}}
 
{{UANL/footer}}

Revision as of 15:45, 21 October 2019

<!DOCTYPE html>
1 / 7
Monterrey, Nuevo León, México
2 / 7
Universidad Autónoma de Nuevo León
3 / 7
School of Biology, UANL
4 / 7
School of Chemistry, UANL
5 / 7
School of Mechanical and Electrical Engineering, UANL
6 / 7
School of Mathematics and Physics
7 / 7
Bilingual Education Research and Development Center, UANL