Difference between revisions of "Team:UMaryland/projects"

 
(80 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.5em;
+
            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: 15px;
+
−
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')
−
+
                        .css('opacity', '1');
−
#div-pic {
+
                    $('nav ul').addClass("hover");
−
/* sets the background image above the main text */
+
                 }
−
padding-top: 10px;
+
            ),
−
padding-bottom: 40px;
+
            $('nav').mouseout(
−
min-width: 1200px;
+
                function() {
−
max-width: 1200px;
+
                    var scroll = $(window).scrollTop();
−
margin-left: auto;
+
                    if (scroll > 0) {
−
margin-right: auto;
+
                        if ($(window).width() >= 1090) {
−
margin-top: 20px;
+
                            var pushed = $('body').hasClass('pushed');
−
overflow: hidden;
+
                            if (pushed == false) {
−
}
+
                                $('#img-logo').css('transition', '.25s ease')
−
+
                                    .css('opacity', '0');
−
#video {
+
                                $('#img-igemlogo').css('transition', '.25s ease')
−
position: absolute;
+
                                    .css('opacity', '0');
−
z-index: -999;
+
                                $('nav ul').removeClass("hover");
−
}
+
                                $('nav').css('transition', '.5s ease');
−
</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/2/2c/T--UMaryland--projects.webm" type="video/webm">
+
−
</video>
+
−
<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/methane-->">
+
−
<!-- Makes the entire circle clickable -->
+
−
<div class="insideText"><p class="h4">Methane Sequestration</p><p class="h5">coming soon!</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/freezer-->">
+
−
<div class="insideText"><p class="h4">DIY -80 C Freezer</p><p class="h5">coming soon!</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/interlab-->">
+
−
<div class="insideText"><p class="h4" >Interlab Study</p><p class="h5" >coming soon!</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 -->
+
−
</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.