Difference between revisions of "Team:KU Leuven"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
       
+
*, *:before, *:after {
−
        h4 {
+
  box-sizing: border-box;
−
            margin-bottom: 10px;
+
  margin: 0;
−
        }
+
  padding: 0;
−
        .background1{
+
}
−
            background:url(https://static.igem.org/mediawiki/2017/c/cb/KU_Leuven_Homepage2.png);
+
.igem_2017_content_wrapper {
−
            position: initial;
+
padding-top: 0px;
−
            background-size: 100%;
+
padding-bottom: 0px;
−
            padding: 0 10px 0 10px;
+
width: 100%;
−
        }
+
display: block;
−
        .background2{
+
position: relative;
−
            background:url(https://static.igem.org/mediawiki/2017/a/a1/New_Homepage2-01.png);
+
background-color: #a8a6a6;
−
            position: initial;
+
min-height: 100vh;
−
            background-size: 100%;
+
font-family: 'Lato', Tahoma, Geneva, sans-serif;  
−
            padding: 0 10px 0 10px;
+
−
        }
+
  
−
        #grad {
+
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
−
            background: -webkit-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Safari 5.1-6.0 */
+
box-shadow: 0 6px 12px rgba(0,0,0,.175);
−
            background: -o-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Opera 11.1-12.0 */  
+
}
−
            background: -moz-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Firefox 3.6-15 */
+
#grad {
−
            background: linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Standard syntax */
+
    background: -webkit-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Safari 5.1-6.0 */
−
        }
+
    background: -o-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Opera 11.1-12.0 */  
−
        p::first-letter {
+
    background: -moz-linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Firefox 3.6-15 */
−
            color: #cc3333;
+
    background: linear-gradient(#C17952,#ffd4a6,#edf2f4); /* Standard syntax */
−
            font-size: 40px;
+
}
−
        }
+
−
               
+
−
        p {
+
−
          text-align:justify;
+
−
          font-size: 20px;
+
−
        }
+
−
        </style>
+
−
       
+
−
            <div id="grad">
+
−
                   
+
−
                        <br>
+
−
                   
+
−
                        <div class="background1">
+
−
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Education</h1>
+
−
                                <p style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">As education is an integral part of science, we as a team sought to inspire the next generation. To achieve this goal we constructed an educative plan focused on children of the age 10 to 12. The team sat together to discuss the topics we would like to teach these young potential scientists. We quickly concluded that a basic introduction to cells and DNA would be ideal, rather advanced topics for children but still fairly easy and straightforward to explain. We contacted 2 teachers of team members Sissel and Joffré to arrange a meeting. Being used to educate children these teachers were the ideal platform to launch our educative plan to the next level. And even better they were eager to let us perform our ‘lesson’ in their respective classes.  </p>
+
−
                       
+
−
                        </div>
+
−
                    <br>
+
−
                    <div class="container">
+
−
                   
+
−
                        <p style="text-align:justify; padding: 0px 50px 0px 50px;">
+
−
                           
+
  
−
                        With the dates of our lessons set, the education sub-part of our team could focus all of their attention to designing the presentation and educative games. Finally 2 members of the team would go to these schools. While brainstorming we quickly concluded that only a presentation would not be fun enough for children, after all we wanted to keep their attention levels as high as possible. So a lot of effort was put into coming up with a fun and educative way to teach children the basics of cells and DNA. And what better way to make it fun for children than with LEGO. Our presentation was quickly taking shape and ideas were flowing. The day before going to the actual first class the first symptoms of stage fright were starting to be present. “Is the presentation to hard for children to understand?”, “are the educative games fun enough?”. These nerves went away quickly the next day after 18 excited kids, who were clearly ready to learn about biology, entered the classroom.  
+
.home {
−
                        <br>
+
            position: relative;
−
                        <br>
+
    }
−
                        <br>
+
−
                        <img src="https://static.igem.org/mediawiki/2017/3/35/KU_Leuven_Education.jpeg" width="40%" style="float: left; margin: 0 20px 0 0px;"></img>
+
−
                        We started with explaining what scientist are and why they are so important in our lives. This part was completely interactive, so the children all gave their own input in why they think scientists are important. We also asked what inventions they couldn’t miss in their lives. We got every possible answer we could think of, as well as every possible answer we couldn’t ever think of.  The children's opinions ranged from iPhones and the internet, which are pretty predictable, to comics and the toilet. With the introduction completed we moved on to the subject of cells. Since it can be complicated for kids to understand subjects that they can’t see with their own eyes, we started with an easily understandable analogy. We stated that you can see the cells as the bricks that you use to build a house. The children understood this analogy almost immediately, so we could move on to more specific details. We discussed the amount and size of individual cells in our body, while making it as interactive as possible by letting the children make educative guesses about the size and their amount. We used a ruler as a way to explain to kids that the individual cells are to small to see with your own eyes and we calculated the years it would take to count all the cells (over 1 MILLION years of counting) in your body. These illustrative moments helped the kids to understand this rather complex subject better.
+
−
                        <br>
+
−
                        <br>
+
−
                        It was then time to explain the kids what DNA is and why it is of absolute importance in all living things. We started, like with the explanation of cells, with an analogy. This time we compared the DNA to the instruction booklet you need to build your favorite LEGO set. The individual LEGO pieces are like the cells in our body and you need a instructions on how to assemble them in a defined order, like in the body. With the basic information about cells and DNA taught to the children, it was time to put all of this together in educative games. The children learned about how the inside of a cell operates and how the information present on the DNA is translated to essential biomolecules. The class was divided into 2 groups who performed the same actions. Each group represented the inside of a cell. With subgroups for the core with the DNA inside and subgroups for the mRNA and ribosomes. If the mRNA group correctly passed the right instructions to the ribosomes, a LEGO figure would be the result. The children who had the instruction booklet, and thus represented the DNA, couldn’t leave the core. For another game we gave 4 groups of children different instruction booklets as a result they all build a different simple tower of a couple of LEGO blocks. With this last game we showed how a different instruction booklet results in being different from each other. We talked with the children about why each and every one of us is different and why some handicaps can be the result of faults in your DNA. We made this easier to understand by stating that if the instruction booklet was wrong it would be more difficult to get the right desired result. It seemed important to us that we also taught about these aspects of DNA as it would help children understand and maybe accept handicaps easier.
+
−
                        <br>
+
  
−
                        <br>
+
    .home .bg {
−
                        To finish our educative afternoon we introduced the classroom to genetic manipulation. After a short introduction we let their creativity run free, each student received a printed DNA strand with parts missing. In these empty spaces they could stick superhero genes we printed beforehand. Each child could only pick a maximum of 3, and after that they could draw themselves with these superhero powers. If there was any time left we let them present their superpowers and give arguments as to why their choices were the best possible. With this last part our presentation was completely finished. We were super happy to hear al the positive things the children said to us while leaving the classroom. We hope that with our effort maybe a couple of those kids will pursue a scientific degree, but mainly we hope that we made all those children warm for everything scientific.  
+
            position: relative;
−
                        </p>
+
            display: block;
 +
            height: 85vh;
 +
            background-size: cover;
 +
            background-image: url(https://static.igem.org/mediawiki/2017/6/69/KU_Leuven_BG.png);
 +
            background-repeat: no-repeat;
 +
            background-position: center;
 +
    }
  
−
                    </div>
+
    .arrow {
−
                    <div class="background2">
+
            position: relative;
−
                            <h1 style="text-align:center; padding: 30px; font-size:50px; color: white;">Card Game</h1>
+
            margin: -100px auto 0px auto;
−
                                <p style="text-align:center;color: white; padding: 10px 10px 60px 10px; font-size:15px;">..... </p>
+
            display: block;
−
                       
+
            width: 80px;
−
                        </div>
+
            height: 80px;
  
 +
            border-radius: 50%;
 +
    }
  
 +
    .arrow:hover {
 +
            background-color: rgba(255, 255, 255, 0.175);
 +
            cursor: pointer;
 +
    }
  
 +
    .arrow img {
 +
            margin: 15px;
 +
            width: 50px;
 +
            height: 50px;
 +
    }
 +
 +
body {
 +
  background: #262525;
 +
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 +
}
 +
 +
.cont {
 +
  position: relative;
 +
  overflow: hidden;
 +
  height: 100vh;
 +
  padding: 80px 70px;
 +
}
 +
.cont__inner {
 +
  position: relative;
 +
  height: 100%;
 +
}
 +
.cont__inner:hover .el__bg:after {
 +
  opacity: 1;
 +
}
 +
 +
 +
.el {
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  width: 19.2%;
 +
  height: 100%;
 +
  background: #252525;
 +
  -webkit-transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
 +
  transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
 +
  transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
 +
  transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
 +
  will-change: transform, width, opacity;
 +
}
 +
.el:not(.s--active) {
 +
  cursor: pointer;
 +
}
 +
.el__overflow {
 +
  overflow: hidden;
 +
  position: relative;
 +
  height: 100%;
 +
}
 +
.el__inner {
 +
  overflow: hidden;
 +
  position: relative;
 +
  height: 100%;
 +
  -webkit-transition: -webkit-transform 1s;
 +
  transition: -webkit-transform 1s;
 +
  transition: transform 1s;
 +
  transition: transform 1s, -webkit-transform 1s;
 +
}
 +
.cont.s--inactive .el__inner {
 +
  -webkit-transform: translate3d(0, 100%, 0);
 +
          transform: translate3d(0, 100%, 0);
 +
}
 +
.el__bg {
 +
  position: relative;
 +
  width: calc(100vw - 140px);
 +
  height: 100%;
 +
  -webkit-transition: -webkit-transform 0.6s 0.7s;
 +
  transition: -webkit-transform 0.6s 0.7s;
 +
  transition: transform 0.6s 0.7s;
 +
  transition: transform 0.6s 0.7s, -webkit-transform 0.6s 0.7s;
 +
  will-change: transform;
 +
}
 +
.el__bg:before {
 +
  content: "";
 +
  position: absolute;
 +
  left: 0;
 +
  top: -5%;
 +
  width: 100%;
 +
  height: 110%;
 +
  background-size: cover;
 +
  background-position: center center;
 +
  -webkit-transition: -webkit-transform 1s;
 +
  transition: -webkit-transform 1s;
 +
  transition: transform 1s;
 +
  transition: transform 1s, -webkit-transform 1s;
 +
  -webkit-transform: translate3d(0, 0, 0) scale(1);
 +
          transform: translate3d(0, 0, 0) scale(1);
 +
}
 +
.cont.s--inactive .el__bg:before {
 +
  -webkit-transform: translate3d(0, -100%, 0) scale(1.2);
 +
          transform: translate3d(0, -100%, 0) scale(1.2);
 +
}
 +
.el.s--active .el__bg:before {
 +
  -webkit-transition: -webkit-transform 0.8s;
 +
  transition: -webkit-transform 0.8s;
 +
  transition: transform 0.8s;
 +
  transition: transform 0.8s, -webkit-transform 0.8s;
 +
}
 +
.el__bg:after {
 +
  content: "";
 +
  z-index: 1;
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  background: rgba(0, 0, 0, 0.3);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.5s;
 +
  transition: opacity 0.5s;
 +
}
 +
.cont.s--el-active .el__bg:after {
 +
  -webkit-transition: opacity 0.5s 1.4s;
 +
  transition: opacity 0.5s 1.4s;
 +
  opacity: 1 !important;
 +
}
 +
.el__preview-cont {
 +
  z-index: 2;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-transition: all 0.3s 1.2s;
 +
  transition: all 0.3s 1.2s;
 +
}
 +
.cont.s--inactive .el__preview-cont {
 +
  opacity: 0;
 +
  -webkit-transform: translateY(10px);
 +
          transform: translateY(10px);
 +
}
 +
.cont.s--el-active .el__preview-cont {
 +
  opacity: 0;
 +
  -webkit-transform: translateY(30px);
 +
          transform: translateY(30px);
 +
  -webkit-transition: all 0.5s;
 +
  transition: all 0.5s;
 +
}
 +
.el__heading {
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  font-size: 18px;
 +
}
 +
.el__content {
 +
  z-index: -1;
 +
  position: absolute;
 +
  left: 0;
 +
  top: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  padding: 30px;
 +
  opacity: 0;
 +
  pointer-events: none;
 +
  -webkit-transition: all 0.1s;
 +
  transition: all 0.1s;
 +
}
 +
.el.s--active .el__content {
 +
  z-index: 2;
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
  -webkit-transition: all 0.5s 1.4s;
 +
  transition: all 0.5s 1.4s;
 +
}
 +
.el__text {
 +
  text-transform: uppercase;
 +
  font-size: 40px;
 +
  color: #fff;
 +
}
 +
.el_paragraph{
 +
font-size: 25px;
 +
color: #fff;
 +
}
 +
.el__close-btn {
 +
  z-index: -1;
 +
  position: absolute;
 +
  right: 10px;
 +
  top: 10px;
 +
  width: 60px;
 +
  height: 60px;
 +
  opacity: 0;
 +
  pointer-events: none;
 +
  -webkit-transition: all 0s 0.45s;
 +
  transition: all 0s 0.45s;
 +
  cursor: pointer;
 +
}
 +
.el.s--active .el__close-btn {
 +
  z-index: 5;
 +
  opacity: 1;
 +
  pointer-events: auto;
 +
  -webkit-transition: all 0s 1.4s;
 +
  transition: all 0s 1.4s;
 +
}
 +
.el__close-btn:before, .el__close-btn:after {
 +
  content: "";
 +
  position: absolute;
 +
  left: 0;
 +
  top: 50%;
 +
  width: 100%;
 +
  height: 8px;
 +
  margin-top: -4px;
 +
  background: #fff;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0s;
 +
  transition: opacity 0s;
 +
}
 +
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
 +
  opacity: 1;
 +
}
 +
.el__close-btn:before {
 +
  -webkit-transform: rotate(45deg) translateX(100%);
 +
          transform: rotate(45deg) translateX(100%);
 +
}
 +
.el.s--active .el__close-btn:before {
 +
  -webkit-transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
 +
  transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
 +
  -webkit-transform: rotate(45deg) translateX(0);
 +
          transform: rotate(45deg) translateX(0);
 +
}
 +
.el__close-btn:after {
 +
  -webkit-transform: rotate(-45deg) translateX(100%);
 +
          transform: rotate(-45deg) translateX(100%);
 +
}
 +
.el.s--active .el__close-btn:after {
 +
  -webkit-transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
 +
  transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
 +
  -webkit-transform: rotate(-45deg) translateX(0);
 +
          transform: rotate(-45deg) translateX(0);
 +
}
 +
.el__index {
 +
  overflow: hidden;
 +
  position: absolute;
 +
  left: 0;
 +
  bottom: -80px;
 +
  width: 100%;
 +
  height: 100%;
 +
  min-height: 250px;
 +
  text-align: center;
 +
  font-size: 20vw;
 +
  line-height: 0.85;
 +
  font-weight: bold;
 +
  -webkit-transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;
 +
  transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;
 +
  transition: transform 0.5s, opacity 0.3s 1.4s;
 +
  transition: transform 0.5s, opacity 0.3s 1.4s, -webkit-transform 0.5s;
 +
  -webkit-transform: translate3d(0, 1vw, 0);
 +
          transform: translate3d(0, 1vw, 0);
 +
}
 +
.el:hover .el__index {
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
}
 +
.cont.s--el-active .el__index {
 +
  -webkit-transition: opacity 0.3s, -webkit-transform 0.5s;
 +
  transition: opacity 0.3s, -webkit-transform 0.5s;
 +
  transition: transform 0.5s, opacity 0.3s;
 +
  transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
 +
  opacity: 0;
 +
}
 +
.el__index-back, .el__index-front {
 +
  position: absolute;
 +
  left: 0;
 +
  bottom: 0;
 +
  width: 100%;
 +
}
 +
.el__index-back {
 +
  color: #2f3840;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.25s 0.25s;
 +
  transition: opacity 0.25s 0.25s;
 +
}
 +
.el:hover .el__index-back {
 +
  -webkit-transition: opacity 0.25s;
 +
  transition: opacity 0.25s;
 +
  opacity: 1;
 +
}
 +
.el__index-overlay {
 +
  overflow: hidden;
 +
  position: relative;
 +
  -webkit-transform: translate3d(0, 100%, 0);
 +
          transform: translate3d(0, 100%, 0);
 +
  -webkit-transition: -webkit-transform 0.5s 0.1s;
 +
  transition: -webkit-transform 0.5s 0.1s;
 +
  transition: transform 0.5s 0.1s;
 +
  transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
 +
  color: transparent;
 +
}
 +
.el__index-overlay:before {
 +
  content: attr(data-index);
 +
  position: absolute;
 +
  left: 0;
 +
  bottom: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  color: #fff;
 +
  -webkit-transform: translate3d(0, -100%, 0);
 +
          transform: translate3d(0, -100%, 0);
 +
  -webkit-transition: -webkit-transform 0.5s 0.1s;
 +
  transition: -webkit-transform 0.5s 0.1s;
 +
  transition: transform 0.5s 0.1s;
 +
  transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
 +
}
 +
.el:hover .el__index-overlay {
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
}
 +
.el:hover .el__index-overlay:before {
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
}
 +
.el:nth-child(1) {
 +
  -webkit-transform: translate3d(0%, 0, 0);
 +
          transform: translate3d(0%, 0, 0);
 +
  -webkit-transform-origin: 50% 50%;
 +
          transform-origin: 50% 50%;
 +
}
 +
.cont.s--el-active .el:nth-child(1):not(.s--active) {
 +
  -webkit-transform: scale(0.5) translate3d(0%, 0, 0);
 +
          transform: scale(0.5) translate3d(0%, 0, 0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
 +
}
 +
.el:nth-child(1) .el__inner {
 +
  -webkit-transition-delay: 0s;
 +
          transition-delay: 0s;
 +
}
 +
.el:nth-child(1) .el__bg {
 +
  -webkit-transform: translate3d(0%, 0, 0);
 +
          transform: translate3d(0%, 0, 0);
 +
}
 +
.el:nth-child(1) .el__bg:before {
 +
  -webkit-transition-delay: 0s;
 +
          transition-delay: 0s;
 +
  background-image: url("https://www.gpsspellen.be/wp-content/uploads/2014/02/2605896820_bd88c33639_o.jpg");
 +
}
 +
.el:nth-child(2) {
 +
  -webkit-transform: translate3d(105.20833%, 0, 0);
 +
          transform: translate3d(105.20833%, 0, 0);
 +
  -webkit-transform-origin: 155.20833% 50%;
 +
          transform-origin: 155.20833% 50%;
 +
}
 +
.cont.s--el-active .el:nth-child(2):not(.s--active) {
 +
  -webkit-transform: scale(0.5) translate3d(105.20833%, 0, 0);
 +
          transform: scale(0.5) translate3d(105.20833%, 0, 0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
 +
}
 +
.el:nth-child(2) .el__inner {
 +
  -webkit-transition-delay: 0.1s;
 +
          transition-delay: 0.1s;
 +
}
 +
.el:nth-child(2) .el__bg {
 +
  -webkit-transform: translate3d(-19.2%, 0, 0);
 +
          transform: translate3d(-19.2%, 0, 0);
 +
}
 +
.el:nth-child(2) .el__bg:before {
 +
  -webkit-transition-delay: 0.1s;
 +
          transition-delay: 0.1s;
 +
  background-image: url("https://www.gpsspellen.be/wp-content/uploads/2014/02/2605896820_bd88c33639_o.jpg");
 +
}
 +
.el:nth-child(3) {
 +
  -webkit-transform: translate3d(210.41667%, 0, 0);
 +
          transform: translate3d(210.41667%, 0, 0);
 +
  -webkit-transform-origin: 260.41667% 50%;
 +
          transform-origin: 260.41667% 50%;
 +
}
 +
.cont.s--el-active .el:nth-child(3):not(.s--active) {
 +
  -webkit-transform: scale(0.5) translate3d(210.41667%, 0, 0);
 +
          transform: scale(0.5) translate3d(210.41667%, 0, 0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
 +
}
 +
.el:nth-child(3) .el__inner {
 +
  -webkit-transition-delay: 0.2s;
 +
          transition-delay: 0.2s;
 +
}
 +
.el:nth-child(3) .el__bg {
 +
  -webkit-transform: translate3d(-38.4%, 0, 0);
 +
          transform: translate3d(-38.4%, 0, 0);
 +
}
 +
.el:nth-child(3) .el__bg:before {
 +
  -webkit-transition-delay: 0.2s;
 +
          transition-delay: 0.2s;
 +
  background-image: url("https://www.gpsspellen.be/wp-content/uploads/2014/02/2605896820_bd88c33639_o.jpg");
 +
}
 +
.el:nth-child(4) {
 +
  -webkit-transform: translate3d(315.625%, 0, 0);
 +
          transform: translate3d(315.625%, 0, 0);
 +
  -webkit-transform-origin: 365.625% 50%;
 +
          transform-origin: 365.625% 50%;
 +
}
 +
.cont.s--el-active .el:nth-child(4):not(.s--active) {
 +
  -webkit-transform: scale(0.5) translate3d(315.625%, 0, 0);
 +
          transform: scale(0.5) translate3d(315.625%, 0, 0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
 +
}
 +
.el:nth-child(4) .el__inner {
 +
  -webkit-transition-delay: 0.3s;
 +
          transition-delay: 0.3s;
 +
}
 +
.el:nth-child(4) .el__bg {
 +
  -webkit-transform: translate3d(-57.6%, 0, 0);
 +
          transform: translate3d(-57.6%, 0, 0);
 +
}
 +
.el:nth-child(4) .el__bg:before {
 +
  -webkit-transition-delay: 0.3s;
 +
          transition-delay: 0.3s;
 +
  background-image: url("https://www.gpsspellen.be/wp-content/uploads/2014/02/2605896820_bd88c33639_o.jpg");
 +
}
 +
.el:nth-child(5) {
 +
  -webkit-transform: translate3d(420.83333%, 0, 0);
 +
          transform: translate3d(420.83333%, 0, 0);
 +
  -webkit-transform-origin: 470.83333% 50%;
 +
          transform-origin: 470.83333% 50%;
 +
}
 +
.cont.s--el-active .el:nth-child(5):not(.s--active) {
 +
  -webkit-transform: scale(0.5) translate3d(420.83333%, 0, 0);
 +
          transform: scale(0.5) translate3d(420.83333%, 0, 0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: opacity 0.95s, -webkit-transform 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s;
 +
  transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
 +
}
 +
.el:nth-child(5) .el__inner {
 +
  -webkit-transition-delay: 0.4s;
 +
          transition-delay: 0.4s;
 +
}
 +
.el:nth-child(5) .el__bg {
 +
  -webkit-transform: translate3d(-76.8%, 0, 0);
 +
          transform: translate3d(-76.8%, 0, 0);
 +
}
 +
.el:nth-child(5) .el__bg:before {
 +
  -webkit-transition-delay: 0.4s;
 +
          transition-delay: 0.4s;
 +
  background-image: url("https://www.gpsspellen.be/wp-content/uploads/2014/02/2605896820_bd88c33639_o.jpg");
 +
}
 +
.el:hover .el__bg:after {
 +
  opacity: 0;
 +
}
 +
.el.s--active {
 +
  z-index: 1;
 +
  width: 100%;
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
  -webkit-transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
 +
  transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
 +
  transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
 +
  transition: transform 0.6s, width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
 +
}
 +
.el.s--active .el__bg {
 +
  -webkit-transform: translate3d(0, 0, 0);
 +
          transform: translate3d(0, 0, 0);
 +
  -webkit-transition: -webkit-transform 0.6s;
 +
  transition: -webkit-transform 0.6s;
 +
  transition: transform 0.6s;
 +
  transition: transform 0.6s, -webkit-transform 0.6s;
 +
}
 +
.el.s--active .el__bg:before {
 +
  -webkit-transition-delay: 0.6s;
 +
          transition-delay: 0.6s;
 +
  -webkit-transform: scale(1.1);
 +
          transform: scale(1.1);
 +
}
 +
 +
.animated_svg1 {
 +
position: relative;
 +
display: block;
 +
width: 100%;
 +
height: 1000px;
 +
min-height: 100% !important;
 +
}
 +
.animated_svg1 > * {
 +
position: center;
 +
}
 +
.animated_svg2 {
 +
        position: relative;
 +
        display: block;
 +
        width: 100%;
 +
        height: auto;
 +
        text-align: center;
 +
    }
 +
 +
    .animated_svg2>* {
 +
        max-width: 800px;
 +
        display: inline-block;
 +
    }
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
.home{
 +
display: block;
 +
}
 +
.cont{
 +
display: none;
 +
}
 +
.animated_svg1{
 +
display: none;
 +
}
 +
.animated_svg2{
 +
margin-top: 18px;
 +
}
 +
}
 +
/* IF THE SCREEN IS MORE THAN 800PX */
 +
@media only screen and (min-width: 801px) {
 +
.home{
 +
display: none;
 +
}
 +
.cont{
 +
display: block;
 +
}
 +
.animated_svg1{
 +
display: block;
 +
}
 +
}
 +
 +
 +
</style>
 +
<div class="igem_2017_content_wrapper">
 +
 +
<div id="grad">
 +
<div class="home">
 +
            <div class="bg">
 +
            </div>
 +
            <div id="scrolldown" class="arrow">
 +
                <img src="https://static.igem.org/mediawiki/2017/0/0f/KU_Leuven-scroll_arrow.png">
 +
            </div>
 +
        </div>
 +
 +
<div class="cont s--inactive">
 +
 +
  <!-- cont inner start -->
 +
  <div class="cont__inner">
 +
    <!-- el start -->
 +
    <div class="el">
 +
      <div class="el__overflow">
 +
        <div class="el__inner">
 +
          <div class="el__bg"></div>
 +
          <div class="el__preview-cont">
 +
            <h2 class="el__heading"><font color="white">KU Leuven</font></h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">HEKcite</div>
 +
            <div class="el__close-btn"></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="el__index">
 +
        <div class="el__index-back">1</div>
 +
        <div class="el__index-front">
 +
          <div class="el__index-overlay" data-index="1">1</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- el end -->
 +
    <!-- el start -->
 +
    <div class="el">
 +
      <div class="el__overflow">
 +
        <div class="el__inner">
 +
          <div class="el__bg"></div>
 +
          <div class="el__preview-cont">
 +
            <h2 class="el__heading"><font color="white">Project</font></h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Inspired by the heart</div>
 +
            <br>
 +
            <div class="el_paragraph">
 +
            We drew our inspiration from the versatility and robustness of the <b>heart</b>. It beats continuously over the years, rapidly <b>adapting its pace</b> when necessary.</div>
 +
           
 +
            <div class="el__close-btn"></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="el__index">
 +
        <div class="el__index-back">2</div>
 +
        <div class="el__index-front">
 +
          <div class="el__index-overlay" data-index="2">2</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- el end -->
 +
    <!-- el start -->
 +
    <div class="el">
 +
      <div class="el__overflow">
 +
        <div class="el__inner">
 +
          <div class="el__bg"></div>
 +
          <div class="el__preview-cont">
 +
            <h2 class="el__heading"><font color="white">Research</font></h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Creation of the Rhythm</div>
 +
            <br>
 +
<div class="el_paragraph">Given our knowledge about heart currents, we hypothesized it would be possible to recreate a steady <b>rhythm</b> in a non-excitable cell using only <b>three ion channels</b>.</div>
 +
            <div class="el__close-btn"></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="el__index">
 +
        <div class="el__index-back">3</div>
 +
        <div class="el__index-front">
 +
          <div class="el__index-overlay" data-index="3">3</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- el end -->
 +
    <!-- el start -->
 +
    <div class="el">
 +
      <div class="el__overflow">
 +
        <div class="el__inner">
 +
          <div class="el__bg"></div>
 +
          <div class="el__preview-cont">
 +
            <h2 class="el__heading"><font color="white">Application</font></h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Biosensing</div>
 +
<br>
 +
            <div class="el_paragraph">Finally, we aim to <b>influence the pace</b> by varying concentrations of biological effectors. Our main focus is establishing a new form of <b>therapeutic drug monitoring</b>.</div>
 +
            <div class="el__close-btn"></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="el__index">
 +
        <div class="el__index-back">4</div>
 +
        <div class="el__index-front">
 +
          <div class="el__index-overlay" data-index="4">4</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- el end -->
 +
    <!-- el start -->
 +
    <div class="el">
 +
      <div class="el__overflow">
 +
        <div class="el__inner">
 +
          <div class="el__bg"></div>
 +
          <div class="el__preview-cont">
 +
            <h2 class="el__heading"><font color="white">Contact</font></h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Contact</div>
 +
            <div class="el__close-btn"></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="el__index">
 +
        <div class="el__index-back">5</div>
 +
        <div class="el__index-front">
 +
          <div class="el__index-overlay" data-index="5">5</div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <!-- el end -->
 +
  </div>
 +
</div>
 +
<div style="text-align:center">
 +
<div class="animated_svg1">
 +
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 +
viewBox="0 0 1651 1650.7" width="100%" Height="100%" style="enable-background:new 0 0 1651 1650.7;" xml:space="none">
 +
<g id="Shape_7_copy_1_" class="st0">
 +
<g id="Shape_7_copy">
 +
<g>
 +
<path
 +
style="fill:none;stroke:#000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
 +
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;"
 +
d="M799.2,1452.9c-133.6,0-252.7-163.9-259.2-199l0.9,1c27.7,32.7,65.6,77.5,109.3,113c51.8,42.2,100.3,62.7,148.1,62.7c105.8,0,143.7-73.6,155-105.2c3-8.2,7.5-12.9,12.5-12.9c2.9,0,5.8,1.7,7.7,4.6c2.8,4.1,3.2,9.5,1.2,14.5c-0.3,0.8-0.7,1.7-1.1,2.8c-4.3,11.2-15.6,41.1-41.9,67.8C898.6,1435.9,854,1452.9,799.2,1452.9z M1162.7,808.1c-3.2,0-6-1.4-7.5-3.7c-1.4-2.2-2.5-6.3,0.6-13.1c8.9-19.8,9-84.2-2.2-100.6c-5.5-8-6.9-15.3-5.4-18c0.4-0.8,1.1-1.2,2-1.2c1.5,0,5.9,1.2,14.6,12.4c18.9,24.4,14.6,100.8,9.8,115.5C1172.6,805.4,1167.2,808.1,1162.7,808.1C1162.7,808.1,1162.7,808.1,1162.7,808.1z M358.9,784.3c-5.8-50.6,0-110.5,16.4-169.3c17-61.1,44.8-118.3,78.2-161.1c3.5-3.6,7.3-5.7,10.2-5.7c1.8,0,3.2,0.8,3.9,2.4c1.3,2.8,0.3,8.4-6.2,15.7c-31.7,46.1-54.7,94.4-70.4,147.6c-13.8,47-20.4,91.7-26.7,134.9C362.4,761,360.7,772.7,358.9,784.3z M946.2,769.4c-3.9,0-7.2-2.2-9.1-6c-3-5.8-1.9-13.6,2.7-19.9c6.4-8.8,43.9-45.4,101.3-79.1c52-30.5,134.6-66.8,233.4-66.8c15.3,0,30.7,0.9,46,2.6c-49.9,2.9-98,11.3-142.9,24.8c-38.8,11.7-75.5,27.3-109,46.3c-58.8,33.4-93.1,69-104.1,84.8C958.4,764.7,952,769.4,946.2,769.4z M785.8,738.6c-2.8,0-5.5-1.1-7.4-3.2c-2.6-2.7-3.8-6.8-3.6-11.8c2.9-66.6-49.7-138.8-77.2-161c-5.2-4.2-5.6-10.1-4.1-14.2c1.7-4.8,5.8-8,10.5-8c3.2,0,6.6,1.4,9.8,4.2c57.8,49.4,81.4,127.2,84.1,178.7c0.3,6-1.9,9.6-3.7,11.6C791.8,737.3,788.8,738.6,785.8,738.6C785.8,738.6,785.8,738.6,785.8,738.6z M994.6,596.3c-8.7,0-14.5-5-20.5-11.1c-47.7-47.7-105.6-90.9-163.1-121.5c-5-2.8-7.6-6.9-6.6-10.7c1-3.9,5.1-6.3,10.4-6.3c2.7,0,5.6,0.6,8.7,1.9c39.3,16,97.6,57.6,173.1,123.5l0.3,0.2l0.3-0.2c12.5-7.1,53.7-24.7,111.2-41.4c46.2-13.4,114.2-29.4,176.2-29.4c10.7,0,20.9,0.5,30.5,1.4c-195.7,32.3-253.3,62.7-287.8,81c-7.4,3.9-13.8,7.3-20.2,9.9C1002.4,595.4,998.3,596.3,994.6,596.3z M537.3,428c-3.2,0-6.7-1.2-10.2-3.4c-7.4-4.7-28.1-16.8-61.2-27.7c-40.6-13.3-85.2-20.1-132.5-20.1c-8.4,0-16.9,0.2-25.5,0.6c20.1-6.2,43.1-9.4,68.2-9.4c76.3,0,149.4,28.6,162.2,37.6c8.1,5.8,9.6,12.1,8.4,16.1C545.4,425.6,541.8,428,537.3,428C537.3,428,537.3,428,537.3,428z M602.5,334.6c-3.2,0-6.7-1.2-10.2-3.4c-21.3-13.6-44.9-25.4-70-35.1c-47.2-18.1-96.1-27.3-145.4-27.3c-6.3,0-12.6,0.2-18.8,0.5c16.4-5,35.2-7.5,56-7.5c44.8,0,90.2,11.6,120.4,21.4c35.3,11.4,61.6,24,69.1,29.2c8.1,5.8,9.6,12.1,8.4,16.1C610.7,332.3,607.1,334.6,602.5,334.6z">
 +
</path>
 +
</g>
 +
</g>
 +
</g>
 +
<g id="Shape_6_1_" class="st0">
 +
<g id="Shape_6">
 +
<g>
 +
<path
 +
style="fill:none;stroke:#c33;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
 +
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;" d="M1035.4,398.6c-20.3-29.8-63-72-121.8-98c6.1-59.8,52-102.4,67.5-111.5c16.3-9.6-10.6-37.8-38.6-24.7c-27,12.6-53.2,62.8-74.5,120.6c-12.4-3.1-25.3-5.3-38.7-6.6c1.7-45.3,13.2-91.1,51.7-130.1c13.9-14.1-22.3-30.6-39.6-12c-17.9,19.2-59.9,91.5-63,142.3c-0.2,0-0.4,0-0.6,0.1c-6.4,0.8-12.6,1.9-18.7,3.1c-9-61.1-26.9-133-64.3-157.5c-23.9-15.6-56.6,23.1-45.6,38.6c22.9,32.3,48.2,89.6,55.8,138.1C564.5,373.9,538.5,587.9,540.7,625c2.6,42.7,94,30.8,95-2.4c2-61.9,39.3-165.1,121.4-202.8c86.9-39.9,221.9,32.6,238.3,45.6C1012.6,478.8,1062.9,436,1035.4,398.6z">
 +
</path>
 +
</g>
 +
</g>
 +
</g>
 +
<g id="Shape_7_1_" class="st0">
 +
<g id="Shape_7">
 +
<g>
 +
<path
 +
style="fill:none;stroke:#c33;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
 +
data-400-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;" d="M543.7,983.2c-6.4,0-12.7,0-19,0c-12.1,0-18.9,0.1-20,15.9c-2.1,29.3-7,124.6-7,124.6s-5.7-73.9-4.8-130.3c0.7-40.6-5.1-119.7-11.7-168.3c-2.1-15.8-30.2-15.7-32.9-1.9c-4.5,22.9-9.1,100.7-17.8,153.6c-6.9,1.4-36.4,0.3-59,0.7c-4.3,0.1-15-0.9-16.1,14.9c-2.1,29.3-9.6,131.4-9.6,131.4s-5.7-73.9-4.8-130.3c0.7-40.6-5.1-119.7-11.7-168.3c-2.1-15.8-31.4-15.9-32.9-1.9c-4.2,40.3-19.3,151.8-20.7,162c-6.4,0-142.2,0.4-175.7,2.9c-146.5,11-44.1,24,6.2,25c7.8,0.1,175.1-7.4,181.9-7.7c16.7-0.6,25.3-135.6,25.3-135.6s0.2,46.2-0.3,124.7c-0.4,76.2,12.8,141.9,18.1,186.8c2.3,20,22.6,11,27.1-0.5c7.1-18.5,17.8-160.5,19.2-173.9c4.7-0.3,48.2,1.3,57.4,1.4c14.1,0.1,13.3-6,15.1-12.6c1.9-7.3,15.5-125.9,15.5-125.9s0.2,46.2-0.3,124.7c-0.4,76.2,12.8,141.9,18.1,186.8c2.3,20,22.6,11,27.1-0.5c7.1-18.5,16.3-163.8,17.7-177.2c5.2-0.4,7.8,0.6,16.2,0.6C567.1,1004,571.8,983.2,543.7,983.2z M1548,979c-61-2.2-281,6.3-609.6,6.7c-30.3,0-29.4,19.3,1.5,19.2c351.4-1.7,594-2.9,616.5-4.5C1604.3,997,1676.6,983.5,1548,979z">
 +
</path>
 +
</g>
 +
</g>
 +
</g>
 +
<g id="Shape_9_1_" class="st0">
 +
<g id="Shape_9">
 +
<g>
 +
<path
 +
style="fill:none;stroke:#c33;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
 +
data-800-top="stroke-dashoffset:4000;" data--400-top-bottom="stroke-dashoffset:0;"
 +
d="M583.4,1190.4h205.9V1155H619.1v-141.5h170.3v-35.7H619.1V866.7h170.3v-35.6H583.4V1190.4z M882,991.7l171.1-160.6h-48L863.8,965V831.1h-37.2v359.3h37.2v-166.3l157.4,166.3h45.6L882,991.7z">
 +
</path>
 +
</g>
 +
</g>
 +
</g>
 +
<g id="Ellipse_1_1_" class="st0">
 +
<g id="Ellipse_1">
 +
<g>
 +
<path
 +
style="fill:none;stroke:#000;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:4000;stroke-dashoffset:0"
 +
data-800-top="stroke-dashoffset:4000;" data-10-top-bottom="stroke-dashoffset:0;" d="M1206.2,1190.4h16.8v-130.1h-16.8V1190.4z M1135.3,1075c1.1,0,2.1,0,3.2,0.1c0.3,0,0.6,0,1,0.1c0.8,0.1,1.5,0.1,2.3,0.2c0.3,0,0.7,0.1,1,0.1c0.8,0.1,1.7,0.2,2.5,0.4c0.2,0,0.4,0.1,0.6,0.1c1,0.2,2,0.4,3,0.7c0.2,0,0.4,0.1,0.6,0.2c0.8,0.2,1.6,0.4,2.4,0.7c0.3,0.1,0.5,0.2,0.8,0.3c0.8,0.3,1.5,0.5,2.3,0.8c0.2,0.1,0.4,0.1,0.6,0.2c1.9,0.8,3.8,1.6,5.6,2.6c0.1,0.1,0.3,0.2,0.4,0.2c0.8,0.4,1.6,0.9,2.3,1.3c0.1,0.1,0.3,0.2,0.4,0.2c2.7,1.7,5.2,3.5,7.5,5.6c0.1,0.1,0.1,0.1,0.2,0.2c2.3,2.1,4.5,4.4,6.4,6.9c0,0,0,0,0,0c0.6,0.8,1.2,1.7,1.8,2.6l12.8-8.5c-12.2-17.9-33.4-29.7-57.5-29.7c-37.8,0-68.5,29.1-68.5,65c0,35.9,30.7,65,68.5,65c24.1,0,45.2-11.8,57.4-29.6l-13-8.4c-9.4,13.9-25.8,23.1-44.5,23.1c-29.2,0-52.9-22.5-52.9-50.2S1106.1,1075,1135.3,1075z M1425.1,1125.4C1425.1,1125.4,1425.1,1125.4,1425.1,1125.4c0-36-28.1-65.1-62.8-65.1c-34.7,0-62.8,29.1-62.8,65c0,35.9,28.1,65,62.8,65c25.1,0,46.8-15.3,56.8-37.4l-13.2-6.8c-7.7,17.2-24.5,29.2-44,29.2c-26.6,0-48.2-22.3-48.4-49.8h96.4L1425.1,1125.4z M1315.3,1111.9c5.6-21.3,24.4-36.9,46.7-36.9s41.1,15.6,46.7,36.9H1315.3z M1276.3,1016.4h-16.8v43.9h-22.8v14.2h22.8v115.9h16.8v-115.9h22.8v-14.2h-22.8V1016.4z M1214.8,1024.9c-6.4,0-11.5,5.2-11.5,11.5s5.2,11.5,11.5,11.5s11.5-5.2,11.5-11.5S1221.1,1024.9,1214.8,1024.9z">
 +
</path>
 +
</g>
 +
</g>
 +
</g>
 +
</svg>
 +
</div>
 +
        <div id="overlay" class="overlay" style="border-top: 2px solid #c33">
 +
            <div class="container">
 +
                <div class="animated_svg2">
 +
                    <svg height="auto" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 1200 3000">
 +
                        <image height="3000px" width="1200px" xlink:href="https://static.igem.org/mediawiki/2017/7/71/KU_Leuven-homepage.svg"></image>
 +
                        <path style="fill:none;stroke:#cc3333;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:8000;stroke-dashoffset:0" data-500-end="stroke-dashoffset:0;" data-200-top="stroke-dashoffset:8000;" d="M1180,0v600h-90l-12.5-37.5l-12.5,75l-12.5-37.5H20v650l180,1.5c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,98.8,114.5,98.5c56.9,0,56.3-98.8,114.1-99c57.7-0.2,57.4,100.2,114.2,100h175v100l25,7.5l-50,10l25,7.5v475H600v450l200-100l-200,100l200,100l-200-100l-200,100l200-100l-200-100">
 +
                        </path>
 +
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/Model">
 +
                            <rect x="200" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="#game">
 +
                            <rect x="800" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">
 +
                            <rect x="200" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                        <a xlink:href="#education">
 +
                            <rect x="800" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
 +
                        </a>
 +
                    </svg>
 +
  <!-- cont inner end -->
 +
</div>
 +
           
 +
        </div>
 +
</div>
 +
</id>
 +
</div>
 +
<script>
 +
var $cont = document.querySelector('.cont');
 +
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
 +
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
 +
 +
setTimeout(function() {
 +
  $cont.classList.remove('s--inactive');
 +
}, 200);
 +
 +
$elsArr.forEach(function($el) {
 +
  $el.addEventListener('click', function() {
 +
    if (this.classList.contains('s--active')) return;
 +
    $cont.classList.add('s--el-active');
 +
    this.classList.add('s--active');
 +
  });
 +
});
 +
 +
$closeBtnsArr.forEach(function($btn) {
 +
  $btn.addEventListener('click', function(e) {
 +
    e.stopPropagation();
 +
    $cont.classList.remove('s--el-active');
 +
    document.querySelector('.el.s--active').classList.remove('s--active');
 +
  });
 +
});
 +
 +
 +
$(function() {
 +
        // initialize skrollr if the window width is large enough
 +
        if ($(window).width() > 767) {
 +
            skrollr.init();
 +
        }
  
 
          
 
          
−
          
+
    });
 +
 
 +
   
 +
 
 +
</script>
 +
</div>
 +
</div>
 +
</div>
 +
<footer>
 +
         <div class="container" style="margin-bottom:20px;">
 +
            <ul class="row" id="sponsors">
 +
                <h1>Sponsors and Partners:</h1>
 +
                <a href="http://www.vib.be/">
 +
                    <li class="col-sm-6">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/0/0a/KU_Leuven-sponsor-vib.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://kuleuven.be">
 +
                    <li class="col-sm-6">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/7/72/KU_Leuven-sponsor-kuleuven.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://lrd.kuleuven.be/en">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/9/9f/KU_Leuven-sponsor-lrd.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://lrd.kuleuven.be/en">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/5/52/Lcie_Logo_KU_Leuven.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://www.sigmaaldrich.com">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/2/28/KU_Leuven-sponsor-merck.svg" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://ww.ewi-vlaanderen.be">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/5/53/KU_Leuven-sponsor-vlaanderen.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://ww.ewi-vlaanderen.be">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/c/c0/KU_Leuven-sponsor-richtingmorgen.jpg" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://www.janssen.com/us/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/a/ac/KU_Leuven-sponsor-janssen.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="#">
 +
                    <li class="col-sm-3">
 +
                        <div>Tillion-S.S.T</div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://www.glasatelier-saillart.be/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/3/32/KU_Leuven-sponsor-saillart.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="https://www.fishersci.com/us/en/home.html">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/9/94/KU_Leuven-sponsor-tfs.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="https://www.fishersci.com/us/en/home.html">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/e/e8/KU_Leuven-sponsor-thermo.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <li class="col-sm-3">
 +
                    <div><img src="https://static.igem.org/mediawiki/2017/1/17/KU_Leuven-sponsor-kolo.png" /></div>
 +
                </li>
 +
                <a href="http://www.filterservice.be/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/1/15/KU_Leuven-sponsor-filterservice.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://www.snapgene.com/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/c/c3/KU_Leuven-sponsor-snapgene.png" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="http://www.leuvenmindgate.be/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/2/27/KU_Leuven-sponsor-mindgate.svg" /></div>
 +
                    </li>
 +
                </a>
 +
                <a href="https://www.eppendorf.com/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/8/8e/KU_Leuven-sponsor-eppendorf.png" /></div>
 +
                    </li>
 +
                </a>
 +
<a href="https://www.agilent.com/">
 +
                    <li class="col-sm-3">
 +
                        <div><img src="https://static.igem.org/mediawiki/2017/e/ec/KU_Leuven-sponsor-agilent.jpg" /></div>
 +
                    </li>
 +
                </a>
 +
            </ul>
 +
        </div>
 +
        <div class="container-fluid social" style="padding: 0px;">
 +
            <div class="col-md-3" id="facebook"><a href="https://www.facebook.com/KULeuveniGEM" style="padding-right: 0px;"><h2>Facebook</h2><img src="https://static.igem.org/mediawiki/2017/0/0c/KU_Leuven-facebook.png"></a></div>
 +
            <div class="col-md-3" id="twitter"><a href="https://twitter.com/kuleuvenigem" style="padding-right: 0px;"><h2>Twitter</h2><img src="https://static.igem.org/mediawiki/2017/9/99/KU_Leuven-twitter.png"></a></div>
 +
            <div class="col-md-3" id="youtube"><a href="https://www.youtube.com/channel/UCvIKudANB5NvCR5S8XJn78g" style="padding-right: 0px;"><h2>Youtube</h2><img src="https://static.igem.org/mediawiki/2017/7/7b/KU_Leuven-youtube.png"></a></div>
 +
            <div class="col-md-3" id="instagram"><a href="https://www.instagram.com/kuleuvenigem/" style="padding-right: 0px;"><h2>Instagram</h2><img src="https://static.igem.org/mediawiki/2017/0/07/KU_Leuven-instagram.png"></a></div>
 +
        </div>
 +
    </footer>
 +
 
 
</html>
 
</html>
−
{{KU_Leuven_footer}}
 

Revision as of 21:23, 19 October 2017

KU Leuven

HEKcite
1
1

Project

Inspired by the heart

We drew our inspiration from the versatility and robustness of the heart. It beats continuously over the years, rapidly adapting its pace when necessary.
2
2

Research

Creation of the Rhythm

Given our knowledge about heart currents, we hypothesized it would be possible to recreate a steady rhythm in a non-excitable cell using only three ion channels.
3
3

Application

Biosensing

Finally, we aim to influence the pace by varying concentrations of biological effectors. Our main focus is establishing a new form of therapeutic drug monitoring.
4
4

Contact

Contact
5
5