Difference between revisions of "Team:UNOTT/Results"

 
(24 intermediate revisions by one other user not shown)
Line 19: Line 19:
 
}
 
}
  
 +
p {
 +
margin-top:10px;
 +
}
  
 
h2 span.spacer {
 
h2 span.spacer {
Line 60: Line 63:
 
}
 
}
  
−
.wrapper
+
.wrapper {
−
  margin: 40px auto
+
   width: 100%;
−
   width: 400px
+
   margin: 0 auto;
−
   display: block
+
   padding: 3em 0 0;
−
  text-align: center
+
}
−
  transition: 0.15s ease
+
−
   &.active
+
−
    .arrow
+
−
      transform: rotate(45deg) translate(-5px,-5px)
+
−
      &:before
+
−
        transform: translate(10px,0)
+
−
      &:after
+
−
        transform: rotate(90deg) translate(10px,0)
+
−
    ul
+
−
      opacity: 0.3
+
−
      height: 108px
+
−
     
+
−
.wrapper2
+
−
  ul
+
−
    border: 1px solid rgba(255, 255, 255, 0.5)
+
−
  li
+
−
    &:first-child
+
−
      margin-top: 16px
+
−
    &:last-child
+
−
      margin-bottom: 3px
+
−
  &.active
+
−
    ul
+
−
      margin-top: 12px
+
−
    .arrow
+
−
      transform: rotate(45deg) translate(38px,38px)
+
−
      opacity: 0.6
+
−
      &:before
+
−
        transform: translate(5px,0)
+
−
      &:after
+
−
        transform: rotate(90deg) translate(5px,0)
+
  
−
.wrapper3
+
.dropdown1 {
−
   .arrow
+
   float: left;
−
    transform: rotate(0)
+
  width: 100%;
−
    left: 0
+
  position: relative;
−
    &:before, &:after
+
  padding-bottom: 2em;
−
      background-color: transparent
+
}
−
      width: 3px
+
−
      height: 10px
+
−
      display: inline-block
+
−
      position: absolute
+
−
      border-bottom: 12px solid white
+
−
      top: 0
+
−
      left: 0
+
−
      transform: rotate(0)
+
−
    &:before
+
−
      transform: rotate(-135deg)
+
−
    &:after
+
−
      transform: rotate(135deg)
+
−
     
+
−
  &.active
+
−
    .arrow
+
−
      transform: rotate(0)
+
−
      transform: translate(0, -6px)
+
−
      &:before
+
−
        transform: rotate(-45deg)
+
−
      &:after
+
−
        transform: rotate(45deg)
+
−
     
+
−
 
+
  
−
.arrow
+
.dropdown1 input[type=checkbox] {
−
   width: 13px
+
   position: absolute;
−
  height: 13px
+
   top: 30px;
−
  display: inline-block
+
   left: 0;
−
  position: relative
+
   width: 100%;
−
  bottom: -5px
+
   height: 100%;
−
  left: -10px
+
   opacity: 0;
−
  transition: 0.4s ease
+
   cursor: pointer;
−
  margin-top: 2px
+
}
−
  text-align: left
+
−
  transform: rotate(45deg)
+
−
  float: right
+
−
  &:before, &:after
+
−
    position: absolute
+
−
    content: ''
+
−
    display: inline-block
+
−
    width: 12px
+
−
    height: 3px
+
−
    background-color: #fff
+
−
    transition: 0.4s ease
+
−
   &:after
+
−
    position: absolute
+
−
    transform: rotate(90deg)
+
−
    top: -5px
+
−
    left: 5px
+
−
    
+
−
.click-text
+
−
  display: block
+
−
  text-align: left
+
−
  padding: 0 12px 16px
+
−
   margin: 0
+
−
  cursor: pointer
+
−
  color: rgba(255, 255, 255, 0.3)
+
−
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
+
−
  transition: 0.15s ease
+
−
  &:hover
+
−
    color: rgba(255, 255, 255, 0.6)
+
−
    border-bottom-color: rgba(255, 255, 255, 0.4)
+
−
 
+
−
ul
+
−
  padding: 0
+
−
  margin: 0
+
−
   height: 0
+
−
  overflow: hidden
+
−
   opacity: 0
+
−
   transition: 0.4s ease
+
−
  border-bottom: 1px solid rgba(255, 255, 255, 0.5)
+
  
−
li
+
.dropdown1 label {
−
   list-style-type: none
+
   cursor: pointer;
−
   margin: 0 auto
+
   display: inline-block;
−
   padding: 4px 12px
+
   padding-left: 1.75rem;
−
   text-align: left
+
   font-size: 5.0rem;
−
   cursor: pointer
+
   line-height: 2rem;
−
   &:first-child
+
   font-weight: 600;
−
    margin-top: 12px
+
   color: #333;
−
   &:last-child
+
  font-family: Karla, sans-serif;
−
    margin-bottom: 12px
+
}
  
 +
.dropdown1 label:before {
 +
  content: "";
 +
  position: absolute;
 +
  top: 6px;
 +
  left: 0;
 +
  border-left: 8px solid #F5634A;
 +
  border-top: 8px solid transparent;
 +
  border-bottom: 8px solid transparent;
 +
  margin-left: 4px;
 +
}
  
