(15 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<style> | <style> | ||
+ | |||
+ | #myImg { | ||
+ | border-radius: 5px; | ||
+ | cursor: pointer; | ||
+ | transition: 0.3s; | ||
+ | position: absolute; | ||
+ | left: 80vw; | ||
+ | top: 20vh; | ||
+ | } | ||
+ | |||
+ | #myImg:hover {opacity: 0.7;} | ||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 100; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform:scale(0)} | ||
+ | to {-webkit-transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform:scale(0)} | ||
+ | to {transform:scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | |||
img { | img { | ||
display: inline-block; | display: inline-block; | ||
Line 201: | Line 285: | ||
<div class="parawrapper"> | <div class="parawrapper"> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
<div id="slide1"> | <div id="slide1"> | ||
Line 208: | Line 297: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <!-- Trigger the Modal --> | ||
+ | <a href = "https://static.igem.org/mediawiki/2016/b/b6/T--WashU_StLouis--appinfo.pdf"> | ||
+ | <img id="myImg" src="https://static.igem.org/mediawiki/2016/d/d6/T--WashU_StLouis--joinhere.png" alt="You should definitely join" width="200" height="200"> | ||
+ | </a> | ||
+ | <!-- The Modal --> | ||
+ | <div id="myModal" class="modal"> | ||
+ | |||
+ | <!-- The Close Button --> | ||
+ | <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span> | ||
+ | |||
+ | <!-- Modal Content (The Image) --> | ||
+ | <img class="modal-content" id="img01"> | ||
+ | |||
+ | <!-- Modal Caption (Image Text) --> | ||
+ | <div id="caption"></div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<div id="slide2"> | <div id="slide2"> | ||
Line 230: | Line 340: | ||
<div class="content"> | <div class="content"> | ||
<div class="quotes_container white_grad"> | <div class="quotes_container white_grad"> | ||
− | <p class="quotes">Ultimately, our project culminated in data that strongly suggested that our plasmids increased intracellular concentrations of ATP and reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We | + | <p class="quotes">Ultimately, our project culminated in data that strongly suggested that our plasmids increased intracellular concentrations of ATP and reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We submitted three working parts – one for ATP, one for electron transport proteins, and one for an inducible promoter. </p> |
</div> | </div> | ||
</div> | </div> | ||
Line 271: | Line 381: | ||
<script> | <script> | ||
+ | |||
+ | // Get the modal | ||
+ | var modal = document.getElementById('myModal'); | ||
+ | |||
+ | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
+ | var img = document.getElementById('myImg'); | ||
+ | var modalImg = document.getElementById("img01"); | ||
+ | //var captionText = document.getElementById("caption"); | ||
+ | img.onclick = function(){ | ||
+ | //document.getElementById("myImg").src="https://static.igem.org/mediawiki/2016/3/30/T--WashU_StLouis--appinfo.png"; | ||
+ | //modal.style.display = "block"; | ||
+ | modalImg.src = this.src; | ||
+ | captionText.innerHTML = this.alt; | ||
+ | } | ||
+ | |||
+ | // Get the <span> element that closes the modal | ||
+ | var span = document.getElementsByClassName("close")[0]; | ||
+ | |||
+ | // When the user clicks on <span> (x), close the modal | ||
+ | /*span.onclick = function() { | ||
+ | modal.style.display = "none"; | ||
+ | document.getElementById("myImg").src="https://static.igem.org/mediawiki/2016/d/d6/T--WashU_StLouis--joinhere.png"; | ||
+ | |||
+ | }*/ | ||
+ | |||
+ | |||
+ | |||
/* | /* | ||
$(window).scroll(function () { | $(window).scroll(function () { |
Latest revision as of 21:11, 17 December 2016
SUPER CELLS
WashU and Penn State
In the famous comic series, exposure to Earth’s yellow sun causes Superman's cells to produce and store vast amounts of energy, giving him superhuman strength and abilities. All earth-bound organisms are made of cells, and all cells store energy with the same simple molecule: ATP. Our team designed plasmids that would cause bacteria to overproduce ATP and other important metabolic cofactors. Our hope is that these mutant “Super Cells” can be used in a variety of fields, from protein biosynthesis to agriculture.
As a subsidiary of The Nitrogen Project, a multi-university initiative to solve nitrate runoff through genetic engineering, the primary long term goal of our project is to design crops that require less chemical fertilizer. We met with local St. Louis farmers and environmental activists to get their impressions on genetically modified plants and learn about other solutions to the runoff problem. In the end, their input inspired us to search for other, wider applications of our research.
Ultimately, our project culminated in data that strongly suggested that our plasmids increased intracellular concentrations of ATP and reduced electron-transport proteins. We demonstrated that the latter could be useful for the manufacture of interesting biological products. We submitted three working parts – one for ATP, one for electron transport proteins, and one for an inducible promoter.
Throughout the summer, we communicated with other iGEM teams to talk about our project and exchange advice. We even met up with some Midwest teams! We made invaluable connections, learned an incredible amount about synthetic biology, and created lifelong friendships, contributing to a summer research experience that we will never forget.