|
|
| Line 1: |
Line 1: |
| − | {{Team:NU_Kazakhstan/css}}
| + | <!DOCTYPE html> |
| − | {{Team:NU_Kazakhstan/header}}
| + | <html lang="en"> |
| − | <html> | + | <head> |
| − | <head> | + | <!-- Required meta tags --> |
| | + | <meta charset="utf-8"> |
| | + | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
| | | | |
| − | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | + | <!-- Bootstrap CSS --> |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> |
| − | <style> | + | </head> |
| − | .hr ul{
| + | <body> |
| − | list-style:none;}
| + | <h1>Hello, world!</h1> |
| − | ul .hr {
| + | |
| − | margin: 0; /* Обнуляем значение отступов */
| + | |
| − | padding: 4px; /* Значение полей */
| + | |
| − | | + | |
| − | }
| + | |
| − | ul.hr li {
| + | |
| − | display: inline; /* Отображать как строчный элемент */ | + | |
| − |
| + | |
| − | }
| + | |
| − | #div{
| + | |
| − | border-bottom:1px solid black;
| + | |
| − | margin:0px 0px;
| + | |
| − | margin:auto auto;
| + | |
| − | margin-top:15px;
| + | |
| − | }
| + | |
| − | span{font-family:"Roboto";}
| + | |
| − | .hr a{text-decoration:none;color:#996633;margin-right:45px;font-size:20px;font-family:Roboto;}
| + | |
| − | .hr a:hover{text-decoration:none;color:#996633;}
| + | |
| − | .hr a:link{text-decoration:none;color:#996633;}
| + | |
| − | </style> | + | |
| − | <style> | + | |
| | | | |
| − | | + | <!-- Optional JavaScript --> |
| − | | + | <!-- jQuery first, then Popper.js, then Bootstrap JS --> |
| − | table {
| + | <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> |
| − | border-collapse: collapse;
| + | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> |
| − | border-spacing: 0; }
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> |
| − | caption, th, td {
| + | </body> |
| − | text-align: left;
| + | |
| − | font-weight: normal;
| + | |
| − | vertical-align: middle; }
| + | |
| − | q, blockquote {
| + | |
| − | quotes: none; }
| + | |
| − | q:before, q:after, blockquote:before, blockquote:after {
| + | |
| − | content: ""; | + | |
| − | content: none; }
| + | |
| − | a img {
| + | |
| − | border: none; }
| + | |
| − | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
| + | |
| − | display: block; }
| + | |
| − | | + | |
| − | | + | |
| − | h1,h2,h3,h4,h5,h6 {
| + | |
| − | font-weight:bold;
| + | |
| − | font-size: 16px;
| + | |
| − | margin: 12px 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1 {
| + | |
| − | margin: 35px 0 5px;
| + | |
| − | font-size: 26px;
| + | |
| − | font-weight: normal;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2 {
| + | |
| − | margin: 40px 0 25px;
| + | |
| − | border-bottom: 1px solid #bbb;
| + | |
| − | padding: 0 0 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | p {
| + | |
| − | margin: 0 0 16px;
| + | |
| − | }
| + | |
| − | | + | |
| − | strong {
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
| + | |
| − | label, #active, img { -moz-user-select:none;-webkit-user-select:none; }
| + | |
| − | .catch { display: block; height: 0; overflow: hidden; }
| + | |
| − | #slider {
| + | |
| − | margin: 0 auto;
| + | |
| − | }
| + | |
| − | #description {
| + | |
| − | margin: 25px auto;
| + | |
| − | text-align: left;
| + | |
| − | max-width: 650px;
| + | |
| − | padding: 0 25px;
| + | |
| − | }
| + | |
| − | .respond {
| + | |
| − | margin: 0 auto;
| + | |
| − | max-width: 370px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* NEW EXPERIMENT */
| + | |
| − | /* Slider Setup */
| + | |
| − | | + | |
| − | input {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slide1:checked ~ #slides .inner { margin-left:0; }
| + | |
| − | #slide2:checked ~ #slides .inner { margin-left:-100%; }
| + | |
| − | #slide3:checked ~ #slides .inner { margin-left:-200%; }
| + | |
| − | #slide4:checked ~ #slides .inner { margin-left:-300%; }
| + | |
| − | #slide5:checked ~ #slides .inner { margin-left:-400%; }
| + | |
| − | | + | |
| − | | + | |
| − | #overflow {
| + | |
| − | width: 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | article img {
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slides .inner {
| + | |
| − | width: 500%;
| + | |
| − | line-height: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slides article {
| + | |
| − | width: 20%;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Slider Styling */
| + | |
| − | | + | |
| − | /* Control Setup */
| + | |
| − | | + | |
| − | #controls {
| + | |
| − | margin: -25% 0 0 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #controls label {
| + | |
| − | display: none;
| + | |
| − | width: 50px;
| + | |
| − | height: 50px;
| + | |
| − | opacity: 0.3;
| + | |
| − | }
| + | |
| − | | + | |
| − | #active {
| + | |
| − | margin: 23% 0 0;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | #active label {
| + | |
| − | -webkit-border-radius: 5px;
| + | |
| − | -moz-border-radius: 5px;
| + | |
| − | border-radius: 5px;
| + | |
| − | display: inline-block;
| + | |
| − | width: 10px;
| + | |
| − | height: 10px;
| + | |
| − | background: #bbb;
| + | |
| − | }
| + | |
| − | | + | |
| − | #active label:hover {
| + | |
| − | background: #ccc;
| + | |
| − | border-color: #777 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #controls label:hover {
| + | |
| − | opacity: 0.8;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slide1:checked ~ #controls label:nth-child(2),
| + | |
| − | #slide2:checked ~ #controls label:nth-child(3),
| + | |
| − | #slide3:checked ~ #controls label:nth-child(4),
| + | |
| − | #slide4:checked ~ #controls label:nth-child(5),
| + | |
| − | #slide5:checked ~ #controls label:nth-child(1) {
| + | |
| − | background: url('https://static.igem.org/mediawiki/2017/c/c4/Next.png') no-repeat;
| + | |
| − | float: right;
| + | |
| − | margin: 0 -70px 0 0;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #slide1:checked ~ #controls label:nth-child(5),
| + | |
| − | #slide2:checked ~ #controls label:nth-child(1),
| + | |
| − | #slide3:checked ~ #controls label:nth-child(2),
| + | |
| − | #slide4:checked ~ #controls label:nth-child(3),
| + | |
| − | #slide5:checked ~ #controls label:nth-child(4) {
| + | |
| − | background: url('https://static.igem.org/mediawiki/2017/f/f1/Prev.png') no-repeat;
| + | |
| − | float: left;
| + | |
| − | margin: 0 0 0 -70px;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slide1:checked ~ #active label:nth-child(1),
| + | |
| − | #slide2:checked ~ #active label:nth-child(2),
| + | |
| − | #slide3:checked ~ #active label:nth-child(3),
| + | |
| − | #slide4:checked ~ #active label:nth-child(4),
| + | |
| − | #slide5:checked ~ #active label:nth-child(5) {
| + | |
| − | background: #333;
| + | |
| − | border-color: #333 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Info Box */
| + | |
| − | | + | |
| − | .info {
| + | |
| − | line-height: 20px;
| + | |
| − | margin: 0 0 -150%;
| + | |
| − | position: absolute;
| + | |
| − | font-style: italic;
| + | |
| − | padding: 30px 30px;
| + | |
| − | opacity: 0;
| + | |
| − | color: #996633;
| + | |
| − | text-align: left;
| + | |
| − | }
| + | |
| − | | + | |
| − | .info h3 {
| + | |
| − | color: #333;
| + | |
| − | margin: 0 0 5px;
| + | |
| − | font-weight: normal;
| + | |
| − | font-size: 22px;
| + | |
| − | font-style: normal;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Slider Styling */
| + | |
| − | | + | |
| − | #slides {
| + | |
| − | margin: 45px 0 0;
| + | |
| − | -webkit-border-radius: 5px;
| + | |
| − | -moz-border-radius: 5px;
| + | |
| − | border-radius: 5px;
| + | |
| − | box-shadow: 1px 1px 4px #666;
| + | |
| − | padding: 1%;
| + | |
| − | background: #fff;
| + | |
| − | background: rgb(252,255,244); /* Old browsers */
| + | |
| − | background: -moz-linear-gradient(top, rgba(252,255,244,1) 0%, rgba(219,218,201,1) 100%); /* FF3.6+ */
| + | |
| − | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(100%,rgba(219,218,201,1))); /* Chrome,Safari4+ */
| + | |
| − | background: -webkit-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Chrome10+,Safari5.1+ */
| + | |
| − | background: -o-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* Opera 11.10+ */
| + | |
| − | background: -ms-linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* IE10+ */
| + | |
| − | background: linear-gradient(top, rgba(252,255,244,1) 0%,rgba(219,218,201,1) 100%); /* W3C */
| + | |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#dbdac9',GradientType=0 ); /* IE6-9 */
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Animation */
| + | |
| − | | + | |
| − | #slides .inner {
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
| + | |
| − | | + | |
| − | -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
| + | |
| − | transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider {
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -webkit-transition: all 0.5s ease-out;
| + | |
| − | -moz-transition: all 0.5s ease-out;
| + | |
| − | -o-transition: all 0.5s ease-out;
| + | |
| − | transition: all 0.5s ease-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | #controls label{
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -webkit-transition: opacity 0.2s ease-out;
| + | |
| − | -moz-transition: opacity 0.2s ease-out;
| + | |
| − | -o-transition: opacity 0.2s ease-out;
| + | |
| − | transition: opacity 0.2s ease-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slide1:checked ~ #slides article:nth-child(1) .info,
| + | |
| − | #slide2:checked ~ #slides article:nth-child(2) .info,
| + | |
| − | #slide3:checked ~ #slides article:nth-child(3) .info,
| + | |
| − | #slide4:checked ~ #slides article:nth-child(4) .info,
| + | |
| − | #slide5:checked ~ #slides article:nth-child(5) .info {
| + | |
| − | opacity: 1;
| + | |
| − | -webkit-transition: all 1s ease-out 0.6s;
| + | |
| − | -moz-transition: all 1s ease-out 0.6s;
| + | |
| − | -o-transition: all 1s ease-out 0.6s;
| + | |
| − | transition: all 1s ease-out 0.6s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
| + | |
| − | -webkit-transform: translateZ(0);
| + | |
| − | -webkit-transition: all 0.5s ease-out;
| + | |
| − | -moz-transition: all 0.5s ease-out;
| + | |
| − | -o-transition: all 0.5s ease-out;
| + | |
| − | transition: all 0.5s ease-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Respond Options */
| + | |
| − | | + | |
| − | #desktop:checked ~ #slider {
| + | |
| − | max-width: 960px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #tablet:checked ~ #slider {
| + | |
| − | max-width: 850px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #mobile:checked ~ #slider {
| + | |
| − | max-width: 450px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #desktop:checked ~ #slider .desktop,
| + | |
| − | #tablet:checked ~ #slider .tablet,
| + | |
| − | #mobile:checked ~ #slider .mobile {
| + | |
| − | color: #777;
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | .desktop, .tablet, .mobile {
| + | |
| − | display: inline-block;
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | padding-top: 50px;
| + | |
| − | opacity: 0.35;
| + | |
| − | font-size: 12px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .desktop:hover, .tablet:hover, .mobile:hover {
| + | |
| − | opacity: 0.2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .desktop { | + | |
| − | background: url('images/desktop.png') no-repeat;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tablet {
| + | |
| − | background: url('images/tablet.png') no-repeat;
| + | |
| − | }
| + | |
| − | | + | |
| − | .mobile {
| + | |
| − | background: url('images/mobile.png') no-repeat;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Responsive Styling */
| + | |
| − | | + | |
| − | /* Tablet */
| + | |
| − | | + | |
| − | #tablet:checked ~ #slider #controls {
| + | |
| − | margin: -25% 0 0 12%;
| + | |
| − | width: 76%;
| + | |
| − | height: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #tablet:checked ~ #slider #controls label {
| + | |
| − | -moz-transform: scale(0.8);
| + | |
| − | -webkit-transform: scale(0.8);
| + | |
| − | -o-transform: scale(0.8);
| + | |
| − | -ms-transform: scale(0.8);
| + | |
| − | transform: scale(0.8);
| + | |
| − | }
| + | |
| − | | + | |
| − | #tablet:checked ~ #slider #slides, #mobile:checked ~ #slider #slides {
| + | |
| − | padding: 1% 0;
| + | |
| − | -webkit-border-radius: 0px;
| + | |
| − | -moz-border-radius: 0px;
| + | |
| − | border-radius: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #tablet:checked ~ #slider #active {
| + | |
| − | margin: 22% 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media only screen and (max-width: 850px) and (min-width: 450px) {
| + | |
| − | | + | |
| − | #slider #controls {
| + | |
| − | margin: -25% 0 0 15%;
| + | |
| − | width: 70%;
| + | |
| − | height: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #controls label {
| + | |
| − | -moz-transform: scale(0.8);
| + | |
| − | -webkit-transform: scale(0.8);
| + | |
| − | -o-transform: scale(0.8);
| + | |
| − | -ms-transform: scale(0.8);
| + | |
| − | transform: scale(0.8);
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #slides {
| + | |
| − | padding: 1% 0;
| + | |
| − | -webkit-border-radius: 0px;
| + | |
| − | -moz-border-radius: 0px;
| + | |
| − | border-radius: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #active {
| + | |
| − | margin: 22% 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* Mobile */
| + | |
| − | | + | |
| − | #mobile:checked ~ #slider #controls {
| + | |
| − | margin: -28% 0 0 24%;
| + | |
| − | width: 50%;
| + | |
| − | height: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #mobile:checked ~ #slider #active {
| + | |
| − | margin: 23% 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #mobile:checked ~ #slider #slides .info {
| + | |
| − | opacity: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #mobile:checked ~ #slider #controls label {
| + | |
| − | -moz-transform: scale(0.6);
| + | |
| − | -webkit-transform: scale(0.6);
| + | |
| − | -o-transform: scale(0.6);
| + | |
| − | -ms-transform: scale(0.6);
| + | |
| − | transform: scale(0.6);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | @media only screen and (max-width: 450px) {
| + | |
| − | | + | |
| − | #slider #controls {
| + | |
| − | margin: -28% 0 0 24%;
| + | |
| − | width: 50%;
| + | |
| − | height: 50px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #active {
| + | |
| − | margin: 23% 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #slides {
| + | |
| − | padding: 1% 0;
| + | |
| − | -webkit-border-radius: 0px;
| + | |
| − | -moz-border-radius: 0px;
| + | |
| − | border-radius: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #slides .info {
| + | |
| − | opacity: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #slider #controls label {
| + | |
| − | -moz-transform: scale(0.6);
| + | |
| − | -webkit-transform: scale(0.6);
| + | |
| − | -o-transform: scale(0.6);
| + | |
| − | -ms-transform: scale(0.6);
| + | |
| − | transform: scale(0.6);
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | @media only screen and (min-width: 850px) {
| + | |
| − | | + | |
| − | body {
| + | |
| − | padding: 0 80px;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body style="font-family:Roboto;">
| + | |
| − | | + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/d/d3/Logo_nu_team.png" width="150px" style="float:right;margin-right:25px;margin-top:-100px;">
| + | |
| − | <div id="div"><center>
| + | |
| − | <ul class="hr">
| + | |
| − | <li><span><a href="https://2017.igem.org/Team:NU_Kazakhstan">Home</a></span></li>
| + | |
| − | <li><span><a href="research.html">Research</a></span></li>
| + | |
| − | <li><span><a href="https://2017.igem.org/Team:NU_Kazakhstan/Team">Team</a></span></li> | + | |
| − | <li><span><a href="contact.html">Contact</a></span></li>
| + | |
| − | <li><span><a href="notebook.html">Notebook</a></span></li>
| + | |
| − | </ul></center>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <div style="background-image:url('https://static.igem.org/mediawiki/2017/a/a4/Background-nu-team.png');">
| + | |
| − | <br>
| + | |
| − | <input checked type=radio name=respond id=desktop />
| + | |
| − | <input type=radio name=respond id=tablet />
| + | |
| − | <input type=radio name=respond id=mobile />
| + | |
| − | <article id=slider>
| + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | <!-- Slider Setup -->
| + | |
| − |
| + | |
| − | <input checked type=radio name=slider id=slide1 />
| + | |
| − | <input type=radio name=slider id=slide2 />
| + | |
| − | <input type=radio name=slider id=slide3 />
| + | |
| − | <input type=radio name=slider id=slide4 />
| + | |
| − | <input type=radio name=slider id=slide5 />
| + | |
| − |
| + | |
| − |
| + | |
| − | <!-- The Slider -->
| + | |
| − | | + | |
| − |
| + | |
| − | <div id=slides>
| + | |
| − |
| + | |
| − | <div id=overflow>
| + | |
| − |
| + | |
| − | <div class=inner>
| + | |
| − |
| + | |
| − | <article>
| + | |
| − |
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/c/c8/CouldDragonByBjzaba.png" />
| + | |
| − | </article>
| + | |
| − | | + | |
| − |
| + | |
| − | <article>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/7/71/MountainFortByBjzaba.png" />
| + | |
| − | </article>
| + | |
| − |
| + | |
| − | <article>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/6/62/MountainOutpostByBjzaba.png" />
| + | |
| − | </article>
| + | |
| − |
| + | |
| − | <article>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/0f/CliffsByBjzaba.png" />
| + | |
| − | </article>
| + | |
| − |
| + | |
| − | <article>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/07/HillFortByBjzaba.png" />
| + | |
| − | </article>
| + | |
| − |
| + | |
| − | </div> <!-- .inner -->
| + | |
| − |
| + | |
| − | </div> <!-- #overflow -->
| + | |
| − |
| + | |
| − | </div> <!-- #slides -->
| + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − | <!-- Controls and Active Slide Display -->
| + | |
| − |
| + | |
| − | <div id=controls>
| + | |
| − | | + | |
| − | <label for=slide1></label>
| + | |
| − | <label for=slide2></label>
| + | |
| − | <label for=slide3></label>
| + | |
| − | <label for=slide4></label>
| + | |
| − | <label for=slide5></label>
| + | |
| − |
| + | |
| − | </div> <!-- #controls -->
| + | |
| − | | + | |
| − |
| + | |
| − | <div id=active>
| + | |
| − | | + | |
| − | <label for=slide1></label>
| + | |
| − | <label for=slide2></label>
| + | |
| − | <label for=slide3></label>
| + | |
| − | <label for=slide4></label>
| + | |
| − | <label for=slide5></label>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </article>
| + | |
| − | </div>
| + | |
| − | <p style="font-family:Roboto;font-size:18px;">
| + | |
| − | Pollution of natural resources with toxic metals is one of the biggest issues in a globe. Particularly hexavalent chromium is prevalent in an amount of exposed population, namely, it is 16 000 000 people all around the world. Moreover, it is quite problematic not only in industrial countries like Kazakhstan, which directly extracts and processes chromium ores (JSC "Aktobe Chromium Compounds Plant", JSC "Aksu ferroalloys Plant", LLC "Sunrise Chromium", JSC "Ferroalloy", TNS "Kazchromium", Aktobe Paint Factory, "Sunrise" Chromium Ores Processing Plant), but also in any places that are involved in electrical devices production; glass, stone, metal processing, tanned leather and textile production, dyes, resins, plastics, pharmaceuticals; aircraft. Cr (VI) may lead to a gastric ulcer, skin irritation, dermatitis; liver, kidneys & nervous system failure and even to cancer, since it generates reactive oxygen species and causes double strand breaks of human genetic material. At the present time, water pollution by chromates occupies one of the top places among global environmental problems. Control of the utilization of toxic wastes, namely chromates, with a wastewater, is currently at a very low level. The project considers the bioremediation as a solution to this problem. Bioremediation is a complex waste management technique that involves the use of modified biological organisms, in this case, microalgae to remove or neutralize pollutants from a contaminated site by converting hazardous substances into less toxic or non-toxic substances (toxic Cr (VI) to less toxic Cr (III). Thus, our team aims to genetically modify Chlamydomonas reinhardtii to gain the ability to:
| + | |
| − | <ol style="font-family:Roboto;font-size:18px;">
| + | |
| − | <li>Uptake the hexavalent chromium and to keep them inside.</li>
| + | |
| − | <li>Reduce toxic Cr (VI) to less toxic valence states.</li>
| + | |
| − | <li>To be killed in order to make sure that the system is safe for people and natural world.</li>
| + | |
| − | <ol>
| + | |
| − | </p>
| + | |
| − | | + | |
| − | <p style="font-size:18px; font-family:Roboto;">
| + | |
| − | <i>C.reinhardtii</i> is an autotrophic model organism that reproduces fast and does not require special control of growing temperature (15°C-35°C).</p>
| + | |
| − | <center><img src="https://static.igem.org/mediawiki/2017/d/df/Nukazmicroalgae.png"></center><br>
| + | |
| − | <p style="font-size:18px; font-family:Roboto;">
| + | |
| − | In order to uptake Cr (VI) and keep reduced (less, but still toxic) chromium inside, our C.reinhardtii will express sulfate permease (SULTR2) and chromodulin, Cr (III) binding peptide under pHSP70, pRBCS2+intron as promoter and RBCS2 and 3’UTR as terminator.
| + | |
| − | To reduce hexavalent chromium C.reinhardtii will use chromate reductase (ChR) under the same promoter and terminator.
| + | |
| − | Chromate reductase does not produce toxic Cr(V) and produces relatively tiny amounts of ROS:</p>
| + | |
| − | <p style="font-size:18px; font-family:Roboto;"><center><strong style="font-size:18px; font-family:Roboto;">
| + | |
| − | NAD(P)H + a quinone = NAD(P)+ + a hydroquinone.<br>
| + | |
| − | 2 NAD(P)H + Cr6+ + O2 = 2 NAD(P)+ + Cr3+ + H2O2
| + | |
| − | </strong></center></p>
| + | |
| − | | + | |
| − | <p style="font-size:18px; font-family:Roboto;">
| + | |
| − | | + | |
| − | In order to control the action of transformed algae, we have developed the safety system based on chromophore assisted light inactivation (CALI) system using SuperNova protein, which is the monomeric form of dimeric photosensitizer protein KillerRed. The protein generates ROS under the regular UV light that has 500-600 nm sensitive phototoxicity and it will eliminate transformed species that went out of the tank via perturbation of biomolecules. The advantage of using SuperNova, in contrast with the common KillerRed, is its monomeric structure that allows a better localization in fusion with the target protein (Takemoto et al., 2013). This strategy allows to escape further pass of engineered plasmid to next generation.
| + | |
| − | This method involves a relatively low cost for the operations in comparison to conventional treatment facilities. Organisms are placed on the loofah sponge in a closed tank with eliminated 500-600 nm light. The whole system can be easily constructed and the materials are relatively cheap, what makes our system to have a great potential for use in real world.
| + | |
| − | | + | |
| − | </p>
| + | |
| − | <center><img src="https://static.igem.org/mediawiki/2017/f/f9/Nukazmodel.png"></center>
| + | |
| − | <p style="font-size:18px; font-family:Roboto;">
| + | |
| − | | + | |
| − | Reference list:<br>
| + | |
| − | Takemoto, K., Matsuda, T., Sakai, N., Fu, D., Noda, M., Uchiyama, S., Kotera, I., Arai, Y., Horiuchi, M., Fukui, K., Ayabe, T., Inagaki, F., Suzuki, H. and Nagai, T. (2013). SuperNova, a monomeric photosensitizing fluorescent protein for chromophore-assisted light inactivation. Scientific Reports, 3(1).
| + | |
| − | </p>
| + | |
| − | </body> | + | |
| | </html> | | </html> |