−
    
+
.dropdown1 input[type=checkbox]:checked ~ label:before {
 +
   border-left: 8px solid transparent;
 +
  border-top: 8px solid #F5634A;
 +
  border-right: 8px solid transparent;
 +
  margin: 8px 0 0;
 +
}
 +
 
 +
.dropdown1 .text {
 +
  max-height: 0;
 +
  -webkit-transition: max-height 1s;
 +
  -moz-transition: max-height 1s;
 +
  -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 219: Line 166:
  
  
−
  <h4>STEP 1: Create guideRNA Plasmid</h4>
+
  
 
        
 
        
Line 228: Line 175:
  
 
    
 
    
−
   <h4>STEP 2: Create Reporter Plasmid </h4>
+
    
−
   <h4>STEP 3: Create Promoter Library</h4>
+
    
−
   <h4>STEP 4: Random Ligations      </h4>
+
    
 
        
 
        
 
    
 
    
−
  <h4>STEP 5: Freeze drying & Revivial</h4>
+
 
 
        
 
        
−
   <h4>STEP 6: CRISPRi & guideRNA efficiency</h4>
+
    
 
        
 
        
−
<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>
 
−
<img src="https://static.igem.org/mediawiki/2017/6/6a/T--UNOTT--gRNAresultspic.jpeg">
 
  
  
  
−
</div>
 
  
  
−
<div class="wrapper wrapper1" id="wrapper">
+
<div class="wrapper">
−
  <p class="click-text">
+
  <div class="dropdown1">
−
    What does Marsellus Wallace not look like? <span class="arrow"></span>
+
  <input type="checkbox" id="question-1">
−
  </p>
+
  <label for="question-1"> STEP 1: Create guideRNA Plasmid </label>
−
  <ul>
+
     <div class="text">
−
     <li>Black</li>
+
      <p>Text</p>
−
    <li>Bald</li>
+
     </div>
−
     <li>A Bitch</li>
+
   </div>
−
   </ul> 
+
−
</div>
+
  
−
<div class="wrapper wrapper2" id="wrapper2">
+
<br> 
−
  <p class="click-text">
+
<div class="dropdown1">
−
     Malkovich malkovich? <span class="arrow"></span>
+
  <input type="checkbox" id="question-2">
−
  </p>
+
  <label for="question-2"> STEP 2: Create Reporter Plasmid </label>
−
  <ul>
+
     <div class="text">
−
    <li>Malkovich</li>
+
      <p>Text</p>
−
     <li>Malkovich</li>
+
     </div>
−
    <li>Malkovich</li>
+
   </div>
−
   </ul> 
+
−
</div>
+
  
−
<div class="wrapper wrapper3" id="wrapper3">
+
<br> 
−
  <p class="click-text">
+
<div class="dropdown1">
−
     What is your favourite colour? <span class="arrow"></span>
+
  <input type="checkbox" id="question-3">
−
  </p>
+
  <label for="question-3">  STEP 3: Create Promoter Library </label>
−
  <ul>
+
     <div class="text">
−
    <li>Blue</li>
+
      <p>Text</p>
−
     <li>Yellow</li>
+
     </div>
−
    <li>Not Sure</li>
+
   </div>
−
   </ul> 
+
−
</div>  
+
  
−
<script>
+
<br>  
−
document.getElementById('wrapper').onclick = function() {
+
<div class="dropdown1">
 +
  <input type="checkbox" id="question-4">
 +
  <label for="question-4">STEP 4: Random Ligations      </label>
 +
    <div class="text">
 +
      <p>Text</p>
 +
    </div>
 +
  </div>
  
−
     var className = ' ' + wrapper.className + ' ';
+
<br>
 +
<div class="dropdown1">
 +
  <input type="checkbox" id="question-5">
 +
  <label for="question-5">STEP 5: Freeze drying & Revival    </label>
 +
     <div class="text">
 +
      <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>
 +
    </div>
 +
  </div>
  
−
    this.className = ~className.indexOf(' active ') ?
+
<br>
−
                        className.replace(' active ', ' ') :
+
−
                        this.className + ' active';
+
−
};
+
  
−
document.getElementById('wrapper2').onclick = function() {
+
<div class="dropdown1">
 +
  <input type="checkbox" id="question-6">
 +
  <label for="question-6"> STEP 6: CRISPRi & guideRNA efficiency    </label>
 +
    <div class="text">
 +
      <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>
 +
<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">
  
−
     var className = ' ' + wrapper2.className + ' ';
+
     </div>
 +
  </div>
  
−
    this.className = ~className.indexOf(' active ') ?
 
−
                        className.replace(' active ', ' ') :
 
−
                        this.className + ' active';
 
−
}
 
  
−
document.getElementById('wrapper3').onclick = function() {
+
</div>       
  
−
    var className = ' ' + wrapper3.className + ' ';
+
</div>
  
−
    this.className = ~className.indexOf(' active ') ?
 
−
                        className.replace(' active ', ' ') :
 
−
                        this.className + ' active';
 
−
}
 
−
</script>
 
 
</body>
 
</body>
 
</html>
 
</html>

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.