Schmidtchen (Talk | contribs) |
|||
(15 intermediate revisions by 3 users not shown) | |||
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 { | ||
+ | background-color: transparent; | ||
+ | padding: 20px; | ||
+ | color: rgba(0,146,203,1); | ||
+ | } | ||
+ | |||
+ | .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 Performance 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> | ||
+ | <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 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 class="row"> | ||
+ | <div class="spcmkr"></div> | ||
+ | <br> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-1 hidden-xs"> | ||
+ | </div> | ||
+ | <div class="col-lg-8 col-md-8 col-sm-10 col-xs-12"> | ||
+ | <center><h3>How to find us:<br></h3></center> | ||
+ | <br> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-1 hidden-xs"> | ||
+ | </div> | ||
+ | <br> | ||
+ | <div class="spcmkr"></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="row"> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"><a href="https://www.facebook.com/TUDelft.iGEM2018/" target="_blank" class="adpbl"><i class="fab fa-facebook fa-4x"></i></a><br></div> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"><a href="https://www.linkedin.com/company/igem-tu-delft/" target="_blank" class="adpbl"><i class="fab fa-linkedin fa-4x"></i></a><br></div> | ||
+ | </div> | ||
+ | |||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"><a href="https://www.instagram.com/igemtudelft/?hl=en" target="_blank" class="adpbl"><i class="fab fa-instagram fa-4x"></i></a><br></div> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"><a href="https://twitter.com/TUDelft_iGEM" target="_blank" class="adpbl"><i class="fab fa-twitter-square fa-4x"></i></a><br></div> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"><a href="mailto:tudelft.igem@gmail.com" class="adpbl"><i class="far fa-envelope-open fa-4x"></i></a><br></div> | ||
+ | </div> | ||
+ | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-4"> | ||
+ | <div class="pree text-center" data-aos="fade-up"> | ||
+ | <p data-toggle="tooltip" title="+31 (0)15 278 5394" class="adpbl" style="font-size:10px;"><center><i class="fas fa-phone-square fa-2x"></i><br><i>+31152785394</i></center></p> | ||
+ | <br></div> | ||
+ | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
+ | <!-- BETWEEN THESE TWO COMMENTS --> | ||
+ | |||
+ | |||
− | + | ||
− | + | ||
− | + | ||
+ | |||
− | |||
− | |||
− | |||
− | |||
+ | <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> | ||
</html> | </html> | ||
+ | |||
+ | {{:Team:TUDelft/Footer2}} |
Latest revision as of 13:37, 28 November 2018
Introducing ADOPE
Advanced Detection Of Performance 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.
How to find us: