|
|
| (46 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: 100px;
| |
| − | margin-top: 50px;
| |
| − | display: block;
| |
| − | color: black;
| |
| − | font-size: 12pt;
| |
| − | font-family: 'Lora', serif;
| |
| − | z-index: -1;
| |
| − | }
| |
| − |
| |
| − | .pull-right a {
| |
| − | padding-right: 0px !important;
| |
| − | }
| |
| − |
| |
| − | .copyright {
| |
| − | text-align: center;
| |
| − | width: 100%;
| |
| − | max-width: 1200px;
| |
| − | min-width: 600px;
| |
| − | height: 30px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | }
| |
| − |
| |
| − | .pull-left {
| |
| − | margin-top: -3px;
| |
| − | width: 83px;
| |
| − | margin-left: 30px;
| |
| − | margin-right: auto;
| |
| − | display: inline;
| |
| − | height: 34px;
| |
| − | }
| |
| − |
| |
| − | .pull-left p {
| |
| − | margin: 0 0 0 0;
| |
| − | padding: 0 0 0 0 !important;
| |
| − | line-height: 0px !important;
| |
| − | }
| |
| − |
| |
| − | .pull-right {
| |
| − | width: 70px;
| |
| − | margin-right: 30px;
| |
| − | margin-left: auto;
| |
| − | }
| |
| − |
| |
| − | #copyright {
| |
| − | text-align: center;
| |
| − | left:auto;
| |
| − | right: auto;
| |
| − | width: 100%;
| |
| − | padding: 0 0 0 0;
| |
| − | margin-top: -27px;
| |
| − | }
| |
| − |
| |
| − | #container {
| |
| − | min-width: 600px;
| |
| − | max-width: 1200px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-top: 25px;
| |
| − | }
| |
| − |
| |
| − | #container img {
| |
| − | height: 20px;
| |
| − | width: 20px;
| |
| − | -webkit-filter: grayscale(100%);
| |
| − | filter: grayscale(100%);
| |
| − | }
| |
| − |
| |
| − | #bot-nav img:hover {
| |
| − | -webkit-filter: grayscale(0%);
| |
| − | filter: grayscale(0%);
| |
| − | }
| |
| − |
| |
| − | #container li {
| |
| − | display: inline;
| |
| − | list-style:none;
| |
| − | }
| |
| − |
| |
| − | #copyright {
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | .pull-left {
| |
| − | float:left;
| |
| − | }
| |
| − |
| |
| − | #bot-nav a {
| |
| − | text-decoration: none;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − | #contact: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: 300px;
| |
| − | left: 75px;
| |
| − | 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-right: 90px;
| |
| − | }
| |
| − |
| |
| − | #div-content p {
| |
| − | margin-left: 40px;
| |
| − | 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;
| |
| − | margin-top: 50px;
| |
| − | }
| |
| − |
| |
| − | #Info {
| |
| − | margin-top: 100px;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | margin-bottom: 50px;
| |
| − | width: 970px;
| |
| − | }
| |
| − |
| |
| − | #Info p {
| |
| − | font-size: 15pt;
| |
| − | line-height: 2;
| |
| − | }
| |
| − |
| |
| − | #Info p, #div-lowertable 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 */
| |
| − | }
| |
| − |
| |
| − | /* 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;
| |
| − | }
| |
| − |
| |
| − | /* tell the container's children to float left: */
| |
| − | .float-my-children > * {
| |
| − | float:center;
| |
| − | margin-right:5px;
| |
| − | }
| |
| − |
| |
| − | /* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */
| |
| − |
| |
| − | .clearfix {
| |
| − | *zoom:1 /* for IE */
| |
| − | }
| |
| − |
| |
| − | .clearfix:before,
| |
| − | .clearfix:after {
| |
| − | content: " ";
| |
| − | display: table;
| |
| − | }
| |
| − |
| |
| − | .clearfix:after {
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | </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="profiles center clearfix float-my-children" style="display:block">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super"/img>
| |
| − | <div><p> superhero station </p></div>
| |
| − | </div>
| |
| − | <div id="div-parts" class="profiles center clearfix float-my-children">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/1/1f/T--UMaryland--kitofparts.jpg" id="img-parts"/img>
| |
| − | <div> <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They were wooden model made of poles and color-coded parts that fit on the poles. Each color had a different function like red for production and blue for sensing. A visitor would pick a challenge card with an area of research on it ranging from making synthetic blood to treating malaria. On the back of the card was a description of a solution to the chosen problem using the parts given. </p> </div>
| |
| − | </div>
| |
| − | <div id="div-bistro" class="profiles center">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img>
| |
| − | <div><p> bio bistro </p></div>
| |
| − | </div>
| |
| − | <div id="div-tech" class="profiles center">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/8/88/T--UMaryland--techtokens.jpg" id="img-tech"/img>
| |
| − | <div><p> Visitors would be introduced to a wide range of applications for synthetic biology to start a conversation among the visitors on the level of importance of each application. Each visitor at the table was given a stack of colored coins to represent their opinion. They would place all their coins on the application(s) most important to them and then we would all discuss their choices and reasoning. An additional activity was to give each person at the table a character card with occupations ranging from president of the U.S. to Canadian college student. They would repeat the process of placing coins, but this time in the mindset of the occupation they were given. </p></div>
| |
| − | </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">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img>
| |
| − | <div><p> build your own bacteria </p></div>
| |
| − | </div>
| |
| − | <div id="div-broth" class="profiles center">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img>
| |
| − | <div><p> lemonade</p></div>
| |
| − | </div>
| |
| − | <div id="div-color" class="profiles center">
| |
| − | <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img>
| |
| − | <div><p>food color </p></div>
| |
| − | </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>
| |
| − | <!-- 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");
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | // 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() >= 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>
| |
