Line 1: | Line 1: | ||
− | |||
<html> | <html> | ||
+ | <head> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500,700" rel="stylesheet"> | ||
+ | |||
+ | </head> | ||
+ | <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> | ||
+ | <style> | ||
+ | html { | ||
+ | background-image: url('img/home.jpg'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | background-position: center; | ||
+ | color: white; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | min-width: 5000px; | ||
+ | min-height: 5000px; | ||
+ | max-width: 5000px; | ||
+ | max-height: 5000px; | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .pageCanvas { | ||
+ | min-width: 5000px; | ||
+ | min-height: 5000px; | ||
+ | max-width: 5000px; | ||
+ | max-height: 5000px; | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Main */ | ||
+ | |||
+ | |||
+ | .h1 { | ||
+ | font-size: 48pt; | ||
+ | color: white; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | width: 650px;; | ||
+ | height: 150px; | ||
+ | position: absolute; | ||
+ | top: 2100px; | ||
+ | left: 250px; | ||
+ | } | ||
+ | |||
+ | .blockContainer { | ||
+ | position: absolute; | ||
+ | left: 1000px; | ||
+ | top: 2000px; | ||
+ | width: 450px; | ||
+ | height: 450px; | ||
+ | } | ||
+ | |||
+ | .h1 p, .block p { | ||
+ | margin: 0px 0px 0px 0px; | ||
+ | } | ||
+ | |||
+ | .mainBlock .block { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border: 2px solid; | ||
+ | font-size: 20pt; | ||
+ | font-weight: bold; | ||
+ | text-align: left; | ||
+ | vertical-align: middle; | ||
+ | position: fixed; | ||
+ | border-radius: 40px; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | .mainBlock .block p:nth-child(1) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 50px; | ||
+ | margin-left: 25px; | ||
+ | text-transform: uppercase; | ||
+ | |||
+ | } | ||
+ | .mainBlock .block > p:nth-child(2) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 25px; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | max-width: 160px; | ||
+ | color: #F0F0F0; | ||
+ | } | ||
+ | |||
+ | .mainBlock .block:nth-child(1) { | ||
+ | border-color: rgba(173, 222, 255, 1); | ||
+ | background-color: rgba(173, 222, 255, 0.7); | ||
+ | } | ||
+ | |||
+ | .mainBlock .block:nth-child(2) { | ||
+ | border-color: rgba(255, 206, 173, 1); | ||
+ | margin-left: 240px; | ||
+ | background-color: rgba(255, 206, 173, 0.7); | ||
+ | } | ||
+ | .mainBlock .block:nth-child(3) { | ||
+ | border-color: rgba(181, 255, 173, 1); | ||
+ | background-color: rgba(181, 255, 173, 0.7); | ||
+ | margin-top: 240px; | ||
+ | margin-left: 240px; | ||
+ | } | ||
+ | .mainBlock .block:nth-child(4) { | ||
+ | border-color: rgba(247, 173, 255, 1); | ||
+ | background-color: rgba(247, 173, 255, 0.7); | ||
+ | margin-top: 240px; | ||
+ | } | ||
+ | .mainBlock .block:nth-child(1):hover { | ||
+ | background-color: rgba(173, 222, 255, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .mainBlock .block:nth-child(2):hover { | ||
+ | background-color: rgba(255, 206, 173, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .mainBlock .block:nth-child(3):hover { | ||
+ | background-color: rgba(181, 255, 173, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .mainBlock .block:nth-child(4):hover { | ||
+ | background-color: rgba(247, 173, 255, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | |||
+ | .block:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* Projects */ | ||
+ | |||
+ | .subBlock:nth-child(2) { | ||
+ | position: absolute; | ||
+ | left: -800px; | ||
+ | top: -1200px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(2) .block:nth-child(2) { | ||
+ | border-color: rgba(14, 92,193, 1); | ||
+ | background-color: rgba(14, 92,193, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(2) .block:nth-child(3) { | ||
+ | border-color: rgba(84,137,205, 1); | ||
+ | margin-left: 240px; | ||
+ | background-color: rgba(84,137,205, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(2) .block:nth-child(4) { | ||
+ | border-color: rgba(48,113,196, 1); | ||
+ | margin-top: 240px; | ||
+ | background-color: rgba(48,113,196, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(2) .block:nth-child(5) { | ||
+ | border-color: rgba(9, 69,146, 1); | ||
+ | background-color: rgba(9, 69,146, 0.7); | ||
+ | margin-top: 240px; | ||
+ | margin-left: 240px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(2) .block:nth-child(2):hover { | ||
+ | background-color: rgba(14, 92,193, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(2) .block:nth-child(3):hover { | ||
+ | background-color: rgba(84,137,205, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(2) .block:nth-child(4):hover { | ||
+ | background-color: rgba(48,113,196, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(2) .block:nth-child(5):hover { | ||
+ | background-color: rgba(9, 69,146, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(2) .block { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border: 2px solid; | ||
+ | font-size: 20pt; | ||
+ | font-weight: bold; | ||
+ | text-align: left; | ||
+ | vertical-align: middle; | ||
+ | position: fixed; | ||
+ | border-radius: 40px; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(2) .block p:nth-child(1) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 25px; | ||
+ | margin-left: 25px; | ||
+ | margin-right: 10px; | ||
+ | text-transform: uppercase; | ||
+ | |||
+ | } | ||
+ | .subBlock:nth-child(2) .block > p:nth-child(2) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 25px; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | max-width: 160px; | ||
+ | color: #F0F0F0; | ||
+ | } | ||
+ | |||
+ | .blockDescription { | ||
+ | color: white; | ||
+ | font-family: 'Raleway', sans-serif; | ||
+ | width: 800px; | ||
+ | } | ||
+ | |||
+ | .blockDescription p:nth-child(1) { | ||
+ | font-size: 36pt; | ||
+ | margin-bottom: 5px; | ||
+ | padding-bottom: 0px; | ||
+ | font-weight: bold; | ||
+ | margin-left: -60px; | ||
+ | } | ||
+ | |||
+ | .blockDescription p:nth-child(2) { | ||
+ | font-size: 20pt; | ||
+ | margin-bottom: 40px; | ||
+ | max-width: 600px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Outreach */ | ||
+ | |||
+ | .subBlock:nth-child(3) { | ||
+ | position: absolute; | ||
+ | left: 900px; | ||
+ | top: -800px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(3) .block:nth-child(2) { | ||
+ | border-color: rgba( 220,127,150,1); | ||
+ | background-color: rgba(220,127,150, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(3) .block:nth-child(3) { | ||
+ | border-color: rgba(180, 73,100,1); | ||
+ | margin-left: 240px; | ||
+ | background-color: rgba(180, 73,100, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(3) .block:nth-child(4) { | ||
+ | border-color: rgba( 112, 12, 37,1); | ||
+ | margin-left: 480px; | ||
+ | background-color: rgba(112, 12, 37, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(3) .block:nth-child(2):hover { | ||
+ | background-color: rgba(220,127,150, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(3) .block:nth-child(3):hover { | ||
+ | background-color: rgba(180, 73,100, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(3) .block:nth-child(4):hover { | ||
+ | background-color: rgba(112, 12, 37, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(3) .block { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border: 2px solid; | ||
+ | font-size: 20pt; | ||
+ | font-weight: bold; | ||
+ | text-align: left; | ||
+ | vertical-align: middle; | ||
+ | position: fixed; | ||
+ | border-radius: 40px; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(3) .block p:nth-child(1) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 25px; | ||
+ | margin-left: 20px; | ||
+ | margin-right: 15px; | ||
+ | text-transform: uppercase; | ||
+ | overflow: wrap; | ||
+ | hyphens: auto; | ||
+ | |||
+ | } | ||
+ | .subBlock:nth-child(3) .block > p:nth-child(2) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 20px; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | max-width: 160px; | ||
+ | color: #F0F0F0; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Notebook */ | ||
+ | |||
+ | .subBlock:nth-child(5) { | ||
+ | position: absolute; | ||
+ | left: 1100px; | ||
+ | top: 700px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(5) .block:nth-child(2) { | ||
+ | border-color: rgba(180,239,174, 1); | ||
+ | background-color: rgba(180,239,174, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(5) .block:nth-child(3) { | ||
+ | border-color: rgba(134,224,125, 1); | ||
+ | margin-left: 240px; | ||
+ | background-color: rgba(134,224,125, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(5) .block:nth-child(4) { | ||
+ | border-color: rgba(66,183, 54, 1); | ||
+ | margin-left: 480px; | ||
+ | background-color: rgba(66,183, 54, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(5) .block:nth-child(2):hover { | ||
+ | background-color: rgba(180,239,174, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(5) .block:nth-child(3):hover { | ||
+ | background-color: rgba(134,224,125, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(5) .block:nth-child(4):hover { | ||
+ | background-color: rgba(66,183, 54, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(5) .block { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border: 2px solid; | ||
+ | font-size: 20pt; | ||
+ | font-weight: bold; | ||
+ | text-align: left; | ||
+ | vertical-align: middle; | ||
+ | position: fixed; | ||
+ | border-radius: 40px; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(5) .block p:nth-child(1) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 25px; | ||
+ | margin-left: 25px; | ||
+ | margin-right: 10px; | ||
+ | text-transform: uppercase; | ||
+ | |||
+ | } | ||
+ | .subBlock:nth-child(5) .block > p:nth-child(2) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 25px; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | max-width: 160px; | ||
+ | color: #F0F0F0; | ||
+ | } | ||
+ | |||
+ | /* About Us */ | ||
+ | |||
+ | .subBlock:nth-child(4) { | ||
+ | position: absolute; | ||
+ | left: -400px; | ||
+ | top: 800px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(4) .block:nth-child(2) { | ||
+ | border-color: rgba(158, 99,188, 1); | ||
+ | background-color: rgba(158, 99,188, 0.7); | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(4) .block:nth-child(3) { | ||
+ | border-color: rgba(128, 62,162, 1); | ||
+ | margin-left: 240px; | ||
+ | background-color: rgba(128, 62,162, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(4) .block:nth-child(4) { | ||
+ | border-color: rgba(88, 18,123, 1); | ||
+ | margin-top: 240px; | ||
+ | background-color: rgba(88, 18,123, 0.7); | ||
+ | } | ||
+ | .subBlock:nth-child(4) .block:nth-child(5) { | ||
+ | border-color: rgba( 66, 5, 97, 1); | ||
+ | background-color: rgba( 66, 5, 97, 0.7); | ||
+ | margin-top: 240px; | ||
+ | margin-left: 240px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(4) .block:nth-child(2):hover { | ||
+ | background-color: rgba(158, 99,188, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(4) .block:nth-child(3):hover { | ||
+ | background-color: rgba(128, 62,162, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(4) .block:nth-child(4):hover { | ||
+ | background-color: rgba(88, 18,123, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | .subBlock:nth-child(4) .block:nth-child(5):hover { | ||
+ | background-color: rgba( 66, 5, 97, 0.85); | ||
+ | border-width: 6px; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(4) .block { | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | border: 2px solid; | ||
+ | font-size: 20pt; | ||
+ | font-weight: bold; | ||
+ | text-align: left; | ||
+ | vertical-align: middle; | ||
+ | position: fixed; | ||
+ | border-radius: 40px; | ||
+ | transition: all 0.2s ease-out; | ||
+ | } | ||
+ | |||
+ | .subBlock:nth-child(4) .block p:nth-child(1) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 25px; | ||
+ | margin-left: 25px; | ||
+ | margin-right: 10px; | ||
+ | text-transform: uppercase; | ||
+ | |||
+ | } | ||
+ | .subBlock:nth-child(4) .block > p:nth-child(2) { | ||
+ | vertical-align: middle; | ||
+ | margin-top: 10px; | ||
+ | margin-left: 25px; | ||
+ | font-size: 12pt; | ||
+ | font-weight: 300; | ||
+ | max-width: 160px; | ||
+ | color: #F0F0F0; | ||
+ | } | ||
+ | |||
+ | |||
+ | .leftArrow:hover { | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* Overlay */ | ||
+ | |||
+ | .overlay { | ||
+ | position: fixed; | ||
+ | display: none; | ||
+ | height:100vh; | ||
+ | width:100vw; | ||
+ | top:0px; | ||
+ | left:-100vw; | ||
+ | z-index:1000; | ||
+ | background-color: rgba( 0,0,0,0.5); | ||
+ | } | ||
+ | </style> | ||
− | <div class=" | + | <body> |
− | < | + | <div class="overlay"> |
+ | <iframe> | ||
+ | |||
+ | </iframe> | ||
</div> | </div> | ||
+ | <div class="pageCanvas"> | ||
+ | <div class="h1 animated bounceIn"> | ||
+ | <img src="img/logoWide.jpg" /> | ||
+ | <p>An Apeeling Solution </br>to Panama Disease</p> | ||
+ | </div> | ||
+ | <div class="blockContainer"> | ||
+ | <div class="mainBlock animated bounceIn"> | ||
+ | <div class="block"> | ||
+ | <p>Projects</p> | ||
+ | <p>Saving the Cavendish banana</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Outreach</p> | ||
+ | <p>Increasing access to synthetic biology for high schools</p> | ||
+ | </div> | ||
− | <div class=" | + | <div class="block"> |
− | + | <p style="margin-top: 30px; line-height: 1.8em;">Parts</br>Modeling</br>Notebook</p> | |
− | <p | + | </div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </div> | + | |
+ | <div class="block"> | ||
+ | <p>About Us</p> | ||
+ | <p>Learn more about UMaryland iGEM</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="subBlock"> | ||
+ | <div class="blockDescription"> | ||
+ | <p><span class="leftArrow">←</span> Projects</p> | ||
+ | <p>From saving the Cavendish to expanding synthetic biology</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>An Appeling Solution</p> | ||
+ | <p>to save the Cavendish</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Cas9 Mutant Screening</p> | ||
+ | <p>Screening for mutants using CRISPR/Cas9</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Lab-in-a-box</p> | ||
+ | <p>Low cost DIY lab equipment</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Metal Detection</p> | ||
+ | <p>Teaching synthetic biology using real world examples</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="subBlock"> | ||
+ | <div class="blockDescription"> | ||
+ | <p><span class="leftArrow">←</span> Outreach</p> | ||
+ | <p>Reaching out to the community about synthetic biology</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Knowing Panama Disease</p> | ||
+ | <p>Feedback, concerns, and feasiblity</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Teaching the Next Generation</p> | ||
+ | <p>of synthetic biologists</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Talking with the Community</p> | ||
+ | <p>about bananas, GMOs, and synthetic biology</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="subBlock"> | ||
+ | <div class="blockDescription"> | ||
+ | <p><span class="leftArrow">←</span> About Us</p> | ||
+ | <p>UMaryland iGEM - Since 2014</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Students</p> | ||
+ | <p>The next generation of scientists</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Advisors</p> | ||
+ | <p>Guiding our efforts</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Funding</p> | ||
+ | <p>Providing support for the team</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Acknowl-</br>edgements</p> | ||
+ | <p>Those who helped us get here</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="subBlock"> | ||
+ | <div class="blockDescription"> | ||
+ | <p><span class="leftArrow">←</span> Application</p> | ||
+ | <p>Contributing to the scientific community</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Parts</p> | ||
+ | <p>Contributions to the Registry</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Modeling</p> | ||
+ | <p>Applying engineering principles</p> | ||
+ | </div> | ||
+ | <div class="block"> | ||
+ | <p>Notebook</p> | ||
+ | <p>Follow our progress throughout our experience</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </body> | ||
+ | <style> | ||
+ | @charset "UTF-8"; | ||
+ | /*! | ||
+ | * animate.css -http://daneden.me/animate | ||
+ | * Version - 3.5.2 | ||
+ | * Licensed under the MIT license - http://opensource.org/licenses/MIT | ||
+ | * | ||
+ | * Copyright (c) 2017 Daniel Eden | ||
+ | */ | ||
+ | .animated{animation-duration:1s;animation-fill-mode:both}.animated.infinite{animation-iteration-count:infinite}.animated.hinge{animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{animation-duration:.75s}@keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{animation-name:pulse}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{animation-name:rubberBand}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{animation-name:shake}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{animation-name:tada}@keyframes wobble{0%{transform:none}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:none}}.wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:none}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{animation-name:jello;transform-origin:center}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:none}}.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:none}}.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:none}}.bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:none}}.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:none}}.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}.fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:none}}.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:none}}.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes flip{0%{transform:perspective(400px) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95);animation-timing-function:ease-in}to{transform:perspective(400px);animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg);opacity:1}to{transform:none;opacity:1}}.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:none;opacity:1}}.rotateIn{animation-name:rotateIn}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:none;opacity:1}}.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:none;opacity:1}}.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{animation-name:rotateOut}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{animation-name:hinge}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{animation-name:zoomOutDown}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{animation-name:zoomOutLeft}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{animation-name:zoomOutRight}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{animation-name:zoomOutUp}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{animation-name:slideOutUp} | ||
+ | </style> | ||
+ | <script type="text/javascript" src="js/panzoom.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function() { | ||
+ | $('.pageCanvas').panzoom({ | ||
+ | cursor: "-webkit-grab" | ||
+ | }); | ||
+ | |||
+ | $('.mainBlock .block:nth-child(1)').click( function() { | ||
+ | $('.pageCanvas').css('transition', '.7s ease-in-out'); | ||
+ | $('.pageCanvas').css('transform', 'matrix(1,0,0,1,447,1045)'); | ||
+ | }) | ||
+ | |||
+ | $('.mainBlock .block:nth-child(2)').click( function() { | ||
+ | $('.pageCanvas').css('transition', '.7s ease-in-out'); | ||
+ | $('.pageCanvas').css('transform', 'matrix(1,0,0,1,-1277,754)'); | ||
+ | }) | ||
+ | |||
+ | $('.mainBlock .block:nth-child(3)').click( function() { | ||
+ | $('.pageCanvas').css('transition', '.7s ease-in-out'); | ||
+ | $('.pageCanvas').css('transform', 'matrix(1,0,0,1,-1522,-743)'); | ||
+ | }) | ||
+ | |||
+ | $('.mainBlock .block:nth-child(4)').click( function() { | ||
+ | $('.pageCanvas').css('transition', '.7s ease-in-out'); | ||
+ | $('.pageCanvas').css('transform', 'matrix(1,0,0,1,51,-935)'); | ||
+ | }) | ||
+ | |||
+ | $('.leftArrow').click( function() { | ||
+ | $('.pageCanvas').css('transition', '.7s ease-in-out'); | ||
+ | $('.pageCanvas').css('transform', 'matrix(1,0,0,1,0,1)'); | ||
+ | }) | ||
+ | |||
+ | }); | ||
+ | |||
+ | |||
+ | $('.subBlock .block').click( function() { | ||
+ | $('.pageCanvas').css('opacity', '0.2'); | ||
+ | $('.overlay').css('display', 'block');; | ||
+ | |||
+ | $('.overlay').css('transition', 'ease-in-out, 2s'); | ||
+ | $('.overlay').animate({ | ||
+ | left: '0vw' | ||
+ | }) | ||
+ | }); | ||
+ | |||
+ | |||
+ | </script> | ||
</html> | </html> |
Revision as of 15:51, 21 October 2017
An Apeeling Solution to Panama Disease
Projects
Saving the Cavendish banana
Outreach
Increasing access to synthetic biology for high schools
PartsModelingNotebook
About Us
Learn more about UMaryland iGEM
← Projects
From saving the Cavendish to expanding synthetic biology
An Appeling Solution
to save the Cavendish
Cas9 Mutant Screening
Screening for mutants using CRISPR/Cas9
Lab-in-a-box
Low cost DIY lab equipment
Metal Detection
Teaching synthetic biology using real world examples
← Outreach
Reaching out to the community about synthetic biology
Knowing Panama Disease
Feedback, concerns, and feasiblity
Teaching the Next Generation
of synthetic biologists
Talking with the Community
about bananas, GMOs, and synthetic biology
← About Us
UMaryland iGEM - Since 2014
Students
The next generation of scientists
Advisors
Guiding our efforts
Funding
Providing support for the team
Acknowl-edgements
Those who helped us get here
← Application
Contributing to the scientific community
Parts
Contributions to the Registry
Modeling
Applying engineering principles
Notebook
Follow our progress throughout our experience