Line 4: | Line 4: | ||
<html> | <html> | ||
− | + | ||
− | + | <section> | |
− | + | <div class="slideshow-container "> | |
− | + | <div class="mySlides fade"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/8/83/Baltimore_biocrew1.jpeg"> | |
− | + | <div class="text"><h1 style="font-size: 100px;"> Experiment</h1></div> | |
− | + | </div> | |
− | + | ||
− | + | <div class="mySlides fade"> | |
− | + | <img src="https://static.igem.org/mediawiki/2017/archive/9/9c/20170930173029%21E2.jpeg" > | |
− | + | ||
− | + | </div> | |
− | + | ||
− | + | <div class="mySlides fade"> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2017/0/01/E1.jpeg" > |
− | + | ||
− | + | </div> | |
− | + | ||
− | </ | + | |
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | |||
+ | </html> |
Revision as of 20:36, 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>