Line 30: | Line 30: | ||
#four { | #four { | ||
+ | position:absolute; | ||
+ | left:-110%; | ||
+ | } | ||
+ | |||
+ | #five { | ||
position:absolute; | position:absolute; | ||
left:-110%; | left:-110%; | ||
Line 53: | Line 58: | ||
</div> | </div> | ||
− | < | + | <div style = "width:80%; height:89vh;" id = "three" class = "show"> |
− | < | + | <br> |
+ | <center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">HP Projects</center> | ||
+ | <br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center> | ||
</div> | </div> | ||
+ | |||
+ | <div style = "width:80%; height:89vh;" id = "four" class = "show"> | ||
+ | <br> | ||
+ | <center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">For the Judges</center> | ||
+ | <br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center> | ||
+ | </div> | ||
+ | |||
+ | <div style = "width:80%; height:89vh;" id = "five" class = "show"> | ||
+ | <br> | ||
+ | <center style = "font-size:280%; font-family:Trebuchet MS; color:#0071A7;">Team & Advisors</center> | ||
+ | <br><center><hr style= "width:702px; height: 3px; background-color:#0071A7"></center> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
<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; 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> | <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> | ||
Line 84: | Line 106: | ||
$('#four').animate({'left':'10%'}, 500); | $('#four').animate({'left':'10%'}, 500); | ||
$("#three").animate({'left':'-110%'}, 500);} | $("#three").animate({'left':'-110%'}, 500);} | ||
− | else if (n == 6) { | + | else if (n==6) { |
+ | $("#five").css('left', '110%'); | ||
+ | $('#five').animate({'left':'10%'}, 500); | ||
+ | $("#four").animate({'left':'-110%'}, 500);} | ||
+ | else if (n == 7) { | ||
$("#one").css('left', '110%'); | $("#one").css('left', '110%'); | ||
− | $("# | + | $("#five").animate({'left':'-110%'}, 500); |
$("#one").animate({'left':'10%'}, 500); | $("#one").animate({'left':'10%'}, 500); | ||
n = 2;}} | n = 2;}} | ||
Line 106: | Line 132: | ||
$('#four').animate({'left':'10%'}, 500); | $('#four').animate({'left':'10%'}, 500); | ||
$("#three").animate({'left':'-110%'}, 500);} | $("#three").animate({'left':'-110%'}, 500);} | ||
− | else if (n == 6) { | + | else if (n==6) { |
+ | $("#five").css('left', '110%'); | ||
+ | $('#five').animate({'left':'10%'}, 500); | ||
+ | $("#four").animate({'left':'-110%'}, 500);} | ||
+ | else if (n == 7) { | ||
$("#one").css('left', '110%'); | $("#one").css('left', '110%'); | ||
− | $("# | + | $("#five").animate({'left':'-110%'}, 500); |
$("#one").animate({'left':'10%'}, 500); | $("#one").animate({'left':'10%'}, 500); | ||
n = 2;} | n = 2;} | ||
Line 117: | Line 147: | ||
n = n-1; | n = n-1; | ||
if (n == 1) { | if (n == 1) { | ||
− | $("# | + | $("#five").css('left', '-110%'); |
− | $("# | + | $("#five").animate({'left':'10%'}, 500); |
$("#one").animate({'left':'110%'}, 500); | $("#one").animate({'left':'110%'}, 500); | ||
− | n = | + | n = 6;} |
else if (n==2) { | else if (n==2) { | ||
$("#one").css('left', '-110%'); | $("#one").css('left', '-110%'); | ||
Line 134: | Line 164: | ||
$('#three').animate({'left':'10%'}, 500); | $('#three').animate({'left':'10%'}, 500); | ||
$("#four").animate({'left':'110%'}, 500);} | $("#four").animate({'left':'110%'}, 500);} | ||
+ | else if (n==5) { | ||
+ | $("#four").css('left', '-110%'); | ||
+ | $('#four').animate({'left':'10%'}, 500); | ||
+ | $("#five").animate({'left':'110%'}, 500);} | ||
}); | }); | ||
Revision as of 19:05, 16 August 2016
>
<