Difference between revisions of "Team:IIT Kanpur/TestPage"
| Line 1: | Line 1: | ||
{{Template:IIT_Kanpur}} | {{Template:IIT_Kanpur}} | ||
| − | + | <head> | |
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
| Line 97: | Line 97: | ||
.fade { | .fade { | ||
-webkit-animation-name: fade; | -webkit-animation-name: fade; | ||
| − | -webkit-animation-duration: | + | -webkit-animation-duration: 1.5s; |
animation-name: fade; | animation-name: fade; | ||
| − | animation-duration: | + | animation-duration: 1.5s; |
} | } | ||
Revision as of 12:52, 14 October 2018
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content="">
<title> Full Width Pics - Start Bootstrap Template</title>
<link href="https://2018.igem.org/Team:Oxford/css/bootstrapmincss?action=raw&ctype=text/css" rel="stylesheet">
<link href="https://2018.igem.org/Team:Oxford/css?action=raw&ctype=text/css" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<style>
- {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: 2s 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: #1B037B; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;
}
/* Number text (1/3 etc) */ .numbertext {
color: #064205; 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 2s ease;
}
.active, .dot:hover {
background-color: #F50105;
}
/* 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>
</head>
<body>
<img src="" style="width:100%">
<img src="" style="width:100%">
<img src="" style="width:100%">
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
<script> 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";
} </script>
</body>
</html>
