Difference between revisions of "Team:Bulgaria/safety"

(Created page with "<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet"> <link hr...")
 
 
(22 intermediate revisions by the same user not shown)
Line 7: Line 7:
 
</head>
 
</head>
 
<style>
 
<style>
 +
 +
* {
 +
  -webkit-box-sizing: border-box;
 +
          box-sizing: border-box;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
html {
 +
  font-size:16px;
 +
}
 +
body {
 +
  width: 100%;
 +
  margin: 48px 0 0 0;
 +
  padding: 0;
 +
  color: black;
 +
  background-color: white;
 +
  font: inherit;
 +
  font-size:16px;
 +
  word-wrap: break-word;
 +
}
 +
 +
@media (min-width: 1024px) {
 +
  body {
 +
    margin: 16px 0 0 0;
 +
  }
 +
}
 +
 +
 +
#globalWrapper {
 +
  width: 100%;
 +
  padding: 0;
 +
  background-color: #149375;
 +
  position: relative;
 +
  font-size: 16px;
 +
}
 +
#content {
 +
  width: 100%;
 +
  min-height: 80vh;
 +
  margin: 0;
 +
  padding: 0;
 +
  border: none;
 +
  color: inherit;
 +
  background-color: #ffffff;
 +
  position: relative;
 +
}
 +
#HQ_page {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  background: none;
 +
}
 +
#top_title{display:none;}
 +
 +
 +
#bodyContent {
 +
}
  
 
html *{
 
html *{
−
cursor:url(idea.png),auto;
+
cursor:url("https://static.igem.org/mediawiki/2018/4/48/T--Bulgaria--idea.png"),auto;
 
}
 
}
  
 
h1{
 
h1{
 +
padding-top: 70px;
 
font-size: 40px;
 
font-size: 40px;
−
font-family: 'Alegreya Sans SC', sans-serif;
+
font-family: 'Alegreya Sans SC', sans-serif !important;
−
 
+
padding-bottom: 10px;
 
}
 
}
  
Line 24: Line 81:
 
height: 110%;
 
height: 110%;
 
width: 100%;
 
width: 100%;
−
 
−
#background-image: url("bg.jpg");
 
 
background-color: #0A1215;
 
background-color: #0A1215;
 +
 
}
 
}
  
−
 
+
.backgroundPicture{
−
 
+
position: fixed;
−
.custompage{
+
top: 15;
−
height:20px;
+
left: 0;
−
width:40px;
+
width: 100%;
−
border: 1px solid green
+
height: 100%;
−
background-color:Red;
+
opacity: 0.5;
 +
background-image: url("https://static.igem.org/mediawiki/2018/7/70/T--Bulgaria--safety.jpg");
 +
background-color: #0A1215;
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
background-size: cover;
 
}
 
}
 +
  
 
.navigation {
 
.navigation {
−
  position:fixed;
+
position:fixed;
−
  top:15px;
+
top:15px;
−
  width: 100%;
+
width: 100%;
−
  left:0px;
+
left:0px;
−
  overflow: hidden;
+
    #overflow: hidden;
−
  background-color: #62071B;
+
    background-color: #62071B;
 +
    font-family: 'Raleway', sans-serif;
 
}
 
}
  
 
.navigation a {
 
.navigation a {
−
  font-family: 'Raleway', sans-serif;
+
    float: left;
−
  float: left;
+
    font-size: 16px;
−
  display: block;
+
    color: white;
−
  color: White;
+
    text-align: center;
−
  text-align: center;
+
    padding: 14px 16px;
−
  padding: 14px 16px;
+
    text-decoration: none;
−
  text-decoration: none;
+
−
  font-size: 17px;
+
 
}
 
}
  
−
.navigation a:hover {
+
.dropdown {
−
  background-color: #380615;
+
    float: left;
−
  color: White;
+
    overflow: hidden;
 +
}
 +
 
 +
.dropdown .dropNAVbtn {
 +
    font-size: 16px;   
 +
    color: white;
 +
    padding: 14px 16px;
 +
    background-color: #62071B;
 +
    font-family: 'Raleway', sans-serif;
 +
}
 +
 
 +
.navigation a:hover, .dropdown:hover .dropNAVbtn {
 +
    background-color: #9F182F;
 +
color: white;
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 100000 !important;
 +
}
 +
 
 +
.dropdown-content a {
 +
    float: none;
 +
    color: black;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
 +
 
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 
}
 
}
  
Line 79: Line 179:
 
