Line 4: | Line 4: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <meta charset="utf8" /> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <title>Team:Baltimore Bio-crew</title> | ||
+ | </head> | ||
<section> | <section> | ||
Line 9: | Line 14: | ||
<div class="mySlides fade"> | <div class="mySlides fade"> | ||
<img src="https://static.igem.org/mediawiki/2017/8/83/Baltimore_biocrew1.jpeg"> | <img src="https://static.igem.org/mediawiki/2017/8/83/Baltimore_biocrew1.jpeg"> | ||
− | <div class="text"><h1 style="font-size: 100px;"> | + | <div class="text"><h1 style="font-size: 100px;"> Team</h1></div> |
</div> | </div> | ||
Line 25: | Line 30: | ||
</div> | </div> | ||
</section> | </section> | ||
+ | <script> | ||
+ | var slideIndex = 0; | ||
+ | showSlides(); | ||
+ | function showSlides() { | ||
+ | var i; | ||
+ | var slides = document.getElementsByClassName("mySlides"); | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
+ | } | ||
+ | slideIndex++; | ||
+ | if (slideIndex > slides.length) {slideIndex = 1} | ||
+ | slides[slideIndex-1].style.display = "block"; | ||
+ | setTimeout(showSlides, 2000); // Change image every 2 seconds | ||
+ | } | ||
+ | |||
+ | </script> | ||
</html> | </html> |
Revision as of 20:40, 30 September 2017
<style>
- {box-sizing:border-box}
/* Slideshow container */ .slideshow-container {
max-width: 100%; max-height: 100vh; margin: auto;
}
.mySlides { width:100%; height:100%; max-height: inherit; display:none; }
.mySlides img {
height: inherit; max-height: inherit; width: 100%;
}
</style>
/* text */
.text {
color: #f2f2f2; padding: 8px 12px; position: absolute; bottom: 80%; width: 100%; text-align: center;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4} to {opacity: 1}
}
@keyframes fade {
from {opacity: .4} to {opacity: 1}
} </style>