Line 10: | Line 10: | ||
width: 100%; | width: 100%; | ||
margin-bottom: 0; | margin-bottom: 0; | ||
− | |||
display: table; | display: table; | ||
color: white; | color: white; | ||
− | background-image: url('https://static. | + | background-image: url('https://static.igem.org/mediawiki/2016/1/17/T--TEC-Costa_Rica--prostal_project_safety_bg.jpg'); |
background-size: cover; | background-size: cover; | ||
background-position: top; | background-position: top; | ||
Line 22: | Line 21: | ||
display: table-cell; | display: table-cell; | ||
vertical-align: middle; | vertical-align: middle; | ||
− | |||
} | } | ||
.parallax { | .parallax { | ||
Line 28: | Line 26: | ||
overflow-x: hidden; | overflow-x: hidden; | ||
overflow-y: auto; | overflow-y: auto; | ||
− | } | + | } |
.concept { | .concept { | ||
display: block; | display: block; | ||
Line 35: | Line 33: | ||
width: 80% | width: 80% | ||
} | } | ||
− | + | #safety-elements { | |
− | + | margin-top: 30px; | |
+ | margin-bottom: 25px; | ||
} | } | ||
− | + | #safety-elements p { text-align: center; } | |
− | + | .col-sm-3 { margin-bottom: 40px; } | |
− | + | .col-sm-3 img { | |
− | + | width: 150px; | |
− | . | + | height: 150px; |
− | + | ||
} | } | ||
− | .project .container-fluid .row .col-sm-4 { | + | #project-safety .container-fluid { |
+ | padding: 30px 25px; | ||
+ | } | ||
+ | #project-safety .container-fluid .row .col-sm-4 { | ||
padding: 20px; | padding: 20px; | ||
+ | } | ||
+ | #project-safety img { | ||
+ | margin: 0 auto; | ||
+ | width: 200px; | ||
} | } | ||
− | .section-image { | + | .more-project .container { |
+ | padding-top: 20px; | ||
+ | border-top: 1px solid #d3d3d3; | ||
+ | } | ||
+ | .more-project .container h2 { margin-bottom: 0; } | ||
+ | .more-project .marketing { margin-top: 20px; } | ||
+ | .more-project .marketing .col-lg-4 { | ||
+ | margin-bottom: 20px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | .more-project .marketing h2 { font-weight: normal; } | ||
+ | .more-project .marketing .col-lg-4 p { | ||
+ | margin-right: 10px; | ||
+ | margin-left: 10px; | ||
+ | } | ||
+ | .more-project .section-image { | ||
+ | margin: 0 auto; | ||
border-radius: 50%; | border-radius: 50%; | ||
− | height: | + | height: 200px; |
− | width: | + | width: 200px; |
background-color: #364C5E; | background-color: #364C5E; | ||
} | } | ||
− | .section-image img { | + | .more-project .section-image img { |
margin: 0 auto 0 auto; | margin: 0 auto 0 auto; | ||
− | height: | + | height: 100px; |
− | width: | + | width: 100px; |
margin-top: 25px; | margin-top: 25px; | ||
} | } | ||
− | .image-align { | + | .more-project .image-align { |
padding-top: 20px; | padding-top: 20px; | ||
text-align: center; | text-align: center; | ||
− | } | + | } |
.slideanim {visibility:hidden;} | .slideanim {visibility:hidden;} | ||
.slide { | .slide { | ||
Line 89: | Line 110: | ||
} | } | ||
@media screen and (max-width: 736px) { | @media screen and (max-width: 736px) { | ||
+ | .jumbotron h1 { font-size: 2.5em; } | ||
+ | .jumbotron p { font-size: .9em; } | ||
} | } | ||
@media screen and (max-width: 480px) { | @media screen and (max-width: 480px) { | ||
− | } | + | } |
</style> | </style> | ||
</head> | </head> | ||
Line 109: | Line 132: | ||
<img id="prostal-logo" alt="Prostal Brand" class="featurette-image img-responsive center-block" src="https://static.igem.org/mediawiki/2016/0/0e/T--TEC-Costa_Rica--prostal_logo.png"></a> | <img id="prostal-logo" alt="Prostal Brand" class="featurette-image img-responsive center-block" src="https://static.igem.org/mediawiki/2016/0/0e/T--TEC-Costa_Rica--prostal_logo.png"></a> | ||
</div> | </div> | ||
+ | |||
<div id="navbar" class="collapse navbar-collapse pull-right"> | <div id="navbar" class="collapse navbar-collapse pull-right"> | ||
<ul class="nav navbar-nav"> | <ul class="nav navbar-nav"> | ||
Line 165: | Line 189: | ||
<html> | <html> | ||
<body> | <body> | ||
− | <main class="project well"> | + | <main class="project-safety well"> |
<div class="jumbotron text-center parallax"> | <div class="jumbotron text-center parallax"> | ||
− | <h1 style="font-size: 50px;"> | + | <h1 style="font-size: 50px;">Safety</h1> |
</div> | </div> | ||
<div class="concept"> | <div class="concept"> | ||
− | <p style="text-align: center;"> | + | <p style="text-align: center;">Our project is related to the detection of a human disease via a biomarker molecule found in the urine of patients with prostate cancer. Since local regulation does not allow us to work with human samples, we designed our project in a way that it can work as a proof-of-concept of a detection system and pose no risk to human health.</p> |
− | </div> | + | </div> |
− | <h2> | + | <h2>Lab work</h2> |
− | <p> | + | <p>During our work in the lab, we followed a series of rules to ascertain that no risks were undertaken.</p> |
− | < | + | <div id="safety-elements" class="container-fluid text-center"> |
− | + | <div class="row"> | |
− | + | <div class="col-sm-3"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/4/44/T--TEC-Costa_Rica--prostal_project_safety_labcoat.png"> | |
− | + | <p>Use of lab coat</p> | |
− | + | </div> | |
− | + | <div class="col-sm-3"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/1/19/T--TEC-Costa_Rica--prostal_project_safety_gloves.png"> | |
− | + | <p>Use of nitrile gloves</p> | |
− | + | </div> | |
− | + | <div class="col-sm-3"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/4/47/T--TEC-Costa_Rica--prostal_project_safety_goggles.png"> | |
− | + | <p>Use of safety goggles</p> | |
− | + | </div> | |
− | + | <div class="col-sm-3"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/6/66/T--TEC-Costa_Rica--prostal_project_safety_bacteria.png"> | |
− | + | <p>Management of bacteria in biosafety cabinet</p> | |
+ | </div> | ||
</div> | </div> | ||
− | <div class="col-sm- | + | <div class="row slideanim" style="border-bottom: 1px solid #d3d3d3;"> |
− | + | <div class="col-sm-3"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/1/18/T--TEC-Costa_Rica--prostal_project_safety_volatil.png"> | |
− | + | <p>Usage of volatile chemicals in fume hood</p> | |
− | + | </div> | |
− | + | <div class="col-sm-3"> | |
+ | <img src="https://static.igem.org/mediawiki/2016/f/fe/T--TEC-Costa_Rica--prostal_project_safety_cleaning.png"> | ||
+ | <p>Cleaning and Sterilization of the Lab</p> | ||
+ | </div> | ||
+ | <div class="col-sm-3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/f6/T--TEC-Costa_Rica--prostal_project_safety_biohazard.png"> | ||
+ | <p>Correct disposal of bio-hazardous residues</p> | ||
+ | </div> | ||
+ | <div class="col-sm-3"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/8/8e/T--TEC-Costa_Rica--prostal_project_safety_areas.png"> | ||
+ | <p>Separate areas for work with bacteria, DNA and electrophoresis</p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | <div id="project-safety" class="container-fluid slideanim"> | |
− | <div | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
<div class="row"> | <div class="row"> | ||
<div class="col-sm-4"> | <div class="col-sm-4"> | ||
− | + | <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/7/78/T--TEC-Costa_Rica--prostal_project_project-safety.png" alt="Project Safety"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
<div class="col-sm-8"> | <div class="col-sm-8"> | ||
− | + | <h2>Project safety</h2> | |
− | + | <p>In order to have a functional system without having to use human samples, we decided to synthesize a DNA fragment of the gene we are going to detect, so we can express it in the bacteria. Then, we are working with dCas9, inteins, TEV protease, and GFP proteins, which are not from pathogenic organisms and were obtained from the Distribution or as gBlocks. All the experiments and cloning is made in Escherichia coli strains DH5alpha, TOP10 and BL21. No pathogenic organisms are used in the lab.</p> | |
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <div class="more-project slideanim"> | ||
+ | <div class="container marketing"> | ||
+ | <div class="row"> | ||
+ | <div class="col-lg-4"> | ||
+ | <div class="section-image"> | ||
+ | <div class="image-align"> | ||
+ | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/System"><img id="system" src="https://static.igem.org/mediawiki/2016/6/6b/T--TEC-Costa_Rica--prostal_project_system.png" class="img-responsive" alt="Project System"></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <h2>System</h2> | ||
+ | <p style="text-align: center;">Take a look to our system!</p> | ||
+ | </div> | ||
+ | <div class="col-lg-4"> | ||
+ | <div class="section-image"> | ||
+ | <div class="image-align"> | ||
+ | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Modelling_Simulations"><img id="modelling_simulations" src="https://static.igem.org/mediawiki/2016/1/1c/T--TEC-Costa_Rica--prostal_project_simulations.png" class="img-responsive" alt="Project Modelling & Simulations"></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <h2>Modelling & Simulations</h2> | ||
+ | <p style="text-align: center;">Take a look to our Modellations & Simulation!</p> | ||
+ | </div> | ||
+ | <div class="col-lg-4"> | ||
+ | <div class="section-image"> | ||
+ | <div class="image-align"> | ||
+ | <a href="https://2016.igem.org/Team:TEC-Costa_Rica/Project/Collaborations"><img id="collaborations" src="https://static.igem.org/mediawiki/2016/7/76/T--TEC-Costa_Rica--prostal_project_collaborations.png" alt="Project Collaborations"></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <h2>Collaborations</h2> | ||
+ | <p style="text-align: center;">Check out our collaborations!</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | + | </main> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </main> | + | |
<script type="text/javascript"> | <script type="text/javascript"> | ||
var system = document.getElementById('system'); | var system = document.getElementById('system'); | ||
system.addEventListener("mouseover", function() { | system.addEventListener("mouseover", function() { | ||
− | this.style.height = " | + | this.style.height = "125px"; |
− | this.style.width = " | + | this.style.width = "125px"; |
this.style.marginTop = "10px"; | this.style.marginTop = "10px"; | ||
}); | }); | ||
system.addEventListener("mouseout", function() { | system.addEventListener("mouseout", function() { | ||
− | this.style.height = " | + | this.style.height = "100px"; |
− | this.style.width = " | + | this.style.width = "100px"; |
this.style.marginTop = "25px"; | this.style.marginTop = "25px"; | ||
}); | }); | ||
var modelling_simulations = document.getElementById('modelling_simulations'); | var modelling_simulations = document.getElementById('modelling_simulations'); | ||
− | |||
var safety = document.getElementById('safety'); | var safety = document.getElementById('safety'); | ||
var collaborations = document.getElementById('collaborations'); | var collaborations = document.getElementById('collaborations'); | ||
Line 292: | Line 299: | ||
elements.forEach(function(element) { | elements.forEach(function(element) { | ||
element.addEventListener("mouseover", function() { | element.addEventListener("mouseover", function() { | ||
− | this.style.height = " | + | this.style.height = "125px"; |
− | this.style.width = " | + | this.style.width = "125px"; |
this.style.marginTop = "5px"; | this.style.marginTop = "5px"; | ||
}); | }); | ||
element.addEventListener("mouseout", function() { | element.addEventListener("mouseout", function() { | ||
− | this.style.height = " | + | this.style.height = "100px"; |
− | this.style.width = " | + | this.style.width = "100px"; |
this.style.marginTop = "25px"; | this.style.marginTop = "25px"; | ||
}); | }); | ||
}); | }); | ||
− | </script> | + | </script> |
</body> | </body> | ||
</html> | </html> | ||
{{:Team:TEC-Costa_Rica/Template:Scripts}} | {{:Team:TEC-Costa_Rica/Template:Scripts}} | ||
{{:Team:TEC-Costa_Rica/Template:Footer}} | {{:Team:TEC-Costa_Rica/Template:Footer}} |
Revision as of 20:38, 10 October 2016
Safety
Our project is related to the detection of a human disease via a biomarker molecule found in the urine of patients with prostate cancer. Since local regulation does not allow us to work with human samples, we designed our project in a way that it can work as a proof-of-concept of a detection system and pose no risk to human health.
Lab work
During our work in the lab, we followed a series of rules to ascertain that no risks were undertaken.
Use of lab coat
Use of nitrile gloves
Use of safety goggles
Management of bacteria in biosafety cabinet