Difference between revisions of "Team:UNOTT/Results"

 
(48 intermediate revisions by 2 users not shown)
Line 4: Line 4:
 
<head>
 
<head>
 
   <meta charset="UTF-8">
 
   <meta charset="UTF-8">
−
   <title>Expandable Boxes With CSS Transitions</title>
+
    
 
   <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
 
   <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
  
  
−
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
−
 
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js">
 +
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.csss">
 +
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 +
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  
 
<style>
 
<style>
−
.container2 {
+
body {
−
 
+
    font-family: 'Karla', sans-serif;
−
  width: 80%;
+
−
  margin: auto;
+
−
  padding-right: 20px;
+
−
  padding-bottom: 700px;
+
−
  margin-right: 100px;
+
−
  padding-top: 250px;
+
−
+
−
 
+
 
}
 
}
  
−
.expandable-boxes {
+
p {
−
  position: relative;
+
margin-top:10px;
 
}
 
}
  
−
.expandable-box {
+
h2 span.spacer {
−
  width: 30%;
+
  padding:0 5px;
−
  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;
 
  
 +
.crop {
 +
    width: 100%;
 +
    height: 700px;
 +
    overflow: hidden;
 
}
 
}
−
body {
 
−
  background: #ffffff;
 
  
 +
h2 span {
 +
  color: white;
 +
  font: 100px/100px Helvetica, Sans-Serif;
 +
  letter-spacing: 10px; 
 +
  background: rgb(0, 0, 0); /* fallback color */
 +
  background: rgba(0, 0, 0, 0.7);
 +
  padding: 10px;
 
}
 
}
−
h1{
+
h2 {  
−
    color: #02263e;
+
  position: absolute;
 +
  top: 350px;
 +
  left: 0;
 +
  width: 100%;
 +
  font-family: 'Karla', sans-serif;
 
}
 
}
−
h2{
+
 
−
    color: #ffffff;
+
h4 {
 +
  font-family: 'Karla', sans-serif;
 +
  color:#4b524a;
 +
  font-weight: bold;
 
}
 
}
−
p{
+
 
−
     color: #ffffff;
+
.contentmargin{
 +
  margin: auto;
 +
    width: 60%;
 +
    padding: 10px;
 +
    font-family: 'Karla', sans-serif;
 +
     background-color: #ffffff;
 
}
 
}
  
−
html {
+
.wrapper {
−
height: 100%;
+
  width: 100%;
 +
  margin: 0 auto;
 +
  padding: 3em 0 0;
 
}
 
}
−
body {
+
 
−
display: flex;
+
.dropdown1 {
−
align-items: center;
+
  float: left;
−
justify-content: center;
+
  width: 100%;
−
height: 100%;
+
   position: relative;
−
   user-select: none;
+
  padding-bottom: 2em;
−
background: #ffffff;
+
 
}
 
}
  
−
#whoa-cool-button {
+
.dropdown1 input[type=checkbox] {
−
font-family: 'Roboto';
+
  position: absolute;
−
font-size: 18pt;
+
  top: 30px;
−
font-weight: bold;
+
  left: 0;
−
color: white;
+
  width: 100%;
−
background: #009688;
+
  height: 100%;
−
padding: 15px 0px;
+
  opacity: 0;
−
border-radius: 20px;
+
  cursor: pointer;
−
box-shadow: 0px 15px 0px 0px #00695C;
+
−
cursor: pointer;
+
−
transition: .2s;
+
−
margin-right: 0px;
+
−
    width: 100px;
+
−
    height:100p;
+
 
}
 
}
  
−
#whoa-cool-button:active {
+
.dropdown1 label {
−
transform: translateY(14px);
+
  cursor: pointer;
−
box-shadow: 0px 1px 0px 0px #00695C;
+
  display: inline-block;
 +
  padding-left: 1.75rem;
 +
  font-size: 5.0rem;
 +
  line-height: 2rem;
 +
  font-weight: 600;
 +
  color: #333;
 +
  font-family: Karla, sans-serif;
 
}
 
}
  
−
.clickbutton{
+
.dropdown1 label:before {
−
    position: relative;
+
  content: "";
−
    font-family: 'Roboto';
+
  position: absolute;
−
font-size: 18pt;
+
  top: 6px;
−
font-weight: bold;
+
  left: 0;
−
color: white;
+
  border-left: 8px solid #F5634A;
−
    top: 280px;
+
  border-top: 8px solid transparent;
−
    left:300px;
+
  border-bottom: 8px solid transparent;
−
    background-color: #B7D18F;
+
  margin-left: 4px;
−
    box-shadow: 0px 15px 0px 0px #00695C;
+
−
    width: 100px;
+
−
    text-align: center;
+
 
}
 
}
  
−
.clickbutton1{
+
.dropdown1 input[type=checkbox]:checked ~ label:before {
−
    position: relative;
+
  border-left: 8px solid transparent;
−
    font-family: 'Roboto';
+
  border-top: 8px solid #F5634A;
−
font-size: 18pt;
+
  border-right: 8px solid transparent;
−
font-weight: bold;
+
  margin: 8px 0 0;
−
color: white;
+
−
    top: 230px;
+
−
    left:800px;
+
−
    background-color: #B7D18F;
+
−
    box-shadow: 0px 15px 0px 0px #00695C;
+
−
    width: 100px;
+
−
    text-align: center;
+
 
}
 
}
  
−
 
