Difference between revisions of "Team:UMaryland/projects"

 
(89 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
</div>
  
 +
</div>
 +
<html lang="en">
  
−
</div></div>
 
−
<html lang="en">
 
 
<head>
 
<head>
−
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
+
    <script>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
         $('body').css('display', 'none');
−
        <script>  
+
    </script>
−
         $(body).css('display','none');  
+
    <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script>
−
        </script>
+
    <script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></script>
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+
    <title>Projects</title>
−
<script type="text/javascript">
+
−
if (typeof jQuery == 'undefined') {
+
−
document.write(unescape("%3Cscript src='js/jquery-1.10.2.min.js' type='text/javascript'%3E%3C/script%3E"));
+
−
}
+
−
</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='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css' rel='stylesheet' type='text/css'>
+
−
<title>2nd Annual Mid-Atlantic Meet-up</title>
+
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<style>
+
    <style>
 +
        @font-face {
 +
            font-family: 'Exo';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/0/02/T--UMaryland--Exo.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Lora';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/6/61/T--UMaryland--Lora.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Raleway';
 +
            font-style: normal;
 +
            font-weight: 200;
 +
            src: url(https://static.igem.org/mediawiki/2016/b/b7/T--UMaryland--RalewayLight.woff) format('woff2');
 +
        }
 +
       
 +
        @font-face {
 +
            font-family: 'Raleway';
 +
            font-style: normal;
 +
            font-weight: 400;
 +
            src: url(https://static.igem.org/mediawiki/2016/5/58/T--UMaryland--Raleway.woff) format('woff2');
 +
        }
 +
    </style>
 +
    <style>
 
         #bars_item {
 
         #bars_item {
 
             display: none;
 
             display: none;
 
         }
 
         }
−
 
+
       
 +
        #sideMenu {
 +
            display: none;
 +
        }
 +
       
 +
        #bodyContent,
 +
        #content,
 +
        html,
 +
        body,
 +
        #globalWrapper,
 +
        #iGEM,
 +
        #overruled {
 +
            width: 100%;
 +
            height: 100%;
 +
            padding: 0 0 0 0;
 +
            border: none;
 +
            margin: 0 0 0 0;
 +
            background: transparent;
 +
            font-family: Raleway;
 +
        }
 +
       
 +
        #top_title {
 +
            display: none;
 +
            line-height: inherit;
 +
        }
 +
       
 
         #sideMenu {
 
         #sideMenu {
 
             display: none;
 
             display: none;
−
        } 
 
−
 
−
        #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled {
 
−
            width: 100%;
 
−
            height: 100%;
 
−
            padding: 0 0 0 0;
 
−
            border: none;
 
−
            margin: 0 0 0 0;
 
−
            background: transparent;
 
−
font-family: Raleway;
 
 
         }
 
         }
−
 
−
        #top_title {
 
−
            display: none;
 
−
            line-height: inherit;
 
−
        }
 
−
 
−
        #sideMenu {
 
−
            display: none;
 
−
        }
 
−
 
 
         /* Navbar and body setup */
 
         /* Navbar and body setup */
 +
       
 
         body {
 
         body {
 
             font-family: 'Lora', serif;
 
             font-family: 'Lora', serif;
 
             overflow-x: hidden;
 
             overflow-x: hidden;
 +
            background-color: black;
 
         }
 
         }
−
 
+
       
 
         #content {
 
         #content {
−
                margin-top: 0px;
+
            margin-top: 0px;
 
         }
 
         }
−
 
 
         /* Navbar */
 
         /* Navbar */
 +
       
 
         nav {
 
         nav {
 
             opacity: 1.0;
 
             opacity: 1.0;
Line 71: Line 99:
 
             display: block;
 
             display: block;
 
             background: #fff;
 
             background: #fff;
−
             border-bottom: 1px solid black;
+
             border-bottom: 1px solid black;
 
             box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
 
             box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
 
             border-bottom-left-radius: 5px;
 
             border-bottom-left-radius: 5px;
Line 77: Line 105:
 
             z-index: 1;
 
             z-index: 1;
 
             margin-top: 18px;
 
             margin-top: 18px;
−
         }  
+
         }
−
 
+
       
 
         element.style {
 
         element.style {
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
−
 
+
       
 
         nav a {
 
         nav a {
 
             text-decoration: none;
 
             text-decoration: none;
Line 88: Line 116:
 
             font-family: 'Exo', sans-serif;
 
             font-family: 'Exo', sans-serif;
 
         }
 
         }
−
 
+
       
 
         nav a:visited {
 
         nav a:visited {
 
             color: black;
 
             color: black;
 
         }
 
         }
−
 
+
       
 
         nav a:hover {
 
         nav a:hover {
 
             opacity: .7;
 
             opacity: .7;
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
−
 
+
       
−
         nav ul {
+
         nav ul {
 
             list-style: none;
 
             list-style: none;
 
             transition: all .5s ease;
 
             transition: all .5s ease;
 
             text-align: right;
 
             text-align: right;
 
         }
 
         }
−
 
+
       
 
         nav li {
 
         nav li {
 
             display: inline;
 
             display: inline;
 
             margin-right: 20px;
 
             margin-right: 20px;
 
         }
 
         }
−
 
 
         /* Nav bar when more icon is clicked */
 
         /* Nav bar when more icon is clicked */
−
 
+
       
 
         #div-navResized {
 
         #div-navResized {
 
             font-size: 20pt;
 
             font-size: 20pt;
Line 122: Line 149:
 
             z-index: 3;
 
             z-index: 3;
 
         }
 
         }
−
 
+
       
 
         #div-navResized a {
 
         #div-navResized a {
 
             text-decoration: none;
 
             text-decoration: none;
Line 128: Line 155:
 
             font-family: 'Exo', sans-serif;
 
             font-family: 'Exo', sans-serif;
 
         }
 
         }
