Difference between revisions of "Team:Melbourne"

 
(153 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
−
 
−
<script>
 
−
// Set the date we're counting down to
 
−
var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();
 
−
 
−
// Update the count down every 1 second
 
−
var x = setInterval(function() {
 
−
 
−
  // Get todays date and time
 
−
  var now = new Date().getTime();
 
−
 
−
  // Find the distance between now an the count down date
 
−
  var distance = countDownDate - now;
 
−
 
−
  // Time calculations for days, hours, minutes and seconds
 
−
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
 
−
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 
−
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
 
−
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
−
 
−
  // Display the result in an element with id="demo"
 
−
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
 
−
  + minutes + "m " + seconds + "s ";
 
−
 
−
  // If the count down is finished, write some text
 
−
  if (distance < 0) {
 
−
    clearInterval(x);
 
−
    document.getElementById("demo").innerHTML = "EXPIRED";
 
−
  }
 
−
}, 1000);
 
−
</script>
 
  
 
<style>
 
<style>
−
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
 
−
body, html {
 
−
    height: 100%
 
−
}
 
  
−
.bgimg {
+
body{
−
    /* Background image */
+
background-color:#282828;
−
    background-image: url('/w3images/forestbridge.jpg');
+
width:100%;
−
    /* Full-screen */
+
−
    height: 100%;
+
−
    /* Center the background image */
+
−
    background-position: center;
+
−
    /* Scale and zoom in the image */
+
−
    background-size: cover;
+
−
    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
+
−
    position: relative;
+
−
    /* Add a white text color to all elements inside the .bgimg container */
+
−
    color: white;
+
−
    /* Add a font */
+
−
    font-family: "Courier New", Courier, monospace;
+
−
    /* Set the font-size to 25 pixels */
+
−
    font-size: 25px;
+
 
}
 
}
  
−
/* Position text in the top-left corner */
+
.heading {
−
.topleft {
+
    display: flex;
−
    position: absolute;
+
background-color:#282828;
−
    top: 0;
+
/*background-image:url(https://media.giphy.com/media/42IEOtbaHuMmIXgAzS/source.gif)*/;
−
    left: 16px;
+
/*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);*/
  
−
/* Position text in the bottom-left corner */
 
−
.bottomleft {
 
−
    position: absolute;
 
−
    bottom: 0;
 
−
    left: 16px;
 
 
}
 
}
  
−
/* Position text in the middle */
+
.head_img {
−
.middle {
+
     margin: auto; /* Magic! */
−
     position: absolute;
+
margin-top:120px;
−
    top: 50%;
+
padding-bottom:50px;
−
    left: 50%;
+
object-fit:cover;
−
    transform: translate(-50%, -50%);
+
width:55%;
−
    text-align: center;
+
 
}
 
}
  
−
/* Style the <hr> element */
 
−
hr {
 
−
    margin: auto;
 
−
    width: 40%;
 
−
}
 
 
</style>
 
</style>
 +
 +
<head>
 +
<link rel="image_src" href="https://static.igem.org/mediawiki/2018/2/2a/T--Melbourne--link_share.png">
 +
<meta property="og:title" content="iGEM2018 Melbourne Team" />
 +
<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" />
 +
 +
</head>
  
  
 
<body>
 
<body>
−
<div class="bgimg">
+
<div class="heading">
−
  <div class="topleft">
+
<img class="head_img" src="https://static.igem.org/mediawiki/2018/5/5a/T--Melbourne--home_desc.png">
−
    <p>Logo</p>
+
</div>
−
  </div>
+
<div id="footer">
−
  <div class="middle">
+
Property of Team Melbourne
−
    <h1>COMING SOON</h1>
+
−
    <hr>
+
−
    <p>35 days</p>
+
−
  </div>
+
−
  <div class="bottomleft">
+
−
    <p>Some text</p>
+
−
  </div>
+
 
</div>
 
</div>
 
</body>
 
</body>

Latest revision as of 02:46, 18 October 2018