Difference between revisions of "Team:UMaryland"

 
(48 intermediate revisions by 2 users not shown)
Line 33: Line 33:
 
         #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
 
         #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
 
             width: 100%;
 
             width: 100%;
−
            height: 100%;
 
 
             padding: 0 0 0 0;
 
             padding: 0 0 0 0;
 
             border: none;
 
             border: none;
Line 39: Line 38:
 
             background: transparent;
 
             background: transparent;
 
font-family: Raleway !important;
 
font-family: Raleway !important;
 +
min-width: 1000px;
 +
min-height: 500px;
 
         }
 
         }
  
Line 52: Line 53:
 
         /* Navbar and body setup */
 
         /* Navbar and body setup */
 
         body {
 
         body {
−
overflow:hidden;
+
overflow: normal;
 
         }
 
         }
  
Line 61: Line 62:
 
#UMD-content {
 
#UMD-content {
 
font-family: Raleway !important;
 
font-family: Raleway !important;
−
margin-top: 100px;
+
min-width: 1000px;
−
margin-left: 50px;
+
−
margin-right: 50px;
+
 
color: white;
 
color: white;
 
font-weight: 300;
 
font-weight: 300;
−
overflow: hidden;
+
 
}
 
}
 
 
Line 80: Line 79:
 
 
 
#nav {
 
#nav {
−
position: absolute;
+
margin-right: 2%;
−
right: 100px;
+
margin-left: auto;
−
left: auto;
+
width: 810px;
−
top: 100px;
+
−
display: block;
+
 
}
 
}
 
 
Line 99: Line 96:
 
}
 
}
 
 
−
#h3 {
+
#h3, #div-h3 {
 
font-family: Raleway !important;
 
font-family: Raleway !important;
 
display: none;
 
display: none;
 
font-size: 20pt !important;
 
font-size: 20pt !important;
 
line-height: 1.5em !important;
 
line-height: 1.5em !important;
−
text-align: left !important;
 
−
}
 
−
 
−
#small {
 
−
font-size: 14pt !important;
 
−
position: absolute !important;
 
−
display: block !important;
 
−
bottom: 40px !important;
 
−
top: auto !important;
 
−
right: 100px !important;
 
−
left: auto !important;
 
−
font-family: Raleway !important;
 
 
text-align: left !important;
 
text-align: left !important;
 
}
 
}
 
 
 
#div-text {
 
#div-text {
−
max-width: 1100px;
+
width: 1100px;
 
padding-top: 20px;
 
padding-top: 20px;
 
}
 
}
Line 132: Line 117:
 
 
 
.notOutline {
 
.notOutline {
−
margin-top: 140px;
+
margin-left: 50px;
 
min-height: 400px;
 
min-height: 400px;
 +
min-width: 1000px;
 
}
 
}
 
 
Line 143: Line 129:
 
text-decoration: none !important;
 
text-decoration: none !important;
 
}
 
}
 +
 
 
 
.tour {
 
.tour {
Line 153: Line 140:
 
}
 
}
 
 
−
#img-arrow {
+
html {
−
position: absolute;
+
background: url(https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--main.jpg) !important;
−
top: 7px;
+
background-size: cover !important;
−
right: 0px;
+
background-repeat: no-repeat !important;
−
left: auto;
+
 
}
 
}
 
 
−
.prompt {
+
.background {
−
font-size: 12pt;
+
background-color: rgba(0,0,0, 0.7);
−
font-weight: 400;
+
padding: 5px 5px 5px 5px;
−
line-height: 1em;
+
−
margin-right: 40px;
+
 
}
 
}
 
 
−
.prompt:hover, #img-arrow:hover {
+
.background2 {
−
cursor: pointer;
+
background-color: rgba(0,0,0, 0.7);
 +
padding: 5px 0px 4px 0px;
 
}
 
}
 
 
 +
.background3 {
 +
background-color: rgba(0,0,0, 0.7);
 +
padding: 5px 10px 5px 10px;
 +
}
 +
 +
#navContainer {
 +
position: relative;
 +
width: 100%;
 +
height: 25px;
 +
margin-top: 80px;
 +
margin-bottom: 120px;
 +
min-width: 1000px;
 +
}
 +
 +
 +
#small {
 +
font-size: 14pt !important;
 +
display: block !important;
 +
font-family: Raleway !important;
 +
margin-right: 2%;
 +
margin-left: auto;
 +
width: 500px;
 +
 +
}
 +
 +
.smallContainer {
 +
width: 100%;
 +
min-width: 1000px;
 +
height: 30px;
 +
margin-top: 120px;
 +
 +
}
 
</style>
 
</style>
 
<div id="UMD-content">
 
<div id="UMD-content">
 +
<div id="navContainer">
 
<div class="hide">
 
<div class="hide">
 
<nav id="nav">
 
<nav id="nav">
 
<ul>
 
<ul>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
−
<!--
+
<li><a href="https://2016.igem.org/Team:UMaryland/Part_Collection">Parts</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:UMaryland/Model">Modeling</a></li>
−
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>
+
−
-->
+
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/outreach">Outreach</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
 
