|
|
(319 intermediate revisions by the same user not shown) |
Line 1: |
Line 1: |
| | | |
− | <html>
| |
− | <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;
| |
− | }
| |
− |
| |
− | #forward, #reverse {
| |
− | border-radius:50%;
| |
− | }
| |
− |
| |
− | #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;
| |
− | }
| |
− |
| |
− | #table {
| |
− | display: table;
| |
− | margin: 0 auto;
| |
− | }
| |
− |
| |
− | #ulist {
| |
− | list-style-type: none;
| |
− | margin: 0px;
| |
− | padding: 0px;
| |
− | overflow: hidden;
| |
− | font-size:125%;
| |
− | background-color: #0071A7;
| |
− | color:white;
| |
− | height:80px;
| |
− | }
| |
− |
| |
− | #lists {
| |
− | float:right;
| |
− | padding:0px;
| |
− |
| |
− | }
| |
− |
| |
− | .dropbtn {
| |
− | display: inline-block;
| |
− | color: white;
| |
− | text-align: center;
| |
− | padding: 30px 0px 20px 0px;
| |
− | text-decoration: none;
| |
− | width:200px;;
| |
− | }
| |
− |
| |
− | a:visited { color:white; text-decoration:none;}
| |
− |
| |
− | .dropdown:hover .dropbtn {
| |
− | background-color: white;
| |
− | color: #0071A7;
| |
− | width:200px;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | li.dropdown {
| |
− | display: inline-block;
| |
− | }
| |
− |
| |
− | .dropdown-content {
| |
− | display: none;
| |
− | position: absolute;
| |
− | background-color: white;
| |
− | width: 200px;
| |
− | padding:0px 0px 20px 0px;
| |
− | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
− | z-index:100 !important;
| |
− | }
| |
− |
| |
− | .dropdown-content a {
| |
− | color: black;
| |
− | text-decoration: none;
| |
− | display: block;
| |
− | text-align: left;
| |
− | padding:10px 0px;
| |
− | }
| |
− |
| |
− | .dropdown-content a:hover {background-color: #f1f1f1}
| |
− |
| |
− | .dropdown:hover .dropdown-content {
| |
− | display: block;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− | </style>
| |
− |
| |
− | <body>
| |
− | <div style = "width:100%; background-color: #0071A7;">
| |
− | <div id = "table">
| |
− | <ul id = "ulist">
| |
− | <li id = "lists" class="dropdown">
| |
− | <a href="https://2016.igem.org/Team:BostonU/Team" class="dropbtn">Attributions</a>
| |
− | <div class="dropdown-content">
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Team">Team</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Team#advisors">Advisors</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Team#sponsors">Sponsors</a>
| |
− | </div>
| |
− | </li>
| |
− |
| |
− | <li id = "lists" class="dropdown">
| |
− | <a href="#" class="dropbtn">Judging</a>
| |
− | <div class="dropdown-content">
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Medal_Criteria">Medal Criteria</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Awards">Awards</a>
| |
− | </div>
| |
− | </li>
| |
− | <li id = "lists" class="dropdown">
| |
− | <a href="#" class="dropbtn">Human Practices</a>
| |
− | <div class="dropdown-content">
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/HP">HP Project</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Outreach">Outreach</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/HP/Tours">Industry Visits</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Collaborations">Collaborations</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/HP/Interlab">Interlab Study</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Safety">Safety</a>
| |
− | </div>
| |
− | </li>
| |
− | <li id = "lists" class="dropdown">
| |
− | <a href="#" class="dropbtn">Project</a>
| |
− | <div class="dropdown-content">
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Description">Description</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Parts">Parts</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Proof">Proof and Results</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Demonstrate">Demonstrate</a>
| |
− | <a style = "color:#0071A7; text-align:center;" href="https://2016.igem.org/Team:BostonU/Notebook">Notebook</a>
| |
− | </div>
| |
− | </li>
| |
− |
| |
− | <li id = "lists" class="dropdown">
| |
− | <a href="https://2016.igem.org/Team:BostonU" class="dropbtn" style = height:80px;>Home</a>
| |
− | </li>
| |
− | <div>
| |
− | </ul>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div style = "opacity:.2; width:7vw; height:7vw; background-color:white; text-align:center; font-size:300%; position:absolute; z-index:100; left: 93%; top:50vh;" id = "forward"><div style = "height:3vw"></div>></div>
| |
− | <div style = "opacity:.2; width:7vw; height:7vw; background-color:white; text-align:center; font-size:300%; position:absolute; top:50vh; z-index:100;" id = "reverse"><div style = "height:3vw"></div><</div>
| |
− |
| |
− | <div style = "width:100%; height:97vh; background-color:green;" id = "one" class = "show"></div>
| |
− | <div style = "width:100%; height:97vh; background-color:purple; display:none;" id = "two" class = "show"></div>
| |
− | <div style = "width:100%; height:97vh; background-color:black; display:none;" id = "three" class = "show"></div>
| |
− | <div style = "width:100%; height:97vh; background-color:red; 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>
| |