Difference between revisions of "Team:UMaryland"

Line 1: Line 1:
  
 +
 +
</div></div>
 
<html lang="en">
 
<html lang="en">
−
</div></div></div><!-- iGEM code bug? Makes our content not under iGEM CSS code -->
 
 
<head>
 
<head>
 +
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
<link href='https://fonts.googleapis.com/css?family=Exo|Lora' rel='stylesheet' type='text/css'>
 +
       
 
<link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
 
<link href='https://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'>
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
−
<title>UMaryland iGEM 2015</title>
+
 
</head>
 
</head>
 +
<body>
 +
<style>
 +
#UMD-content {
 +
font-family: Raleway;
 +
margin-top: 100px;
 +
margin-left: 50px;
 +
margin-right: 50px;
 +
color: white;
 +
font-weight: 200;
 +
}
 +
 +
#UMD-content a {
 +
color: white;
 +
}
 +
 +
#nav li {
 +
display: inline;
 +
font-size: 18pt;
 +
margin-right: 35px;
 +
}
 +
 +
#nav {
 +
position: absolute;
 +
right: 100px;
 +
left: auto;
 +
top: 100px;
 +
display: block;
 +
}
 +
 +
#nav ul {
 +
list-style: none;
 +
}
 +
 +
.h2 {
 +
display: none;
 +
font-size: 36pt;
 +
margin-top: 0px;
 +
}
 +
 +
.h3 {
 +
display: none;
 +
font-size: 20pt;
 +
line-height: 1.5em;
 +
}
 +
 +
.small {
 +
font-size: 14pt;
 +
position: absolute;
 +
display: block;
 +
bottom: 40px;
 +
top: auto;
 +
right: 100px;
 +
left: auto;
 +
}
 +
 +
#div-text {
 +
width: 1200px;
 +
padding-top: 20px;
 +
}
 +
 +
#img-logo {
 +
display: none;
 +
margin-top: 10px;
 +
float: left;
 +
margin-right: 50px;
 +
}
 +
 +
.notOutline {
 +
margin-top: 250px;
 +
}
 +
 +
.hide {
 +
display: none;
 +
}
 +
</style>
 
<div id="UMD-content">
 
<div id="UMD-content">
−
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" alt="UMaryland iGEM Logo" />
+
<div class="hide">
−
<script>
+
<nav id="nav">
−
//$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
+
<ul>
−
//$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
+
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
−
</script>
+
<!--  
−
<div id="div-text">
+
<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</a></li>
−
<p class="h2">Methane Sequestration - coming soon!</p>
+
<li><a href="https://2016.igem.org/Team:UMaryland/modeling">Modeling</a></li>
−
<p class="h3">Follow us on <a target="_blank" href="https://www.facebook.com/UMarylandiGEM/" style="text-decoration: underline; color: white;">Facebook</a> and <a target="_blank" href="https://www.instagram.com/umarylandigem/" style="text-decoration: underline; color: white;">Instagram</a> for updates!</p>
+
-->
 +
<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/about">About Us</a></li>
 +
</ul>
 +
</nav>
 +
</div>
 +
<div class="notOutline">
 +
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" alt="UMaryland iGEM Logo" width="300px"/>
 +
<div id="div-text">
 +
<p class="h2">Biosequestration of Methane</p>
 +
<p class="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>
 +
</div>
 +
<div class="hide">
 +
<p class="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>
 +
</div>
 +
</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>
 
</div>
−
</div>
 
 
<style>
 
<style>
−
#bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
+
.covervid-wrapper {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 
width: 100%;
 
width: 100%;
 
height: 100%;
 
height: 100%;
−
padding: 0 0 0 0;
+
z-index: -999;
−
border: none;
+
−
margin: 0 0 0 0;
+
−
background: transparent;
+
−
}
+
−
+
−
#top_title {
+
−
display: none;
+
−
line-height: inherit;
+
−
}
+
−
+
−
#sideMenu {
+
−
display: none;
+
 
}
 
}
 
</style>
 
</style>
−
<style>
+
</div>
−
/* Navbar and body setup */
+
<script>
 +
var height = $(document).outerHeight(true);
 +