<li><a href="https://2016.igem.org/Team:UMaryland/notebook">Notebook</a></li>
Line 186: Line 202:
 
</ul>
 
</ul>
 
</nav>
 
</nav>
 +
</div>
 
</div>
 
</div>
 
<div class="notOutline">
 
<div class="notOutline">
 
<img src="https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/>
 
<img src="https://static.igem.org/mediawiki/2016/9/9d/T--UMaryland--newlogosquare.png" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/>
 
<div id="div-text">
 
<div id="div-text">
−
<p id="h2">Biosequestration of Methane</p>
+
<p id="h2"><span class="background">Biosequestration of Methane</span></p>
−
<p id="h3">Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change</p>
+
<p id="h3"><span class="background2">Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change</span></p>
 
</div>
 
</div>
 +
<div class="smallContainer">
 
<div class="hide">
 
<div class="hide">
−
<p id="small">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline;">Instagram</a> for updates!</p>
+
<p id="small"><span class="background">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline;">Instagram</a> for updates!</span></p>
 
</div>
 
</div>
−
</div>
 
−
<div class="tour">
 
−
<p class="prompt" onclick="transition()">Take our <br />virtual tour!</p>
 
−
<img onclick="transition()" src="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--arrow.png" id="img-arrow" width="32px"/>
 
−
</div>
 
−
<div class="covervid-wrapper">
 
−
<video class="covervid-video" autoplay loop>
 
−
<source src="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--landfill.webm" type="video/webm">
 
−
<source src="https://static.igem.org/mediawiki/2016/0/03/T--UMaryland--landfill.mp4" type="video/mp4">
 
−
</video>
 
−
</div>
 
−
<div id="div-frame">
 
−
 
−
</div>
 
−
<div class="tourGuide">
 
−
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoNav">
 
−
<p id="guideLine1" class="guideText">Welcome to the virtual tour for the 2016 UMaryland iGEM Project: Biosequestration of Methane!</p>
 
−
<p id="guideLine2" class="guideText">We have a lot to show you about our work and are excited to show you what we have done!</p>
 
−
<p id="guideLine3" class="guideText">Click next to proceed through the tour!</p>
 
−
<a class="guideProceed" onclick="slideshowProceed">Next →</a>
 
 
</div>
 
</div>
 
</div>
 
</div>
 +
</div>
 
<style>
 
<style>
−
.guideProceed {
 
−
position: absolute;
 
−
color: blue !important;
 
−
text-decoration: underline;
 
−
right: 250px;
 
−
left: auto;
 
−
top: 55px;
 
−
font-weight: 800;
 
−
bottom: auto;
 
−
cursor: pointer;
 
−
display: none;
 
−
font-size: 12pt !important;
 
−
}
 
−
 
−
.tourGuide {
 
−
font-size: 12pt !important;
 
−
display: none;
 
−
position: absolute;
 
−
top: 12px;
 
−
bottom: auto;
 
−
height: 120px;
 
−
width: 100%;
 
−
left: 0px;
 
−
right: auto;
 
−
background-color: white;
 
−
}
 
−
 
−
.guideText {
 
−
display: none;
 
−
font-weight: 400;
 
−
margin-left: 400px;
 
−
color: black;
 
−
max-width: 800px;
 
−
}
 
−
 
 
#img-logoNav{
 
#img-logoNav{
 
display: none;
 
display: none;
Line 260: Line 224:
 
width: 260px;
 
width: 260px;
 
float: left;
 
float: left;
−
}
 
−
 
−
#div-frame {
 
−
position: absolute;
 
−
overflow: hidden;
 
−
width: 100%;
 
−
height: 100%;
 
−
top: 0px;
 
−
left: 0px;
 
−
z-index: -999;
 
−
}
 
−
 
−
.tourFrame {
 
−
display: none;
 
−
width: 100%;
 
−
height: 100%;
 
−
top: 0px;
 
−
left: 0px;
 
−
position: absolute;
 
−
}
 
−
 
−
.covervid-wrapper {
 
−
position: absolute;
 
−
top: 0;
 
−
left: 0;
 
−
width: 100%;
 
−
height: 100%;
 
−
z-index: -999;
 
 
}
 
}
 
</style>
 
</style>
 
</div>
 
</div>
 
<script>
 
<script>
−
var height = $(document).outerHeight(true);
 
−
var width = $(document).outerWidth(true);
 
−
 
−
resizeVid();
 
−
 
−
$( window ).resize(function() {
 
−
resizeVid()
 
−
})
 
−
 
−
function resizeVid() {
 
−
$('.covervid-video').css("width","");
 
−
$('.covervid-video').css("height","");
 
−
height = $(document).outerHeight(true);
 
−
width = $(document).outerWidth(true);
 
−
ratio = width / height;
 
−
if (ratio < 1.777777777777) {
 
−
$('.covervid-video').css('height', height+20)
 
−
} else if (ratio >= 1.777777777777) {
 
−
$('.covervid-video').css('width',width+20)
 
−
}
 
−
}
 
 
 
 
 
