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

 
(30 intermediate revisions by 2 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
body, html {
+
.svg{
−
    height: 100vh;
+
padding: 0px 0px 10px 0px;
−
}
+
}
  
−
/* The hero image */
+
#grad {
−
.hero-image {
+
    background: -webkit-linear-gradient(#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2); /* Safari 5.1-6.0 */
−
    /* The image used */
+
    background: -o-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Opera 11.1-12.0 */  
−
    background-image: url("https://static.igem.org/mediawiki/2017/5/5c/Safety_KU_Leuven-01.png");
+
    background: -moz-linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Firefox 3.6-15 */
 +
    background: linear-gradient((#faebd7,#faeddb,#fbefdf,#fbf1e3,#fcf3e7,#fcf5eb,#fdf7ef,#f2f2f2)); /* Standard syntax */
 +
    }
  
−
    /* Set a specific height */
+
.background1{
−
    height: 50vh;
+
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
 +
            position: initial;
 +
            background-size: 100%;
 +
            padding: 0 10px 0 10px;
 +
    }
 +
    p::first-letter {
 +
            color: #cc3333;
 +
            font-size: 40px;
 +
    }
  
−
    /* Position and center the image to scale nicely on all screens */
 
−
    background-position: center;
 
−
    background-repeat: no-repeat;
 
−
    background-size: cover;
 
−
    position: relative;
 
−
}
 
  
−
/* Place text in the middle of the image */
+
</style>
−
.hero-text {
+
<div id="grad">
−
    text-align: center;
+
<br>
−
    position: absolute;
+
<br>
−
    top: 50%;
+
<div class="background1">
−
    left: 50%;
+
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Safety</h1>
−
    transform: translate(-50%, -50%);
+
                                <p style="text-align:center;color: white; padding: 0px 10px 60px 10px; font-size:15px;">As safety is a very important aspect of sciences, we wanted to create a professor who could alert us whenever we did something dangerous. After following a recipe, which contained sugar, spice, everything nice and chemical X, Hekky arose from our experiment! But in contrary to what we wanted, Hekky came out as an inexperienced lab buddy to which we had to list up all the rules in order to keep him alive. Please read the following rules down below carefully and help us protect our sweet summer child!</p>
−
    color: white;
+
                       
−
}
+
                        </div>
−
.button {
+
<div class="container">
−
    background-color: #cc3333; /* Red */
+
−
    border: none;
+
<svg height="auto" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1000 3000" style="margin: -100px 0 0 0">
−
    color: white;
+
    <image height="3000px" width="1000px" xlink:href="https://static.igem.org/mediawiki/2017/b/bc/Safety_BG_2.0.svg"></image>
−
    padding: 15px 32px;
+
</svg>
−
    text-align: center;
+
</div>
−
    text-decoration: none;
+
−
    display: inline-block;
+
−
    font-size: 16px;
+
−
}
+
−
.igem_2017_content_wrapper {
+
−
background-color: #e5d0b7;
+
−
}
+
  
−
</style>
 
−
<div class="hero-image">
 
−
  <div class="hero-text">
 
−
    <h1>Safety</h1>
 
−
    <p>Labs are just dangerous in general.</p>
 
−
    <div class=button onclick="typeWriter()">Click Me</button>
 
−
    </div>
 
−
    <p id="demo"></p>
 
  
−
  </div>
 
−
</div>
 
−
<div class="container">
 
−
<svg height="auto" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1000 3000">
 
−
    <image height="3000px" width="1000px" xlink:href="https://static.igem.org/mediawiki/2017/5/52/KU_Leuven-Safety.svg"></image>
 
−
</svg>
 
−
</div>
 
−
<div class="container">
 
−
<h1>Coming Soon </h1>
 
−
</div>
 
  
−
<script>
 
−
var i = 0;
 
−
var txt = 'Be careful, you do not want to lose your arms like I did. ;)';
 
−
var speed = 50;
 
−
 
−
function typeWriter() {
 
−
  if (i < txt.length) {
 
−
    document.getElementById("demo").innerHTML += txt.charAt(i);
 
−
    i++;
 
−
    setTimeout(typeWriter, speed);
 
−
  }
 
−
}
 
−
</script>
 
 
</html>
 
</html>
 
{{KU_Leuven_footer}}
 
{{KU_Leuven_footer}}

Latest revision as of 01:13, 1 November 2017



Safety

As safety is a very important aspect of sciences, we wanted to create a professor who could alert us whenever we did something dangerous. After following a recipe, which contained sugar, spice, everything nice and chemical X, Hekky arose from our experiment! But in contrary to what we wanted, Hekky came out as an inexperienced lab buddy to which we had to list up all the rules in order to keep him alive. Please read the following rules down below carefully and help us protect our sweet summer child!