Difference between revisions of "Team:KU Leuven/HP/HP Main"

Line 1: Line 1:
 
{{KU_Leuven}}
 
{{KU_Leuven}}
−
 
 
<html>
 
<html>
−
<head>
+
<style type="text/css">
−
<style>
+
/* Set height to 100% for body and html to enable the background image to cover the whole page: */
−
p {
+
body, html {
−
  text-align: center;
+
height: 100%
−
  font-size: 60px;
+
 
}
 
}
−
</style>
 
−
</head>
 
−
<body>
 
−
<script>
 
−
<p id="demo"></p>
 
  
−
<script>
+
.bgimg {
−
// Set the date we're counting down to
+
/* Background image */
−
var countDownDate = new Date("Nov 9, 2017 00:00:00").getTime();
+
background-image: url('/https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png');
 +
/* 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;
 +
}
  
−
// Update the count down every 1 second
+
/* Position text in the top-left corner */
−
var x = setInterval(function() {
+
.topleft {
 +
position: absolute;
 +
top: 0;
 +
left: 16px;
 +
}
  
−
// Get todays date and time
+
/* Position text in the bottom-left corner */
−
var now = new Date().getTime();
+
.bottomleft {
−
+
position: absolute;
−
// Find the distance between now an the count down date
+
bottom: 0;
−
var distance = countDownDate - now;
+
left: 16px;
−
+
}
−
// 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);
+
−
+
−
// Output 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 over, write some text
+
−
if (distance < 0) {
+
−
clearInterval(x);
+
−
document.getElementById("demo").innerHTML = "EXPIRED";
+
−
}
+
−
}, 1000);
+
−
</script>
+
  
−
</body>
+
/* Position text in the middle */
−
</html>
+
.middle {
 +
position: absolute;
 +
top: 50%;
 +
left: 50%;
 +
transform: translate(-50%, -50%);
 +
text-align: center;
 +
}
  
 +
/* Style the <hr> element */
 +
hr {
 +
margin: auto;
 +
width: 40%;
 +
}
 +
</style>
 +
<div class="bgimg">
 +
  <div class="topleft">
 +
<p>KU_Leuven iGEM</p>
 +
  </div>
 +
  <div class="middle">
 +
<h1>COMING SOON</h1>
 +
<hr style="margin:auto;width:40%">
 +
<p id="demo" style="font-weight:bold;">date</p>
 +
  </div>
 +
  <div class="bottomleft">
 +
<p>Human Practices</p>
 +
  </div>
 +
</div>
 +
<script type="text/javascript">
 +
$function() {
 +
// Set the date we're counting down to
 +
var countDownDate = new Date("Okt 31, 2017 23:59:59").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>
 +
  
−
{{KU_Leuven_footer}}
+
{{KU_Leuven_Footer}}

Revision as of 10:15, 1 September 2017

KU_Leuven iGEM

COMING SOON

date

Human Practices

{{KU_Leuven_Footer}}