|
|
| (66 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | </div></div>
| |
| − | <html lang="en">
| |
| − | <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" />
| |
| − | <script>
| |
| − | $(body).css('display','none');
| |
| − | </script>
| |
| − | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
| |
| − | <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>Building with Biology</title>
| |
| − | </head>
| |
| − | <body>
| |
| − | <style>
| |
| − | #bars_item {
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | #top_title {
| |
| − | display: none;
| |
| − | line-height: inherit;
| |
| − | }
| |
| − |
| |
| − | #sideMenu {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Navbar and body setup */
| |
| − | body {
| |
| − | font-family: 'Lora', serif;
| |
| − | overflow-x: hidden;
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | /* Navbar */
| |
| − | nav {
| |
| − | opacity: 1.0;
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | line-height: 10px;
| |
| − | font-size: 20pt;
| |
| − | display: block;
| |
| − | background: #fff;
| |
| − | border-bottom: 1px solid black;
| |
| − | box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
| |
| − | border-bottom-left-radius: 5px;
| |
| − | border-bottom-right-radius: 5px;
| |
| − | z-index: 1;
| |
| − | margin-top: 18px;
| |
| − | }
| |
| − |
| |
| − | element.style {
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | font-family: 'Exo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | nav a:visited {
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | nav a:hover {
| |
| − | opacity: .7;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | nav ul {
| |
| − | list-style: none;
| |
| − | transition: all .5s ease;
| |
| − | text-align: right;
| |
| − | }
| |
| − |
| |
| − | nav li {
| |
| − | display: inline;
| |
| − | margin-right: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Nav bar when more icon is clicked */
| |
| − |
| |
| − | #div-navResized {
| |
| − | font-size: 20pt;
| |
| − | position: fixed;
| |
| − | text-align: center;
| |
| − | display: none;
| |
| − | width: 100%;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | margin-top: 200px;
| |
| − | z-index: 3;
| |
| − | }
| |
| − |
| |
| − | #div-navResized a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | font-family: 'Exo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | #div-navResized ul {
| |
| − | list-style: none;
| |
| − | margin-right: 40px;
| |
| − | margin-top: 0px;
| |
| − | }
| |
| − |
| |
| − | #div-navResized ul li {
| |
| − | margin-top: 4px;
| |
| − | }
| |
| − |
| |
| − | #div-title {
| |
| − | 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 */
| |
| − |
| |
| − | html {
| |
| − | background-color: rgba(0, 0, 0, 0.06);
| |
| − | }
| |
| − |
| |
| − | /* Start Page Specific CSS */
| |
| − |
| |
| − | /* Title */
| |
| − | h1, h1-2 {
| |
| − | font-size: 30pt;
| |
| − | position: absolute;
| |
| − | top: 377px;
| |
| − | left: 39px;
| |
| − | width: 100%;
| |
| − | border-bottom: none;
| |
| − | color: white;
| |
| − | font-family: 'Lora', serif;
| |
| − | }
| |
| − |
| |
| − | h1-2 span {
| |
| − | color: white;
| |
| − | padding-bottom: 2px;
| |
| − | padding-right: 10px;
| |
| − | padding-left: 10px;
| |
| − | letter-spacing: -1px;
| |
| − | background: rgb(0, 0, 0); /* fallback color */
| |
| − | background: rgba(0, 0, 0, 0.7);
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | max-width: 705px;
| |
| − | min-width: 705px;
| |
| − | background: rgb(0, 0, 0); /* fallback color */
| |
| − | background: rgba(0, 0, 0, 0.7);
| |
| − | padding-left: 10px;
| |
| − | padding-bottom: 22px;
| |
| − | }
| |
| − |
| |
| − | #h1 {
| |
| − | font-weight: normal !important;
| |
| − | }
| |
| − |
| |
| − | /* Content */
| |
| − |
| |
| − | #div-content img {
| |
| − | width: 457px;
| |
| − | height: 305px;
| |
| − | margin-left: 467px;
| |
| − | margin-top: -50px;
| |
| − | }
| |
| − |
| |
| − | #div-content p {
| |
| − | margin-left: 0px;
| |
| − | max-width: 500px;
| |
| − | font-size: 12pt;
| |
| − | line-height: 2;
| |
| − | font-weight: 400;
| |
| − | }
| |
| − |
| |
| − | table {
| |
| − | background: none;
| |
| − | border: none;
| |
| − | }
| |
| − |
| |
| − | #table-selector1 {
| |
| − | /* formats the table containing nav elements to be centered, addes space on top / bottom */
| |
| − | width: 100%;
| |
| − | margin-top: 100px;
| |
| − | margin-bottom: 30px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | max-width: 1200px;
| |
| − | }
| |
| − |
| |
| − | #table-selector1 th, #table-selector2 th {
| |
| − | /* makes each cell of nav evenly spaced */
| |
| − | text-align: center;
| |
| − | width: 500px;
| |
| − | }
| |
| − |
| |
| − | th p {
| |
| − | /* formats text inside table of navigational elements */
| |
| − | /* makes cursor emulate a link to show it's clickable */
| |
| − | font-weight: 400;
| |
| − | cursor: pointer;
| |
| − | padding: 5px 0px 15px 0px;
| |
| − | margin: 0 0 0 0;
| |
| − | }
| |
| − |
| |
| − | #table-selector1 th p {
| |
| − | font-size: 24pt;
| |
| − | font-family: 'Lora', serif;
| |
| − | }
| |
| − |
| |
| − | #table-selector2 th p {
| |
| − | font-size: 12pt;
| |
| − | }
| |
| − |
| |
| − | th p:hover {
| |
| − | /* makes links bold when hovered to show it is a link */
| |
| − | font-weight: 800;
| |
| − | }
| |
| − |
| |
| − | #table-selector1, #table-selector2 {
| |
| − | /* makes a single border between two cells rather than two */
| |
| − | border-collapse: collapse;
| |
| − | }
| |
| − |
| |
| − | #div-lowertable {
| |
| − | margin-top: -31px;
| |
| − | padding-right: 16px;
| |
| − | }
| |
| − |
| |
| − | #table-selector2 {
| |
| − | max-width: 750px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | padding-right: 16px;
| |
| − | }
| |
| − |
| |
| − | .profiles {
| |
| − | display: none;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | width: 1050px;
| |
| − | }
| |
| − |
| |
| − | #Info {
| |
| − | margin-top: 100px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-bottom: 50px;
| |
| − | width: 970px;
| |
| − | }
| |
| − |
| |
| − | #Info p {
| |
| − | font-size: 15pt;
| |
| − | line-height: 2;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | font-family: 'Raleway', sans-serif;
| |
| − | }
| |
| − |
| |
| − | /* Classes */
| |
| − |
| |
| − | .center {
| |
| − | margin-right: auto;
| |
| − | margin-left: auto !important;
| |
| − | width: 1175px;
| |
| − | margin-top: 50px;
| |
| − | }
| |
| − |
| |
| − | .pInfo {
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | .image {
| |
| − | position: relative;
| |
| − | width: 100%; /* for IE 6 */
| |
| − | }
| |
| − |
| |
| − | /* creates a solid gray border between elements of navigational element */
| |
| − | .borderRight {
| |
| − | border-right: 2px solid #A8A8A8;
| |
| − | border-bottom: 4px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .borderLeft {
| |
| − | border-left: 2px solid #A8A8A8;
| |
| − | border-bottom: 1px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .borderBoth {
| |
| − | border-left: 2px solid #A8A8A8;
| |
| − | border-right: 2px solid #A8A8A8;
| |
| − | border-bottom: 1px solid #A8A8A8;
| |
| − | }
| |
| − |
| |
| − | .description {
| |
| − | margin-top: 200px;
| |
| − | min-width: 970px;
| |
| − | }
| |
| − |
| |
| − | .border {
| |
| − | border-bottom: 1px black;
| |
| − | }
| |
| − |
| |
| − | .image {
| |
| − | position: relative;
| |
| − | width: 100%; /* for IE 6 */
| |
| − | }
| |
| − |
| |
| − | .pull-right {
| |
| − | float: right !important;
| |
| − | margin-left: -28px;
| |
| − | }
| |
| − |
| |
| − | .pull-left {
| |
| − | float: left !important;
| |
| − | }
| |
| − |
| |
| − | /* Pushed class actives */
| |
| − | #img-more.pushed {
| |
| − | box-shadow: inset 1px 1px 1px 2px rgba(0, 0, 0, .3);
| |
| − | }
| |
| − |
| |
| − | #div-navResized.pushed {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | #div-navResized.pushed a:hover {
| |
| − | text-decoration: none;
| |
| − | opacity: .7;
| |
| − | }
| |
| − |
| |
| − | nav.pushed {
| |
| − | height: 100%;
| |
| − | }
| |
| − |
| |
| − | body.pushed {
| |
| − | overflow-y: hidden;
| |
| − | }
| |
| − |
| |
| − | nav img.pushed {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Hides nav bar when scrolling */
| |
| − | .scrolled {
| |
| − | font-size: 10pt;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − |
| |
| − | /* animation when mouse is over Navbar */
| |
| − | .hover {
| |
| − | font-size: 20pt;
| |
| − | line-height: 40px;
| |
| − | }
| |
| − |
| |
| − | /* Images */
| |
| − |
| |
| − | /* Logo */
| |
| − | #img-logo {
| |
| − | width: 150px;
| |
| − | float: left;
| |
| − | position: fixed;
| |
| − | margin-top: 4px;
| |
| − | margin-left: 65px;
| |
| − | opacity: 1.0;
| |
| − | }
| |
| − |
| |
| − | /* iGEM logo */
| |
| − | #img-igemlogo {
| |
| − | width: 60px;
| |
| − | float: right;
| |
| − | position: fixed;
| |
| − | margin-top: 1px;
| |
| − | opacity: 1.0;
| |
| − | }
| |
| − |
| |
| − | /* More Icon */
| |
| − | #img-more {
| |
| − | position: fixed;
| |
| − | display: none;
| |
| − | width: 50px;
| |
| − | height: 50px;
| |
| − | margin-right: 0px;
| |
| − | right: 15px;
| |
| − | z-index: 2;
| |
| − | margin-top: -11px;
| |
| − | }
| |
| − |
| |
| − | #img-UMD {
| |
| − | z-index: -999;
| |
| − | margin-left: -8px;
| |
| − | margin-top: -12px;
| |
| − | height: 600px;
| |
| − | }
| |
| − |
| |
| − | /* Logos when more button is clicked */
| |
| − |
| |
| − | #img-logoResized {
| |
| − | width: 200px;
| |
| − | display: block;
| |
| − | margin-right: auto;
| |
| − | margin-left: auto;
| |
| − | margin-top: -165px;
| |
| − | padding-right: 40px;
| |
| − | }
| |
| − |
| |
| − | .centered {
| |
| − | margin-left:auto;
| |
| − | margin-right:auto;
| |
| − | width: 1200px;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | </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-title" class="image">
| |
| − | <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/50/T--UMaryland--portdiscover.jpg" id="img-UMD">
| |
| − | </div>
| |
| − | <h1 id="h1"><span>Building with Biology: Port Discovery </span> </h1>
| |
| − | <h1-2><br/><br/><br/><br/><span>July 30th, 2016</span></h1-2>
| |
| − | </div>
| |
| − | <div class="centered">
| |
| − | <div id="Info" style="text-align: center">
| |
| − | <p class="pInfo"> We volunteered at the Building with Biology Event held at Port Discovery in Baltimore, Md to raise awareness about synthetic biology among children 8 and up. We manned six tables with different activities involving synthetic biology, which are described in more depth below. </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <table id="table-selector1"> <!-- Table of navigational links -->
| |
| − | <thead>
| |
| − | <!-- .border classes signify where border needs to be drawn -->
| |
| − | <!-- navigator class trigger javascript on that element -->
| |
| − | <!-- data-select attribute sends to script which element -->
| |
| − | <!-- was clicked -->
| |
| − | <th class="borderRight navigator" id="th-building" data-select="building"><p>Building with Biology Activities</p></th>
| |
| − | <th class="borderLeft navigator" id="th-ours" data-select="ours"><p>Our Activities</p></th>
| |
| − | </thead>
| |
| − | </table>
| |
| − | <div id = "div-lowertable">
| |
| − | <div id="div-building">
| |
| − | <table id="table-selector2"> <!-- Table of navigational links -->
| |
| − | <thead>
| |
| − | <th class="borderRight belowNav" id="th-super" data-select="super"><p>Super Organisms!</p></th>
| |
| − | <th class="borderBoth belowNav" id="th-parts" data-select="parts"><p>Kit of Parts</p></th>
| |
| − | <th class="borderBoth belowNav" id="th-bistro" data-select="bistro"><p>Bio Bistro</p></th>
| |
| − | <th class="borderLeft belowNav" id="th-tech" data-select="tech"><p>Tech Tokens</p></th>
| |
| − | </thead>
| |
| − | </table>
| |
| − | <div id="div-content">
| |
| − | <div id="div-super" class="center">
| |
| − | <p> superhero station </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super"/img>
| |
| − | </div>
| |
| − | <div id="div-parts" class="profiles center">
| |
| − | <p> <strong> Goal: </strong> Understand the concept of standardized parts and potential uses of a engineered organism </p>
| |
| − | <br>
| |
| − | <p> Activity: </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts"/img>
| |
| − | </div>
| |
| − | <div id="div-bistro" class="profiles center">
| |
| − | <p> bio bistro </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img>
| |
| − | </div>
| |
| − | <div id="div-tech" class="profiles center">
| |
| − | <p> tech tokens </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/8/88/T--UMaryland--techtokens.jpg" id="img-tech"/img>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div id="div-ours" style="display: none">
| |
| − | <table id="table-selector2"> <!-- Table of navigational links -->
| |
| − | <thead>
| |
| − | <th class="borderRight belowNav" id="th-bacteria" data-select="bacteria"><p>Build Your Own Bacteria</p></th>
| |
| − | <th class="borderBoth belowNav" id="th-broth" data-select="broth"><p>Make Your Own LB Broth</p></th>
| |
| − | <th class="borderLeft belowNav" id="th-color" data-select="color"><p>Colorful Creations</p></th>
| |
| − | </thead>
| |
| − | </table>
| |
| − | <div id="div-content">
| |
| − | <div id="div-bacteria" class="profiles center">
| |
| − | <p> build your own bacteria </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img>
| |
| − | </div>
| |
| − | <div id="div-broth" class="profiles center">
| |
| − | <p> lemonade</p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img>
| |
| − | </div>
| |
| − | <div id="div-color" class="profiles center">
| |
| − | <p>food color </p>
| |
| − | <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <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>
| |
| − | <!-- For nav bar scrolling + hovering + window resize effects-->
| |
| − | <script>
| |
| − | // Animation over top nav bar when mouse hovers
| |
| − | $('nav').mouseover(
| |
| − | function () {
| |
| − | $('#img-logo').css('transition', '.35s ease-in');
| |
| − | $('#img-logo').css('opacity', '1');
| |
| − | $('#img-igemlogo').css('transition', '.35s ease-in');
| |
| − | $('#img-igemlogo').css('opacity', '1');
| |
| − | $('nav ul').addClass("hover");
| |
| − | }
| |
| − | ),
| |
| − | $('nav').mouseout(
| |
| − | function () {
| |
| − | var scroll = $(window).scrollTop();
| |
| − | if (scroll > 0) {if ( $(window).width() >= 980) { var pushed = $('body').hasClass('pushed'); if (pushed == false) {
| |
| − | $('#img-logo').css('transition', '.25s ease');
| |
| − | $('#img-logo').css('opacity', '0');
| |
| − | $('#img-igemlogo').css('transition', '.25s ease');
| |
| − | $('#img-igemlogo').css('opacity', '0');
| |
| − | $('nav ul').removeClass("hover");
| |
| − | $('nav').css('transition', '.5s ease');
| |
| − | }}}
| |
| − |
| |
| − | }
| |
| − | ),
| |
| − | // 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>
| |
| − | var current = 'super';
| |
| − | var currentTop = 'building';
| |
| − | var lastBuildAct = 'super';
| |
| − | var lastAct = 'bacteria';
| |
| − | $('.navigator').click( function() { // when any element with .class is clicked, trigger function
| |
| − | $('.navigator').css('border-bottom','1px solid #A8A8A8'); // make all navigational element shave no bottom border
| |
| − | $(this).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | if (selected != currentTop) { // only change display / trigger animation if clicking different nav
| |
| − | $('#div-' + currentTop).css('display','none'); // hides all text
| |
| − | $('#div-' + selected).css('margin-left', '60px') // slighly shifts right all text to set up for animation
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
| |
| − | if (selected == 'building') {
| |
| − | $('#div-' + lastBuildAct).css('display','block');
| |
| − | $('#th-' + lastBuildAct).css('border-bottom', '4px solid #A8A8A8');
| |
| − | } else {
| |
| − | $('#div-' + lastAct).css('display','block');
| |
| − | $('#th-' + lastAct).css('border-bottom', '4px solid #A8A8A8');
| |
| − | }
| |
| − | currentTop = selected; // sets the current display
| |
| − | }
| |
| − | })
| |
| − | $('.belowNav').click( function() { // when any element with .class is clicked, trigger function
| |
| − | $('.belowNav').css('border-bottom','1px solid #A8A8A8'); // make all navigational element shave no bottom border
| |
| − | $(this).css('border-bottom', '4px solid #A8A8A8'); // the clicked navigational element given border
| |
| − | var selected = $(this).attr('data-select'); // grabs the name of the navigational element clicked
| |
| − | if (selected != current) { // only change display / trigger animation if clicking different nav
| |
| − | $('#div-' + current).css('display','none'); // hides all text
| |
| − | if (currentTop == 'building') {
| |
| − | $('#div-' + lastBuildAct).css('display','none');
| |
| − | } else {
| |
| − | $('#div-' + lastAct).css('display','none');
| |
| − | }
| |
| − | $('#div-' + selected).css('margin-left', '60px') // slighly shifts right all text to set up for animation
| |
| − | $('#div-' + selected).css('display','block'); // the div containing the text that is selected is displayed
| |
| − | $('#div-' + selected).animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left
| |
| − | current = selected; // sets the current display
| |
| − | if (currentTop == 'building') {
| |
| − | lastBuildAct = current;
| |
| − | } else {
| |
| − | lastAct = current;
| |
| − | }
| |
| − | }
| |
| − | })
| |
| − | </script>
| |
| − | <script src="http://pixelcog.github.io/parallax.js/js/parallax.min.js">
| |
| − | </script>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
