Difference between revisions of "Team:KU Leuven"

Line 1: Line 1:
 
{{KU_Leuven}}
 
{{KU_Leuven}}
 +
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
*, *:before, *:after {
+
        p {
−
  box-sizing: border-box;
+
            text-align: justify;
−
  margin: 0;
+
        }
−
  padding: 0;
+
−
}
+
−
.igem_2017_content_wrapper {
+
−
padding-top: 0px;
+
−
padding-bottom: 0px;
+
−
width: 100%;
+
−
display: block;
+
−
position: relative;
+
−
background-color: #a8a6a6;
+
−
min-height: 100vh;
+
−
font-family: 'Lato', Tahoma, Geneva, sans-serif;
+
  
−
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
        .home {
−
box-shadow: 0 6px 12px rgba(0,0,0,.175);
+
−
}
+
−
#grad {
+
−
    background: -webkit-linear-gradient(#7782b0,#ffd4a6,#afb7d2,#d6cbe1,#edf2f4); /* Safari 5.1-6.0 */
+
−
    background: -o-linear-gradient(#7782b0,#ffd4a6,#afb7d2,#d6cbe1,#edf2f4); /* Opera 11.1-12.0 */
+
−
    background: -moz-linear-gradient(#7782b0,#ffd4a6,#afb7d2,#d6cbe1,#edf2f4); /* Firefox 3.6-15 */
+
−
    background: linear-gradient(#7782b0,#ffd4a6,#afb7d2,#d6cbe1,#edf2f4); /* Standard syntax */
+
−
}
+
−
 
+
−
.home {
+
 
             position: relative;
 
             position: relative;
−
    }
+
        }
  
−
    .home .bg {
+
        .home .bg {
−
             position: relative;
+
             position: fixed;
 
             display: block;
 
             display: block;
 
             height: 100vh;
 
             height: 100vh;
 +
            width: 100%;
 
             background-size: cover;
 
             background-size: cover;
 
             background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png);
 
             background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png);
 
             background-repeat: no-repeat;
 
             background-repeat: no-repeat;
 
             background-position: center;
 
             background-position: center;
−
    }
+
        }
 +
 
 +
        .home .fg {
 +
            height: 100vh;
 +
            visibility: hidden;
 +
        }
  
−
    .arrow {
+
        .overlay,
 +
        footer {
 +
            background-color: #f2f2f2;
 +
            opacity: 1;
 +
            position: relative;
 +
        }
 +
 
 +
        .igem_2017_content_wrapper {
 +
            padding-bottom: 0;
 +
        }
 +
 
 +
        .animated_svg {
 
             position: relative;
 
             position: relative;
−
            margin: -100px auto 0px auto;
 
 
             display: block;
 
             display: block;
 +
            width: 100%;
 +
            height: auto;
 +
            text-align: center;
 +
        }
 +
 +
        .animated_svg>* {
 +
            max-width: 800px;
 +
            display: inline-block;
 +
        }
 +
 +
        .arrow {
 +
            position: absolute;
 +
            bottom: 80px;
 +
            left: 50%;
 +
            margin-left: -40px;
 
             width: 80px;
 
             width: 80px;
 
             height: 80px;
 
             height: 80px;
  
 
             border-radius: 50%;
 
             border-radius: 50%;
−
    }
+
            text-align: center;
 +
        }
  
−
    .arrow:hover {
+
        .arrow:hover {
 
             background-color: rgba(255, 255, 255, 0.175);
 
             background-color: rgba(255, 255, 255, 0.175);
 
             cursor: pointer;
 
             cursor: pointer;
−
    }
+
        }
  
−
    .arrow img {
+
        .arrow img {
 
             margin: 15px;
 
             margin: 15px;
 
             width: 50px;
 
             width: 50px;
 
             height: 50px;
 
             height: 50px;
−
    }
+
         }
−
 
+
         </style>
−
body {
+
        <div class="home">
−
  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("http://hlnregiophotoprovider0.hln-cdn.be/photo/abdij-van-t-park/p1/img-ZWYzZDEwYWQvdWcvU0NFTkVSWV8yNTcwNi82NDB4NjQwL0ZU/25706.png?v=oYPssZS");
+
−
}
+
−
.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("http://hlnregiophotoprovider0.hln-cdn.be/photo/abdij-van-t-park/p1/img-ZWYzZDEwYWQvdWcvU0NFTkVSWV8yNTcwNi82NDB4NjQwL0ZU/25706.png?v=oYPssZS");
+
−
}
+
−
.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("http://hlnregiophotoprovider0.hln-cdn.be/photo/abdij-van-t-park/p1/img-ZWYzZDEwYWQvdWcvU0NFTkVSWV8yNTcwNi82NDB4NjQwL0ZU/25706.png?v=oYPssZS");
+
−
}
+
−
.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("http://hlnregiophotoprovider0.hln-cdn.be/photo/abdij-van-t-park/p1/img-ZWYzZDEwYWQvdWcvU0NFTkVSWV8yNTcwNi82NDB4NjQwL0ZU/25706.png?v=oYPssZS");
+
−
}
+
−
.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("http://hlnregiophotoprovider0.hln-cdn.be/photo/abdij-van-t-park/p1/img-ZWYzZDEwYWQvdWcvU0NFTkVSWV8yNTcwNi82NDB4NjQwL0ZU/25706.png?v=oYPssZS");
+
−
}
+
−
.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;
+
−
}
+
−
}
+
−
/* 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 data-0="transform:translate(0px, 0px);" data-800="transform:translate(0px, -480px);" class="bg">
 
             <div data-0="transform:translate(0px, 0px);" data-800="transform:translate(0px, -480px);" class="bg">
 +
            </div>
 +
            <div class="fg">
 
             </div>
 
             </div>
 
             <div id="scrolldown" class="arrow">
 
             <div id="scrolldown" class="arrow">
Line 599: Line 83:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
+
        <div id="overlay" class="overlay" style="border-top: 2px solid #c33">
−
<div class="cont s--inactive">
+
            <div class="container">
−
+
                <div class="animated_svg">
−
  <!-- cont inner start -->
+
                    <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">
−
  <div class="cont__inner">
+
                        <image height="3000px" width="1200px" xlink:href="https://static.igem.org/mediawiki/2017/7/71/KU_Leuven-homepage.svg"></image>
−
    <!-- el start -->
+
                        <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">
−
    <div class="el">
+
                        </path>
−
      <div class="el__overflow">
+
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/Model">
−
        <div class="el__inner">
+
                            <rect x="200" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
−
          <div class="el__bg"></div>
+
                        </a>
−
          <div class="el__preview-cont">
+
                        <a xlink:href="#game">
−
            <h2 class="el__heading"><font color="white">KU Leuven</font></h2>
+
                            <rect x="800" y="2100" display="inline" opacity="0" fill="#000000" width="200" height="200" />
−
          </div>
+
                        </a>
−
          <div class="el__content">
+
                        <a xlink:href="https://2017.igem.org/Team:KU_Leuven/HP/Gold_Integrated">
−
            <div class="el__text">HEKcite</div>
+
                            <rect x="200" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
−
            <div class="el__close-btn"></div>
+
                        </a>
−
          </div>
+
                        <a xlink:href="#education">
−
        </div>
+
                            <rect x="800" y="2500" display="inline" opacity="0" fill="#000000" width="200" height="200" />
−
      </div>
+
                        </a>
−
      <div class="el__index">
+
                    </svg>
−
        <div class="el__index-back">1</div>
+
                </div>
−
        <div class="el__index-front">
+
            </div>
−
          <div class="el__index-overlay" data-index="1">1</div>
+
        </div>
−
        </div>
+
    </div>
−
      </div>
+
    <script type="text/javascript">
−
    </div>
+
    $(function() {
−
    <!-- 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
 
         // initialize skrollr if the window width is large enough
 
         if ($(window).width() > 767) {
 
         if ($(window).width() > 767) {
Line 854: Line 127:
 
         $('html, body').animate({ scrollTop: n - 15 }, 1000);
 
         $('html, body').animate({ scrollTop: n - 15 }, 1000);
 
     });
 
     });
−
 
+
    </script>
−
</script>
+
 
</div>
 
</div>
 
</div>
 
</div>
Line 960: Line 233:
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
−
 
 
</html>
 
</html>

Revision as of 21:53, 20 September 2017