(70 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: 45px; | border-radius: 45px; | ||
cursor: pointer; | cursor: pointer; | ||
transition: 0.3s; | transition: 0.3s; | ||
+ | height: 300px; | ||
} | } | ||
− | + | ||
#PopupImg:hover {opacity: 0.7; z-index: -1;} | #PopupImg:hover {opacity: 0.7; z-index: -1;} | ||
− | + | ||
/* The Modal (background) */ | /* The Modal (background) */ | ||
.modal { | .modal { | ||
Line 28: | Line 30: | ||
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 { | ||
Line 36: | Line 38: | ||
overflow-y: scroll; | overflow-y: scroll; | ||
} | } | ||
− | + | ||
/* Caption of Modal Image */ | /* Caption of Modal Image */ | ||
#caption { | #caption { | ||
Line 48: | Line 50: | ||
height: 150px; | height: 150px; | ||
} | } | ||
− | + | ||
/* Add Animation */ | /* Add Animation */ | ||
.modal-content, #caption { | .modal-content, #caption { | ||
Line 56: | Line 58: | ||
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 { | ||
Line 77: | Line 79: | ||
transition: 0.3s; | transition: 0.3s; | ||
} | } | ||
− | + | ||
.close:hover, | .close:hover, | ||
.close:focus { | .close:focus { | ||
Line 84: | Line 86: | ||
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){ | ||
Line 91: | Line 93: | ||
} | } | ||
} | } | ||
− | + | ||
− | + | .image { | |
− | position: relative; | + | 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> | ||
Line 112: | Line 137: | ||
<div style="padding-top: 20px; margin-left:auto; margin-right:auto"> | <div style="padding-top: 20px; margin-left:auto; margin-right:auto"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/e/e4/T--Toronto--_Colony_PCR_Protocol_content.pdf"><img id="PopupImg" src="https:// | + | <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= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/5/5e/T--Toronto--_70%25_Ethanol_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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 class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/e/ec/T--Toronto--_Antibacterial_Stock_Preperation_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--_Bacterial_Transformation_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/ | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/d/df/T--Toronto--_Dpn1_Digestion.pdf"><img id="PopupImg" src="https:// | + | <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 style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/0/00/T--Toronto--_Electroporation_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/a/a8/T--Toronto--_Exclusion_PCR.pdf"><img id="PopupImg" src="https:// | + | <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 class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/2/2d/T--Toronto--_Gel_Electrophoresis_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | </div> | ||
− | + | </div> | |
+ | |||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_Gibson_Assembly.pdf"><img id="PopupImg" src="https:// | + | <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= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/f/f2/T--Toronto--_LB_Media_Preperation_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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 class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/d/d6/T--Toronto--_NEB_Monarch_Miniprep.pdf"><img id="PopupImg" src="https:// | + | <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> | |
+ | |||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/8/83/T--Toronto--_Phosphate_Buffered_Saline.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/f/f3/T--Toronto--_Rubidium_Chloride_Competent_Cells.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/9/98/T--Toronto--_SOC_Medium_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | </div> | ||
<div style="padding-top: 20px; float: bottom;"> | <div style="padding-top: 20px; float: bottom;"> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/4/45/T--Toronto--_T4_Ligase_Protocol.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/7/72/T--Toronto--_Lab_Safety.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
<div class= 'oneThirdClass'> | <div class= 'oneThirdClass'> | ||
− | <a href="https://static.igem.org/mediawiki/2018/7/79/T--Toronto--_Basic_Terminology_and_Concepts.pdf"><img id="PopupImg" src="https:// | + | <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> | ||
Line 199: | Line 240: | ||
<!--alert(target.src);--> | <!--alert(target.src);--> | ||
var modal = document.getElementById('PopupModal'); | var modal = document.getElementById('PopupModal'); | ||
− | + | ||
// Get the image and insert it inside the modal - use its "alt" text as a caption | // Get the image and insert it inside the modal - use its "alt" text as a caption | ||
var img = target.alt; | var img = target.alt; | ||
Line 206: | Line 247: | ||
modal.style.display = "inline"; | modal.style.display = "inline"; | ||
modalImg.src = target.src; | modalImg.src = target.src; | ||
− | + | ||
− | + | ||
captionText.innerHTML = target.alt; | captionText.innerHTML = target.alt; | ||
// Get the <span> element that closes the modal | // Get the <span> element that closes the modal | ||
var span = document.getElementsByClassName("close")[0]; | var span = document.getElementsByClassName("close")[0]; | ||
− | + | ||
// When the user clicks on <span> (x), close the modal | // When the user clicks on <span> (x), close the modal | ||
span.onclick = function() { | span.onclick = function() { |
Latest revision as of 03:09, 18 October 2018
Experiments & Protocols
×