Difference between revisions of "Team:Toronto/WetLab/ExperimentProtocols"
| (156 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:Toronto/CSS}} | {{Template:Toronto/CSS}} | ||
<html> | <html> | ||
| + | <h1>Experiments & Protocols</h1> | ||
<head> | <head> | ||
| − | <meta name="viewport" content="width=device-width, initial-scale=1"> | + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − | <style> | + | <style> |
| − | body {font-family: Arial, Helvetica, sans-serif;} | + | body {font-family: Arial, Helvetica, sans-serif;} |
| − | + | ||
| − | #PopupImg { | + | #PopupImg { |
| − | border-radius: | + | border-radius: 45px; |
cursor: pointer; | cursor: pointer; | ||
transition: 0.3s; | transition: 0.3s; | ||
| − | + | height: 300px; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | #PopupImg:hover {opacity: 0.7; z-index: -1;} |
| − | + | ||
| − | /* The Modal (background) */ | + | /* The Modal (background) */ |
| − | .modal { | + | .modal { |
display: none; /* Hidden by default */ | display: none; /* Hidden by default */ | ||
position: fixed; /* Stay in place */ | position: fixed; /* Stay in place */ | ||
| Line 31: | Line 29: | ||
background-color: rgb(0,0,0); /* Fallback color */ | background-color: rgb(0,0,0); /* Fallback color */ | ||
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
| − | } | + | } |
| − | + | ||
| − | /* Modal Content (image) */ | + | /* Modal Content (image) */ |
| − | .modal-content { | + | .modal-content { |
margin: auto; | margin: auto; | ||
display: block; | display: block; | ||
| − | width: | + | width: 100%; |
| − | + | overflow-y: scroll; | |
| − | } | + | } |
| − | + | ||
| − | /* Caption of Modal Image */ | + | /* Caption of Modal Image */ |
| − | #caption { | + | #caption { |
margin: auto; | margin: auto; | ||
display: block; | display: block; | ||
| Line 51: | Line 49: | ||
padding: 10px 0; | padding: 10px 0; | ||
height: 150px; | height: 150px; | ||
| − | } | + | } |
| − | + | ||
| − | /* Add Animation */ | + | /* Add Animation */ |
| − | .modal-content, #caption { | + | .modal-content, #caption { |
-webkit-animation-name: zoom; | -webkit-animation-name: zoom; | ||
-webkit-animation-duration: 0.6s; | -webkit-animation-duration: 0.6s; | ||
animation-name: zoom; | animation-name: zoom; | ||
animation-duration: 0.6s; | animation-duration: 0.6s; | ||
| − | } | + | } |
| − | + | ||
| − | @-webkit-keyframes zoom { | + | @-webkit-keyframes zoom { |
| − | from {-webkit-transform:scale(0)} | + | from {-webkit-transform:scale(0)} |
to {-webkit-transform:scale(1)} | to {-webkit-transform:scale(1)} | ||
| − | } | + | } |
| − | + | ||
| − | @keyframes zoom { | + | @keyframes zoom { |
| − | from {transform:scale(0)} | + | from {transform:scale(0)} |
to {transform:scale(1)} | to {transform:scale(1)} | ||
| − | } | + | } |
| − | + | ||
| − | /* The Close Button */ | + | /* The Close Button */ |
| − | .close { | + | .close { |
position: absolute; | position: absolute; | ||
top: 135px; | top: 135px; | ||
| Line 80: | Line 78: | ||
font-weight: bold; | font-weight: bold; | ||
transition: 0.3s; | transition: 0.3s; | ||
| − | } | + | } |
| − | + | ||
| − | .close:hover, | + | .close:hover, |
| − | .close:focus { | + | .close:focus { |
color: #bbb; | color: #bbb; | ||
text-decoration: none; | text-decoration: none; | ||
cursor: pointer; | cursor: pointer; | ||
| − | } | + | } |
| − | + | ||
| − | /* 100% Image Width on Smaller Screens */ | + | /* 100% Image Width on Smaller Screens */ |
| − | @media only screen and (max-width: 700px){ | + | @media only screen and (max-width: 700px){ |
.modal-content { | .modal-content { | ||
| − | + | width: 100%; | |
} | } | ||
| + | } | ||
| + | |||
| + | .image { | ||
| + | position: relative; | ||
| + | width: 100%; /* for IE 6 */ | ||
| + | } | ||
| + | |||
| + | h2 { | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | left: 20px; | ||
| + | width: 100%; | ||
| + | font-family: "Times New Roman", Times, serif; | ||
| + | font-style: oblique; | ||
| + | font-size: 40px; | ||
| + | |||
| + | } | ||
| + | |||
| + | h2 span { | ||
| + | color: white; | ||
| + | font: bold 24px/45px Helvetica, Sans-Serif; | ||
| + | letter-spacing: -1px; | ||
| + | background: rgb(0, 0, 0); /* fallback color */ | ||
| + | background: rgba(0, 0, 0, 1); | ||
| + | padding: 10px; | ||
} | } | ||
| + | h2 span.spacer { | ||
| + | padding:0 5px; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
| − | + | <!-- | |
| − | <div class=' | + | <div class='bodyWhiteClass'> |
| − | <div class= | + | <ul id="PopupImgList"> |
| + | <img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/cc/T--Toronto--6_29_2018_Safety_1.jpg" alt="Lab" style="width:100%;max-width:300px"> | ||
| + | <img id="PopupImg" src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="Something1" style="width:100%;max-width:300px" > | ||
| + | <img id="PopupImg" src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" alt="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" style="width:100%;max-width:300px"> | ||
| + | </ul> | ||
| + | --> | ||
| + | <div class='bodyWhiteClass'> | ||
| + | <div style="padding-top: 20px; margin-left:auto; margin-right:auto"> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--_Colony_PCR_Protocol_content.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/9/90/T--Toronto--8_24_2018_pcr.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Colony PCR</span></h2> </a> | ||
| + | </div> | ||
</div> | </div> | ||
| − | + | <div class= 'oneThirdClass'> | |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/5/5e/T--Toronto--_70%25_Ethanol_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/6/69/T--Toronto--2018_ethanol.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Ethanol</span></h2> </a> | |
</div> | </div> | ||
| − | + | </div> | |
| − | <div> | + | <div class= 'oneThirdClass'> |
| − | < | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/e/ec/T--Toronto--_Antibacterial_Stock_Preperation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/9/9e/T--Toronto--2018_antibacterialpreparation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span> Antibacterial<span class='spacer'></span><br /><span class='spacer'></span>Stock Preperation</span></h2> </a> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div style="padding-top: 20px; float: bottom;"> | |
| − | + | <div class= 'oneThirdClass'> | |
| − | < | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--_Bacterial_Transformation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/e/e3/T--Toronto--2018_bacterialtransformation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Bacterial Transformation</span></h2> </a> |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class= 'oneThirdClass'> | |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/1/18/T--Toronto--B-assay.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/c/c9/T--Toronto--8_24_2018_cell_culture.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Buoyancy<span class='spacer'></span><br /><span class='spacer'></span>Assay</span></h2> </a> | |
| + | </div> | ||
| + | </div> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/df/T--Toronto--_Dpn1_Digestion.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/3/30/T--Toronto--2018_Dpn1digest.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Dpn1<span class='spacer'></span><br /><span class='spacer'></span>Digestion</span></h2> </a> | ||
</div> | </div> | ||
| + | </div> | ||
| + | |||
| + | <div style="padding-top: 20px; float: bottom;"> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/0/00/T--Toronto--_Electroporation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/2/27/T--Toronto--2018_electroporation.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Electroporation</span></h2> </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/a/a8/T--Toronto--_Exclusion_PCR.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/f/f6/T--Toronto--2018_exclusionPCR.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Exclusion<span class='spacer'></span><br /><span class='spacer'></span>PCR</span></h2> </a> | ||
</div> | </div> | ||
| − | </div> | + | </div> |
| − | + | <div class= 'oneThirdClass'> | |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/2/2d/T--Toronto--_Gel_Electrophoresis_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/4/40/T--Toronto--8_24_2018_electrophores.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Gel Electrophoresis</span></h2> </a> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | < | + | |
| − | < | + | |
| − | // | + | |
| − | + | ||
| − | + | ||
| − | // | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | / | + | |
| − | span | + | |
| − | + | ||
| − | + | ||
| − | </ | + | |
| − | </ | + | |
| − | </ | + | |
| − | + | ||
| − | + | ||
| − | < | + | |
| − | < | + | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div style="padding-top: 20px; float: bottom;"> | |
| − | + | <div class= 'oneThirdClass'> | |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_Gibson_Assembly.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/6/64/T--Toronto--8_24_2018_gibson.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Gibson<span class='spacer'></span><br /><span class='spacer'></span>Assembly</span></h2> </a> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | / | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | / | + | |
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | </ | + | |
| − | < | + | |
| − | + | ||
| − | < | + | |
| − | + | ||
</div> | </div> | ||
| − | + | </div> | |
| − | <div class= | + | <div class= 'oneThirdClass'> |
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/f/f2/T--Toronto--_LB_Media_Preperation_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/f/f1/T--Toronto--2018_LBmediaprepprotocol.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>LB Media Preperation</span></h2> </a> | ||
</div> | </div> | ||
| − | + | </div> | |
| − | <div> | + | <div class= 'oneThirdClass'> |
| − | < | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_NEB_Monarch_Miniprep.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/0/05/T--Toronto--2018_NEBMonarchminipreppurification.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>NEB Monarch<span class='spacer'></span><br /><span class='spacer'></span>Minirep</span></h2> </a> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| − | + | </div> | |
| − | <div> | + | </div> |
| − | <img class=' | + | |
| − | + | <div style="padding-top: 20px; float: bottom;"> | |
| − | < | + | <div class= 'oneThirdClass'> |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/8/83/T--Toronto--_Phosphate_Buffered_Saline.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/d/dc/T--Toronto--2018_phosphatebuffersaline.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Phosphate<span class='spacer'></span><br /><span class='spacer'></span>Buffered Saline</span></h2> </a> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | <div class= 'oneThirdClass'> | |
| − | + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/f/f3/T--Toronto--_Rubidium_Chloride_Competent_Cells.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/5/5c/T--Toronto--2018_RuClcompetentcells.jpg" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Rubidium Chloride<span class='spacer'></span><br /><span class='spacer'></span>Component </span></h2> </a> | |
| + | </div> | ||
| + | </div> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/9/98/T--Toronto--_SOC_Medium_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--2018_SOCmedium.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>SOC Medium</span></h2> </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div style="padding-top: 20px; float: bottom;"> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/4/45/T--Toronto--_T4_Ligase_Protocol.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/2/2f/T--Toronto--2018_ligase.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span><span class='spacer'></span><span class='spacer'></span>Ligase</span></h2> </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/7/72/T--Toronto--_Lab_Safety.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/a/a3/T--Toronto--2018_labsafety.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Lab<span class='spacer'></span><br /><span class='spacer'></span>Safety</span></h2> </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class= 'oneThirdClass'> | ||
| + | <div class="image"> <a href="https://static.igem.org/mediawiki/2018/7/79/T--Toronto--_Basic_Terminology_and_Concepts.pdf"><img id="PopupImg" src="https://static.igem.org/mediawiki/2018/3/30/T--Toronto--2018_basicterminology.png" alt="Something1" style="width:100%;max-width:500px;padding:20px"> <h2><span>Basic<span class='spacer'></span><br /><span class='spacer'></span>Terminology</span></h2> </a> | ||
</div> | </div> | ||
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
| + | <div id="PopupModal" class="modal"> | ||
| + | <span class="close">×</span> | ||
| + | <img class="modal-content" id="img01"> | ||
| + | <div id="caption"></div> | ||
| + | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<script> | <script> | ||
| − | + | function getEventTarget(e) { | |
| − | + | e = e || window.event; | |
| − | + | return e.target || e.srcElement; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | // Get the <span> element that closes the modal | + | var ul = document.getElementById('PopupImgList'); |
| − | var span = document.getElementsByClassName("close")[0]; | + | ul.onclick = function(event) { |
| − | + | var target = getEventTarget(event); | |
| − | // When the user clicks on <span> (x), close the modal | + | <!--alert(target.src);--> |
| − | span.onclick = function() { | + | var modal = document.getElementById('PopupModal'); |
| + | |||
| + | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
| + | var img = target.alt; | ||
| + | var modalImg = document.getElementById("img01"); | ||
| + | var captionText = document.getElementById("caption"); | ||
| + | modal.style.display = "inline"; | ||
| + | modalImg.src = target.src; | ||
| + | |||
| + | |||
| + | captionText.innerHTML = target.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"; | modal.style.display = "none"; | ||
| − | } | + | } |
| + | }; | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 03:09, 18 October 2018
Experiments & Protocols
×
![]()