@media screen and (max-width: 1000px) {
 
@media screen and (max-width: 1000px) {
 
   .navigation a:not(:first-child) {display: none;}
 
   .navigation a:not(:first-child) {display: none;}
 +
  .navigation .dropdown:not(:first-child) {display: none;}
 
   .navigation a.icon {
 
   .navigation a.icon {
 
     float: right;
 
     float: right;
 
     display: block;
 
     display: block;
 
   }
 
   }
 +
 
 
}
 
}
  
Line 96: Line 198:
 
   }
 
   }
 
   .navigation.responsive a {
 
   .navigation.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
  .navigation.responsive .dropdown {
 
     float: none;
 
     float: none;
 
     display: block;
 
     display: block;
Line 102: Line 209:
 
}
 
}
  
−
.backgroundPicture{
 
−
position: fixed;
 
−
top: 15;
 
−
left: 0;
 
−
width: 100%;
 
−
height: 100%;
 
−
opacity: 0.5;
 
−
background-image: url("safety.jpg");
 
−
background-color: #0A1215;
 
−
background-position: center;
 
−
background-repeat: no-repeat;
 
−
background-size: cover;
 
−
}
 
  
 
.contentHolder{
 
.contentHolder{
Line 125: Line 219:
 
opacity: 0.8;
 
opacity: 0.8;
 
position: relative;
 
position: relative;
−
top:80vh;
+
top:70vh;
 
margin-left: auto;
 
margin-left: auto;
 
margin-right: auto;
 
margin-right: auto;
Line 131: Line 225:
 
padding-bottom: 70px;
 
padding-bottom: 70px;
 
padding-top: 20px;
 
padding-top: 20px;
−
background-color: b5b7b8;
+
background-color: #b5b7b8;
 
height: auto;
 
height: auto;
−
text-align: center;
+
text-align: center !important;
 +
}
 +
 
 +
a{
 +
color: black;
 +
 
 +
}
 +
a:hover{
 +
color: black;
 +
text-decoration: none;
 +
 
 
}
 
}
  
Line 142: Line 246:
  
 
#topTitle{
 
#topTitle{
 +
padding-top: 50px;
 
border-radius: 50px 50px 0px 0px;
 
border-radius: 50px 50px 0px 0px;
 
opacity: 1;
 
opacity: 1;
Line 156: Line 261:
 
 
 
p{
 
p{
 +
text-align: center !important;
 
margin-left: 64px;
 
margin-left: 64px;
 
margin-right: 64px;
 
margin-right: 64px;
−
font-family: 'Montserrat', sans-serif;
+
font-family: 'Montserrat', sans-serif !important;
−
font-size: 20px;
+
font-size: 20px !important;
 
}
 
}
  
Line 250: Line 356:
 
     border: none;
 
     border: none;
 
     cursor: pointer;
 
     cursor: pointer;
−
width: 40vw;
+
width: 50vw;
 
}
 
}
  
Line 259: Line 365:
 
     position: absolute;
 
     position: absolute;
 
     background-color: #f9f9f9;
 
     background-color: #f9f9f9;
−
     width: 40vw;
+
     width: 50vw;
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     z-index: 1;
 
     z-index: 1;
Line 286: Line 392:
 
.quickfind {
 
.quickfind {
 
     position: absolute;
 
     position: absolute;
−
width: 40vw;
+
width: 50vw;
−
left: 30vw;
+
left: 25vw;
−
top: 80px;
+
top: 100px;
 
}
 
}
 
}
 
}
Line 295: Line 401:
  
  
−
.icon-scroll,
+
 
