|
|
| (330 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| | | | |
| − | #sideMenu, #top_title {display:none;}
| |
| − | body {background-color:white; }
| |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − |
| |
| − |
| |
| − | .one {
| |
| − | width:25%;
| |
| − | height:250px;
| |
| − | display:inline-block;
| |
| − | background-image: url("https://static.igem.org/mediawiki/2016/f/f4/T--BostonU--DNA.jpg");
| |
| − | background-size:100%;
| |
| − | opacity:.3;
| |
| − | transition:opacity, 1s;
| |
| − | }
| |
| − |
| |
| − | .one:hover {
| |
| − | opacity:1;
| |
| − | }
| |
| − |
| |
| − | #main {
| |
| − | background-image:url("https://static.igem.org/mediawiki/2016/3/35/T--BostonU--Geminisymbol.jpg");
| |
| − | background-repeat:no-repeat;
| |
| − | background-size:cover;
| |
| − | }
| |
| − |
| |
| − | .show {
| |
| − | transition:display, 2s;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div style = "width:10%; height:95vh; background-color:red; text-align:center; font-size:300%; position:absolute; z-index:100; left: 90%;" id = "forward"><br>></div>
| |
| − | <div style = "width:10%; height:95vh; background-color:blue; text-align:center; font-size:300%; position:absolute; z-index:100;" id = "reverse"><br><</div>
| |
| − |
| |
| − | <div style = "width:100%; height:95vh; background-color:green;" id = "one" class = "show"></div>
| |
| − | <div style = "width:100%; height:95vh; background-color:purple; display:none;" id = "two" class = "show"></div>
| |
| − | <div style = "width:100%; height:95vh; background-color:black; display:none;" id = "three" class = "show"></div>
| |
| − | <div style = "width:100%; height:95vh; background-color:yellow; display:none;" id = "four" class = "show"></div>
| |
| − |
| |
| − | <div style = "background-color:black;"><div class = 'one'><p style = "opacity:1.5; text-align:center; color:white; font-size:200%;">Project</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Other</p></div>
| |
| − | <div style = "background-color:white;">
| |
| − | <br><br><br><br><br><br><br>
| |
| − | <img src = "https://2016.igem.org/File:T--BostonU--sponge.gif">
| |
| − | </div>
| |
| − | </body>
| |
| − |
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(
| |
| − | function(){
| |
| − | var n = 2;
| |
| − | $("#forward").click(function () {
| |
| − | n = n+1;
| |
| − | if (n > 5) {
| |
| − | $("#one").css('display', 'block');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none');
| |
| − | n = 2;}
| |
| − | else if (n == 2) {
| |
| − | $("#one").css('display', 'block');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none'); }
| |
| − | else if (n==3) {
| |
| − | $('#two').css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else if (n==4) {
| |
| − | $("#three").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else if (n==5) {
| |
| − | $("#four").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');}
| |
| − | });
| |
| − |
| |
| − | $("#reverse").click(function () {
| |
| − | n = n-1;
| |
| − | if (n < 2) {
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'block');
| |
| − | n = 5;}
| |
| − | if (n == 2) {
| |
| − | $("#one").css('display', 'block');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none'); }
| |
| − | else if (n==3) {
| |
| − | $("#two").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#three").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else if (n==4) {
| |
| − | $("#three").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#four").css('display', 'none');}
| |
| − | else {
| |
| − | $("#four").css('display', 'block');
| |
| − | $("#one").css('display', 'none');
| |
| − | $("#two").css('display', 'none');
| |
| − | $("#three").css('display', 'none');}
| |
| − | });
| |
| − |
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
