Difference between revisions of "Team:Melbourne"

 
(142 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
−
 
−
 
−
<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>
 
  
 
<style>
 
<style>
  
−
body, html {
+
body{
−
    height: 100%;
+
background-color:#282828;
 +
width:100%;
 
}
 
}
  
−
#main-content{
+
.heading {
−
margin- top: 150px;
+
    display: flex;
−
}
+
background-color:#282828;
 +
/*background-image:url(https://media.giphy.com/media/42IEOtbaHuMmIXgAzS/source.gif)*/;
 +
/*background-image:url(https://cdn140.picsart.com/236732937035201.gif);*/
 +
background-image:url(https://media.giphy.com/media/xUA7bfDro97ipc4fu0/giphy.gif);
 +
/*background-image:url(https://media.giphy.com/media/4MxMvzhTEuqty/giphy.gif);*/
  
−
 
−
 
−
 
−
 
−
* {box-sizing:border-box}
 
−
 
−
/* Slideshow container */
 
−
.slideshow-container {
 
−
  max-width: 1000px;
 
−
  position: relative;
 
−
  margin: auto;
 
 
}
 
}
  
−
/* Hide the images by default */
+
.head_img {
−
.mySlides {
+
    margin: auto;  /* Magic! */
−
    display: none;
+
margin-top:120px;
 +
padding-bottom:50px;
 +
object-fit:cover;
 +
width:55%;
 
}
 
}
  
−
/* Next & previous buttons */
+
</style>
−
.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 */
+
<head>
−
.next {
+
<link rel="image_src" href="https://static.igem.org/mediawiki/2018/2/2a/T--Melbourne--link_share.png">
−
  right: 0;
+
<meta property="og:title" content="iGEM2018 Melbourne Team" />
−
  border-radius: 3px 0 0 3px;
+
<meta property="og:description" content="Check out our Website Wiki for iGEM2018" />
−
}
+
<meta property="og:image" content="https://static.igem.org/mediawiki/2018/2/2a/T--Melbourne--link_share.png" />
  
−
/* On hover, add a black background color with a little bit see-through */
+
</head>
−
.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}
 
−
}
 
−
 
−
</style>
 
  
 
<body>
 
<body>
−
 
+
<div class="heading">
−
<div id="main-content">
+
<img class="head_img" src="https://static.igem.org/mediawiki/2018/5/5a/T--Melbourne--home_desc.png">
−
 
+
−
<!-- Slideshow container -->
+
−
<div class="slideshow-container">
+
−
 
+
−
  <!-- Full-width images with number and caption text -->
+
−
  <div class="mySlides fade">
+
−
    <div class="numbertext">1 / 3</div>
+
−
    <img src="https://www.pinnaclet.com/images/biosensors/glutamateBiosensorDiagram.jpg" style="width:100%">
+
−
    <div class="text">Caption Text</div>
+
−
  </div>
+
−
 
+
−
  <div class="mySlides fade">
+
−
    <div class="numbertext">2 / 3</div>
+
−
    <img src="https://www.google.com.au/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwiYldmjxPjdAhWIF4gKHVX7DJwQjRx6BAgBEAU&url=http%3A%2F%2Fmtmtv.info%2Fchemical-potential-energy-pictures-5c62e0d%2F&psig=AOvVaw3S0sQ1QLdlG2SibjWTJ-ky&ust=1539146047634768" style="width:100%">
+
−
    <div class="text">Caption Two</div>
+
−
  </div>
+
−
 
+
−
  <div class="mySlides fade">
+
−
    <div class="numbertext">3 / 3</div>
+
−
    <img src="https://research.unimelb.edu.au/__data/assets/image/0020/2124209/NHMRC.jpg" style="width:100%">
+
−
    <div class="text">Caption Three</div>
+
−
  </div>
+
−
 
+
−
  <!-- Next and previous buttons -->
+
−
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
−
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
+
 
</div>
 
</div>
−
<br>
+
<div id="footer">
−
 
+
Property of Team Melbourne
−
<!-- 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>
 
</div>
−
 
−
</div>
 
−
 
−
 
−
 
−
<!-- img class="bg" src="https://image.ibb.co/eFFR19/page_bg_revised.jpg" alt="page_bg_revised" border="0" -->
 
 
</body>
 
</body>
  
  
 
</html>
 
</html>

Latest revision as of 02:46, 18 October 2018