|
|
| (54 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | {{Heidelberg/header}}
| |
| − | {{Heidelberg/navbar}}
| |
| − | <html>
| |
| − | <style>
| |
| − | #overall-wrapper {
| |
| − | min-width: 700px;
| |
| − | }
| |
| − | body {
| |
| − | background-color: #010101;
| |
| − | }
| |
| − | #textblock1 {
| |
| − | position: absolute;
| |
| − | top: 200px;
| |
| − | left: 0px;
| |
| − | width: 500px;
| |
| − | }
| |
| − | #textblock2 {
| |
| − | position: absolute;
| |
| − | top: 1050px;
| |
| − | left: 150px;
| |
| − | width: 500px;
| |
| − | }
| |
| − | #textblock3 {
| |
| − | position: absolute;
| |
| − | top: 950px;
| |
| − | right: 50px;
| |
| − | width: 500px;
| |
| − | height: 400px;
| |
| − |
| |
| − | }
| |
| − | #textblock4 {
| |
| − | position: absolute;
| |
| − | top: 1600px;
| |
| − | left: 100px;
| |
| − | width: 500px;
| |
| − | }
| |
| − | #textblock5 {
| |
| − | position: absolute;
| |
| − | top: 2150px;
| |
| − | right: 100px;
| |
| − | width: 600px;
| |
| − | }
| |
| − | #textblock6 {
| |
| − | position: absolute;
| |
| − | top: 2700px;
| |
| − | left: 0px;
| |
| − | width: 500px;
| |
| − | },
| |
| − | #textblock6 {
| |
| − | position: absolute;
| |
| − | top: 2800px;
| |
| − | left: 0px;
| |
| − | width: 400px;
| |
| − | }
| |
| − | #textblock7 {
| |
| − | position: absolute;
| |
| − | top: 3250px;
| |
| − | right: 100px;
| |
| − | width: 400px;
| |
| − | }
| |
| − | #textblock1 > p, #textblock3 > p, #textblock5 > p,#textblock2 > p, #textblock4 > p, #textblock6 > p, #textblock7 > p {
| |
| − | color: white !important;
| |
| − | text-align: center;
| |
| − | font-size: 28px !important;
| |
| − | font-weight: 300 !important;
| |
| − | }
| |
| | | | |
| − | #textblock1 > a {
| |
| − | color: #F8991D;
| |
| − | font-size: 50px;
| |
| − | }
| |
| − | #textblock1 > a:hover, #textblock2 > a:hover, #textblock3 > a:hover, #textblock4 > a:hover, #textblock5 > a:hover, #textblock6 > a:hover, #textblock7 > a:hover, #textblock8 > a:hover {
| |
| − | text-decoration: underline;
| |
| − | }
| |
| − | #textblock2 > a {
| |
| − | color: whitesmoke;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − |
| |
| − | #textblock4 > a {
| |
| − | color:#FEE000;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − | #textblock5 > a {
| |
| − | color:whitesmoke;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − | #textblock6 > a {
| |
| − | color:#9D1C20;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #textblock7 > a {
| |
| − | color: #6698be;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | }
| |
| − | #textblock8 > a {
| |
| − | color: #393939;
| |
| − | font-size: 50px;
| |
| − | }
| |
| − |
| |
| − | #toolbox-icon1 {
| |
| − | position: absolute;
| |
| − | top: 4460px;
| |
| − | left: 430px;
| |
| − | }
| |
| − |
| |
| − | #toolbox-row1 {
| |
| − | top: 0px;
| |
| − | }
| |
| − | #toolbox-row2 {
| |
| − | top: 200px;
| |
| − | }
| |
| − | #toolbox-row3 {
| |
| − | top: 400px;
| |
| − | }
| |
| − | wrapper {
| |
| − | padding-bottom: 0px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | video {
| |
| − | position: relative;
| |
| − |
| |
| − | width: 100%;
| |
| − | height: auto;
| |
| − | background: url('') no-repeat;
| |
| − |
| |
| − |
| |
| − | }
| |
| − | #Icon1 {
| |
| − | position: absolute;
| |
| − | width: 400px;
| |
| − | left: 4%;
| |
| − | }
| |
| − | #Icon2 {
| |
| − | position: absolute;
| |
| − | width: 400px;
| |
| − | left: 1%;
| |
| − |
| |
| − | }
| |
| − | #Icon3 {
| |
| − | position: absolute;
| |
| − | left: 6%;
| |
| − | width: 400px;
| |
| − | }
| |
| − | #Icon4 {
| |
| − | position: absolute;
| |
| − | right: 11%;
| |
| − | width: 300px;
| |
| − | }
| |
| − | #Icon5 {
| |
| − | position: absolute;
| |
| − | right: 8%;
| |
| − | width: 300px;
| |
| − | }
| |
| − | #Icon6 {
| |
| − | position: absolute;
| |
| − | right: 11%;
| |
| − | width: 300px;
| |
| − | }
| |
| − |
| |
| − | .icon-text {
| |
| − | position: relative;
| |
| − | top: 20px;
| |
| − | left: 130px;
| |
| − | }
| |
| − |
| |
| − | .icon-text-right {
| |
| − | position: relative;
| |
| − | top: 20px;
| |
| − | right: 0px;
| |
| − | width: 300px;
| |
| − | }
| |
| − |
| |
| − | #Icon1 > .icon-text > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #009E73 !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − | #Icon1:hover > .icon-text > p,#Icon2:hover > .icon-text > p,#Icon3:hover > .icon-text > p,#Icon4:hover > .icon-text-right > p,#Icon5:hover > .icon-text-right > p,#Icon6:hover > .icon-text-right > p {
| |
| − | visibility: visible !important;
| |
| − | text-align: center;
| |
| − | transition: color 1s ease;
| |
| − | color: white !important;
| |
| − | }
| |
| − | #Icon1 > .icon-text > p,#Icon2 > .icon-text > p,#Icon3 > .icon-text > p,#Icon4 > .icon-text-right > p,#Icon5 > .icon-text-right > p,#Icon6 > .icon-text-right > p {
| |
| − | visibility: hidden!important;
| |
| − | }
| |
| − | #Icon2 > .icon-text > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #F8991D !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #Icon3 > .icon-text > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #6698BE !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #Icon4 > .icon-text-right > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #FEE000 !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #Icon5 > .icon-text-right > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #009193 !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #Icon6 > .icon-text-right > h5 {
| |
| − | text-transform: uppercase;
| |
| − | color: #9D1C20 !important;
| |
| − | font-weight: 400 !important;
| |
| − | line-height: 40px !important;
| |
| − | }
| |
| − |
| |
| − | .phage-scroller {
| |
| − | width: 150px;
| |
| − | height: auto;
| |
| − | }
| |
| − |
| |
| − | #toolbox {
| |
| − | position: absolute;
| |
| − | top: 3800px;
| |
| − | min-height: 600px ;
| |
| − | width: 100%;
| |
| − | max-width: 1200px;
| |
| − | margin: 0 auto;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #toolbox-image {
| |
| − | position: absolute;
| |
| − | left: 380px;
| |
| − | width: 500px;
| |
| − | top: 10%
| |
| − | }
| |
| − |
| |
| − | .icon {
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | .toolbox-icon {
| |
| − | width: 120px;
| |
| − | height: 120px;
| |
| − | border-radius: 100%;
| |
| − | float: left;
| |
| − | background-color: white;
| |
| − | position: absolute;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .icon:hover > .toolbox-icon {
| |
| − |
| |
| − | transform: scale(1.2,1.2);
| |
| − | transition: all 1s ease-out;
| |
| − | }
| |
| − | @media (max-width: 1200px) {
| |
| − |
| |
| − | #wrapper {
| |
| − | padding-bottom: 600px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | #textblock1 {
| |
| − | position: absolute;
| |
| − | top: 100px;
| |
| − | left: 0px;
| |
| − | width: 400px;
| |
| − | }
| |
| − | #textblock1 > p, #textblock3 > p, #textblock5 > p {
| |
| − | color: white !important;
| |
| − |
| |
| − | text-align: center;
| |
| − | font-size: 24px !important;
| |
| − | font-weight: 300 !important;
| |
| − | }
| |
| − |
| |
| − | #textblock1 > a {
| |
| − | line-height: 50px;
| |
| − | font-size: 50px;
| |
| − | }
| |
| − |
| |
| − | #textblock2 {
| |
| − | position: absolute;
| |
| − | top: 800px;
| |
| − | left: 150px;
| |
| − | width: 500px;
| |
| − | }
| |
| − |
| |
| − | #textblock3 {
| |
| − | position: absolute;
| |
| − | top: 780px;
| |
| − | right: 0px;
| |
| − | width: 300px;
| |
| − | height: 220px;
| |
| − | }
| |
| − | #textblock4 {
| |
| − | position: absolute;
| |
| − | top: 1300px;
| |
| − | left: 0px;
| |
| − | width: 500px;
| |
| − | }
| |
| − | #textblock5 {
| |
| − | position: absolute;
| |
| − | top: 1770px;
| |
| − | right: 30px;
| |
| − | width: 500px;
| |
| − | }
| |
| − | #textblock6 {
| |
| − | position: absolute;
| |
| − | top: 2200px;
| |
| − | left: 0px;
| |
| − | width: 400px;
| |
| − | }
| |
| − |
| |
| − | #textblock7 {
| |
| − | position: absolute;
| |
| − | top: 2650px;
| |
| − | right: 50px;
| |
| − | }
| |
| − |
| |
| − | #toolbox {
| |
| − | position: absolute;
| |
| − | top: 3600px;
| |
| − |
| |
| − |
| |
| − | }
| |
| − | #toolbox-image {
| |
| − | position: relative;
| |
| − | left: 30px !important;
| |
| − | }
| |
| − | #Icon1 {
| |
| − | left: 100px;
| |
| − | }
| |
| − | #Icon2 {
| |
| − | left: 100px;
| |
| − | }
| |
| − | #Icon3 {
| |
| − | left: 100px;
| |
| − | }
| |
| − | #Icon4 {
| |
| − | right: 200px;
| |
| − | }
| |
| − | #Icon5 {
| |
| − | right: 200px;
| |
| − |
| |
| − | }
| |
| − | #Icon6 {
| |
| − | right: 200px;
| |
| − | }
| |
| − | }
| |
| − | @media (max-width: 960px) {
| |
| − |
| |
| − | #wrapper {
| |
| − | padding-bottom: 980px;
| |
| − |
| |
| − | }
| |
| − | .phage-scroller {
| |
| − | width: 100px;
| |
| − | height: auto;
| |
| − | }
| |
| − | #textblock1 {
| |
| − | position: absolute;
| |
| − | top: 20px;
| |
| − | left: 0px;
| |
| − | width: 280px;
| |
| − | }
| |
| − |
| |
| − | #textblock1 > p,#textblock2 > p, #textblock3 > p,#textblock4 > p, #textblock5 > p,#textblock6 > p, #textblock7 > p {
| |
| − | color: white !important;
| |
| − | text-align: center;
| |
| − | font-size: 20px !important;
| |
| − | font-weight: 300 !important;
| |
| − | }
| |
| − | #textblock1 > a,#textblock2 > a, #textblock4 > a, #textblock6 > a, #textblock7 > a {
| |
| − | font-size: 35px;
| |
| − | line-height: 30px;
| |
| − | }
| |
| − | #textblock5 > a {
| |
| − | font-size: 25px;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − |
| |
| − | #textblock2 {
| |
| − | position: absolute;
| |
| − | top: 520px;
| |
| − | left: 120px;
| |
| − | width: 300px;
| |
| − | }
| |
| − |
| |
| − | #textblock3 {
| |
| − | position: absolute;
| |
| − | top: 530px;
| |
| − | right: 0px;
| |
| − | width: 200px;
| |
| − | height: 120px;
| |
| − |
| |
| − | }
| |
| − | #textblock4 {
| |
| − | position: absolute;
| |
| − | top: 820px;
| |
| − | left: 0px;
| |
| − | width: 350px;
| |
| − | }
| |
| − | #textblock5 {
| |
| − | position: absolute;
| |
| − | top: 1110px;
| |
| − | right: 0px;
| |
| − | width: 360px;
| |
| − | }
| |
| − | #textblock6 {
| |
| − | position: absolute;
| |
| − | top: 1380px;
| |
| − | left: 0px;
| |
| − | width: 300px;
| |
| − | }
| |
| − | #textblock7 {
| |
| − | position: absolute;
| |
| − | top: 1680px;
| |
| − | right: 0px;
| |
| − | width: 300px;
| |
| − | }
| |
| − |
| |
| − | #toolbox {
| |
| − | top: 2300px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #toolbox-image {
| |
| − | position: relative;
| |
| − | left: 30px !important;
| |
| − | }
| |
| − | #Icon1 {
| |
| − | left: 100px;
| |
| − | top: 0px;
| |
| − | }
| |
| − | #Icon2 {
| |
| − | left: 100px;
| |
| − | top: 150px;
| |
| − | }
| |
| − | #Icon3 {
| |
| − | left: 100px;
| |
| − | top: 300px;
| |
| − | }
| |
| − | #Icon4 {
| |
| − | right: 200px;
| |
| − | top: 150px;
| |
| − | }
| |
| − | #Icon5 {
| |
| − | right: 200px;
| |
| − | top: 300px;
| |
| − | }
| |
| − | #Icon6 {
| |
| − | right: 200px;
| |
| − | top: 450px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − | <!-- cover -->
| |
| − | <div class="t-cover" style="height:100vh;" >
| |
| − |
| |
| − |
| |
| − | <div id="media-box">
| |
| − | <video id="landing-page-video" poster="" style="position:absolute" playsinline autoplay muted>
| |
| − | <source src="https://static.igem.org/mediawiki/2017/2/25/T--Heidelberg--2017_Wiki_Intro_iGEM2017.mp4" type="video/mp4">
| |
| − | </video>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0em -0.1em 3em 0.5em black; background-color: white">
| |
| − | <a href="#textblock1" style="position: absolute; bottom: 40px;right: 40px; background-color:transparent;">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/4/46/T--Heidelberg--2017_Phage_on_top.svg" class="phage-scroller"></a>
| |
| − | </div>
| |
| − | <div style="background: #393939; z-index: 5;" id="wrapper">
| |
| − |
| |
| − |
| |
| − | <div class="t-container" style="position: relative; padding-bottom: 50px; background-color: transparent;">
| |
| − | <div class="t-col t-col_12">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/4/4a/T--Heidelberg--2017_Red_Thread.svg">
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div id="textblock1">
| |
| − | <p>This year´s iGEM Team Heidelberg aims at harnessing the enormous power of</p>
| |
| − | <a href="#" id="accelerated_evolution"><strong>Accelerated evolution</strong></a>
| |
| − | <p>by using Phage-assisted continious evolution (PACE) and our newly created method called PREDCEL</p>
| |
| − | </div>
| |
| − | <div id="textblock2">
| |
| − | <p>Let us introduce you to the next generation of directed evolution...</p>
| |
| − | <a href="#"><strong>Come discover the diversity of Nature</strong></a>
| |
| − | </div>
| |
| − | <div id="textblock3">
| |
| − | <iframe width="100%" height="100%" src="https://www.youtube.com/embed/2fsSNhgj-Qs" frameborder="0" allowfullscreen></iframe>
| |
| − |
| |
| − | </div>
| |
| − | <div id="textblock4">
| |
| − | <p>As finding the right startersequence is quite difficult we used</p>
| |
| − | <a href="#" id="artificial_intelligence"><strong>Artificial Intelligence</strong></a>
| |
| − | <p>for protein classification & generation of entirely new functional sequences</p>
| |
| − |
| |
| − | </div>
| |
| − | <div id="textblock5">
| |
| − | <p>Right at the beginning our major ambition was it utilize PACE for</p>
| |
| − | <a href="#"><strong>Carbon-Silicon Bond Formation</strong></a>
| |
| − | <p> which could ultimately affect a lot of different aspects of our life and life in general</p>
| |
| − | </div>
| |
| − | <div id="textblock6">
| |
| − | <p>In order to make PREDCEL work, we also had a lot to model</p><br><p> Therefore check out our</p>
| |
| − | <a href="#"><strong>Interactive modeling</strong></a>
| |
| − | </div>
| |
| − | <div id="textblock7">
| |
| − | <p> As we affect the world & <br> the world affects us, we need</p>
| |
| − | <a href="#"><strong>Human Practice</strong></a>
| |
| − | </div>
| |
| − |
| |
| − | <div id="toolbox">
| |
| − |
| |
| − | <div style="position: relative;" id="toolbox-row1">
| |
| − | <div id="Icon1" class="icon"><img src="https://static.igem.org/mediawiki/2017/7/79/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Destructase.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 230px;"><h5>Destructase Screening</h5><p>Screen</p></div></div>
| |
| − | <div id="Icon4" class="icon"><img src="https://static.igem.org/mediawiki/2017/e/e9/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Carbonsilicones.svg" class="toolbox-icon" style="left: 250px;"><div class="icon-text-right"><h5>Organo silicones</h5><p>Produce</p></div></div>
| |
| − | </div>
| |
| − |
| |
| − | <div style="position: relative;" id="toolbox-row2">
| |
| − | <div id="Icon2" class="icon"><img src="https://static.igem.org/mediawiki/2017/c/cd/T--Heidelberg--2017_T--Heidelberg--2017_Icon_DNA_Editing.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 200px;"><h5>DNA Editing</h5><p>Edit</p></div></div>
| |
| − |
| |
| − | <div id="Icon5" class="icon"><img src="https://static.igem.org/mediawiki/2017/4/4b/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Protein_Interaction.svg" class="toolbox-icon" style="left: 270px;"><div class="icon-text-right"><h5>Protein Interaction</h5><p>Interact</p></div></div>
| |
| − | </div>
| |
| − |
| |
| − | <div style="position: relative;t" id="toolbox-row3">
| |
| − | <div id="Icon3" class="icon"><img src="https://static.igem.org/mediawiki/2017/3/38/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Opto_Genetics.svg" class="toolbox-icon" style="left: 0px;"><div class="icon-text" style="width: 200px;"><h5>Opto-Genetics</h5><p>Turn on</p></div></div>
| |
| − | <div id="Icon6" class="icon"><img src="https://static.igem.org/mediawiki/2017/9/9c/T--Heidelberg--2017_T--Heidelberg--2017_Icon_Product_Specificity.svg" class="toolbox-icon" style="left: 250px;"><div class="icon-text-right"><h5>Protein Specificity</h5><p>Specify</p></div></div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | </html>
| |
| − | {{Heidelberg/footer}}
| |