−
 
+
       
−
         #div-navResized ul {
+
         #div-navResized ul {
 
             list-style: none;
 
             list-style: none;
 
             margin-right: 40px;
 
             margin-right: 40px;
 
             margin-top: 0px;
 
             margin-top: 0px;
 
         }
 
         }
−
 
+
       
 
         #div-navResized ul li {
 
         #div-navResized ul li {
−
             margin-top: 4px;
+
             margin-top: 4px;
 
         }
 
         }
−
 
+
       
 
         #div-title {
 
         #div-title {
 
             z-index: -999;
 
             z-index: -999;
 
         }
 
         }
−
 
−
        /* Permanent bottom bar */
 
−
        #bot-nav {
 
−
            background-color: #f9f9f9;   
 
−
            border-top: 1px solid #f5f5f5;
 
−
            position: absolute;
 
−
            width: 100%;
 
−
            height: 75px;
 
−
            margin-top: 20px;
 
−
            display: block;
 
−
            color: black;
 
−
            font-size: 12pt;
 
−
            font-family: 'Lora', serif;
 
−
            z-index: -1;
 
−
        }
 
−
 
−
        #container {
 
−
            width: 750px;
 
−
            margin-left: auto;
 
−
            margin-right: auto;
 
−
            padding-right: 15px;
 
−
            padding-left: 15px;
 
−
            margin-top: -7px;
 
−
        }
 
−
 
−
        #container img {
 
−
            height: 20px;
 
−
            width: 20px;
 
−
            margin-top: -40px;
 
−
            -webkit-filter: grayscale(100%);
 
−
            filter: grayscale(100%);
 
−
        }
 
−
 
−
        #bot-nav img:hover {
 
−
            -webkit-filter: grayscale(0%);
 
−
            filter: grayscale(0%);
 
−
        }
 
−
 
−
        #container ul {
 
−
            text-align: center;
 
−
            margin-top: -13px;
 
−
            margin-right: -22px;
 
−
        }
 
−
 
−
        #container li {
 
−
            display: inline;
 
−
            margin-right: -14px;
 
−
        }
 
−
 
−
        #bot-nav a {
 
−
            text-decoration: none;
 
−
            color: black;
 
−
        }
 
−
 
−
        #copyright {
 
−
            text-align: center;
 
−
            padding-top: 24px;
 
−
            padding-right: 63px;
 
−
        }
 
−
 
−
        #contact:hover {
 
−
            text-shadow: .1px .1px black;
 
−
        }
 
−
 
−
        /* Resized bot-nav */
 
−
 
−
        h4, h5 {
 
−
            font-family: 'Lora', serif;
 
−
            font-weight: normal;
 
−
            font-size: 12pt;
 
−
        }
 
−
 
−
        #bot-navResized {
 
−
            text-align: center;
 
−
        }
 
−
 
−
        #bot-navResized img {
 
−
            height: 20px;
 
−
            width: 20px;
 
−
            -webkit-filter: grayscale(100%);
 
−
            filter: grayscale(100%);
 
−
        }
 
−
 
−
        #bot-navResized ul {
 
−
            text-align: center;
 
−
            margin-top: 6px;
 
−
        }
 
−
 
−
        #bot-navResized li {
 
−
            display: inline;
 
−
            margin-right: -14px;
 
−
        }
 
−
 
−
        #copyrightResized {
 
−
            margin-top: -23px;
 
−
        }
 
−
 
−
        #contactResized {
 
−
            margin-top: -10px;
 
−
        }
 
−
 
−
        #contactResized:hover {
 
−
            text-shadow: .1px .1px black;
 
−
        }
 
−
 
 
         /* Background of page */
 
         /* Background of page */
−
 
+
       
 
         html {
 
         html {
 
             background-color: rgba(0, 0, 0, 0.06);
 
             background-color: rgba(0, 0, 0, 0.06);
 
         }
 
         }
−
 
 
         /* Classes */
 
         /* Classes */
−
 
+
       
 
         .description {
 
         .description {
 
             margin-top: 200px;
 
             margin-top: 200px;
 
             min-width: 970px;
 
             min-width: 970px;
 
         }
 
         }
−
 
+
       
 
         .border {
 
         .border {
 
             border-bottom: 1px black;
 
             border-bottom: 1px black;
 
         }
 
         }
−
 
+
       
−
         .image {  
+
         .image {
−
          position: relative;  
+
            position: relative;
−
          width: 100%; /* for IE 6 */
+
            width: 100%;
 +
            /* for IE 6 */
 
         }
 
         }
−
 
