Nicolebennis (Talk | contribs) |
Schmidtchen (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | {{TUDelft}} | + | {{:Team:TUDelft/Head}} |
− | + | ||
<html> | <html> | ||
− | <head> | + | <head> |
− | < | + | <style> |
− | |||
+ | #showcase{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2018/8/84/T--TUDelft--runner.jpg'); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-repeat: no-repeat; | ||
+ | height:100vh; | ||
+ | display:flex; | ||
+ | flex-direction:column; | ||
+ | justify-content:center; | ||
+ | align-items:center; | ||
+ | text-align:center; | ||
+ | margin-top: -100px; | ||
+ | position: relative; | ||
+ | } | ||
− | |||
+ | .text-block2 { | ||
+ | position: absolute; | ||
+ | top: 12%; | ||
+ | left: 1%; | ||
+ | color: grey; | ||
+ | width: 200px; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | |||
+ | #fadein5 { | ||
+ | position: absolute; | ||
+ | top: 16%; | ||
+ | right: 1%; | ||
+ | width: 220px; | ||
+ | z-index: 500;} | ||
+ | |||
+ | #fadein5 img{ | ||
+ | max-height: 80px !important; | ||
+ | } | ||
+ | |||
+ | .tulogo { | ||
+ | max-height: 150px !important; | ||
+ | width: auto; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .overlaycontainer { | ||
+ | z-index: 400 !important; | ||
+ | } | ||
+ | |||
+ | #fadein1, #fadein2, #fadein3, #fadein4, #fadein5 { | ||
+ | opacity: 0; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | font-weight: 90; | ||
+ | } | ||
− | + | #fadein1, #fadein2, #fadein3 { | |
− | + | font-size: 90px !important; | |
− | + | line-height: 90px; | |
− | < | + | } |
− | + | ||
− | + | #fadein4 { | |
− | </ | + | font-size: 50px !important; |
− | < | + | line-height: 50px; |
+ | } | ||
+ | |||
+ | .rdmrbttn .britney, .rdmrbttn2 .britney, rdmrbttn3 .britney{ | ||
+ | font-size:18px; | ||
+ | text-decoration:none; | ||
+ | color:#fff; | ||
+ | background: #0092CB; | ||
+ | border:#FFF 1px solid; | ||
+ | padding:10px 20px; | ||
+ | margin-top:20px; | ||
+ | } | ||
+ | |||
+ | .rdmrbttn .britney:hover, .rdmrbttn3 .britney{ | ||
+ | background: rgba(0,0,0,0.4); | ||
+ | color:#fff; | ||
+ | } | ||
+ | |||
+ | .rdmrbttn { | ||
+ | position: absolute; | ||
+ | top: 90%; | ||
+ | left: 45%; | ||
+ | } | ||
+ | /*.rdmrbttn:hover, .rdmrbttn3:hover { | ||
+ | -webkit-transform: scale(1.2); | ||
+ | -ms-transform: scale(1.2); | ||
+ | transform: scale(1.2); | ||
+ | } */ | ||
+ | |||
+ | div.pree { | ||
+ | border-color: red; | ||
+ | border-radius: 50px; | ||
+ | background-color: transparent; | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | .caption h3 { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .thumbnail { | ||
+ | background-color: transparent; | ||
+ | max-height: 600px; | ||
+ | overflow: auto; | ||
+ | border-color: aliceblue; | ||
+ | border-radius: 0px; | ||
+ | } | ||
+ | |||
+ | .thumbnail img { | ||
+ | opacity: 0.7; | ||
+ | } | ||
+ | .thumbnail:hover { | ||
+ | background-color: rgba(240, 248, 255, 0.3); | ||
+ | -webkit-transform: scale(1.05); | ||
+ | -ms-transform: scale(1.05); | ||
+ | transform: scale(1.05); | ||
+ | } | ||
+ | .thumbnail:hover div .boxhd { | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | .thumbnail:hover img { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | /*SMALL SCREENS */ | ||
+ | #showcase2{ | ||
+ | background-image:url('https://static.igem.org/mediawiki/2018/8/84/T--TUDelft--runner.jpg'); | ||
+ | background-size:cover; | ||
+ | background-position:center; | ||
+ | background-repeat: no-repeat; | ||
+ | height:100vh; | ||
+ | display:flex; | ||
+ | flex-direction:column; | ||
+ | justify-content:center; | ||
+ | align-items:center; | ||
+ | text-align:center; | ||
+ | margin-top: -100px; | ||
+ | margin-left: 15px; | ||
+ | margin-right: 15px; | ||
+ | position: relative; | ||
+ | } | ||
+ | .tulogosmall { | ||
+ | position: absolute; | ||
+ | top: 18%; | ||
+ | left: 1%; | ||
+ | color: grey; | ||
+ | max-height: 90px; | ||
+ | width: auto; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | .adopesmall { | ||
+ | position: absolute; | ||
+ | top: 20%; | ||
+ | right: 1%; | ||
+ | width: 150; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | .tulogo2 { | ||
+ | max-height: 90px !important; | ||
+ | width: auto; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .adopelogo2 { | ||
+ | max-height: 70px !important; | ||
+ | width: auto; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | .rdmrbttn2 { | ||
+ | position: absolute; | ||
+ | top: 70%; | ||
+ | left: 45%; | ||
+ | } | ||
+ | #moremore { | ||
+ | position: relative; | ||
+ | top: 90%; | ||
+ | left: 33%; | ||
+ | } | ||
+ | #jointherace { | ||
+ | font-size: 25px !important; | ||
+ | line-height: 25px; | ||
+ | text-align: center; | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | font-weight: 100; | ||
+ | } | ||
+ | p.introp { | ||
+ | font-size: 16px !important; | ||
+ | } | ||
+ | |||
+ | div.caption h3.adpbl { | ||
+ | font-size: 20px; | ||
+ | } | ||
+ | em { | ||
+ | font-style: normal!important; | ||
+ | letter-spacing: 0.1em; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <!-- WRITE YOUR STUFF RIGHT HERE --> | ||
+ | <header id="showcase" class="hidden-xs"> | ||
+ | <div class="overlaycontainer " class="text-center"> | ||
+ | <div id="fadein1">On your marks.</div> | ||
+ | <div id="fadein2">Get set.</div> | ||
+ | <div id="fadein3">Detect.</div> | ||
+ | <div id="fadein4">Join the race against gene doping.</div> | ||
+ | |||
+ | <div class="text-block2"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo"></div> | ||
+ | <div id="fadein5"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png"></div> | ||
+ | |||
+ | <div class="rdmrbttn"><a href="#getstarted" class="britney">Read More <i class="fas fa-angle-double-down"></i></a></div> | ||
</div> | </div> | ||
+ | </header> | ||
+ | |||
+ | <header id="showcase2" class="hidden-lg hidden-md hidden-sm"> | ||
+ | <div class="overlaycontainer " class="text-center"> | ||
+ | <div id="jointherace"><br>Join the race against gene doping.</div> | ||
+ | |||
+ | <div class="tulogosmall"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/ca/T--TUDelft--2018_TUDelft.png" class="tulogo2 img-responsive"></div> | ||
+ | <!--<div class="adopesmall"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/c/c6/T--TUDelft--2018_adope_logo_black.png" class="adopelogo2 img-responsive" ></div>--> | ||
+ | |||
+ | <div class="rdmrbttn2"><a href="#getstarted" class="britney">Read More <i class="fas fa-angle-double-down"></i></a></div> | ||
</div> | </div> | ||
+ | </header> | ||
+ | |||
+ | <br> | ||
+ | <div id="getstarted" class="spcmkr"></div> | ||
+ | |||
+ | <div class="container" > | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div> | ||
+ | <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12"> | ||
+ | <center><h3 style="text-align:center;">Introducing ADOPE<br><em>Advanced Detection Of Perfomance Enhancement</em></h3> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/b/b1/T--TUDelft--2018_scanning.gif" class="img-fluid" style="margin:40px"> | ||
+ | <br><h3>We are fighting for honest athletes and clean sports by detecting gene doping <br> a rising threat to fair sport.</h3></center> | ||
+ | <br> | ||
− | <div | + | <div class="rdmrbttn" id="moremore"><a href="#ourparts" class="britney">Learn more about ADOPE <i class="fas fa-angle-double-down"></i></a></div> |
− | < | + | |
− | < | + | |
− | + | ||
− | < | + | </div> |
+ | <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div> | ||
+ | </div> | ||
− | < | + | <div class="row"> |
− | < | + | <div id="ourparts" class="spcmkr"></div> |
− | </ | + | <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div> |
− | + | ||
+ | <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12"> | ||
+ | <br><br><br> | ||
+ | <h3 style="text-align:center;">Learn more about each unique part of our project.</h3> | ||
+ | <br> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="col-lg-2 col-md-2 col-sm-1 xs-hidden"></div> | ||
</div> | </div> | ||
− | </div> | + | |
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-sm-4 col-md-4 col-xs-12"> | ||
+ | <div class="thumbnail" > | ||
+ | <img src="https://static.igem.org/mediawiki/2018/2/21/T--TUDelft--2018_GifFusion.gif" alt="Fusion protein"> | ||
+ | <div class="caption"> | ||
+ | <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Description" class="adpbl">How-to: Detect gene doping</a></h3> | ||
+ | <p class="introp">With our newly designed <b>CRISPR-Cas based fusion protein</b>, we developed a next-generation <b>targeted sequencing platform</b>. Find out all the measures we took to bring our project to perfection.<br> </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-4 col-md-4 col-xs-12"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/d8/T--TUDelft--modelcut.png" alt="..."> | ||
+ | <div class="caption"> | ||
+ | <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Model" class="adpbl">iGEM TU Delft's next top model</a></h3> | ||
+ | <p class="introp">Our wetlab and <b>drylab</b> are working side by side when it comes to gene doping detection. Find out how both parts influenced each other and how we <b>simulated</b> the entire doping process within the human body. </p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="col-sm-4 col-md-4 col-xs-12"> | ||
+ | <div class="thumbnail"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/1/10/T--TUDelft--Moniekuncut.jpg" alt="..."> | ||
+ | <div class="caption"> | ||
+ | <h3 class="adpbl"><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" class="adpbl">Everything you need to know about our Human Practices</a></h3> | ||
+ | <p class="introp">During our iGEM season, we actively involved <b>stakeholders</b> and the public with our project. Read more about the interesting people we met and how each of them <b>contributed</b>.<br></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- BETWEEN THESE TWO COMMENTS --> | ||
+ | |||
+ | <!-- <div class="container"> | ||
+ | <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div> | ||
+ | <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10"> | ||
+ | |||
+ | <br> | ||
+ | |||
+ | <center><div clas="container" style="position:relative;"><img src="https://static.igem.org/mediawiki/2018/a/a1/T--TUDelft--2018_col_v2.png" alt="Circle of Life" usemap="#CircleOfLife" id="CircleLife" style="height:75%;length:auto;"><a href="https://2018.igem.org/Team:TUDelft/Description" title="Project" style="position: absolute; left: 30.83%; top: 4%; width: 38.63%; height: 18.65%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Description" title="Project" style="position: absolute; left: 42.82%; top: 22.65%; width: 14.37%; height: 17.6%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Model" title="Modeling" style="position: absolute; left: 11.23%; top: 26.93%; width: 18.93%; height: 27.02%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Model" title="Model" style="position: absolute; left: 30.35%; top: 36.25%; width: 9.51%; height: 16.65%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Experiments" title="Wetlab" style="position: absolute; left: 59.85%; top: 35.97%; width: 33.59%; height: 15.79%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Experiments" title="Wetlab" style="position: absolute; left: 70.79%; top: 25.31%; width: 20.93%; height: 10.28%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Parts" title="Parts" style="position: absolute; left: 32.73%; top: 58.04%; width: 16.94%; height: 31.97%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Parts" title="Parts" style="position: absolute; left: 19.41%; top: 60.89%; width: 12.37%; height: 23.12%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 49.95%; top: 56.04%; width: 18.55%; height: 37.68%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 69.36%; top: 64.13%; width: 13.32%; height: 21.41%; z-index: 2;"></a><a href="https://2018.igem.org/Team:TUDelft/Human_Practices" title="HP" style="position: absolute; left: 84.21%; top: 90.2%; width: 10.85%; height: 4.28%; z-index: 2;"></a></div> | ||
+ | |||
+ | </center> | ||
+ | </div> | ||
+ | <div class="hidden-xs hidden-sm col-md-1 col-lg-1"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> --> | ||
+ | |||
+ | |||
− | + | ||
− | + | ||
− | + | ||
− | + | <script> | |
− | + | $("#fadein1").delay(1100).animate({"opacity":"1"},700); | |
− | + | $("#fadein1").delay(400).animate({"opacity":"0"},700); | |
+ | $("#fadein2").delay(2700).animate({"opacity":"1"},700); | ||
+ | $("#fadein2").delay(400).animate({"opacity":"0"},700); | ||
+ | $("#fadein3").delay(4300).animate({"opacity":"1"},700); | ||
+ | $("#fadein3").delay(400).animate({"opacity":"0"},700); | ||
+ | $("#fadein4").delay(7000).animate({"opacity":"1"},700); | ||
+ | $("#fadein5").delay(7500).animate({"opacity":"1"},700); | ||
+ | </script> | ||
+ | <script> | ||
+ | AOS.init(); | ||
+ | </script> | ||
</body> | </body> | ||
− | |||
</html> | </html> | ||
+ | |||
+ | {{:Team:TUDelft/Footer2}} |
Revision as of 00:12, 18 October 2018
Introducing ADOPE
Advanced Detection Of Perfomance Enhancement
We are fighting for honest athletes and clean sports by detecting gene doping
a rising threat to fair sport.
Learn more about each unique part of our project.