var width = $(document).outerWidth(true);
 
 
−
#UMD-content {
+
resizeVid();
−
font-family: 'Raleway', sans-serif;
+
$( window ).resize(function() {
−
color: white; !important
+
resizeVid()
−
padding: 0 0 0 0;
+
})
−
border: none;
+
−
margin: 0 0 0 0;
+
−
}
+
 
 
−
body {
+
function resizeVid() {
−
background: url(https://static.igem.org/mediawiki/2016/b/b7/16UMD-main.jpeg) no-repeat center fixed;  
+
$('.covervid-video').css("width","");
−
background-size: cover;
+
$('.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)
 +
}
 
}
 
}
 +
 +
 +
$.fn.extend({
 +
animateCss: function (animationName) {
 +
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
 +
this.addClass('animated ' + animationName).one(animationEnd, function() {
 +
$(this).removeClass('animated ' + animationName);
 +
});
 +
}
 +
});
 
 
−
.nav {
+
$(window).load(function() {
−
padding-top: 70px;
+
var timeoutID;
−
font-size: 24pt;
+
−
}
+
$('#img-logo, .h2').animateCss('fadeInUp');
−
 
+
$('.h2, #img-logo').css('display','block');
−
.nav a {
+
timeoutID = window.setTimeout(show2, 800);
−
text-decoration: none;
+
−
color: white;
+
−
}
+
})
−
 
+
−
a:hover {
+
−
font-weight: 800;
+
−
}
+
−
 
+
−
.nav ul {
+
−
list-style: none;
+
−
text-align: right;
+
−
margin-right: 50px;
+
−
padding-top: 30px;
+
−
}
+
−
 
+
−
.nav ul li {
+
−
display: inline;
+
−
padding-left: 40px;
+
−
line-height: 1.5em;
+
−
}
+
−
 
+
−
#img-logo {
+
−
            margin-top: 100px;
+
−
            margin-left: 0px;
+
−
            width: 400px;
+
−
            float: left;
+
−
}
+
−
 
+
−
#div-text {
+
−
margin-left: 50px;
+
−
padding-top: 40px;
+
−
}
+
−
 
+
−
/* Start Page Specific CSS */
+
−
 
+
−
.h2 {
+
−
font-size: 60pt;
+
−
font-weight: 200;
+
−
}
+
 
 
−
.h3 {
+
function show2(){
−
font-size: 32pt;
+
$('.h3').animateCss('fadeInUp');
−
font-weight: 200;
+
$('.h3').css('display','block');
−
padding-bottom: 50px;
+
timeoutID = window.setTimeout(show3, 800);
 
}
 
}
−
+
−
#div-popup {
+
function show3() {
−
display: none;
+
$('nav, .small').animateCss('fadeInUp');
−
font-family: 'Raleway', sans-serif;
+
$('.hide').css('display','block')
−
background: rgb(255, 255, 253);
+
−
padding: 30px 30px 30px 30px;
+
−
border: solid 4px gray;
+
−
max-width: 50%;
+
−
min-width: 50%;
+
−
-webkit-border-radius: 25px;
+
−
-moz-border-radius: 25px;
+
−
border-radius: 25px;
+
 
}
 
}
 
 
−
.div-popup_close {
+
</script>
−
color: rgb(255, 255, 255);
+
−
font-size: 16pt;
+
−
padding: 10px;
+
−
-webkit-border-radius: 15px;
+
−
-moz-border-radius: 15px;
+
−
border-radius: 15px;
+
−
background: rgb(124, 124, 124);
+
−
background: -moz-linear-gradient(90deg, rgb(124, 124, 124) 30%, rgb(150, 150, 150) 70%);
+
−
background: -webkit-linear-gradient(90deg, rgb(124, 124, 124) 30%, rgb(150, 150, 150) 70%);
+
−
background: -o-linear-gradient(90deg, rgb(124, 124, 124) 30%, rgb(150, 150, 150) 70%);
+
−
background: -ms-linear-gradient(90deg, rgb(124, 124, 124) 30%, rgb(150, 150, 150) 70%);
+
−
background: linear-gradient(0deg, rgb(124, 124, 124) 30%, rgb(150, 150, 150) 70%);
+
−
-webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);
+
−
-moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.75);
+
−
box-shadow:        0px 2px 1px rgba(50, 50, 50, 0.75);
+
−
}
+
−
+
−
.div-popup_close:hover {
+
−
cursor: pointer;
+
−
}
+
−
+
−
#div-popup strong {
+
−
font-size: 28pt;
+
−
line-height: 1.5em;
+
−
}
+
−
+
−
#div-popup p {
+
−
font-size: 16pt;
+
−
line-height: 1.75em;
+
−
}
+
−
+
−
#div-popup a {
+
−
color: blue;
+
−
}
+
−
</style>
+
 
</html>
 
</html>

Revision as of 01:44, 5 September 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!