+
       
 
         .pull-right {
 
         .pull-right {
 
             float: right !important;
 
             float: right !important;
 
         }
 
         }
−
 
+
       
 
         .pull-left {
 
         .pull-left {
 
             float: left !important;
 
             float: left !important;
 
             margin-left: -28px;
 
             margin-left: -28px;
 
         }
 
         }
−
 
 
         /* Pushed class actives */
 
         /* Pushed class actives */
 +
       
 
         #img-more.pushed {
 
         #img-more.pushed {
 
             box-shadow: inset 1px 1px 1px 2px rgba(0, 0, 0, .3);
 
             box-shadow: inset 1px 1px 1px 2px rgba(0, 0, 0, .3);
 
         }
 
         }
−
 
+
       
 
         #div-navResized.pushed {
 
         #div-navResized.pushed {
 
             display: block;
 
             display: block;
 
         }
 
         }
−
 
+
       
−
         #div-navResized.pushed a:hover {
+
         #div-navResized.pushed a:hover, #div-navResized.pushed img:hover {
−
             text-decoration: underline;
+
             text-decoration: none;
 +
            opacity: .7;
 
         }
 
         }
−
 
+
       
 
         nav.pushed {
 
         nav.pushed {
 
             height: 100%;
 
             height: 100%;
 
         }
 
         }
−
 
+
       
 
         body.pushed {
 
         body.pushed {
 
             overflow-y: hidden;
 
             overflow-y: hidden;
 
         }
 
         }
−
 
+
       
 
         nav img.pushed {
 
         nav img.pushed {
 
             display: none;
 
             display: none;
 
         }
 
         }
−
 
 
         /* Hides nav bar when scrolling */
 
         /* Hides nav bar when scrolling */
 +
       
 
         .scrolled {
 
         .scrolled {
 
             font-size: 10pt;
 
             font-size: 10pt;
 
             line-height: 20px;
 
             line-height: 20px;
−
         }
+
         }
−
 
+
 
         /* animation when mouse is over Navbar */
 
         /* animation when mouse is over Navbar */
 +
       
 
         .hover {
 
         .hover {
 
             font-size: 20pt;
 
             font-size: 20pt;
 
             line-height: 40px;
 
             line-height: 40px;
 
         }
 
         }
−
 
 
         /* Logo */
 
         /* Logo */
 +
       
 
         #img-logo {
 
         #img-logo {
−
             width: 150px;
+
             width: 260px;
 
             float: left;
 
             float: left;
 
             position: fixed;
 
             position: fixed;
Line 324: Line 247:
 
             opacity: 1.0;
 
             opacity: 1.0;
 
         }
 
         }
−
 
 
         /* iGEM logo */
 
         /* iGEM logo */
 +
       
 
         #img-igemlogo {
 
         #img-igemlogo {
 
             width: 60px;
 
             width: 60px;
Line 333: Line 256:
 
             opacity: 1.0;
 
             opacity: 1.0;
 
         }
 
         }
−
 
 
         /* More Icon */
 
         /* More Icon */
 +
       
 
         #img-more {
 
         #img-more {
 
             position: fixed;
 
             position: fixed;
Line 343: Line 266:
 
             right: 15px;
 
             right: 15px;
 
             z-index: 2;
 
             z-index: 2;
−
             margin-top: -11px;
+
             margin-top: -38px;
 
         }
 
         }
−
 
+
       
 
         #img-UMD {
 
         #img-UMD {
 
             z-index: -999;
 
             z-index: -999;
Line 352: Line 275:
 
             height: 600px;
 
             height: 600px;
 
         }
 
         }
−
 
 
         /* Logos when more button is clicked */
 
         /* Logos when more button is clicked */
−
 
+
       
 
         #img-logoResized {
 
         #img-logoResized {
−
             width: 200px;
+
             width: 300px;
 
             display: block;
 
             display: block;
 
             margin-right: auto;
 
             margin-right: auto;
 
             margin-left: auto;
 
             margin-left: auto;
 
             margin-top: -165px;
 
             margin-top: -165px;
−
            padding-right: 40px;
 
 
         }
 
         }
−
     
+
        /* Start Page Specific CSS */
−
/* Start Page Specific CSS */
+
       
−
 
+
        .h1 {
−
.h1 { /* Centers the heading text on the page at different sizes */
+
            /* Centers the heading text on the page at different sizes */
−
color: white; /* makes the text centered and gray colored */
+
            color: white;
−
font-size: 56pt;
+
            /* makes the text centered and gray colored */
−
font-weight: 200;
+
            font-size: 56pt;
−
text-align: center;
+
            font-weight: 200;
−
margin-top: 30px;
+
            text-align: center;
−
border-bottom: none;
+
            margin-top: 30px;
−
line-height: 1em;
+
            border-bottom: none;
−
}
+
            line-height: 1em;
−
 
+
        }
−
.h3 {
+
       
−
color: white;
+
        .h3 {
−
font-size: 20pt;
+
            color: white;
−
font-weight: 400;
+
            font-size: 20pt;
−
text-align: center;
+
            font-weight: 400;
−
max-width: 80%;
+
            text-align: center;
−
margin-left: auto;
+
            max-width: 80%;
−
margin-right: auto;
+
            margin-left: auto;
−
line-height: 1.25em;
+
            margin-right: auto;
−
}
+
            line-height: 1.5em;
−
 
+
        }
