|
|
| Line 1: |
Line 1: |
| | {{Duke}} | | {{Duke}} |
| | <html> | | <html> |
| − | <!-- Slideshow styling -->
| |
| − | * {box-sizing:border-box}
| |
| − |
| |
| − | /* Slideshow container */
| |
| − | .slideshow-container {
| |
| − | max-width: 1000px;
| |
| − | position: relative;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | /* Hide the images by default */
| |
| − | .mySlides {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Next & previous buttons */
| |
| − | .prev, .next {
| |
| − | cursor: pointer;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | width: auto;
| |
| − | margin-top: -22px;
| |
| − | padding: 16px;
| |
| − | 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}
| |
| − | }
| |
| − |
| |
| − | <!-- Javascript -->
| |
| − | var slideIndex = 1;
| |
| − | showSlides(slideIndex);
| |
| − |
| |
| − | // Next/previous controls
| |
| − | function plusSlides(n) {
| |
| − | showSlides(slideIndex += n);
| |
| − | }
| |
| − |
| |
| − | // Thumbnail image controls
| |
| − | 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";
| |
| − | }
| |
| − |
| |
| − | <!-- Code for Slideshow obtained from https://www.w3schools.com/howto/howto_js_slideshow.asp -->
| |
| − |
| |
| − | <!-- Slideshow container -->
| |
| − | <div class="slideshow-container">
| |
| − |
| |
| − | <!-- Full-width images with number and caption text -->
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">1 / 6</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2018/thumb/6/6c/T--Duke--Daniel.jpg/1200px-T--Duke--Daniel.jpg" style="width:220px;height:250px;">
| |
| − | <div class="text"><center><h4>Daniel Getman</h4> </center> <br>
| |
| − | <p><br>Daniel Getman is a senior at Duke University studying Neuroscience. He joined the Duke iGEM team and Lynch Lab in fall 2017. His hobbies include archery, hiking, and spending time with friends. After graduating he plans to taking a gap year to continue his research on miraculin and afterwards attend medical school.</p></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="mySlides fade">
| |
| − | <div class="numbertext">2 / 6</div>
| |
| − | <img src="https://static.igem.org/mediawiki/2018/f/f9/T--Duke--Maria.jpg" style="width:270px;height:300px;" >
| |
| − | <div class="text"><center><h4>Maria Ter Weele</h4> </center> <br>
| |
| − | <p><br>Maria is a junior majoring Biomedical Engineering at Duke. She is passionate about statistics and is constantly searching to learn new things about biology. Originally from Virginia, Maria enjoys walks in the woods with her dogs, hot chocolate, and reading.</p></div>
| |
| − | </div>
| |
| − |
| |
| − | <!-- Next and previous buttons -->
| |
| − | <a class="prev" onclick="plusSlides(-1)">❮</a>
| |
| − | <a class="next" onclick="plusSlides(1)">❯</a>
| |
| − | </div>
| |
| − | <br>
| |
| − |
| |
| − | <!-- The dots/circles -->
| |
| − | <div style="text-align:center">
| |
| − | <span class="dot" onclick="currentSlide(1)"></span>
| |
| − | <span class="dot" onclick="currentSlide(2)"></span>
| |
| − | <span class="dot" onclick="currentSlide(3)"></span>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| | | | |
| | | | |
