Difference between revisions of "Team:BostonU/HomeTwo"

Line 1: Line 1:
−
{{BostonU_we_tryin}}
 
 
<html>
 
<html>
−
<head>
 
 
<style>
 
<style>
  
Line 9: Line 7:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
#img-back-head {
+
#forward, #reverse {
−
padding:0;
+
border-radius:50%;
 
}
 
}
  
−
#block-two{
+
.show {
−
background-color:#0071A7;
+
transition:display, 2s;
−
color:white;
+
 
}
 
}
 +
</style>
  
−
#media {
+
<body>
−
background-color:white;
+
<center>
−
}
+
<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:80%; height:80vh; background-color:green;" id = "one" class = "show"></div>
 +
<div style = "width:80%; height:80vh; background-color:purple; display:none;" id = "two" class = "show"></div>
 +
<div style = "width:80%; height:80vh; background-color:black; display:none;" id = "three" class = "show"></div>
 +
<div style = "width:80%; height:80vh; background-color:red; display:none;" id = "four" class = "show"></div>
 +
</center>
  
−
#twit, #face, #snap, #email {
+
</body>
−
width:100px;
+
−
height:100px;
+
−
padding: 30px;
+
−
}
+
  
−
#twit:hover, #face:hover, #snap:hover, #email:hover {
+
<script type="text/javascript">
−
transform:scale(1.5)
+
$(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');}
 +
        });
  
−
.one {
+
  $("#reverse").click(function () {
−
  width:25%;
+
      n = n-1;
−
  -webkit-filter: grayscale(100%);
+
      if (n < 2) {
−
  -webkit-transition: .25s ease-in-out;
+
      $("#one").css('display', 'none');
−
  display:inline-block;
+
      $("#two").css('display', 'none');
−
  height:297px;
+
      $("#three").css('display', 'none');
−
  z-index:-1;
+
      $("#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');}
 +
        });
  
−
.one:hover {
+
   });
−
   -webkit-filter: grayscale(0%);
+
</script>
−
}
+
  
−
</style>
 
−
</head>
 
−
<body>
 
−
 
−
<div  id = "img-back-head">
 
−
<img src = "https://static.igem.org/mediawiki/2016/8/8d/T--BostonU--wikibanner.png" style = "width:50%; height:595px; float:left;">
 
−
<table>
 
−
<img class = "one" src = "https://static.igem.org/mediawiki/2016/d/d1/T--BostonU--Geminitwo.png">
 
−
<img class = "one" src = "https://static.igem.org/mediawiki/2016/d/d1/T--BostonU--Geminitwo.png">
 
−
<img class = "one" src = "https://static.igem.org/mediawiki/2016/d/d1/T--BostonU--Geminitwo.png">
 
−
<img class = "one" src = "https://static.igem.org/mediawiki/2016/d/d1/T--BostonU--Geminitwo.png">
 
−
</table>
 
−
</div>
 
−
 
−
</body>
 
 
</html>
 
</html>

Revision as of 15:34, 15 August 2016

>
<