−
 
+
        /* makes circles display horizontally at a fixed width,  
−
/* makes circles display horizontally at a fixed width,  
+
 
  turns div from rectangle to circle */
 
  turns div from rectangle to circle */
−
.circle {
+
       
−
display: inline-block;
+
        .circle {
−
margin-left: 45px;
+
            display: inline-block;
−
width: 260px;
+
            margin-left: 45px;
−
height: 260px;
+
            width: 260px;
−
overflow: hidden;
+
            height: 260px;
−
-webkit-border-radius: 50%;
+
            overflow: hidden;
−
-moz-border-radius: 50%;
+
            -webkit-border-radius: 50%;
−
border-radius: 50%;
+
            -moz-border-radius: 50%;
−
color: white;
+
            border-radius: 50%;
−
}
+
            color: white;
 +
        }
 +
        /* makes the actual image inside circle the same width as .circle */
 +
       
 +
        .circle img {
 +
            width: 260px;
 +
        }
 +
        /* Triggers darkening of the image within .circle when hovered */
 +
       
 +
        .circle img:hover {
 +
            opacity: 0.4;
 +
        }
 +
        /* moves all circles down and centered on the page */
 +
       
 +
        #div-circles {
 +
            margin-top: 5px;
 +
            padding-bottom: 50px;
 +
            width: 960px;
 +
            margin-left: auto;
 +
            margin-right: auto;
 +
        }
 +
        /* Creates initially invisible text that overlay the circles, positioned over it */
 +
       
 +
        .insideText {
 +
            color: white;
 +
            position: absolute;
 +
            opacity: 0;
 +
            z-index: 99999;
 +
            margin-top: 55px;
 +
            margin-left: 30px;
 +
        }
 +
        /* Formats the text inside the circles that show up when darkened */
 +
       
 +
        .h4 {
 +
            color: white;
 +
            font-size: 24pt;
 +
            font-weight: 200;
 +
            line-height: 1.5em;
 +
            margin-bottom: 15px;
 +
            max-width: 200px;
 +
            text-align: center;
 +
            margin-top: 15px;
 +
        }
 +
       
 +
        .h5 {
 +
            color: white;
 +
            font-size: 16pt;
 +
            font-weight: 200;
 +
            line-height: 1.5em;
 +
            margin-bottom: 15px;
 +
            max-width: 200px;
 +
            text-align: center;
 +
            margin-top: 15px;
 +
        }
 +
        /* Prevents the overlay text links from being blue and underlined */
 +
       
 +
        #div-circles a {
 +
            text-decoration: none;
 +
            color: white;
 +
        }
 +
       
 +
        #div-pic {
 +
            /* sets the background image above the main text */
 +
            padding-top: 10px;
 +
            padding-bottom: 40px;
 +
            min-width: 960px;
 +
            max-width: 1200px;
 +
            margin-left: auto;
 +
            margin-right: auto;
 +
            margin-top: 20px;
 +
            overflow: hidden;
 +
        }
 +
       
 +
        #video {
 +
            position: absolute;
 +
            z-index: -999;
 +
        }
 +
       
 +
        .covervid-wrapper {
 +
            position: absolute;
 +
            top: 0;
 +
            left: 0;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index: -999;
 +
        }
 +
    </style>
 +
    <nav>
 +
        <a href="https://2016.igem.org/Team:UMaryland"><img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo"></a>
 +
        <ul>
 +
            <a style="opacity: 0">Fix</a>
 +
            <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/Model">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/notebook">Notebook</a></li>
 +
            <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 +
        </ul>
 +
    </nav>
 +
    <img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
 +
    <!-- Nav bar when more button is clicked -->
 +
    <div id="div-navResized">
 +
        <a href="https://2016.igem.org/Team:UMaryland"><img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoResized"></a>
 +
        <ul>
 +
            <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/Model">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/notebook">Notebook</a></li>
 +
            <li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
 +
        </ul>
 +
    </div>
 +
    <div id="div-text">
 +
        <!-- Start of main text of page -->
 +
        <!-- Heading text -->
 +
        <div id="div-pic">
 +
            <p class="h1">Projects</p>
 +
            <p class="h3">We set out to slow the pace of global warming by sequestering methane in the environment. Along the way we are engineering a DIY -80 C freezer to increase access to synthetic biology.</p>
 +
        </div>
 +
        <!-- Contains all of the circles to be clicked on -->
 +
        <div id="div-circles">
 +
            <div id="div-methane" class="circle">
 +
                <!-- Class 'circle' makes div from rectangle into circle -->
 +
                <a href="https://2016.igem.org/Team:UMaryland/Description">
 +
                    <div class="insideText">
 +
                        <p class="h4">Methane Sequestration</p>
 +
                    </div>
 +
                    <img id="img-methane" src="https://static.igem.org/mediawiki/2016/a/a8/T--UMaryland--landfillcircle.jpeg" />
 +
                </a>
 +
            </div>
 +
            <div id="div-freezer" class="circle">
 +
                <a href="https://2016.igem.org/Team:UMaryland/Hardware">
 +
                    <div class="insideText">
 +
                        <p class="h4">DIY -80 C Freezer</p>
 +
                    </div>
 +
                    <img id="img-freezer" src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--freezercircle.jpeg" />
 +
                </a>
 +
            </div>
 +
            <div id="div-interlab" class="circle">
 +
                <a href="https://2016.igem.org/Team:UMaryland/Measurement">
 +
                    <div class="insideText">
 +
                        <p class="h4">Interlab Study</p>
 +
                    </div>
 +
                    <img id="img-interlab" src="https://static.igem.org/mediawiki/2016/9/91/T--UMaryland--interlabcircle.jpeg" />
 +
                </a>
 +
            </div>
 +
        </div>
 +
        <!-- End of #div-circles -->
  
