Difference between revisions of "Team:Cadets2Vets"
| Line 4: | Line 4: | ||
<link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Carrousel.css&action=raw&ctype=text/css" /> | <link rel="stylesheet" type="text/css" href="https://igem.org/wiki/index.php?title=HQ:Carrousel.css&action=raw&ctype=text/css" /> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 626: | Line 497: | ||
</body> | </body> | ||
| + | <head> | ||
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <style> | ||
| + | * {box-sizing:border-box} | ||
| + | body {font-family: Verdana,sans-serif;} | ||
| + | .mySlides {display:none} | ||
| + | |||
| + | /* Slideshow container */ | ||
| + | .slideshow-container { | ||
| + | max-width: 1000px; | ||
| + | position: relative; | ||
| + | margin: auto; | ||
| + | } | ||
| + | |||
| + | /* Caption text */ | ||
| + | .text { | ||
| + | color: #f2f2f2; | ||
| + | font-size: 15px; | ||
| + | padding: 8px 12px; | ||
| + | position: absolute; | ||
| + | bottom: 8px; | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | /* Number text (1/3 etc) */ | ||
| + | .numbertext { | ||
| + | color: #f2f2f2; | ||
| + | font-size: 12px; | ||
| + | padding: 8px 12px; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | } | ||
| + | |||
| + | /* The dots/bullets/indicators */ | ||
| + | .dot { | ||
| + | height: 13px; | ||
| + | width: 13px; | ||
| + | margin: 0 2px; | ||
| + | background-color: #bbb; | ||
| + | border-radius: 50%; | ||
| + | display: inline-block; | ||
| + | transition: background-color 10s ease; | ||
| + | } | ||
| + | |||
| + | .active { | ||
| + | background-color: gray; | ||
| + | } | ||
| + | |||
| + | /* Fading animation */ | ||
| + | .fade { | ||
| + | -webkit-animation-name: fade; | ||
| + | -webkit-animation-duration: 1.5s; | ||
| + | animation-name: fade; | ||
| + | animation-duration: 3s; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | |||
| + | @keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | |||
| + | /* On smaller screens, decrease text size */ | ||
| + | @media only screen and (max-width: 300px) { | ||
| + | .text {font-size: 11px} | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| + | <body> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="slideshow-container"> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">1 / 3</div> | ||
| + | <img src="https://s3.amazonaws.com/simbla-static/2017/5/593aca5737cad4ed7fa1fc16/26263-zmwkox.jpeg" style="width:100%"> | ||
| + | <div class="text"></div> | ||
| + | </div> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">2 / 3</div> | ||
| + | <img src="https://s3.amazonaws.com/simbla-static/2017/5/593aca5737cad4ed7fa1fc16/32749-1eib9hn.jpeg" style="width:100%"> | ||
| + | <div class="text"></div> | ||
| + | </div> | ||
| + | |||
| + | <div class="mySlides fade"> | ||
| + | <div class="numbertext">3 / 3</div> | ||
| + | <img src="https://s3.amazonaws.com/simbla-static/2017/5/593aca5737cad4ed7fa1fc16/32749-nz2drx.jpg" style="width:100%"> | ||
| + | <div class="text"></div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | <br> | ||
| + | |||
| + | <div style="text-align:center"> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | <span class="dot"></span> | ||
| + | </div> | ||
| + | |||
| + | <script> | ||
| + | var slideIndex = 3; | ||
| + | showSlides(); | ||
| + | |||
| + | function showSlides() { | ||
| + | var i; | ||
| + | var slides = document.getElementsByClassName("mySlides"); | ||
| + | var dots = document.getElementsByClassName("dot"); | ||
| + | for (i = 0; i < slides.length; i++) { | ||
| + | slides[i].style.display = "none"; | ||
| + | } | ||
| + | slideIndex++; | ||
| + | if (slideIndex> slides.length) {slideIndex = 1} | ||
| + | for (i = 0; i < dots.length; i++) { | ||
| + | dots[i].className = dots[i].className.replace(" active", ""); | ||
| + | } | ||
| + | slides[slideIndex-1].style.display = "block"; | ||
| + | dots[slideIndex-1].className += " active"; | ||
| + | setTimeout(showSlides, 2000); // Change image every 5 seconds | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | </body> | ||
Revision as of 22:42, 15 June 2017
×
