Difference between revisions of "Team:UMaryland/Engagement"
| Line 1: | Line 1: | ||
| − | </div></div> | + | </div> |
| + | </div> | ||
<html lang="en"> | <html lang="en"> | ||
| + | |||
<head> | <head> | ||
| − | <script> | + | <script> |
| − | $(body).css('display','none'); | + | $(body).css('display', 'none'); |
</script> | </script> | ||
| − | + | <script src="https://static.igem.org/mediawiki/2016/9/95/T--UMaryland--html5shiv.txt"></script> | |
<script src="https://static.igem.org/mediawiki/2016/c/ce/T--UMaryland--parallax.txt"></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> | |
| − | + | <script src="https://static.igem.org/mediawiki/2016/d/d3/T--UMaryland--slick.txt" type="text/javascript"></script> | |
| − | + | <link href='https://static.igem.org/mediawiki/2016/b/bd/T--UMaryland--lightGallery.txt' rel='stylesheet' type='text/css'> | |
| − | + | <link href='https://static.igem.org/mediawiki/2016/0/0b/T--UMaryland--slickcss.txt' rel='stylesheet' type='text/css'> | |
| − | + | <link href="https://static.igem.org/mediawiki/2016/1/13/T--UMaryland--fonts.txt" rel="stylesheet" type='text/css'> | |
| − | + | <title>Engagement</title> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</head> | </head> | ||
| − | |||
| − | + | <body> | |
| − | + | <style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <style> | + | |
#bars_item { | #bars_item { | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
#sideMenu { | #sideMenu { | ||
display: none; | display: none; | ||
| − | } | + | } |
| − | #bodyContent, #content, html, body, #globalWrapper, #iGEM, #overruled { | + | #bodyContent, |
| + | #content, | ||
| + | html, | ||
| + | body, | ||
| + | #globalWrapper, | ||
| + | #iGEM, | ||
| + | #overruled { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
| Line 68: | Line 39: | ||
background: transparent; | background: transparent; | ||
} | } | ||
| − | |||
#top_title { | #top_title { | ||
display: none; | display: none; | ||
line-height: inherit; | line-height: inherit; | ||
} | } | ||
| − | |||
#sideMenu { | #sideMenu { | ||
display: none; | 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; | ||
} | } | ||
| − | |||
#content { | #content { | ||
margin-top: 0px; | margin-top: 0px; | ||
} | } | ||
| − | |||
/* Navbar */ | /* Navbar */ | ||
| + | |||
nav { | nav { | ||
opacity: 1.0; | opacity: 1.0; | ||
| Line 99: | Line 67: | ||
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 105: | Line 73: | ||
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 116: | Line 82: | ||
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 a:focus { | nav a:focus { | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
| − | |||
/* 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 154: | Line 114: | ||
z-index: 3; | z-index: 3; | ||
} | } | ||
| − | |||
#div-navResized a { | #div-navResized a { | ||
text-decoration: none; | text-decoration: none; | ||
| Line 160: | Line 119: | ||
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 */ | /* Permanent bottom bar */ | ||
| + | |||
#bot-nav { | #bot-nav { | ||
| − | background-color: #f9f9f9; | + | background-color: #f9f9f9; |
border-top: 1px solid #f5f5f5; | border-top: 1px solid #f5f5f5; | ||
position: absolute; | position: absolute; | ||
| Line 189: | Line 145: | ||
z-index: -1; | z-index: -1; | ||
} | } | ||
| − | |||
#social-media { | #social-media { | ||
width: 100%; | width: 100%; | ||
| − | margin:0 0 0 0; | + | margin: 0 0 0 0; |
} | } | ||
| − | |||
.pull-right a { | .pull-right a { | ||
padding-right: 0px !important; | padding-right: 0px !important; | ||
} | } | ||
| − | |||
.copyright { | .copyright { | ||
text-align: center; | text-align: center; | ||
| Line 207: | Line 160: | ||
margin-right: auto; | margin-right: auto; | ||
} | } | ||
| − | |||
.pull-left { | .pull-left { | ||
margin-top: -3px; | margin-top: -3px; | ||
| Line 216: | Line 168: | ||
height: 34px; | height: 34px; | ||
} | } | ||
| − | |||
.pull-left p { | .pull-left p { | ||
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
| Line 222: | Line 173: | ||
line-height: 0px !important; | line-height: 0px !important; | ||
} | } | ||
| − | |||
.pull-right { | .pull-right { | ||
width: 83px; | width: 83px; | ||
| Line 228: | Line 178: | ||
margin-left: auto; | margin-left: auto; | ||
} | } | ||
| − | |||
#copyright { | #copyright { | ||
text-align: center; | text-align: center; | ||
| − | left:auto; | + | left: auto; |
right: auto; | right: auto; | ||
width: 100%; | width: 100%; | ||
padding: 0 0 0 0; | padding: 0 0 0 0; | ||
margin-top: 0px; | margin-top: 0px; | ||
| − | float:left; | + | float: left; |
} | } | ||
| − | |||
#container { | #container { | ||
max-width: 1200px; | max-width: 1200px; | ||
| Line 245: | Line 193: | ||
margin-top: 40px; | margin-top: 40px; | ||
} | } | ||
| − | |||
#container img { | #container img { | ||
height: 20px; | height: 20px; | ||
| Line 252: | Line 199: | ||
filter: grayscale(100%); | filter: grayscale(100%); | ||
} | } | ||
| − | |||
#bot-nav img:hover { | #bot-nav img:hover { | ||
-webkit-filter: grayscale(0%); | -webkit-filter: grayscale(0%); | ||
filter: grayscale(0%); | filter: grayscale(0%); | ||
} | } | ||
| − | |||
#container li { | #container li { | ||
display: inline; | display: inline; | ||
| − | list-style:none; | + | list-style: none; |
padding-right: 25px; | padding-right: 25px; | ||
} | } | ||
| − | |||
| − | |||
.pull-left { | .pull-left { | ||
| − | float:left; | + | float: left; |
} | } | ||
| − | |||
#bot-nav a { | #bot-nav a { | ||
text-decoration: none; | text-decoration: none; | ||
color: black; | color: black; | ||
} | } | ||
| − | |||
#contact:hover { | #contact:hover { | ||
text-shadow: .1px .1px black; | 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); | ||
} | } | ||
| − | |||
/* Start Page Specific CSS */ | /* Start Page Specific CSS */ | ||
| − | |||
/* Title */ | /* Title */ | ||
| − | h1, h4 { | + | |
| − | position: absolute; | + | h1, |
| + | h4 { | ||
| + | position: absolute; | ||
top: 372px; | top: 372px; | ||
left: 117px; | left: 117px; | ||
| Line 299: | Line 238: | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
| − | |||
h1 { | h1 { | ||
| − | background: rgb(0, 0, 0); /* fallback color */ | + | background: rgb(0, 0, 0); |
| + | /* fallback color */ | ||
| + | |||
background: rgba(0, 0, 0, 0.7); | background: rgba(0, 0, 0, 0.7); | ||
padding-left: 10px; | padding-left: 10px; | ||
| − | padding-bottom: 14px; | + | padding-bottom: 14px; |
} | } | ||
| − | + | h2, | |
| − | h2, h3 { | + | h3 { |
| − | position: absolute; | + | position: absolute; |
top: 281px; | top: 281px; | ||
left: 117px; | left: 117px; | ||
| Line 319: | Line 259: | ||
overflow: visible; | overflow: visible; | ||
} | } | ||
| − | + | h3 span { | |
| − | h3 span { | + | color: white; |
| − | color: white; | + | |
padding-bottom: 4px; | padding-bottom: 4px; | ||
padding-right: 10px; | padding-right: 10px; | ||
padding-left: 10px; | padding-left: 10px; | ||
padding-top: 1px; | padding-top: 1px; | ||
| − | letter-spacing: -1px; | + | letter-spacing: -1px; |
| − | background: rgb(0, 0, 0); /* fallback color */ | + | background: rgb(0, 0, 0); |
| + | /* fallback color */ | ||
| + | |||
background: rgba(0, 0, 0, 0.7); | background: rgba(0, 0, 0, 0.7); | ||
} | } | ||
| − | + | h4 span { | |
| − | h4 span { | + | color: white; |
| − | color: white; | + | |
padding-bottom: 4px; | padding-bottom: 4px; | ||
padding-right: 10px; | padding-right: 10px; | ||
padding-left: 10px; | padding-left: 10px; | ||
padding-top: 6px; | padding-top: 6px; | ||
| − | letter-spacing: -1px; | + | letter-spacing: -1px; |
| − | background: rgb(0, 0, 0); /* fallback color */ | + | background: rgb(0, 0, 0); |
| + | /* fallback color */ | ||
| + | |||
background: rgba(0, 0, 0, 0.7); | background: rgba(0, 0, 0, 0.7); | ||
} | } | ||
| − | |||
h2 { | h2 { | ||
max-width: 759px; | max-width: 759px; | ||
min-width: 759px; | min-width: 759px; | ||
| − | background: rgb(0, 0, 0); /* fallback color */ | + | background: rgb(0, 0, 0); |
| + | /* fallback color */ | ||
| + | |||
background: rgba(0, 0, 0, 0.7); | background: rgba(0, 0, 0, 0.7); | ||
padding-left: 10px; | padding-left: 10px; | ||
| − | padding-bottom: 22px; | + | padding-bottom: 22px; |
} | } | ||
| − | |||
#h1 { | #h1 { | ||
width: 250px; | width: 250px; | ||
font-size: 30pt; | font-size: 30pt; | ||
} | } | ||
| − | |||
#h2 { | #h2 { | ||
max-width: 702px; | max-width: 702px; | ||
| Line 361: | Line 302: | ||
font-size: 30pt; | font-size: 30pt; | ||
} | } | ||
| − | + | #h25 { | |
max-width: 420px; | max-width: 420px; | ||
min-width: 420px; | min-width: 420px; | ||
font-size: 30pt; | font-size: 30pt; | ||
} | } | ||
| − | |||
h4 { | h4 { | ||
font-size: 24pt; | font-size: 24pt; | ||
} | } | ||
| − | |||
h3 { | h3 { | ||
font-size: 24pt; | font-size: 24pt; | ||
margin-top: -1px; | margin-top: -1px; | ||
} | } | ||
| − | + | /* Content */ | |
| − | /* Content */ | + | |
| − | + | ||
.div-content img { | .div-content img { | ||
width: 457px; | width: 457px; | ||
height: 305px; | height: 305px; | ||
} | } | ||
| − | |||
.div-content p { | .div-content p { | ||
margin-left: 40px; | margin-left: 40px; | ||
| Line 391: | Line 328: | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | |||
table { | table { | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
} | } | ||
| − | |||
#table-selector1 { | #table-selector1 { | ||
/* formats the table containing nav elements to be centered, addes space on top / bottom */ | /* formats the table containing nav elements to be centered, addes space on top / bottom */ | ||
| + | |||
margin-top: 100px; | margin-top: 100px; | ||
margin-bottom: 30px; | margin-bottom: 30px; | ||
} | } | ||
| − | + | #table-selector1 th, | |
| − | #table-selector1 th, #table-selector2 th { | + | #table-selector2 th { |
/* makes each cell of nav evenly spaced */ | /* makes each cell of nav evenly spaced */ | ||
| − | text-align: center; | + | |
| + | text-align: center; | ||
width: 500px; | width: 500px; | ||
| − | + | height: 40px; | |
} | } | ||
| − | |||
th p { | th p { | ||
/* formats text inside table of navigational elements */ | /* formats text inside table of navigational elements */ | ||
/* makes cursor emulate a link to show it's clickable */ | /* makes cursor emulate a link to show it's clickable */ | ||
| + | |||
font-weight: 400; | font-weight: 400; | ||
cursor: pointer; | cursor: pointer; | ||
margin: 0 0 0 0; | margin: 0 0 0 0; | ||
} | } | ||
| − | |||
#table-selector1 th p { | #table-selector1 th p { | ||
font-size: 24pt; | font-size: 24pt; | ||
| Line 423: | Line 359: | ||
padding: 5px 0px 15px 0px; | padding: 5px 0px 15px 0px; | ||
} | } | ||
| − | |||
#table-selector2 th p { | #table-selector2 th p { | ||
font-size: 12pt; | font-size: 12pt; | ||
padding: 5px 0px 5px 0px; | padding: 5px 0px 5px 0px; | ||
} | } | ||
| − | |||
th p:hover { | th p:hover { | ||
/* makes links bold when hovered to show it is a link */ | /* makes links bold when hovered to show it is a link */ | ||
| + | |||
font-weight: 800; | font-weight: 800; | ||
} | } | ||
| − | + | #table-selector1, | |
| − | #table-selector1, #table-selector2 { | + | #table-selector2 { |
width: 1028px; | width: 1028px; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
/* makes a single border between two cells rather than two */ | /* makes a single border between two cells rather than two */ | ||
| + | |||
border-collapse: collapse; | border-collapse: collapse; | ||
} | } | ||
| − | |||
#div-lowertable { | #div-lowertable { | ||
margin-top: -31px; | margin-top: -31px; | ||
| − | + | min-height: 500px; | |
| − | + | margin-bottom: 30px; | |
} | } | ||
| − | |||
.profiles { | .profiles { | ||
display: none; | display: none; | ||
| Line 455: | Line 389: | ||
margin-left: auto; | margin-left: auto; | ||
} | } | ||
| − | |||
#Info { | #Info { | ||
margin-top: 100px; | margin-top: 100px; | ||
| Line 463: | Line 396: | ||
width: 970px; | width: 970px; | ||
} | } | ||
| − | |||
#Info p { | #Info p { | ||
font-size: 15pt; | font-size: 15pt; | ||
line-height: 2; | line-height: 2; | ||
} | } | ||
| − | + | #Info p, | |
| − | #Info p, #table-selector2 p { | + | #table-selector2 p { |
font-family: 'Raleway', sans-serif; | font-family: 'Raleway', sans-serif; | ||
text-align: center; | text-align: center; | ||
} | } | ||
| − | |||
#th-building { | #th-building { | ||
padding-right: 13px; | padding-right: 13px; | ||
} | } | ||
| − | |||
/* Classes */ | /* Classes */ | ||
| − | + | ||
.pInfo { | .pInfo { | ||
text-align: left; | text-align: left; | ||
} | } | ||
| − | + | .image { | |
| − | .image { | + | position: relative; |
| − | + | width: 100%; | |
| − | + | /* for IE 6 */ | |
} | } | ||
| − | |||
/* creates a solid gray border between elements of navigational element */ | /* creates a solid gray border between elements of navigational element */ | ||
| + | |||
.borderRight { | .borderRight { | ||
border-right: 2px solid #A8A8A8; | border-right: 2px solid #A8A8A8; | ||
border-bottom: 4px solid #A8A8A8; | border-bottom: 4px solid #A8A8A8; | ||
} | } | ||
| − | |||
.borderLeft { | .borderLeft { | ||
border-left: 2px solid #A8A8A8; | border-left: 2px solid #A8A8A8; | ||
border-bottom: 1px solid #A8A8A8; | border-bottom: 1px solid #A8A8A8; | ||
} | } | ||
| − | |||
.borderBoth { | .borderBoth { | ||
border-left: 2px solid #A8A8A8; | border-left: 2px solid #A8A8A8; | ||
| Line 505: | Line 433: | ||
border-bottom: 1px solid #A8A8A8; | border-bottom: 1px solid #A8A8A8; | ||
} | } | ||
| − | |||
.description { | .description { | ||
margin-top: 200px; | margin-top: 200px; | ||
min-width: 970px; | min-width: 970px; | ||
} | } | ||
| − | |||
.border { | .border { | ||
border-bottom: 1px black; | border-bottom: 1px black; | ||
} | } | ||
| − | |||
.margin { | .margin { | ||
min-width: 1180px; | min-width: 1180px; | ||
margin-right: auto; | margin-right: auto; | ||
margin-left: auto; | margin-left: auto; | ||
| − | padding-left: 5px | + | padding-left: 5px |
} | } | ||
| − | |||
/* 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 { | ||
text-decoration: none; | text-decoration: none; | ||
opacity: .7; | 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; | ||
} | } | ||
| − | |||
/* Images */ | /* Images */ | ||
| − | |||
/* Logo */ | /* Logo */ | ||
| + | |||
#img-logo { | #img-logo { | ||
float: left; | float: left; | ||
| Line 570: | Line 489: | ||
opacity: 1.0; | opacity: 1.0; | ||
} | } | ||
| − | |||
/* iGEM logo */ | /* iGEM logo */ | ||
| + | |||
#img-igemlogo { | #img-igemlogo { | ||
width: 60px; | width: 60px; | ||
| Line 579: | Line 498: | ||
opacity: 1.0; | opacity: 1.0; | ||
} | } | ||
| − | |||
/* More Icon */ | /* More Icon */ | ||
| + | |||
#img-more { | #img-more { | ||
position: fixed; | position: fixed; | ||
| Line 591: | Line 510: | ||
margin-top: -11px; | margin-top: -11px; | ||
} | } | ||
| − | + | #img-education, | |
| − | #img-education, #img-portdiscovery { | + | #img-portdiscovery { |
z-index: -999; | z-index: -999; | ||
height: 600px; | height: 600px; | ||
} | } | ||
| − | |||
/* Logos when more button is clicked */ | /* Logos when more button is clicked */ | ||
| − | + | ||
#img-logoResized { | #img-logoResized { | ||
width: 200px; | width: 200px; | ||
| Line 607: | Line 525: | ||
padding-right: 40px; | padding-right: 40px; | ||
} | } | ||
| − | |||
.centered { | .centered { | ||
| − | margin-left:auto; | + | margin-left: auto; |
| − | margin-right:auto; | + | margin-right: auto; |
| − | + | width: 1200px; | |
text-align: left; | text-align: left; | ||
} | } | ||
| − | |||
/* tell the container's children to float left: */ | /* tell the container's children to float left: */ | ||
| + | |||
.float-my-children > * { | .float-my-children > * { | ||
| − | float:right; | + | float: right; |
| − | margin-right:70px; | + | margin-right: 70px; |
} | } | ||
| − | |||
/* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */ | /* this is called a clearfix. it makes sure that the container's children floats are cleared, without using extra markup */ | ||
| − | + | ||
.clearfix { | .clearfix { | ||
| − | *zoom:1 /* for IE */ | + | *zoom: 1 |
| + | /* for IE */ | ||
} | } | ||
| − | |||
.clearfix:before, | .clearfix:before, | ||
.clearfix:after { | .clearfix:after { | ||
| Line 632: | Line 548: | ||
display: table; | display: table; | ||
} | } | ||
| − | |||
.clearfix:after { | .clearfix:after { | ||
clear: both; | clear: both; | ||
} | } | ||
| + | |||
| + | .slick-dots { | ||
| + | position: relative; | ||
| + | } | ||
| + | #div-slideshowNav { | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | width: 850px; | ||
| + | } | ||
| + | #div-dots { | ||
| + | height: 100px; | ||
| + | } | ||
| + | #div-slideshow, | ||
| + | #div-slideshow img, | ||
| + | #div-dots { | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | width: 850px; | ||
| + | } | ||
| + | #div-riverHill iframe { | ||
| + | width: 960px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | display: block; | ||
| + | margin-top: 50px; | ||
| + | } | ||
| + | #div-riverHill p { | ||
| + | text-align: center; | ||
| + | width: 900px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | line-height: 2em; | ||
| + | } | ||
| + | #div-riverHill { | ||
| + | width: 1175px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | font-size: 15pt; | ||
| + | margin-top: 50px; | ||
| + | margin-bottom: 100px; | ||
| + | } | ||
| + | #div-fair p { | ||
| + | text-align: center; | ||
| + | width: 900px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | line-height: 2em; | ||
| + | } | ||
| + | #div-fair { | ||
| + | width: 1175px; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
| + | font-size: 15pt; | ||
| + | margin-top: 50px; | ||
| + | margin-bottom: 100px; | ||
| + | } | ||
| + | #div-fairPic { | ||
| + | height: 600px; | ||
| + | } | ||
| + | #h26 { | ||
| + | max-width: 200px; | ||
| + | min-width: 200px; | ||
| + | font-size: 30pt; | ||
| + | } | ||
| + | </style> | ||
| + | <nav> | ||
| + | <img src="https://static.igem.org/mediawiki/2016/2/26/T--UMaryland--newlogo.jpeg" id="img-logo" width="260px"> | ||
| + | <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/9/90/T--UMaryland--educationMain.jpg" id="img-education"> | ||
| + | </div> | ||
| + | <h1 id="h1"><span>Engagement </span> </h1> | ||
| + | <h4><br/><br/><br/><span>Furthering the dialogue with the public about synthetic biology</span></h4> | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="image"> | <div class="image"> | ||
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/50/T--UMaryland--portdiscover.jpg" id="img-portdiscovery"> | <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/5/50/T--UMaryland--portdiscover.jpg" id="img-portdiscovery"> | ||
| − | + | </div> | |
| − | + | <h2 id="h2"><span>Building with Biology: Port Discovery </span> </h2> | |
| − | <h3><br/><br/><br/><span>July 30th, 2016</span></h3> | + | <h3><br/><br/><br/><span>July 30th, 2016</span></h3> |
</div> | </div> | ||
<div id="Info" class="centered"> | <div id="Info" class="centered"> | ||
| − | + | <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> | ||
<div class="margin"> | <div class="margin"> | ||
| − | + | <table id="table-selector1"> | |
| − | + | <thead> | |
| − | + | <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 class="borderLeft navigator" id="th-ours" data-select="ours"><p>Our Activities</p></th> | + | </th> |
| − | + | </thead> | |
| − | + | </table> | |
</div> | </div> | ||
| − | <div id = "div-lowertable"> | + | <div id="div-lowertable"> |
<div id="div-building"> | <div id="div-building"> | ||
<div class="margin"> | <div class="margin"> | ||
| − | + | <table id="table-selector2"> | |
| − | + | <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> | </div> | ||
| − | + | <div class="div-content"> | |
<div id="div-super" class="profiles center clearfix float-my-children" style="display:block"> | <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> | + | <img src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--superorganisms.jpg" id="img-super" /img> |
| − | <div><p>At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering. | + | <div> |
| − | </p></div> | + | <p>At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering. |
| + | </p> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="div-parts" class="profiles center clearfix float-my-children"> | <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> | + | <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 used a cell model made of wooden 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. Then she would make a cell that would solve the problem using a solution description on the back of the card. </p> </div> | + | <div> |
| + | <p> Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden 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. Then she would make a cell that would solve the problem using a solution description on the back of the card. </p> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="div-bistro" class="profiles center clearfix float-my-children"> | <div id="div-bistro" class="profiles center clearfix float-my-children"> | ||
| − | <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro"/img> | + | <img src="https://static.igem.org/mediawiki/2016/d/d2/T--UMaryland--biobistro.jpg" id="img-bistro" /img> |
| − | <div><p>Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.</p></div> | + | <div> |
| + | <p>Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.</p> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="div-tech" class="profiles center clearfix float-my-children"> | <div id="div-tech" class="profiles center clearfix float-my-children"> | ||
| − | <img src="https://static.igem.org/mediawiki/2016/8/88/T--UMaryland--techtokens.jpg" id="img-tech"/img> | + | <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> |
| + | <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> | ||
| Line 741: | Line 731: | ||
<div id="div-ours" style="display: none"> | <div id="div-ours" style="display: none"> | ||
<div class="margin"> | <div class="margin"> | ||
| − | + | <table id="table-selector2"> | |
| − | + | <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> | </div> | ||
<div class="div-content"> | <div class="div-content"> | ||
<div id="div-bacteria" class="profiles center clearfix float-my-children"> | <div id="div-bacteria" class="profiles center clearfix float-my-children"> | ||
| − | <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super"/img> | + | <img src="https://static.igem.org/mediawiki/2016/8/8b/T--UMaryland--buildyourownbacteria.jpg" id="img-super" /img> |
| − | <div><p>This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet. </p></div> | + | <div> |
| + | <p>This station combines science, art and play to present an analogy for synthetic biology. First, participants used legos to build their own plasmid, mixing and matching different parts. Different legos were used as an analogy for BioBricks, and contained pieces such as promoters and terminators. Visitors were able to pick what physical characteristics they wanted their bacteria to have, such as body color and number of legs, by picking the appropriate lego BioBricks. Then, participants were able to draw the bacteria they just built on our worksheet. </p> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="div-broth" class="profiles center clearfix float-my-children"> | <div id="div-broth" class="profiles center clearfix float-my-children"> | ||
| − | <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super"/img> | + | <img src="https://static.igem.org/mediawiki/2016/d/d9/T--UMaryland--broth.jpg" id="img-super" /img> |
| − | <div><p>How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.</p></div> | + | <div> |
| + | <p>How do scientists feed their bacteria? Visitors learned about LB broth and were able to make their own “imitation LB broth” by mixing lemonade powder and water. To make their mixture, participants weighed out the proper amount of powder using a scale and measured out the correct amount of water using beakers.</p> | ||
| + | </div> | ||
</div> | </div> | ||
<div id="div-color" class="profiles center clearfix float-my-children"> | <div id="div-color" class="profiles center clearfix float-my-children"> | ||
| − | <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super"/img> | + | <img src="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--pipette.jpg" id="img-super" /img> |
| − | <div><p>Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.</p></div> | + | <div> |
| + | <p>Science is an art! Participants were able to try pipetting food coloring into test tubes with water, and then mix different shades to make their own colorful creations.</p> | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <div class="image"> | |
<div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--highschool.jpeg" id="img-portdiscovery"> | <div data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/1/10/T--UMaryland--highschool.jpeg" id="img-portdiscovery"> | ||
| − | + | </div> | |
| − | + | <h2 id="h25"><span>River Hill High School</span> </h2> | |
| − | <h3><br/><br/><br/><span>June 6th, 2016</span></h3> | + | <h3><br/><br/><br/><span>June 6th, 2016</span></h3> |
</div> | </div> | ||
| − | + | <div id="div-riverHill"> | |
| − | + | <div class="highSchool"> | |
| − | + | <p>UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.</p> | |
| − | + | <p><a href="https://static.igem.org/mediawiki/2016/3/32/T--UMaryland--RiverHillPowerpoint.pdf">Download the Powerpoint in PDF format</a> | |
| − | + | </p> | |
| − | + | </div> | |
| − | + | <div id="div-slideshow"> | |
| − | + | <div><img src="https://static.igem.org/mediawiki/2016/9/9e/T--UMaryland--slide1.jpg" /> | |
| − | + | </div> | |
| − | + | <div><img data-lazy="https://static.igem.org/mediawiki/2016/2/28/T--UMaryland--slide2.png" /> | |
| − | + | </div> | |
| − | + | <div><img data-lazy="https://static.igem.org/mediawiki/2016/7/74/T--UMaryland--slide3.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/eb/T--UMaryland--slide4.png"> | |
| − | + | </div> | |
| − | + | <div><img data-lazy="https://static.igem.org/mediawiki/2016/2/27/T--UMaryland--slide5.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/12/T--UMaryland--slide6.png"> | |
| − | + | </div> | |
| − | + | <div><img data-lazy="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--slide7.png"> | |
| − | + | </div> | |
| − | + | <div><img data-lazy="https://static.igem.org/mediawiki/2016/c/cb/T--UMaryland--slide8.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c0/T--UMaryland--slide9.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide10.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4d/T--UMaryland--slide11.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/fb/T--UMaryland--slide12.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c1/T--UMaryland--slide13.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/38/T--UMaryland--slide14.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/8/85/T--UMaryland--slide15.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/1/1e/T--UMaryland--slide16.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/ef/T--UMaryland--slide17.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e0/T--UMaryland--slide18.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/b/bf/T--UMaryland--slide19.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide20.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0d/T--UMaryland--slide21.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/4b/T--UMaryland--slide22.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/f/ff/T--UMaryland--slide23.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide24.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide25.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/e/e9/T--UMaryland--slide26.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/0/0c/T--UMaryland--slide27.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/3/3a/T--UMaryland--slide28.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/d5/T--UMaryland--slide29.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c4/T--UMaryland--slide30.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/d/db/T--UMaryland--slide31.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/7/7e/T--UMaryland--slide32.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/c/c8/T--UMaryland--slide33.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/4/41/T--UMaryland--slide.png"> | |
| − | + | </div> | |
| − | + | <div> <img data-lazy="https://static.igem.org/mediawiki/2016/2/22/T--UMaryland--slide35.png"> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div id="div-dots"> | |
| − | + | </div> | |
| − | + | <!--<iframe src="https://docs.google.com/presentation/d/1nN-25htBR3C1IcBxILX60d61Amxk698q5ddcnOM04H8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>--> | |
| − | + | ||
| − | + | </div> | |
| − | + | <div class="image"> | |
| − | + | <div id="div-fairPic" data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/2/25/T--UMaryland--fair.jpg"> | |
| − | + | </div> | |
| − | + | <h2 id="h26"><span>STEM Fair</span> </h2> | |
| − | + | <h3><br/><br/><br/><span>September 24th, 2016</span></h3> | |
| − | + | </div> | |
| − | + | <div id="div-fair"> | |
| − | + | <div class="highSchool"> | |
| − | + | <p>UMaryland iGEM was invited to the STEM Fair hosted by the UMD Engineers Without Borders at the Kim Engineering building on campus. We talked about synthetic biology and iGEM to members of campus and held the micropipette activity. At the fair was also other engineering and computer science clubs which opened up dialogue for further collaboration.</p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div id="div-fairPic"data-parallax="scroll" data-image-src="https://static.igem.org/mediawiki/2016/2/25/T--UMaryland--fair.jpg" > | + | |
</div> | </div> | ||
| − | |||
| − | |||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div id="bot-nav"> | <div id="bot-nav"> | ||
<div id="container"> | <div id="container"> | ||
<div class="pull-left"> | <div class="pull-left"> | ||
| − | <a href="mailto:umarylandigem@gmail.com"><p id="contact"> Contact Us </p></a> | + | <a href="mailto:umarylandigem@gmail.com"> |
| − | </div> | + | <p id="contact"> Contact Us </p> |
| + | </a> | ||
| + | </div> | ||
<div class="pull-right"> | <div class="pull-right"> | ||
<ul id="social-media"> | <ul id="social-media"> | ||
| − | <li> <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/9/9f/T--UMaryland--fbLogo.jpeg"/> </a> </li> | + | <li> |
| − | <li> <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--instalogo.jpg"/> </a> </li> | + | <a href="https://www.facebook.com/UMarylandiGEM/"> <img src="https://static.igem.org/mediawiki/2016/9/9f/T--UMaryland--fbLogo.jpeg" /> </a> |
| + | </li> | ||
| + | <li> | ||
| + | <a href="https://www.instagram.com/umarylandigem/"> <img src="https://static.igem.org/mediawiki/2016/c/ca/T--UMaryland--instalogo.jpg" /> </a> | ||
| + | </li> | ||
</ul> | </ul> | ||
| − | </div> | + | </div> |
</div> | </div> | ||
| − | + | <div class="copyright"> | |
<p id="copyright">© University of Maryland iGEM 2016</p> | <p id="copyright">© University of Maryland iGEM 2016</p> | ||
| − | + | </div> | |
</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'); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | $('#div-slideshow').slick({ | |
| − | + | lazyLoad: 'ondemand', | |
| − | + | slidesToShow: 1, | |
| − | + | slidesToScroll: 1, | |
| − | + | dots: true, | |
| − | + | appendDots: $("#div-dots"), | |
| − | + | infinite: false | |
| − | + | ||
| − | + | }); | |
| − | + | ||
| − | + | if (self !== top) { | |
| − | + | $('#top_menu_under, #top_menu_14, #top_menu_inside, nav').remove(); | |
| − | + | $('#overruled nav').remove(); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | if ( | + | |
| − | $('# | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | // 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'); | |
| − | $('#div-' | + | $('#img-igemlogo').css('opacity', '1'); |
| − | if ( | + | $('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'); | ||
| + | } | ||
} | } | ||
| − | $('.div- | + | }); |
| − | + | // Scrolling animation for top nav bar | |
| − | $('.div-content').animate({ marginLeft: '0px'}, 200); // the text is animated to quickly move left | + | 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'); | ||
| + | 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-content').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-content').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> | ||
</body> | </body> | ||
| − | + | ||
</html> | </html> | ||
Revision as of 00:00, 30 September 2016
</div> </div>
Engagement
Furthering the dialogue with the public about synthetic biology
Building with Biology: Port Discovery
July 30th, 2016
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.
|
Building with Biology Activities |
Our Activities |
|---|
|
Super Organisms! |
Kit of Parts |
Bio Bistro |
Tech Tokens |
|---|
At this station, visitors were introduced to two catastrophic situations that they needed to solve using their imaginations: 1) Their friend fell off of a skyscraper, and 2) Their friend caused a massive oil spill in the ocean. To tackle the first problem, kids designed a superhero that could shoot spiderwebs or fly to ultimately catch their friend. For the second problem, kids designed a super bacteria that could clean the ocean by detecting, degrading, or digesting oil. This activity served as a introduction of the possibilites of synthetic biology and genetic engineering.
Visitors would learn about the concept of BioBricks and versatility of engineering cells to solve global issues. They used a cell model made of wooden 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. Then she would make a cell that would solve the problem using a solution description on the back of the card.
Eat it? Think about it? No way? Visitors were introduced to a variety of engineered foods, both currently available and in development, and asked their opinion on consuming the goods. Items included vanilla flavoring, caffeine, and milk synthesized by yeast, a food pill that provided all daily nutrients, golden rice, and meat created in a lab. Participants were also introduced to different ways we have modified agriculture like selective breeding, genetic engineering, and synthetic biology.
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.
River Hill High School
June 6th, 2016
UMaryland iGEM visited two AP Biology classes at River Hill High School located in Howard County to present and discuss a variety of synthetic biology topics. We explained what synthetic biology is, how it works, applications of genetic engineering, benefits / misconceptions of GMOs, and what iGEM is.
STEM Fair
September 24th, 2016
UMaryland iGEM was invited to the STEM Fair hosted by the UMD Engineers Without Borders at the Kim Engineering building on campus. We talked about synthetic biology and iGEM to members of campus and held the micropipette activity. At the fair was also other engineering and computer science clubs which opened up dialogue for further collaboration.
© University of Maryland iGEM 2016