−
/* makes the actual image inside circle the same width as .circle */
+
        <div class="covervid-wrapper">
−
.circle img {
+
            <video class="covervid-video" autoplay loop>
−
width:260px;
+
<source src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--projects.webm" type="video/webm">
−
}
+
<source src="https://static.igem.org/mediawiki/2016/1/19/T--UMaryland--project.mp4" type="video/mp4">
 +
</video>
 +
        </div>
 +
    </div>
 +
    <script>
 +
        /* Hiding stupid stuff*/
 +
        $(document).ready(function() {
 +
            $('#top_title').css('display', 'none');
 +
            $('#top_menu').css('display', 'none');
 +
            //$('#top_menu_14').css('display', 'none');
 +
            $('#HQ_page').css('display', 'none');
 +
            $('#top_menu_under').css('display', 'none');
 +
        });
 +
        $('#HQ_page').attr("id", "iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
 +
        $('#mw-content-text').attr("id", "overruled").removeClass('mw-content-ltr');
 +
    </script>
 +
    <script>
 +
        var height = $(document).outerHeight(true);
 +
        var width = $(document).outerWidth(true);
  
−
/* Triggers darkening of the image within .circle when hovered */
 
−
.circle img:hover {
 
−
opacity: 0.4;
 
−
}
 
  
−
/* moves all circles down and centered on the page */
+
        resizeVid();
−
#div-circles {
+
−
margin-top: 30px;
+
−
margin-bottom: 10px;
+
−
width: 960px;
+
−
margin-left: auto;
+
−
margin-right:auto;
+
−
+
−
}
+
  
−
/* Creates initially invisible text that overlay the circles, positioned over it */
+
        $(window).resize(resizeVid);
−
.insideText {
+
−
color: white;  
+
−
position: absolute;
+
−
opacity: 0;
+
−
z-index: 99999;
+
−
margin-top: 55px;
+
−
margin-left: 30px;
+
−
}
+
  
−
/* Formats the text inside the circles that show up when darkened */
+
        function resizeVid() {
−
.h4 {
+
            $('.covervid-video').css("width", "")
−
color: white;
+
                .css("height", "");
−
font-size: 24pt;
+
            height = $(document).outerHeight(true);
−
font-weight: 200;
+
            width = $(document).outerWidth(true);
−
line-height: 1.5em;
+
            if (height <= 600) {
−
margin-bottom: 15px;
+
                $('.covervid-video').css('height', 720);
−
max-width: 200px;
+
            } else {
−
text-align: center;
+
                ratio = width / height;
−
margin-top: 15px;
+
                if (ratio < 1.777777777777) {
−
}
+
                    $('.covervid-video').css('height', height + 60);
−
+
                } else if (ratio >= 1.777777777777) {
−
.h5 {
+
                    $('.covervid-video').css('width', width + 60);
−
color: white;
+
                }
−
font-size: 16pt;
+
            }
−
font-weight: 200;
+
        }
−
line-height: 1.5em;
+
−
margin-bottom: 15px;
+
−
max-width: 200px;
+
−
text-align: center;
+
−
margin-top: 15px;
+
−
}
+
  
−
/* Prevents the overlay text links from being blue and underlined */
+
        // Animation over top nav bar when mouse hovers
−
#div-circles a {
+
         $('nav').mouseover(
−
text-decoration: none;
+
                function() {
−
color: white;
+
                    $('#img-logo').css('transition', '.35s ease-in')
−
}
+
                        .css('opacity', '1');
−
+
                    $('#img-igemlogo').css('transition', '.35s ease-in')
−
#education, #h5-last {
+
                        .css('opacity', '1');
−
margin-left: 25px;
+
                    $('nav ul').addClass("hover");
−
margin-top: 35px;
+
                 }
−
}
+
            ),
−
+
            $('nav').mouseout(
−
#div-pic {
+
                function() {
−
/* sets the background image above the main text */
+
                    var scroll = $(window).scrollTop();
−
padding-top: 10px;
+
                    if (scroll > 0) {
−
padding-bottom: 40px;
+
                        if ($(window).width() >= 1090) {
−
min-width: 1200px;
+
                            var pushed = $('body').hasClass('pushed');
−
max-width: 1200px;
+
                            if (pushed == false) {
−
margin-left: auto;
+
                                $('#img-logo').css('transition', '.25s ease')
−
margin-right: auto;
+
                                    .css('opacity', '0');
−
margin-top: 20px;
+
                                $('#img-igemlogo').css('transition', '.25s ease')
−
overflow: hidden;
+
                                    .css('opacity', '0');
−
}
+
                                $('nav ul').removeClass("hover");
−
+
                                $('nav').css('transition', '.5s ease');
−
#video {
+
                            }
−
position: absolute;
+
                        }
−
z-index: -999;
+
                    }
−
}
+
−
</style>
+
−
         <script>
