Difference between revisions of "Team:BostonU/HomeOne"

(Blanked the page)
 
(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>
 

Latest revision as of 21:50, 19 October 2016