Line 336: Line 251:
 
 
 
function show2(){
 
function show2(){
−
$('#h3').animateCss('fadeInUp');
+
$('#h3, #div-h3').animateCss('fadeInUp');
−
$('#h3').css('display','block');
+
$('#h3, #div-h3').css('display','block');
 
timeoutID = window.setTimeout(show3, 800);
 
timeoutID = window.setTimeout(show3, 800);
 
}
 
}
Line 349: Line 264:
 
function show4() {
 
function show4() {
 
$('.tour').animateCss('slideInLeft');
 
$('.tour').animateCss('slideInLeft');
−
$('.tour').css('display','block')
+
//$('.tour').css('display','block')
 
timeoutID = window.setTimeout(show5, 5000);
 
timeoutID = window.setTimeout(show5, 5000);
 
}
 
}
Line 358: Line 273:
 
}
 
}
 
 
−
function transition() {
 
−
$('nav, #small, #h3, #h2, .tour').animateCss('fadeOutDown');
 
−
timeoutID = window.setTimeout(loading, 1000);
 
−
}
 
−
 
−
function loading() {
 
−
$('nav, #small, #h3, #h2, .hide, .tour').css('display','none');
 
−
$('#h2').removeClass('animated ' + 'fadeOutDown');
 
−
$('#h2').css('padding-top','80px');
 
−
$('#h2').text('Loading virtual tour');
 
−
$('#h2').animateCss('fadeInUp');
 
−
$('#h2').css('display','block');
 
−
timeoutID = window.setTimeout(slideOut, 4000);
 
−
timeoutID2 = window.setTimeout(setPeriod, 800);
 
−
}
 
−
 
−
function slideOut() {
 
−
var slide = 1
 
−
$('#div-frame').html('<iframe class="tourFrame" src="https://2016.igem.org/Team:UMaryland/education"></iframe>');
 
−
 
−
$('.tourFrame').load(function () {
 
−
 
−
 
−
if (slide == 1) {
 
−
window.clearTimeout(timeoutID2);
 
−
var left = $(document).outerWidth(true);
 
−
$('#div-frame').css('z-index','1000')
 
−
$('#div-frame').css('left', left);
 
−
$('.tourFrame').css('display','block')
 
−
$('#div-frame').css('display','block');
 
−
 
−
$('.tourGuide').css('z-index','10000')
 
−
$('.tourGuide').css('left', left);
 
−
$('.tourGuide').css('display','block');
 
−
 
−
$('#div-frame').animate({left:0},2000);
 
−
$('.tourGuide').animate({left:0},2000);
 
−
timeoutID = window.setTimeout(destroyVid, 2000);
 
−
slide = 0;
 
−
}
 
−
 
−
 
−
})
 
−
}
 
−
 
−
function setPeriod() {
 
−
text = $('#h2').text();
 
−
var loadText = ''
 
−
switch(text) {
 
−
case 'Loading virtual tour':
 
−
loadText = 'Loading virtual tour.';
 
−
break;
 
−
case 'Loading virtual tour.':
 
−
loadText = 'Loading virtual tour..';
 
−
break;
 
−
case 'Loading virtual tour..':
 
−
loadText = 'Loading virtual tour...';
 
−
break;
 
−
case 'Loading virtual tour...':
 
−
loadText = 'Loading virtual tour....';
 
−
break;
 
−
case 'Loading virtual tour....':
 
−
loadText = 'Loading virtual tour.....';
 
−
break;
 
−
case 'Loading virtual tour.....':
 
−
loadText = 'Loading virtual tour.';
 
−
break;
 
−
}
 
−
text = $('#h2').text(loadText);
 
−
timeoutID2 = window.setTimeout(setPeriod, 800);
 
−
}
 
−
 
−
function destroyVid() {
 
−
$('nav, #small, #h3, #h2, #img-logo, .hide, .tour').remove();
 
−
$('.covervid-wrapper').remove();
 
−
timeoutID = window.setTimeout(slide1p1, 2000);
 
−
}
 
−
 
−
function slide1p1() {
 
−
$('#img-logoNav, #guideLine1').animateCss('fadeInUp');
 
−
$('#img-logoNav, #guideLine1').css('display','block');
 
−
timeoutID = window.setTimeout(slide1p2, 800);
 
−
}
 
−
 
−
function slide1p2() {
 
−
$('#guideLine2').animateCss('fadeInUp');
 
−
$('#guideLine2').css('display','block');
 
−
timeoutID = window.setTimeout(slide1p3, 800);
 
−
}
 
−
 
−
function slide1p3() {
 
−
$('#guideLine3, .guideProceed').animateCss('fadeInUp');
 
−
$('#guideLine3, .guideProceed').css('display','block');
 
−
}
 
 
</script>
 
</script>
 +
 
</html>
 
</html>

Latest revision as of 02:39, 12 October 2016

</div></div>

Biosequestration of Methane

Creating a strain of E. coli that break down methane to be implemented into landfills as an environmentally friendly strategy for ameliorating global climate change

Follow us on Facebook and Instagram for updates!