+
.dropdown1 .text {
−
.white-bg{
+
  max-height: 0;
−
    background-color: #ffffff;
+
  -webkit-transition: max-height 1s;
−
    padding-left: 350px;
+
  -moz-transition: max-height 1s;
−
    padding-right: 350px;
+
  -ms-transition: max-height 1s;
 +
  -o-transition: max-height 1s;
 +
  transition: max-height 1s; 
 +
  overflow: hidden;
 +
  font-family: Karla, serif;
 +
  font-size: 1.2rem;
 +
  line-height: 1.6rem;
 +
  letter-spacing: 0.05em;
 +
  color: #333;
 +
  padding-left: 1.75rem;
 
}
 
}
  
 +
.dropdown1 input[type=checkbox]:checked ~ .text {
 +
  max-height: 1000px;
 +
}
 
</style>
 
</style>
  
Line 153: Line 141:
  
 
<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">
+
  
 +
<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>
 +
 
  
  
−
      </div>
 
−
  </div>
 
  
−
    <div class="expandable-box">
+
<div class="contentmargin">
−
      <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>
+
−
  <div id="clear4" 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: 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>
+
 
−
       <div id="clear6" 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: CRISPRi & gRNA EFFICIENCY</h4>
 
−
      <div id="clear7" style="display: none;">
 
−
          <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
−
<center><img src="https://static.igem.org/mediawiki/2017/6/6a/T--UNOTT--gRNAresultspic.jpeg"></center>
 
  
  
−
      
+
<div class="wrapper">
 +
  <div class="dropdown1">
 +
  <input type="checkbox" id="question-1">
 +
  <label for="question-1"> STEP 1: Create guideRNA Plasmid </label>
 +
     <div class="text">
 +
      <p>Text</p>
 
     </div>
 
     </div>
−
</div>
 
 
   </div>
 
   </div>
−
</div>
 
−
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
  
 +
<br> 
 +
<div class="dropdown1">
 +
  <input type="checkbox" id="question-2">
 +
  <label for="question-2"> STEP 2: Create Reporter Plasmid </label>
 +
    <div class="text">
 +
      <p>Text</p>
 +
    </div>
 +
  </div>
  
−
    <script>$(document).ready(function() {
+
<br>
−
        //HOW TO HIDE
+
<div class="dropdown1">
−
        var mydiv = document.getElementById('clear2');
+
  <input type="checkbox" id="question-3">
−
        var mydiv1 = document.getElementById('clear3');
+
  <label for="question-3">  STEP 3: Create Promoter Library </label>
−
        var mydiv2 = document.getElementById('clear4');
+
    <div class="text">
−
        var mydiv3 = document.getElementById('clear5');
+
      <p>Text</p>
−
        var mydiv4 = document.getElementById('clear6');
+
    </div>
−
        var mydiv5 = document.getElementById('clear7');
+
  </div>
−
//HOW TO HIDE
+
  
−
      $('.expandable-box').click(function(e) {
+
<br>
−
        if($(this).hasClass('open')) {
+
<div class="dropdown1">
−
            //HOW TO HIDE
+
  <input type="checkbox" id="question-4">
 +
  <label for="question-4">STEP 4: Random Ligations      </label>
 +
    <div class="text">
 +
      <p>Text</p>
 +
    </div>
 +
  </div>
  
−
            //HOW TO HIDE
+
<br>
−
          $('.expandable-box.out').not($(this)).removeClass('out');
+
<div class="dropdown1">
−
          $(this).removeClass('open');
+
  <input type="checkbox" id="question-5">
−
          mydiv.style.display = 'none';
+
  <label for="question-5">STEP 5: Freeze drying & Revival    </label>
−
          mydiv1.style.display = 'none';
+
    <div class="text">
−
          mydiv2.style.display = 'none';
+
      <p>Here are the results of our freeze-dried cells revival experiments. With these experiments, we want to show that different storage do not have an effect on the revival of the cells within our key.</p>
−
          mydiv3.style.display = 'none';
+
    </div>
−
          mydiv4.style.display = 'none';
+
  </div>
−
          mydiv5.style.display = 'none';
+
−
        }
+
−
        else {
+
−
          $('.expandable-box').not($(this)).addClass('out');
+
−
          $(this).addClass('open');
+
  
−
          //HOW TO HIDE
+
<br>
−
            mydiv.style.display = 'block'
+
 
−
            mydiv1.style.display = 'block'
+
<div class="dropdown1">
−
            mydiv2.style.display = 'block'
+
  <input type="checkbox" id="question-6">
−
            mydiv3.style.display = 'block'
+
  <label for="question-6"> STEP 6: CRISPRi & guideRNA efficiency    </label>
−
            mydiv4.style.display = 'block'
+
    <div class="text">
−
            mydiv5.style.display = 'block'
+
      <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,
−
            //HOW TO HIDE
+
or with a non-targeting gRNA plasmid.</p>
−
        }
+
<img src="https://static.igem.org/mediawiki/2017/6/6a/T--UNOTT--gRNAresultspic.jpeg">
−
      });
+
<img src="https://static.igem.org/mediawiki/2017/e/e1/T--UNOTT--photosofgRNAresults.jpeg">
−
     });</script>
+
 
 +
     </div>
 +
  </div>
  
  
 +
</div>       
  
 +
</div>
  
 
</body>
 
</body>

Latest revision as of 16:11, 31 October 2017





RESULTS:

Text


Text


Text


Text


Here are the results of our freeze-dried cells revival experiments. With these experiments, we want to show that different storage do not have an effect on the revival of the cells within our key.


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.