Line 640: | Line 640: | ||
} | } | ||
button:focus {outline:0;} | button:focus {outline:0;} | ||
+ | /* Slideshow stylesheet */ | ||
+ | * {box-sizing: border-box} | ||
+ | body {font-family: 'IBM Plex Sans', sans-serif; margin:0} | ||
+ | .mySlides {display: none} | ||
+ | img {vertical-align: middle;} | ||
+ | /* Slideshow container */ | ||
+ | .slideshow-container { | ||
+ | max-width: 500px; | ||
+ | position: relative; | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | /* 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); | ||
+ | } | ||
+ | |||
+ | /* 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 { | ||
+ | cursor: pointer; | ||
+ | height: 15px; | ||
+ | width: 15px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
+ | |||
+ | .active, .dot:hover { | ||
+ | background-color: #717171; | ||
+ | } | ||
+ | |||
+ | /* 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} | ||
+ | } | ||
+ | |||
+ | /* On smaller screens, decrease text size */ | ||
+ | @media only screen and (max-width: 300px) { | ||
+ | .prev, .next,.text {font-size: 11px} | ||
+ | } | ||
+ | /*END */ | ||
</style> | </style> | ||
Line 669: | Line 766: | ||
<h2>Great appreciation to Team HKUST from Hong Kong, REC Chennai, VIT Vellore from India, Saint Joseph Istanbul from Turkey, iGEM Macquarie from Australia for the fruitful conversation. We look forward to meeting you in person in Boston! | <h2>Great appreciation to Team HKUST from Hong Kong, REC Chennai, VIT Vellore from India, Saint Joseph Istanbul from Turkey, iGEM Macquarie from Australia for the fruitful conversation. We look forward to meeting you in person in Boston! | ||
</h2> | </h2> | ||
+ | <br><br> | ||
+ | <div class="slideshow-container"> | ||
+ | |||
+ | <div class="mySlides fade"> | ||
+ | <div class="numbertext">1 / 3</div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/3/3f/T--NYU_Abu_Dhabi--VC1.png" style="width:100%"> | ||
+ | <div class="text">One of the teams participating in the conference</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mySlides fade"> | ||
+ | <div class="numbertext">2 / 3</div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c4/T--NYU_Abu_Dhabi--VC2.png" style="width:100%"> | ||
+ | <div class="text">Team NYUAD during the conference</div> | ||
+ | </div> | ||
+ | |||
+ | <a class="prev" onclick="plusSlides(-1)">❮</a> | ||
+ | <a class="next" onclick="plusSlides(1)">❯</a> | ||
+ | |||
+ | </div> | ||
+ | <br> | ||
+ | |||
+ | <div style="text-align:center"> | ||
+ | <span class="dot" onclick="currentSlide(1)"></span> | ||
+ | <span class="dot" onclick="currentSlide(2)"></span> | ||
+ | </div> | ||
+ | |||
<!--script for slideshow --> | <!--script for slideshow --> | ||
+ | <script> | ||
+ | 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 dots = document.getElementsByClassName("dot"); | ||
+ | if (n > slides.length) {slideIndex = 1} | ||
+ | if (n < 1) {slideIndex = slides.length} | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
+ | } | ||
+ | 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"; | ||
+ | } | ||
+ | </script> | ||
<!--script for buttons --> | <!--script for buttons --> |
Revision as of 17:40, 28 September 2018
<!DOCTYPE html>