−
.icon-scroll:before {
+
 
−
   position: absolute;
+
#topbtn {
−
   left: 50%;
+
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 18px;
 +
   border: none;
 +
   outline: none;
 +
  background-color: green;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 4px;
 
}
 
}
−
.icon-scroll {
+
 
−
  width: 40px;
+
#topbtn:hover {
−
   height: 70px;
+
   background-color: #555;
−
  margin-left: -20px;
+
−
  top: 70vh;
+
−
  margin-top: -35px;
+
−
  box-shadow: inset 0 0 0 1px #fff;
+
−
  border-radius: 25px;
+
 
}
 
}
−
.icon-scroll:before {
+
 
−
  content: '';
+
#scroldown {
−
   width: 8px;
+
   width: 100%;
−
   height: 8px;
+
   height: 20;
−
   background: #fff;
+
    
−
  margin-left: -4px;
+
−
  top: 8px;
+
−
  border-radius: 4px;
+
−
  -webkit-animation-duration: 1.5s;
+
−
          animation-duration: 1.5s;
+
−
  -webkit-animation-iteration-count: infinite;
+
−
          animation-iteration-count: infinite;
+
−
  -webkit-animation-name: scroll;
+
−
          animation-name: scroll;
+
 
}
 
}
−
@-webkit-keyframes scroll {
+
#scroldown::before{
−
   0% {
+
   content: '╲╱';
−
    opacity: 1;
+
   color: #fff;
−
   }
+
   position: fixed;
−
   100% {
+
  opacity: 0.7;
−
    opacity: 0;
+
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
−
    -webkit-transform: translateY(46px);
+
  font-size: 20px;
−
            transform: translateY(46px);
+
   width: 60px;
−
   }
+
  height: 40px;
 +
  line-height: 40px;
 +
  text-align: center;
 +
  border-radius: 10px;
 +
  bottom: 20px;
 +
  left: 50%;
 +
  margin-left: -30px;
 +
  animation: bounce 1s ease infinite;
 
}
 
}
−
@keyframes scroll {
+
 
−
   0% {
+
@keyframes bounce {
−
     opacity: 1;
+
   50% {
 +
     transform: translateY(-50%);
 
   }
 
   }
 
   100% {
 
   100% {
−
     opacity: 0;
+
     transform: translateY(0);
−
    -webkit-transform: translateY(46px);
+
−
            transform: translateY(46px);
+
 
   }
 
   }
 
}
 
}
 +
  
 
</style>
 
