|
|
| Line 12: |
Line 12: |
| | | | |
| | <style> | | <style> |
| − | .container2 {
| |
| − |
| |
| − | width: 80%;
| |
| − | margin: auto;
| |
| − | padding-right: 20px;
| |
| − | padding-bottom: 700px;
| |
| − | margin-right: 100px;
| |
| − | padding-top: 250px;
| |
| − |
| |
| | | | |
| | + | h2 span.spacer { |
| | + | padding:0 5px; |
| | } | | } |
| | | | |
| − | .expandable-boxes { | + | .crop { |
| − | position: relative;
| + | width: 100%; |
| − | }
| + | height: 700px; |
| − | | + | overflow: hidden; |
| − | .expandable-box {
| + | |
| − | width: 30%;
| + | |
| − | height: 200px;
| + | |
| − | float: left;
| + | |
| − | margin: 0 3% 20px 0;
| + | |
| − | border: 1px solid #999;
| + | |
| − | border-radius: 12px;
| + | |
| − | padding: 10px;
| + | |
| − | box-sizing: border-box;
| + | |
| − | -webkit-transition: all .3s ease-in-out;
| + | |
| − | -moz-transition: all .3s ease-in-out;
| + | |
| − | -o-transition: all .3s ease-in-out;
| + | |
| − | -ms-transition: all .3s ease-in-out;
| + | |
| − | transition: all .3s ease-in-out;
| + | |
| − | background-color: #02263e;
| + | |
| − | box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25),
| + | |
| − | 0 30px 10px -20px rgba(0, 0, 0, .25); | + | |
| − | }
| + | |
| − | .expandable-box.open {
| + | |
| − | border-color: #D74214;
| + | |
| − | border-width: thick;
| + | |
| − | width: 96%;
| + | |
| − | height: 500px;
| + | |
| − | margin: 0;
| + | |
| − | background-color: #02263e;
| + | |
| − | }
| + | |
| − | .expandable-box.out {
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | overflow: hidden;
| + | |
| − | border: none;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | opacity: 0;
| + | |
| − | | + | |
| − | }
| + | |
| − | body {
| + | |
| − | background: #ffffff;
| + | |
| − | | + | |
| − | }
| + | |
| − | h1{
| + | |
| − | color: #02263e;
| + | |
| − | }
| + | |
| − | h2{
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | p{
| + | |
| − | color: #ffffff;
| + | |
| − | }
| + | |
| − | | + | |
| − | html {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | display: flex;
| + | |
| − | align-items: center;
| + | |
| − | justify-content: center;
| + | |
| − | height: 100%;
| + | |
| − | user-select: none;
| + | |
| − | background: #ffffff;
| + | |
| − | }
| + | |
| − | | + | |
| − | #whoa-cool-button {
| + | |
| − | font-family: 'Roboto';
| + | |
| − | font-size: 18pt;
| + | |
| − | font-weight: bold;
| + | |
| − | color: white;
| + | |
| − | background: #009688;
| + | |
| − | padding: 15px 0px;
| + | |
| − | border-radius: 20px;
| + | |
| − | box-shadow: 0px 15px 0px 0px #00695C;
| + | |
| − | cursor: pointer;
| + | |
| − | transition: .2s;
| + | |
| − | margin-right: 0px;
| + | |
| − | width: 100px;
| + | |
| − | height:100p; | + | |
| − | }
| + | |
| − | | + | |
| − | #whoa-cool-button:active {
| + | |
| − | transform: translateY(14px);
| + | |
| − | box-shadow: 0px 1px 0px 0px #00695C;
| + | |
| − | }
| + | |
| − | | + | |
| − | .clickbutton{
| + | |
| − | position: relative; | + | |
| − | font-family: 'Roboto';
| + | |
| − | font-size: 18pt;
| + | |
| − | font-weight: bold;
| + | |
| − | color: white;
| + | |
| − | top: 280px;
| + | |
| − | left:300px;
| + | |
| − | background-color: #B7D18F;
| + | |
| − | box-shadow: 0px 15px 0px 0px #00695C;
| + | |
| − | width: 100px;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .clickbutton1{
| + | |
| − | position: relative;
| + | |
| − | font-family: 'Roboto';
| + | |
| − | font-size: 18pt;
| + | |
| − | font-weight: bold;
| + | |
| − | color: white;
| + | |
| − | top: 230px;
| + | |
| − | left:800px;
| + | |
| − | background-color: #B7D18F;
| + | |
| − | box-shadow: 0px 15px 0px 0px #00695C;
| + | |
| − | width: 100px;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .white-bg{
| + | |
| − | background-color: #ffffff;
| + | |
| − | padding-left: 350px;
| + | |
| − | padding-right: 350px;
| + | |
| | } | | } |
| | | | |
| Line 153: |
Line 30: |
| | | | |
| | <body> | | <body> |
| − | <center>
| |
| − | <h1 style="color: #ffffff;">EXPERIMENTS</h1>
| |
| − | </center>
| |
| − | <div class="container2">
| |
| − | <div class="expandable-boxes">
| |
| − | <div class="expandable-box">
| |
| − | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CREATE pgRNA</h4>
| |
| | | | |
| − | <div id="clear2" style="display: none;">
| |
| − | <p></p>
| |
| | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> | | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> |
| | | | |
| | + | <p><br> |
| | + | <br> |
| | + | <br> |
| | + | <br> |
| | + | </p> |
| | + | <div class="image"> |
| | + | <div class="crop"> |
| | + | <img src="https://static.igem.org/mediawiki/2017/0/03/T--UNOTT--Results.jpeg"; style:""width:100%;height:auto;"> |
| | + | </div> |
| | + | |
| | + | |
| | + | |
| | | | |
| | | | |
| | + | <h2><span>RESULTS<span class='spacer'></span></h2> |
| | + | |
| | + | <h4>OBJECTIVE: CREATE pgRNA</h4> |
| | | | |
| | + | |
| | | | |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <div class="expandable-box">
| |
| − | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CREATE pREPORTER</h4>
| |
| − | <div id="clear3" style="display: none;">
| |
| − | <p></p>
| |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| |
| | | | |
| | | | |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − | <div class="expandable-box">
| + | |
| − | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: PROMOTER LIBRARY</h4>
| + | <h4>OBJECTIVE: CREATE pREPORTER</h4> |
| − | <div id="clear4" style="display: none;">
| + | <h4>OBJECTIVE: PROMOTER LIBRARY</h4> |
| − | <p></p>
| + | <h4>OBJECTIVE: RANDOM LIGATIONS</h4> |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="expandable-box">
| + | |
| − | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: RANDOM LIGATIONS</h4>
| + | |
| − | <div id="clear5" style="display: none;"> | + | |
| − | <p></p>
| + | |
| − | | + | |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="expandable-box">
| + | |
| | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: FREEZE DRYING</h4> | | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: FREEZE DRYING</h4> |
| − | <div id="clear6" style="display: none;"> | + | |
| − | <p></p>
| + | <h4>OBJECTIVE: CRISPRi & gRNA EFFICIENCY</h4> |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="expandable-box">
| + | |
| − | <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CRISPRi & gRNA EFFICIENCY</h4>
| + | |
| − | <div id="clear7" style="display: none;"> | + | |
| − | <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
| + | |
| | <p>This picture shows our gRNAs working visually, but the graphs show the results of RFP detection using a microplate reader on cultures containing each of the dCas9 plasmids with one promoter-RFP-terminator brick, with its corresponding gRNA plasmid, | | <p>This picture shows our gRNAs working visually, but the graphs show the results of RFP detection using a microplate reader on cultures containing each of the dCas9 plasmids with one promoter-RFP-terminator brick, with its corresponding gRNA plasmid, |
| | or with a non-targeting gRNA plasmid.</p> | | or with a non-targeting gRNA plasmid.</p> |
| Line 222: |
Line 72: |
| | | | |
| | | | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
| + | |
| − | | + | |
| − | | + | |
| − | <script>$(document).ready(function() {
| + | |
| − | //HOW TO HIDE
| + | |
| − | var mydiv = document.getElementById('clear2');
| + | |
| − | var mydiv1 = document.getElementById('clear3');
| + | |
| − | var mydiv2 = document.getElementById('clear4');
| + | |
| − | var mydiv3 = document.getElementById('clear5');
| + | |
| − | var mydiv4 = document.getElementById('clear6');
| + | |
| − | var mydiv5 = document.getElementById('clear7');
| + | |
| − | //HOW TO HIDE
| + | |
| − | | + | |
| − | $('.expandable-box').click(function(e) {
| + | |
| − | if($(this).hasClass('open')) {
| + | |
| − | //HOW TO HIDE
| + | |
| − | | + | |
| − | //HOW TO HIDE
| + | |
| − | $('.expandable-box.out').not($(this)).removeClass('out');
| + | |
| − | $(this).removeClass('open');
| + | |
| − | mydiv.style.display = 'none';
| + | |
| − | mydiv1.style.display = 'none';
| + | |
| − | mydiv2.style.display = 'none';
| + | |
| − | mydiv3.style.display = 'none';
| + | |
| − | mydiv4.style.display = 'none';
| + | |
| − | mydiv5.style.display = 'none';
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $('.expandable-box').not($(this)).addClass('out');
| + | |
| − | $(this).addClass('open');
| + | |
| − | | + | |
| − | //HOW TO HIDE
| + | |
| − | mydiv.style.display = 'block'
| + | |
| − | mydiv1.style.display = 'block'
| + | |
| − | mydiv2.style.display = 'block'
| + | |
| − | mydiv3.style.display = 'block'
| + | |
| − | mydiv4.style.display = 'block'
| + | |
| − | mydiv5.style.display = 'block'
| + | |
| − | //HOW TO HIDE
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });</script>
| + | |
| − | | + | |
| − | | + | |
| | | | |
| | + | |
| | | | |
| | </body> | | </body> |
