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">
−
        p {
+
*, *:before, *:after {
−
            text-align: justify;
+
  box-sizing: border-box;
−
        }
+
  margin: 0;
 +
  padding: 0;
 +
}
  
−
        .home {
+
body {
−
            position: relative;
+
  background: #1f1f1f;
−
        }
+
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
 +
}
  
−
        .home .bg {
+
.cont {
−
            position: fixed;
+
  position: relative;
−
            display: block;
+
  overflow: hidden;
−
            height: 100vh;
+
  height: 100vh;
−
            width: 100%;
+
  padding: 80px 70px;
−
            background-size: cover;
+
}
−
            background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png);
+
.cont__inner {
−
            background-repeat: no-repeat;
+
  position: relative;
−
            background-position: center;
+
  height: 100%;
−
        }
+
}
 +
.cont__inner:hover .el__bg:after {
 +
  opacity: 1;
 +
}
  
−
        .home .fg {
+
.el {
−
            height: 100vh;
+
  position: absolute;
−
            visibility: hidden;
+
  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__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://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-3.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://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-4.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://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-5.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://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-6.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://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/onepgscr-7.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);
 +
}
  
−
        .overlay,
+
.icon-link {
−
        footer {
+
  position: absolute;
−
            background-color: #f2f2f2;
+
  left: 5px;
−
            opacity: 1;
+
  bottom: 5px;
−
            position: relative;
+
  width: 32px;
−
        }
+
}
 +
.icon-link img {
 +
  width: 100%;
 +
  vertical-align: top;
 +
}
 +
.icon-link--twitter {
 +
  left: auto;
 +
  right: 5px;
 +
}
  
−
        .igem_2017_content_wrapper {
+
</style>
−
            padding-bottom: 0;
+
<div class="cont s--inactive">
−
        }
+
  <!-- cont inner start -->
−
 
+
  <div class="cont__inner">
−
        .animated_svg {
+
    <!-- el start -->
−
            position: relative;
+
    <div class="el">
−
            display: block;
+
      <div class="el__overflow">
−
            width: 100%;
+
        <div class="el__inner">
−
            height: auto;
+
          <div class="el__bg"></div>
−
            text-align: center;
+
          <div class="el__preview-cont">
−
        }
+
             <h2 class="el__heading">Section 1</h2>
−
 
+
          </div>
−
        .animated_svg>* {
+
          <div class="el__content">
−
            max-width: 800px;
+
            <div class="el__text">Whatever</div>
−
            display: inline-block;
+
            <div class="el__close-btn"></div>
−
        }
+
          </div>
−
 
+
−
        .arrow {
+
−
            position: absolute;
+
−
            bottom: 80px;
+
−
            left: 50%;
+
−
            margin-left: -40px;
+
−
            width: 80px;
+
−
            height: 80px;
+
−
 
+
−
            border-radius: 50%;
+
−
            text-align: center;
+
−
        }
+
−
 
+
−
        .arrow:hover {
+
−
            background-color: rgba(255, 255, 255, 0.175);
+
−
            cursor: pointer;
+
−
        }
+
−
 
+
−
        .arrow img {
+
−
            margin: 15px;
+
−
            width: 50px;
+
−
            height: 50px;
+
−
        }
+
−
        </style>
+
−
        <div class="home">
+
−
            <div data-0="transform:translate(0px, 0px);" data-800="transform:translate(0px, -480px);" class="bg">
+
−
            </div>
+
−
            <div class="fg">
+
−
             </div>
+
−
            <div id="scrolldown" class="arrow">
+
−
                <img src="https://static.igem.org/mediawiki/2017/0/0f/KU_Leuven-scroll_arrow.png">
+
−
            </div>
+
 
         </div>
 
         </div>
−
        <div id="overlay" class="overlay" style="border-top: 2px solid #c33">
+
      </div>
−
            <div class="container">
+
      <div class="el__index">
−
                <div class="animated_svg">
+
        <div class="el__index-back">1</div>
−
                    <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="el__index-front">
−
                        <image height="3000px" width="1200px" xlink:href="https://static.igem.org/mediawiki/2017/7/71/KU_Leuven-homepage.svg"></image>
+
          <div class="el__index-overlay" data-index="1">1</div>
−
                        <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>
+
−
                </div>
+
−
            </div>
+
 
         </div>
 
         </div>
 +
      </div>
 
     </div>
 
     </div>
−
     <script type="text/javascript">
+
     <!-- el end -->
−
    $(function() {
+
    <!-- el start -->
−
        // initialize skrollr if the window width is large enough
+
    <div class="el">
−
        if ($(window).width() > 767) {
+
      <div class="el__overflow">
−
            skrollr.init();
+
        <div class="el__inner">
−
        }
+
          <div class="el__bg"></div>
−
 
+
          <div class="el__preview-cont">
−
        // disable skrollr if the window is resized below 768px wide
+
            <h2 class="el__heading">Section 2</h2>
−
        $(window).on('resize', function() {
+
          </div>
−
            if ($(window).width() <= 767) {
+
          <div class="el__content">
−
                skrollr.init().destroy(); // skrollr.init() returns the singleton created above
+
            <div class="el__text">Whatever</div>
−
            }
+
            <div class="el__close-btn"></div>
−
        });
+
          </div>
−
    });
+
−
 
+
−
    $('#scrolldown').click(function(event) {
+
−
        event.preventDefault();
+
−
        var n = $('.home .fg').height();
+
−
        $('html, body').animate({ scrollTop: n - 15 }, 1000);
+
−
    });
+
−
    </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/d/d5/Logo_Lcie-01.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>
−
        <div class="container-fluid social" style="padding: 0px;">
+
      </div>
−
            <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="el__index">
−
            <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="el__index-back">2</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="el__index-front">
−
            <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 class="el__index-overlay" data-index="2">2</div>
 
         </div>
 
         </div>
−
     </footer>
+
      </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">Section 3</h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Whatever</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">Section 4</h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Whatever</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">Section 5</h2>
 +
          </div>
 +
          <div class="el__content">
 +
            <div class="el__text">Whatever</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>
 +
  <!-- cont inner end -->
 +
</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');
 +
  });
 +
});
 +
 
 +
</script>
 
</html>
 
</html>
 +
{{KU_Leuven_footer}}

Revision as of 23:39, 13 September 2017

Section 1

Whatever
1
1

Section 2

Whatever
2
2

Section 3

Whatever
3
3

Section 4

Whatever
4
4

Section 5

Whatever
5
5