|
|
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);
| + | position: relative; |
− | }
| + | } |
− | #grad {
| + | |
− | background: -webkit-linear-gradient(#62629d,#afb7d2,#d6cbe1,#edf2f4); /* Safari 5.1-6.0 */
| + | |
− | background: -o-linear-gradient(#62629d,#afb7d2,#d6cbe1,#edf2f4); /* Opera 11.1-12.0 */
| + | |
− | background: -moz-linear-gradient(#62629d,#afb7d2,#d6cbe1,#edf2f4); /* Firefox 3.6-15 */
| + | |
− | background: linear-gradient(#62629d,#afb7d2,#d6cbe1,#edf2f4); /* Standard syntax */
| + | |
− | }
| + | |
| | | |
− | body {
| + | .home .bg { |
− | background: #262525;
| + | position: fixed; |
− | font-family: 'Open Sans', Helvetica, Arial, sans-serif;
| + | display: block; |
− | }
| + | height: 100vh; |
| + | width: 100%; |
| + | background-size: cover; |
| + | background-image: url(https://static.igem.org/mediawiki/2017/e/e5/KU_Leuven-home_bg.png); |
| + | background-repeat: no-repeat; |
| + | background-position: center; |
| + | } |
| | | |
− | .cont {
| + | .home .fg { |
− | position: relative;
| + | height: 100vh; |
− | overflow: hidden;
| + | visibility: hidden; |
− | height: 100vh;
| + | } |
− | padding: 80px 70px;
| + | |
− | }
| + | |
− | .cont__inner {
| + | |
− | position: relative;
| + | |
− | height: 100%;
| + | |
− | }
| + | |
− | .cont__inner:hover .el__bg:after {
| + | |
− | opacity: 1;
| + | |
− | }
| + | |
| | | |
− | .el {
| + | .overlay, |
− | position: absolute;
| + | footer { |
− | left: 0;
| + | background-color: #f2f2f2; |
− | top: 0;
| + | opacity: 1; |
− | width: 19.2%;
| + | position: relative; |
− | 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>* {
| + | .igem_2017_content_wrapper { |
− | max-width: 800px;
| + | padding-bottom: 0; |
− | display: inline-block; | + | } |
− | }
| + | |
− |
| + | |
− | </style>
| + | |
− | <div class="igem_2017_content_wrapper">
| + | |
| | | |
− | <div id="grad">
| + | .animated_svg { |
− |
| + | position: relative; |
− | <div class="cont s--inactive">
| + | display: block; |
− |
| + | width: 100%; |
− | <!-- cont inner start -->
| + | height: auto; |
− | <div class="cont__inner">
| + | text-align: center; |
− | <!-- 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="1000" Height="900" 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() {
| + | .animated_svg>* { |
− | $cont.classList.remove('s--inactive');
| + | max-width: 800px; |
− | }, 200);
| + | display: inline-block; |
| + | } |
| | | |
− | $elsArr.forEach(function($el) {
| + | .arrow { |
− | $el.addEventListener('click', function() {
| + | position: absolute; |
− | if (this.classList.contains('s--active')) return;
| + | bottom: 80px; |
− | $cont.classList.add('s--el-active');
| + | left: 50%; |
− | this.classList.add('s--active');
| + | margin-left: -40px; |
− | });
| + | width: 80px; |
− | });
| + | height: 80px; |
| | | |
− | $closeBtnsArr.forEach(function($btn) {
| + | border-radius: 50%; |
− | $btn.addEventListener('click', function(e) {
| + | text-align: center; |
− | e.stopPropagation();
| + | } |
− | $cont.classList.remove('s--el-active');
| + | |
− | document.querySelector('.el.s--active').classList.remove('s--active');
| + | |
− | });
| + | |
− | });
| + | |
| | | |
| + | .arrow:hover { |
| + | background-color: rgba(255, 255, 255, 0.175); |
| + | cursor: pointer; |
| + | } |
| | | |
− | $(function() { | + | .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 id="overlay" class="overlay" style="border-top: 2px solid #c33"> |
| + | <div class="container"> |
| + | <div class="animated_svg"> |
| + | <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> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | <script type="text/javascript"> |
| + | $(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 786: |
Line 127: |
| $('html, body').animate({ scrollTop: n - 15 }, 1000); | | $('html, body').animate({ scrollTop: n - 15 }, 1000); |
| }); | | }); |
− | | + | </script> |
− | </script> | + | |
| </div> | | </div> |
| </div> | | </div> |