|
|
| (22 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <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 href="https://fonts.googleapis.com/css?family=Montserrat:300|Vollkorn:700|Wallpoet|Heebo:800|Alegreya+Sans+SC:900" rel="stylesheet">
| |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
| |
| − | </head>
| |
| − | <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 *{
| |
| − | cursor:url("https://static.igem.org/mediawiki/2018/4/48/T--Bulgaria--idea.png"),auto;
| |
| − | }
| |
| − |
| |
| − | h1{
| |
| − | padding-top: 70px;
| |
| − | font-size: 40px;
| |
| − | font-family: 'Alegreya Sans SC', sans-serif !important;
| |
| − | padding-bottom: 10px;
| |
| − | }
| |
| − |
| |
| − | #bottomLayer{
| |
| − | position: fixed;
| |
| − | top:15px;
| |
| − | left:0px;
| |
| − | height: 110%;
| |
| − | width: 100%;
| |
| − | background-color: #0A1215;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .backgroundPicture{
| |
| − | position: fixed;
| |
| − | top: 15;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | 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 {
| |
| − | position:fixed;
| |
| − | top:15px;
| |
| − | width: 100%;
| |
| − | left:0px;
| |
| − | overflow: hidden;
| |
| − | background-color: #62071B;
| |
| − | }
| |
| − |
| |
| − | .navigation a {
| |
| − | font-family: 'Raleway', sans-serif;
| |
| − | float: left;
| |
| − | display: block;
| |
| − | color: White;
| |
| − | text-align: center;
| |
| − | padding: 14px 16px;
| |
| − | text-decoration: none;
| |
| − | font-size: 17px;
| |
| − | }
| |
| − |
| |
| − | .navigation a:hover {
| |
| − | background-color: #380615;
| |
| − | color: White;
| |
| − | }
| |
| − |
| |
| − | #specialMenu {
| |
| − | background-color: #D5898A;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | #activeMenu{
| |
| − | background-color: #9F182F;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | .navigation .icon {
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1000px) {
| |
| − | .navigation a:not(:first-child) {display: none;}
| |
| − | .navigation a.icon {
| |
| − | float: right;
| |
| − | display: block;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1000px) {
| |
| − | .navigation.responsive { position:fixed;
| |
| − | top:15px;
| |
| − | width: 100%;
| |
| − | left:0px;}
| |
| − | .navigation.responsive .icon {
| |
| − | position: absolute;
| |
| − | right: 0;
| |
| − | top: 0;
| |
| − | }
| |
| − | .navigation.responsive a {
| |
| − | float: none;
| |
| − | display: block;
| |
| − | text-align: left;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .contentHolder{
| |
| − | -webkit-touch-callout: none;
| |
| − | -webkit-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | -moz-user-select: none;
| |
| − | -ms-user-select: none;
| |
| − | user-select: none;
| |
| − | opacity: 0.8;
| |
| − | position: relative;
| |
| − | top:80vh;
| |
| − | margin-left: auto;
| |
| − | margin-right: auto;
| |
| − | width: 850px;
| |
| − | padding-bottom: 70px;
| |
| − | padding-top: 20px;
| |
| − | background-color: #b5b7b8;
| |
| − | height: auto;
| |
| − | text-align: center !important;
| |
| − | }
| |
| − |
| |
| − | a{
| |
| − | color: black;
| |
| − |
| |
| − | }
| |
| − | a:hover{
| |
| − | color: black;
| |
| − | text-decoration: none;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .contentHolder:hover{
| |
| − | background-color: C5C7C8;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #topTitle{
| |
| − | padding-top: 50px;
| |
| − | border-radius: 50px 50px 0px 0px;
| |
| − | opacity: 1;
| |
| − | text-align: center;
| |
| − | font-family: 'Heebo', sans-serif;
| |
| − | font-size: 60px;
| |
| − | height: 30px;
| |
| − | }
| |
| − | #topTitle:hover{
| |
| − | background-color: B5B7B8;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | p{
| |
| − | text-align: center !important;
| |
| − | margin-left: 64px;
| |
| − | margin-right: 64px;
| |
| − | font-family: 'Montserrat', sans-serif !important;
| |
| − | font-size: 20px !important;
| |
| − | }
| |
| − |
| |
| − | strong{
| |
| − | font-family: 'Heebo', sans-serif;
| |
| − | }
| |
| − |
| |
| − | .dropbtn {
| |
| − | background-color: #4CAF50;
| |
| − | color: white;
| |
| − | padding: 16px;
| |
| − | font-size: 16px;
| |
| − | border: none;
| |
| − | cursor: pointer;
| |
| − | width: 20vw;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .quickfind-content {
| |
| − | font-family: 'Heebo', sans-serif;
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | width: 20vw;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .quickfind-content a {
| |
| − | color: black;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: center;
| |
| − | border-style: solid none none none;
| |
| − | }
| |
| − |
| |
| − | .quickfind-content a:hover {background-color: #B1B1B1}
| |
| − |
| |
| − | .quickfind:hover .quickfind-content {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .quickfind:hover .dropbtn {
| |
| − | background-color: #3e8e41;
| |
| − | }
| |
| − | .quickfind {
| |
| − | position: absolute;
| |
| − | width: 20vw;
| |
| − | left: 40vw;
| |
| − | top: 15vh;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1000px) {
| |
| − |
| |
| − | p{
| |
| − | margin-left: 32px;
| |
| − | margin-right: 32px;
| |
| − | }
| |
| − |
| |
| − | .contentHolder:hover{
| |
| − | background-color: B5B7B8;
| |
| − |
| |
| − | }
| |
| − | .contentHolder{
| |
| − | height: auto;
| |
| − | width: auto;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | #topTitle{
| |
| − | border-radius: 50px 50px 0px 0px;
| |
| − | opacity: 1;
| |
| − | text-align: center;
| |
| − | font-family: 'Heebo', sans-serif;
| |
| − | font-size: 42px;
| |
| − | height: 0vw;
| |
| − | }
| |
| − | #topTitle:hover{
| |
| − | background-color: B5B7B8;
| |
| − | }
| |
| − |
| |
| − | .dropbtn {
| |
| − | background-color: #4CAF50;
| |
| − | color: white;
| |
| − | padding: 16px;
| |
| − | font-size: 16px;
| |
| − | border: none;
| |
| − | cursor: pointer;
| |
| − | width: 50vw;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .quickfind-content {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | background-color: #f9f9f9;
| |
| − | width: 50vw;
| |
| − | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | .quickfind-content a {
| |
| − | color: black;
| |
| − | padding: 12px 16px;
| |
| − | text-decoration: none;
| |
| − | display: block;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .quickfind-content a:hover {
| |
| − | background-color: #f1f1f1;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | .quickfind:hover .quickfind-content {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .quickfind:hover .dropbtn {
| |
| − | background-color: #3e8e41;
| |
| − | }
| |
| − | .quickfind {
| |
| − | position: absolute;
| |
| − | width: 50vw;
| |
| − | left: 25vw;
| |
| − | top: 100px;
| |
| − | }
| |
| − | }
| |
| − | <--!end mobile->
| |
| − |
| |
| − |
| |
| − |
| |
| − | .icon-scroll,
| |
| − | .icon-scroll:before {
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | }
| |
| − | .icon-scroll {
| |
| − | width: 40px;
| |
| − | height: 70px;
| |
| − | margin-left: -20px;
| |
| − | top: 70vh;
| |
| − | margin-top: -35px;
| |
| − | box-shadow: inset 0 0 0 1px #fff;
| |
| − | border-radius: 25px;
| |
| − | }
| |
| − | .icon-scroll:before {
| |
| − | content: '';
| |
| − | width: 8px;
| |
| − | height: 8px;
| |
| − | 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 {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(46px);
| |
| − | transform: translateY(46px);
| |
| − | }
| |
| − | }
| |
| − | @keyframes scroll {
| |
| − | 0% {
| |
| − | opacity: 1;
| |
| − | }
| |
| − | 100% {
| |
| − | opacity: 0;
| |
| − | -webkit-transform: translateY(46px);
| |
| − | transform: translateY(46px);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #topbtn {
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − | #topbtn:hover {
| |
| − | background-color: #555;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − | $("a").on('click', function(event) {
| |
| − | if (this.hash !== "") {
| |
| − | event.preventDefault();
| |
| − | var hash = this.hash;
| |
| − | $('html, body').animate({
| |
| − | scrollTop: $(hash).offset().top
| |
| − | }, 800, function(){
| |
| − | window.location.hash = hash;
| |
| − | });
| |
| − | }
| |
| − | });
| |
| − | });
| |
| − | </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() {
| |
| − | var x = document.getElementById("nav");
| |
| − | if (x.className === "navigation") {
| |
| − | x.className += " responsive";
| |
| − | } else {
| |
| − | x.className = "navigation";
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − | <body>
| |
| − | <!-- CUSTOM OVERLAY -->
| |
| − | <div class="overlays" id="bottomLayer"></div>
| |
| − | <div class="backgroundPicture">
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | <div class="quickfind">
| |
| − | <button class="dropbtn">LEARN MORE</button>
| |
| − | <div class="quickfind-content">
| |
| − | <a href="#WHOUSE">PROJECT USE</a>
| |
| − | <a href="#SAFE">IS IT SAFE</a>
| |
| − | <a href="#USEDSTRAINS">USED ORGANISM STRAINS</a>
| |
| − | <a href="#RISKS">POTENTIAL RISKS</a>
| |
| − | <a href="#WASTE">WASTE TREATMENT</a>
| |
| − | <a href="#EMERGENCY">EMERGENCY REACTIONS</a>
| |
| − | <a href="#EQUIPMENT">PROTECTIVE EQUIPMENT</a>
| |
| − | <a href="#OTHERS">OTHER RULES</a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class='icon-scroll'></div>
| |
| − | <button onclick="topFunction()" id="topbtn" title="Go to top">Top</button>
| |
| − | <!-- CUSTOM TOP -->
| |
| − | <div class="contentHolder" id="topTitle">
| |
| − | <a id="pagetitle">SAFETY</a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="WHOUSE">
| |
| − | <h1>WHO WILL USE OUR PRODUCT</h1>
| |
| − | <p>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.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="SAFE">
| |
| − | <h1>IS IT SAFE?</h1>
| |
| − | <p>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.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="USEDSTRAINS">
| |
| − | <h1>USED ORGANISM STRAINS</h1>
| |
| − | <p>
| |
| − | # <i>Escherichia coli</i> - DH5α strain
| |
| − | <br>
| |
| − | # <i>Escherichia coli</i> - TOP10 strain
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="RISKS">
| |
| − | <h1>POTENTIAL RISKS</h1>
| |
| − | <p>Our project poses the typical risks of working with a level 1 GMO.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="WASTE">
| |
| − | <h1>WASTE TREATMENT</h1>
| |
| − | <p>All biological materials and equipment used for handling were collected separately and autoclaved.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="EMERGENCY">
| |
| − | <h1>EMERGENCY REACTIONS</h1>
| |
| − | <p>
| |
| − |
| |
| − | <strong>If lab coats or clothes start burning:</strong><br>
| |
| − | emergency showers
| |
| − | <br><strong>If acids or other harmful liquids get in the eyes:</strong><br>
| |
| − | eye showers
| |
| − | <br><strong>If injuries occur:</strong><br>
| |
| − | treat them with first aid-kits, report the injury, go to the hospital if necessary
| |
| − | <br><strong>If solutions with GMO are running down the bench:</strong><br>
| |
| − | swap and disinfect the place with NaClO (bleach)
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="EQUIPMENT">
| |
| − | <h1>PROTECTIVE EQUIPMENT</h1>
| |
| − | <p>
| |
| − | <strong>Eye protection</strong><br>
| |
| − | <strong>Lab coats </strong><br>
| |
| − | <strong>Safety glasses in special areas of the lab</strong><br>
| |
| − | <a style="font-size: 15px;">(should be used in other areas if necessary)</a>
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <!-- CUSTOM CONTENT HOLDER -->
| |
| − | <div class="contentHolder" id="OTHERS">
| |
| − | <h1>OTHER RULES</h1>
| |
| − | <p>
| |
| − | <strong>Do not work alone!</strong><br>
| |
| − | <a style="font-size: 15px;">There should be at least one person in the lab with you.</a><br>
| |
| − | <br><strong>Do not pipette with your mouth!</strong><br>
| |
| − | <br><strong>Disinfect hands after contamination with GMOs!</strong><br>
| |
| − | <br><strong>Disinfect hands and wash them after working in the lab!</strong><br>
| |
| − | <br><strong>Do not eat, swallow, wash and snore with any chemicals!</strong><br>
| |
| − | <br><strong>Do not bring food, drinks, pets and snacks in the lab!</strong><br>
| |
| − | <br><strong>Be sure that you have informed the instructor of the next step of the experiment plan and gotten the permission of him!</strong><br>
| |
| − | <br><strong>Record the general nature of the work clearly in your lab journal!</strong><br>
| |
| − |
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <!-- CUSTOM MENU -->
| |
| − | <div class="navigation" id="nav">
| |
| − | <a href="index.html">HOME</a>
| |
| − | <a href="MeetTheTeam.html">TEAM</a>
| |
| − | <a href="project.html">PROJECT</a>
| |
| − | <a href="human_practices.html">HUMAN PRACTICES</a>
| |
| − | <a href="collaborations.html">COLLABORATIONS</a>
| |
| − | <a href="parts.html">PARTS</a>
| |
| − | <a href="safety.html" id="activeMenu">SAFETY</a>
| |
| − | <a href="jForm.html" id="specialMenu">JUDGING FORM</a>
| |
| − | <a href="javascript:void(0);" class="icon" onclick="burgermenu()">
| |
| − | MENU
| |
| − | </a>
| |
| − |
| |
| − | </div>
| |
| − | </body>
| |
| − | </html>
| |