+
−
/* Hiding stupid stuff*/
+
−
$(document).ready(function() {
+
−
                $('#top_title').css('display', 'none');
+
−
$('#top_menu').css('display', 'none');
+
−
//$('#top_menu_14').css('display', 'none');
+
−
                $('#HQ_page').css('display', 'none');
+
−
$('#top_menu_under').css('display', 'none');
+
−
                 });
+
−
$('#HQ_page').attr("id","iGEM"); //voids all dumb CSS iGEM HQ wrote which overrides our code
+
−
$('#mw-content-text').attr("id","overruled").removeClass('mw-content-ltr');
+
−
</script>
+
−
<nav>
+
−
<img src="https://static.igem.org/mediawiki/2016/e/e3/16UMD-logoTemp.png" id="img-logo" width="128px">
+
−
<a href="https://2016.igem.org/Main_Page">
+
−
<img src="https://static.igem.org/mediawiki/2016/3/3d/T--UMaryland--igemlogo.png" id="img-igemlogo" width="128px">
+
−
</a>
+
−
<ul>
+
−
<a style="opacity: 0">Fix</a>
+
−
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
+
−
<!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</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/notebook">Notebook</a></li>
+
−
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
+
−
</ul>
+
−
</nav>
+
−
<img src="https://static.igem.org/mediawiki/2016/e/e5/T--UMaryland--more.png" id="img-more">
+
−
<!-- Nav bar when more button is clicked -->
+
−
<div id="div-navResized">
+
−
<img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logoResized">
+
−
<ul>
+
−
<li><a href="https://2016.igem.org/Team:UMaryland/projects">Projects</a></li>
+
−
<!--<li><a href="https://2016.igem.org/Team:UMaryland/parts">Parts</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/notebook">Notebook</a></li>
+
−
<li><a href="https://2016.igem.org/Team:UMaryland/about">About Us</a></li>
+
−
</ul>
+
−
</div>
+
−
<div id="div-text"> <!-- Start of main text of page -->
+
−
<!-- Heading text -->
+
−
<div id="div-pic">
+
−
<video id="video" width="1200px" height="300px" autoplay loop>
+
−
<source src="https://static.igem.org/mediawiki/2016/c/cd/T--UMaryland--outreach.webm" type="video/webm">
+
−
</video>
+
−
<p class="h1">Projects</p>
+
−
<p class="h3">UMaryland iGEM sets out to halt the rapidly increasing pace of global warming by safely sequestering methane in industrial and natural settings. Continuing last year's success of the DIY thermocycler, we are engineering a cheap DIY -80 C freezer to increase access to synthetic biology.</p>
+
−
</div>
+
−
<!-- Contains all of the circles to be clicked on -->
+
−
<div id="div-circles">
+
−
<div id="div-humanpractices" class="circle">
+
−
<!-- Class 'circle' makes div from rectangle into circle -->
+
−
<a href="https://2016.igem.org/Team:UMaryland/humanpractices">
+
−
<!-- Makes the entire circle clickable -->
+
−
<div class="insideText"><p class="h4">Methane Sequestration</p><p class="h5">coming soon!</p></div>
+
−
<img id="img-humanpractices" src="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--humanpracticescircle.png" />
+
−
</a>
+
−
</div>
+
−
<div id="div-meetup" class="circle">
+
−
<a href="https://2016.igem.org/Team:UMaryland/meetup">
+
−
<div class="insideText"><p class="h4">DIY -80 C Freezer</p><p class="h5">coming soon!</p></div></div>
+
−
<img id="img-meetup" src="https://static.igem.org/mediawiki/2016/d/dd/T--UMaryland--meetupcircle.png" />
+
−
</a>
+
−
</div>
+
−
<div id="div-education" class="circle">
+
−
<a href="https://2016.igem.org/Team:UMaryland/education">
+
−
<div class="insideText"><p class="h4" id="education">Interlab Study</p><p class="h5" id="h5-last">coming soon!</p></div>
+
−
<img id="img-education" src="https://static.igem.org/mediawiki/2016/d/d6/T--UMaryland--education.png" />
+
−
</a>
+
−
</div>
+
−
</div>
+
−
<!-- End of #div-circles -->
+
−
</div>
+
−
    <div id="bot-nav">
+
−
        <div id="container">
+
−
            <div class="pull-left">
+
−
                <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a>
+
−
            </div>
+
−
            <p id="copyright">© University of Maryland iGEM 2016</p>
+
−
            <div class="pull-right">
+
−
                <ul id="social-media">
+
−
                    <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
+
−
                    <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
+
−
                </ul>
+
−
            </div>
+
−
        </div>
+
−
        <div id="bot-navResized">
+
−
            <a href="mailto:umarylandigem@gmail.com"><h4 id="contactResized"> Contact Us </h4></a>
+
−
            <h5 id="copyrightResized">© University of Maryland iGEM 2016</h5>
+
−
            <ul id="social-mediaResized">
