|
|
Line 1: |
Line 1: |
− | <html>
| |
− | <head>
| |
| | | |
− | </head>
| |
− | <meta name="viewport" content="width=device-width, initial-scale=0.1">
| |
− | <style>
| |
− |
| |
− |
| |
− |
| |
− | body{
| |
− | background-color: #99CC99;
| |
− | }
| |
− |
| |
− | #content{
| |
− | background-color: #99CC99;
| |
− | }
| |
− |
| |
− | .fixed-center{
| |
− |
| |
− | width:600px;
| |
− | height:600px;
| |
− | position:fixed;
| |
− | top:40%;
| |
− | left:29%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-centerforsecondtext{
| |
− |
| |
− | width:1000px;
| |
− | height:600px;
| |
− | position:fixed;
| |
− | top:45%;
| |
− | left:13%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-centertree{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:10%;
| |
− | left:33%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-leftddtree{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:5%;
| |
− | left:5%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-centerlowfruit{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:85%;
| |
− | left:45%;
| |
− | }
| |
− |
| |
− | .fixed-left1{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:60%;
| |
− | left:15%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-left2{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:35%;
| |
− | left:7%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-right1{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:40%;
| |
− | left:65%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | .fixed-right2{
| |
− |
| |
− | width:400px;
| |
− | height:200px;
| |
− | position:fixed;
| |
− | top:75%;
| |
− | left:68%;
| |
− | color: #FFFFFF;
| |
− | }
| |
− |
| |
− | #test h1 {
| |
− | font-size: 350%;
| |
− | margin-top: 25px;
| |
− | font-size: 21px;
| |
− | text-align: center;
| |
− | color: white;
| |
− |
| |
− |
| |
− | -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
| |
− | -moz-animation: fadein 2s; /* Firefox < 16 */
| |
− | -ms-animation: fadein 2s; /* Internet Explorer */
| |
− | -o-animation: fadein 2s; /* Opera < 12.1 */
| |
− | animation: fadein 2s;
| |
− | }
| |
− |
| |
− | @keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Firefox < 16 */
| |
− | @-moz-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Safari, Chrome and Opera > 12.1 */
| |
− | @-webkit-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Internet Explorer */
| |
− | @-ms-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Opera < 12.1 */
| |
− | @-o-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− |
| |
− | #test h2 {
| |
− | font-size: 300%;
| |
− | margin-top: 25px;
| |
− | font-size: 21px;
| |
− | text-align: center;
| |
− | color: white ;
| |
− |
| |
− | -webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
| |
− | -moz-animation: fadein 4s; /* Firefox < 16 */
| |
− | -ms-animation: fadein 4s; /* Internet Explorer */
| |
− | -o-animation: fadein 4s; /* Opera < 12.1 */
| |
− | animation: fadein 4s;
| |
− | }
| |
− |
| |
− | @keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Firefox < 16 */
| |
− | @-moz-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Safari, Chrome and Opera > 12.1 */
| |
− | @-webkit-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Internet Explorer */
| |
− | @-ms-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Opera < 12.1 */
| |
− | @-o-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | #test h3 {
| |
− | font-size: 250%;
| |
− | margin-top: 25px;
| |
− | font-size: 21px;
| |
− | text-align: center;
| |
− | color: white;
| |
− |
| |
− |
| |
− | -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
| |
− | -moz-animation: fadein 2s; /* Firefox < 16 */
| |
− | -ms-animation: fadein 2s; /* Internet Explorer */
| |
− | -o-animation: fadein 2s; /* Opera < 12.1 */
| |
− | animation: fadein 2s;
| |
− | }
| |
− |
| |
− | @keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Firefox < 16 */
| |
− | @-moz-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Safari, Chrome and Opera > 12.1 */
| |
− | @-webkit-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Internet Explorer */
| |
− | @-ms-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− | /* Opera < 12.1 */
| |
− | @-o-keyframes fadein {
| |
− | from { opacity: 0; }
| |
− | to { opacity: 1; }
| |
− | }
| |
− |
| |
− |
| |
− | </style>
| |
− | <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
| |
− | <body>
| |
− |
| |
− |
| |
− | <div id="test" class="fixed-center">
| |
− | <a href="https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team"><h1 align="center" style="font-size:350%;height:60px;">Hong Kong HKUST</h1></a>
| |
− | <a href="https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team"><h2 align="center">Troika presents</h2></a>
| |
− | </div>
| |
− |
| |
− | <div id="test1" class="fixed-centerforsecondtext" >
| |
− | <a href="https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team"><h1 align="center" style="color:white;font-size:350%;height:125px;weight:600px;">The Genetic Tristable Switch</h1></a>
| |
− | </div>
| |
− |
| |
− | </div>
| |
− |
| |
− |
| |
− | <div id="test2" class="fixed-centertree" >
| |
− | <img src="https://static.igem.org/mediawiki/2016/8/88/Sourcetree.png" style="width:450px;height:600px;">
| |
− | </div>
| |
− |
| |
− | <div id="test3" class="fixed-left1" >
| |
− | <h3 style="color:white;font-size:250%;height:1600px;width:1600; word-spacing:5px;line-height: 150% ;">Derivation from synthetic networks like toggle switch and oscillators</h3>
| |
− | </div>
| |
− |
| |
− | <div id="test4" class="fixed-right1" >
| |
− | <h3 style="color:white;font-size:250%;height:1600px;width:1600;word-spacing:5px;line-height: 150% ;">A biological device that produces three distinct signals under specific induction</h3>
| |
− | </div>
| |
− |
| |
− | <div id="test5" class="fixed-right1" >
| |
− | <h3 style="color:white;font-size:250%;height:1600px;width:1600;word-spacing:5px;line-height: 150% ;">A biological device that produces three distinct signals under specific transient induction</h3>
| |
− | </div>
| |
− |
| |
− | <div id="test6" class="fixed-left2" >
| |
− | <h3 style="color:white;font-size:250%;height:1600px;width:1600;word-spacing:5px;line-height: 150% ;">With an application that helps treat free fungi and wounds</h3>
| |
− | </div>
| |
− |
| |
− | <div id="test7" class="fixed-right2" >
| |
− | <h3 style="color:white;font-size:250%;height:1600px;width:1600;word-spacing:5px;line-height: 130% ;">Please click on our fruit and enjoy a tour through our wiki </h3>
| |
− | </div>
| |
− |
| |
− | <div id="test8" class="fixed-leftddtree" >
| |
− | <img src="https://static.igem.org/mediawiki/2016/8/88/Sourcetree.png" style="width:500px;height:650px;">
| |
− | </div>
| |
− |
| |
− | <div id="test9" class="fixed-centerlowfruit" >
| |
− | <a href="https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team"><img src="https://static.igem.org/mediawiki/2016/2/2f/Sourcetreefruit.png" style="width:40px;height:50px;"></a>
| |
− | </div>
| |
− |
| |
− |
| |
− | <script>
| |
− | setTimeout(function(){window.location.href='https://2016.igem.org/Team:Hong_Kong_HKUST/The_Team'},500000);
| |
− | document.getElementById("firstHeading").style.display = "none";
| |
− | document.getElementById("top_title").style.display = "none";
| |
− | //document.getElementById("sideMenu").style.display = "none";
| |
− | setTimeout(function(){document.getElementById("sideMenu").style.display = "none";}, 25);
| |
− | document.getElementById("test1").style.color = "white";
| |
− |
| |
− | $( "#test1" ).hide();
| |
− | $( "#test3" ).hide();
| |
− | $( "#test4" ).hide();
| |
− | $( "#test2" ).hide();
| |
− | $( "#test5" ).hide();
| |
− | $( "#test6" ).hide();
| |
− | $( "#test7" ).hide();
| |
− | $( "#test8" ).hide();
| |
− | $( "#test9" ).hide();
| |
− |
| |
− | setTimeout(function(){$( "#test" ).fadeOut( 600 );},5000);;
| |
− | setTimeout(function(){$( "#test1" ).fadeIn( 600 );},6000);
| |
− | setTimeout(function(){$( "#test1" ).fadeOut( 600 );},11000);
| |
− | setTimeout(function(){$( "#test2" ).fadeIn( 600 );},12000);
| |
− | setTimeout(function(){$( "#test3" ).fadeIn( 600 );},13000);
| |
− | setTimeout(function(){$( "#test3" ).fadeOut( 600 );},16000);
| |
− | setTimeout(function(){$( "#test4" ).fadeIn( 600 );},17000);
| |
− | setTimeout(function(){$( "#test4" ).fadeOut( 600 );},20000);
| |
− | setTimeout(function(){$( "#test5" ).fadeIn( 600 );},21000);
| |
− | setTimeout(function(){$( "#test5" ).fadeOut( 600 );},24000);
| |
− | setTimeout(function(){$( "#test6" ).fadeIn( 600 );},25000);
| |
− | setTimeout(function(){$( "#test6" ).fadeOut( 600 );},28000);
| |
− | setTimeout(function(){$( "#test2" ).fadeOut( 600 );},28000);
| |
− | setTimeout(function(){$( "#test7" ).fadeIn( 600 );},29000);
| |
− | setTimeout(function(){$( "#test8" ).fadeIn( 600 );},29000);
| |
− | setTimeout(function(){$( "#test9" ).fadeIn( 600 );},29000);
| |
− |
| |
− | </script>
| |
− |
| |
− | </body>
| |
− |
| |
− | </html>
| |