Difference between revisions of "Team:BostonU/HomeOne"

Line 9: Line 9:
  
  
−
.one {
+
#forward, #reverse {
−
width:25%;
+
border-radius:50%;
−
height:14.5vw;
+
−
display:inline-block;
+
−
background-image: url("https://static.igem.org/mediawiki/2016/f/f4/T--BostonU--DNA.jpg");
+
−
background-size:100%;
+
−
background-repeat:no-repeat;
+
−
opacity:.3;
+
−
transition:opacity, 1s;
+
 
}
 
}
  
−
.one:hover {
+
 
−
  opacity:1;
+
#one {
 +
position:absolute;
 +
right:10%;
 
}
 
}
  
−
#forward, #reverse {
+
#two {
−
border-radius:50%;
+
position:absolute;
 +
right:110%;
 
}
 
}
  
−
#main {
+
#three {
−
background-image:url("https://static.igem.org/mediawiki/2016/3/35/T--BostonU--Geminisymbol.jpg");
+
position:absolute;
−
background-repeat:no-repeat;
+
right:110%;
−
background-size:cover;
+
 
}
 
}
  
−
.show {
+
#four {
−
transition:display, 2s;
+
position:absolute;
 +
right:110%;
 
}
 
}
 +
 +
#container {
 +
width:100%;
 +
height:90vh;
 +
position:absolute;
 +
background-color:blue;
 +
overflow:hidden;
 +
}
 +
 
</style>
 
</style>
  
 
<body>
 
<body>
−
<center>
+
<div id = "container">
−
<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: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:purple;" 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:black;" id = "three" class = "show"></div>
−
<div style = "width:80%; height:80vh; background-color:red; display:none;" id = "four" class = "show"></div>
+
<div style = "width:80%; height:80vh; background-color:red;" id = "four" class = "show"></div>
−
</center>
+
−
 
+
−
<center>
+
−
<div style = "background-color:black; width:80%;"><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Project</p><p style = "text-align:center; color:white; font-size:150%;">See a detailed explanation of how we designed and implemented Gemini</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Human Practices</p><p style = "text-align:center; color:white; font-size:150%;">Explore our set of forums designed to make synthetic biology accessible to the public</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Team</p><p style = "text-align:center; color:white; font-size:150%;">Meet our team members, advisers, and mentors and read their bios</p></div><div class = 'one'><p style = "text-align:center; color:white; font-size:200%;">Medal Requirements</p><p style = "text-align:center; color:white; font-size:150%;">See how we met each medal requirement for the iGEM competition</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>
 
</div>
−
</center>
+
 
 +
<div style = "width:7vw; height:7vw; background-color:yellow; 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 = "width:7vw; height:7vw; background-color:yellow; text-align:center; font-size:300%; position:absolute; top:50vh; z-index:100;" id = "reverse"><div style = "height:3vw"></div><</div>
 +
 
 +
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
</body>
 
</body>
  
Line 61: Line 61:
 
  $(document).ready(
 
  $(document).ready(
 
     function(){
 
     function(){
−
  var n = 2;
+
var n = 2;
 
   $("#forward").click(function () {
 
   $("#forward").click(function () {
 
       n = n+1;
 
       n = n+1;
Line 76: Line 76:
 
       $("#four").css('display', 'none'); }
 
       $("#four").css('display', 'none'); }
 
       else if (n==3) {
 
       else if (n==3) {
−
       $('#two').css('display', 'block');
+
       $('#two').animate({'right':'10%'}, 500);
−
       $("#one").css('display', 'none');
+
       $("#one").animate({'left':'110%'}, 500);
 
       $("#three").css('display', 'none');
 
       $("#three").css('display', 'none');
 
       $("#four").css('display', 'none');}
 
       $("#four").css('display', 'none');}

Revision as of 17:31, 15 August 2016

>
<