+
−
                <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/2/2c/T--UMaryland--FBlogo.png"/> </a> </li>
+
−
                <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/b/bc/T--UMaryland--Instalogo.png"/> </a> </li>
+
−
            </ul>
+
−
        </div>
+
−
    </div>
+
−
<script>
+
  
−
$('.linkText').click( function() { $(this).css('text-decoration','none'); $(this).focusout();});
+
                }
−
</script>
+
            ),
−
        <!-- For nav bar scrolling + hovering + window resize effects-->
+
            // Window width effect on top nav bar
−
<script>
+
            $(document).ready(function() {
−
// Animation over top nav bar when mouse hovers
+
                function checkWidth() {
−
$('nav').mouseover(
+
                    if ($(window).width() < 1090 || $('nav').hasClass('pushed')) {
−
function () {
+
                        $('nav li').css('display', 'none');
−
$('#img-logo').css('transition', '.35s ease-in');
+
                        $('#img-more').css('display', 'block');
−
$('#img-logo').css('opacity', '1');
+
                        $('nav ul').addClass("hover");
−
$('#img-igemlogo').css('transition', '.35s ease-in');
+
                        $('#img-logo').css('transition', '.35s ease-in')
−
$('#img-igemlogo').css('opacity', '1');
+
                            .css('opacity', '1');
−
$('nav ul').addClass("hover");
+
                        $('#img-igemlogo').css('transition', '.35s ease-in')
−
}
+
                            .css('opacity', '1')
−
),
+
                    } else {
−
$('nav').mouseout(
+
                        $('nav li').css('display', 'inline');
−
function () {
+
                        $('#img-more').css('display', 'none');
−
var scroll = $(window).scrollTop();
+
                        $('nav ul').removeClass("hover");
−
if (scroll > 0) {if ( $(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
+
                        if ($(window).scrollTop() > 0) {
−
$('#img-logo').css('transition', '.25s ease');
+
                            $('#img-igemlogo').css('transition', '.25s ease')
−
$('#img-logo').css('opacity', '0');
+
                                .css('opacity', '0');
−
$('#img-igemlogo').css('transition', '.25s ease');
+
                            $('#img-logo').css('transition', '.25s ease')
−
$('#img-igemlogo').css('opacity', '0');
+
                                .css('opacity', '0');
−
$('nav ul').removeClass("hover");
+
                            $('nav ul').addClass("scrolled");
−
$('nav').css('transition', '.5s ease');
+
                        }
−
}}}
+
                    }
 +
                }
 +
                // Execute on load
 +
                checkWidth();
 +
                // Bind event listener
 +
                $(window).resize(checkWidth);
 +
            });
 +
        // Resized nav bar effect when more icon is clicked
 +
        $('#img-more').click(function() {
 +
            $('#img-more').toggleClass('pushed');
 +
            $('#div-navResized').toggleClass('pushed');
 +
            $('nav').toggleClass('pushed');
 +
            $('nav img').toggleClass('pushed');
 +
            if ($(window).width() >= 1090) {
 +
                var pushed = $('body').hasClass('pushed');
 +
                if (pushed == false) {
 +
                    $('nav li').css('display', 'inline');
 +
                    $('#img-more').css('display', 'none');
 +
                    $('nav ul').removeClass("hover");
 +
                }
 +
            }
 +
        });
 +
        // Scrolling animation for top nav bar
 +
        var nav = $('nav ul');
 +
        $(window).scroll(function() {
 +
            var scroll = $(window).scrollTop();
 +
            if (scroll > 0) {
 +
                if ($(window).width() >= 1090) {
 +
                    nav.addClass("scrolled");
 +
                    nav.removeClass("hover");
 +
                    $('#img-logo').css('transition', '.25s ease')
 +
                        .css('opacity', '0');
 +
                    $('#img-igemlogo').css('transition', '.25s ease')
 +
                        .css('opacity', '0');
 +
                }
 +
            } else {
 +
                nav.removeClass("scrolled");
 +
                $('#img-logo').css('transition', '.35s ease-in')
 +
                    .css('opacity', '1');
 +
                $('#img-igemlogo').css('transition', '.35s ease-in')
 +
                    .css('opacity', '1');
 +
            }
 +
        });
  
−
}
+
        $('body').css('display', 'block');
−
),
+
−
// Window width effect on top nav bar
+
−
$(document).ready(function() {
+
−
function checkWidth() {
+
−
if ($(window).width() < 980 || $('nav').hasClass('pushed')){
+
−
$('nav li').css('display', 'none');
+
−
$('#img-more').css('display','block');
+
−
$('nav ul').addClass("hover");
+
−
$('#img-logo').css('transition', '.35s ease-in');
+
−
$('#img-logo').css('opacity', '1');
+
−
$('#img-igemlogo').css('transition', '.35s ease-in');
+
−
$('#img-igemlogo').css('opacity', '1')
+
−
} else {
+
−
$('nav li').css('display', 'inline');
+
−
$('#img-more').css('display','none');
+
−
$('nav ul').removeClass("hover");
+
−
if ($(window).scrollTop() > 0) {
+
−
$('#img-igemlogo').css('transition', '.25s ease');
+
−
$('#img-igemlogo').css('opacity', '0');
+
−
$('#img-logo').css('transition', '.25s ease');
+
−
$('#img-logo').css('opacity', '0');
+
−
$('nav ul').addClass("scrolled");
+
−
}
+
−
}
+
−
}
+
−
            function checkBotNav() {
+
−
if ($(window).width() < 980){
+
−
                    $('#container').css('display', 'none');
+
−
                    $('#bot-navResized').css('display', 'block');
+
−
                    $('#bot-nav').css('height', '110px');
+
−
} else {
+
−
                    $('#container').css('display', 'block');
+
−
                    $('#bot-navResized').css('display', 'none');
+
−
                    $('#bot-nav').css('height', '75px');
+
−
}
+
−
}
+
−
// Execute on load
+
−
    checkWidth();
+
−
            checkBotNav();
+
−
    // Bind event listener
+
−
    $(window).resize(checkWidth);
+
−
    $(window).resize(checkBotNav);
+
−
});
+
−
// Resized nav bar effect when more icon is clicked
+
−
$('#img-more').click(function() {
+
−
$('#img-more').toggleClass('pushed');
+
−
$('#div-navResized').toggleClass('pushed');
+
−
$('nav').toggleClass('pushed');
+
−
$('nav img').toggleClass('pushed');
+
−
if ($(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false){
+
−
$('nav li').css('display', 'inline');
+
−
$('#img-more').css('display','none');
+
−
$('nav ul').removeClass("hover");
+
−
$('#img-igemlogo').css('transition', '.25s ease');
+
−
$('#img-igemlogo').css('opacity', '0');
+
−
$('#img-logo').css('transition', '.25s ease');
+
−
$('#img-logo').css('opacity', '0');
+
−
}}
+
−
});
+
−
// Scrolling animation for top nav bar
+
−
var nav = $('nav ul');
+
−
$(window).scroll(function() {
+
−
var scroll = $(window).scrollTop();
+
−
if (scroll > 0) { if ( $(window).width() >= 980) {
+
−
nav.addClass("scrolled");
+
−
nav.removeClass("hover");
+
−
$('#img-logo').css('transition', '.25s ease');
+
−
$('#img-logo').css('opacity', '0');
+
−
$('#img-igemlogo').css('transition', '.25s ease');
+
−
$('#img-igemlogo').css('opacity', '0');
+
−
}} else {
+
−
nav.removeClass("scrolled");
+
−
$('#img-logo').css('transition', '.35s ease-in');
+
−
$('#img-logo').css('opacity', '1');
+
−
$('#img-igemlogo').css('transition', '.35s ease-in');
+
−
$('#img-igemlogo').css('opacity', '1');
+
−
}
+
−
});
+
−
                 
