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

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
body, html {
 
    height: 100vh;
 
}
 
  
/* The hero image */
+
.igem_2017_content_wrapper {
.hero-image {
+
background-color: #e5d0b7;
    /* The image used */
+
}
    background-image: url("https://static.igem.org/mediawiki/2017/5/5c/Safety_KU_Leuven-01.png");
+
  
    /* Set a specific height */
+
</style>
    height: 50vh;
+
 
+
    /* 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 */
+
.hero-text {
+
    text-align: center;
+
    position: absolute;
+
    top: 50%;
+
    left: 50%;
+
    transform: translate(-50%, -50%);
+
    color: white;
+
}
+
.button {
+
    background-color: #cc3333; /* Red */
+
    border: none;
+
    color: white;
+
    padding: 15px 32px;
+
    text-align: center;
+
    text-decoration: none;
+
    display: inline-block;
+
    font-size: 16px;
+
}
+
.igem_2017_content_wrapper {
+
background-color: #7782b0;
+
}
+
 
+
</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">
 
<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">
 
<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>
 
     <image height="3000px" width="1000px" xlink:href="https://static.igem.org/mediawiki/2017/5/52/KU_Leuven-Safety.svg"></image>
 
</svg>
 
</svg>
</div>
+
 
<div class="container">
+
<h1>Coming Soon </h1>
+
</div>
+
  
 
<script>
 
<script>

Revision as of 11:43, 21 September 2017