</style>
Line 353: Line 464:
 
       var hash = this.hash;
 
       var hash = this.hash;
 
       $('html, body').animate({
 
       $('html, body').animate({
−
         scrollTop: $(hash).offset().top-80
+
         scrollTop: $(hash).offset().top
 
       }, 800, function(){
 
       }, 800, function(){
 
         window.location.hash = hash;
 
         window.location.hash = hash;
Line 362: Line 473:
 
</script>
 
</script>
 
<script>
 
<script>
 +
window.onscroll = function() {scrollFunction()};
 +
 +
function scrollFunction() {
 +
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 +
        document.getElementById("topbtn").style.display = "block";
 +
    } else {
 +
        document.getElementById("topbtn").style.display = "none";
 +
    }
 +
}
 +
function topFunction() {
 +
    document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 +
}
 +
 
function burgermenu() {
 
function burgermenu() {
 
     var x = document.getElementById("nav");
 
     var x = document.getElementById("nav");
Line 371: Line 496:
 
}
 
}
 
</script>
 
</script>
 +
<body>
 
<!-- CUSTOM OVERLAY -->
 
<!-- CUSTOM OVERLAY -->
 
<div class="overlays" id="bottomLayer"></div>
 
<div class="overlays" id="bottomLayer"></div>
Line 391: Line 517:
 
</div>
 
</div>
  
−
<div class='icon-scroll'></div>
+
 
 +
<button onclick="topFunction()" id="topbtn" title="Go to top">Top</button>
 
<!-- CUSTOM TOP -->
 
<!-- CUSTOM TOP -->
 
<div class="contentHolder" id="topTitle">
 
<div class="contentHolder" id="topTitle">
Line 399: Line 526:
  
  
−
 
+
<div id="scroldown"></div>
 
<!-- CUSTOM CONTENT HOLDER -->
 
<!-- CUSTOM CONTENT HOLDER -->
 
<div class="contentHolder" id="WHOUSE">
 
<div class="contentHolder" id="WHOUSE">
Line 489: Line 616:
 
</p>
 
</p>
 
</div>
 
</div>
−
 
  
 
<!-- CUSTOM MENU -->
 
<!-- CUSTOM MENU -->
 
<div class="navigation" id="nav">
 
<div class="navigation" id="nav">
−
   <a href="index.html">HOME</a>
+
   <a href="https://2018.igem.org/Team:Bulgaria">HOME</a>
−
   <a href="MeetTheTeam.html">TEAM</a>
+
   <div class="dropdown">
−
  <a href="project.html">PROJECT</a>
+
    <button class="dropNAVbtn">TEAM
−
   <a href="human_practices.html">HUMAN PRACTICES</a>
+
      <i class="fa fa-caret-down"></i>
−
  <a href="collaborations.html">COLLABORATIONS</a>
+
    </button>
−
   <a href="parts.html">PARTS</a>
+
    <div class="dropdown-content">
−
   <a href="safety.html" id="activeMenu">SAFETY</a>
+
      <a href="https://2018.igem.org/Team:Bulgaria/theteam">MEMBERS</a>
−
   <a href="jForm.html" id="specialMenu">JUDGING FORM</a>
+
      <a href="https://2018.igem.org/Team:Bulgaria/attrib">ATTRIBUTIONS</a>
 +
</div>
 +
  </div>
 +
  <div class="dropdown">
 +
    <button class="dropNAVbtn">PROJECT  
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:Bulgaria/theproject">DESCRIPTION</a>
 +
      <a href="https://2018.igem.org/Team:Bulgaria/DESIGN">DESIGN</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/PROTOCOLS">PROTOCOLS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/LABBOOK">LAB BOOK</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/RESULTS">RESULTS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/CONTRIBUTION">CONTRIBUTION</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/IMPROVE">IMPROVE</a>
 +
</div>
 +
   </div>
 +
  <div class="dropdown">
 +
    <button class="dropNAVbtn">HUMAN PRACTICES
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:Bulgaria/publicEng">PUBLIC ENGAGEMENTS</a>
 +
      <a href="https://2018.igem.org/Team:Bulgaria/IntHP">INTEGRATED HUMAN PRACTICES</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/survey">SURVEY</a>
 +
</div>
 +
  </div>
 +
 
 +
    <div class="dropdown">
 +
    <button class="dropNAVbtn">COLLABORATIONS
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:Bulgaria/COLLABMEETINGS">MEETINGS</a>
 +
      <a href="https://2018.igem.org/Team:Bulgaria/COLLABSURVEYS">SURVEYS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/COLLABOTHERS">OTHERS</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/COLLABfollow">#FollowMeToiGEM</a>
 +
</div>
 +
  </div>  
 +
   <a href="https://2018.igem.org/Team:Bulgaria/parts">PARTS</a>
 +
   <a href="https://2018.igem.org/Team:Bulgaria/safety" id="activeMenu">SAFETY</a>
 +
    
 +
    <div class="dropdown">
 +
    <button class="dropNAVbtn">MEDAL CRITERIA
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="https://2018.igem.org/Team:Bulgaria/MEDALBRONZE">BRONZE</a>
 +
      <a href="https://2018.igem.org/Team:Bulgaria/MEDALSILVER">SILVER</a>
 +
  <a href="https://2018.igem.org/Team:Bulgaria/MEDALGOLD">GOLD</a>
 +
<a href="https://2018.igem.org/Team:Bulgaria/MEDALAWARD">SPECIAL AWARD</a>
 +
</div>
 +
  </div>
 +
  <a href="https://igem.org/2018_Judging_Form?id=2847" id="specialMenu">JUDGING FORM</a>
 
   <a href="javascript:void(0);" class="icon" onclick="burgermenu()">
 
   <a href="javascript:void(0);" class="icon" onclick="burgermenu()">
 
MENU
 
MENU
Line 506: Line 685:
  
 
</div>
 
</div>
 +
</body>
 
</html>
 
</html>

Latest revision as of 23:31, 17 October 2018

PROJECT USE IS IT SAFE USED ORGANISM STRAINS POTENTIAL RISKS WASTE TREATMENT EMERGENCY REACTIONS PROTECTIVE EQUIPMENT OTHER RULES

WHO WILL USE OUR PRODUCT

Our target audience consists of scientists and clinicians interested in the detection of the Delta F508 mutation , responsible for approximately 70% of the Cystic Fibrosis cases in Bulgaria and Europe as a whole. Our system is pla nned to be used only in a controlled environment.

IS IT SAFE?

Not only is it safer than any other technology that does the same thing, but it is also drastically cheaper and vastly beneficial due to its simplicity - it does not require DNA sequencing for the detection step.

USED ORGANISM STRAINS

# Escherichia coli - DH5α strain
# Escherichia coli - TOP10 strain

POTENTIAL RISKS

Our project poses the typical risks of working with a level 1 GMO.

WASTE TREATMENT

All biological materials and equipment used for handling were collected separately and autoclaved.

EMERGENCY REACTIONS

If lab coats or clothes start burning:
emergency showers
If acids or other harmful liquids get in the eyes:
eye showers
If injuries occur:
treat them with first aid-kits, report the injury, go to the hospital if necessary
If solutions with GMO are running down the bench:
swap and disinfect the place with NaClO (bleach)

PROTECTIVE EQUIPMENT

Eye protection
Lab coats
Safety glasses in special areas of the lab
(should be used in other areas if necessary)

OTHER RULES

Do not work alone!
There should be at least one person in the lab with you.

Do not pipette with your mouth!

Disinfect hands after contamination with GMOs!

Disinfect hands and wash them after working in the lab!

Do not eat, swallow, wash and snore with any chemicals!

Do not bring food, drinks, pets and snacks in the lab!

Be sure that you have informed the instructor of the next step of the experiment plan and gotten the permission of him!

Record the general nature of the work clearly in your lab journal!