Difference between revisions of "Team:KU Leuven/InterLab"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
body, html {
+
       
height: 100%
+
        h4 {
}
+
            margin-bottom: 10px;
 +
        }
 +
        .background{
 +
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
 +
            position: initial;
 +
            background-size: 100%;
 +
            padding: 0 10px 0 10px;
 +
        }
  
.bgimg {
+
        #grad {
background-image: url('https://static.igem.org/mediawiki/2017/5/55/KU_Leuven_Background_ComingSoon.png');
+
            background: -webkit-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Safari 5.1-6.0 */
height: 100vh;
+
            background: -o-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Opera 11.1-12.0 */  
background-position: center;
+
            background: -moz-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Firefox 3.6-15 */
background-size: cover;
+
            background: linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Standard syntax */
position: relative;
+
        }
color: white;
+
       
font-family: "Courier New", Courier, monospace;
+
        p {
font-size: 5000px;
+
          text-align:justify;
}
+
          font-size: 20px;
 +
        }
 +
        </style>
 +
       
 +
            <div id="grad">
 +
                   
 +
                        <br>
 +
                   
 +
                        <div class="background">
 +
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Interlab</h1>
 +
                                <p style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">.... </p>
 +
                       
 +
                        </div>
 +
                    <br>
 +
                    <div class="container">
 +
                   
 +
                        <p style="text-align:justify; padding: 0px 50px 0px 50px;">
 +
                            Booo!</p>
  
.topleft {
+
                    </div>
position: absolute;
+
top: 0;
+
left: 16px;
+
}
+
  
.bottomleft {
 
position: absolute;
 
bottom: 0;
 
left: 16px;
 
}
 
  
.middle {
 
position: absolute;
 
top: 50%;
 
left: 50%;
 
transform: translate(-50%, -50%);
 
text-align: center;
 
}
 
 
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;font-size:60px;">date</p>
 
  </div>
 
  <div class="bottomleft">
 
<p>Human Practices</p>
 
  </div>
 
</div>
 
<script type="text/javascript">
 
// Set the date we're counting down to
 
var countDownDate = new Date(2017,10,31,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>
 
</html>
 
  
 +
       
 +
       
 +
</html>
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Revision as of 21:23, 13 October 2017


Interlab

....


Booo!