Team:IIT Kanpur/TestPage 

<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: 10s;
 animation-name: fade;
 animation-duration: 10s;

}

@-webkit-keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes fade { 

 from {opacity: .4} 
 to {opacity: 1}

} </style> 


 </head>

 <body>
1 / 3
   <img src="T--Oxford--tdheader.jpg" style="width:100%">
<a href="www.google.com"> Google </a>
2 / 3
   <img src="T--Oxford--Team.jpg" style="width:100%">
<a href="https://2018.igem.org/Team:Oxford/Team">Meet the Team</a>
3 / 3
   <img src="T--IIT_Kanpur--Logo_idt.png" style="width:100%">
Caption Three
 <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>