+
−
                $(body).css('display','block');
+
 
</script>
 
</script>
−
    <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js">
 
−
    </script>
 
 
<script>
 
<script>
−
$('.circle').hover( //when hovering over any circle trigger script
+
        $('.circle').hover( //when hovering over any circle trigger script
−
function() {  
+
            function() {
−
$(this).css('background-color','black'); //makes the circle background black to darken img
+
                $(this).css('background-color', 'black'); //makes the circle background black to darken img
−
$(this).children().children('.insideText').css('opacity','100'); //makes inside text visible
+
                $(this).children().children('.insideText').css('opacity', '100'); //makes inside text visible
−
$(this).children().children('img').css('opacity','.4'); //decreases opacity of img to simulate darkening  
+
                $(this).children().children('img').css('opacity', '.4'); //decreases opacity of img to simulate darkening  
−
},  
+
            },
−
function() {  
+
            function() {
−
$(this).css('background-color','#FEFFFA'); //makes the circle background white to not show
+
                $(this).css('background-color', '#FEFFFA'); //makes the circle background white to not show
−
$(this).children().children('.insideText').css('opacity','0'); //makes inside text invisible
+
                $(this).children().children('.insideText').css('opacity', '0'); //makes inside text invisible
−
$(this).children().children('img').css('opacity','100'); //increase opacity of img to return to normal
+
                $(this).children().children('img').css('opacity', '100'); //increase opacity of img to return to normal
−
}
+
            }
−
)
+
        )
−
$('.insideText').hover(
+
        $('.insideText').hover(
−
function() {
+
            function() {
−
$(this).children('.h4').css('font-weight','400') //makes heading 'hok/sok' or 'side projects' bold when hovered over
+
                $(this).children('.h4').css('font-weight', '400') //makes heading 'hok/sok' or 'side projects' bold when hovered over
−
$(this).siblings('img').css('opacity','.4');}, //makes img darkened when hovering over the text
+
                $(this).siblings('img').css('opacity', '.4');
−
function() {
+
            }, //makes img darkened when hovering over the text
−
$(this).children('.h4').css('font-weight','200') //returns everything to normal
+
            function() {
−
}
+
                $(this).children('.h4').css('font-weight', '200') //returns everything to normal
−
)
+
            }
−
</script>
+
        )
 +
    </script>
 
</body>
 
</body>
−
+
 
 
</html>
 
</html>

Latest revision as of 21:44, 14 October 2016

</div>

</div> Projects

Projects

We set out to slow the pace of global warming by sequestering methane in the environment. Along the way we are engineering a DIY -80 C freezer to increase access to synthetic biology.