Difference between revisions of "Team:UNOTT/Results"

 
(42 intermediate revisions by one other user 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>
−
div { position: relative; }
+
body {
−
input[type=checkbox] {
+
    font-family: 'Karla', sans-serif;
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  width: 100%;
+
−
  height: 100%;
+
−
  opacity: 0;
+
−
}
+
−
label {
+
−
  cursor: pointer;
+
−
}
+
−
label {
+
−
  position: relative;
+
−
  display: block;
+
−
  padding-left: 30px;
+
−
  font-family: 'Spicy Rice', cursive;
+
−
}
+
−
 
+
−
input[type=checkbox]:checked ~ h2 label:before {
+
−
  border-left: 8px solid transparent;
+
−
  border-top: 8px solid black;
+
−
  border-right: 8px solid transparent;
+
−
  margin-left: -4px;
+
−
  margin-top: -4px
+
 
}
 
}
  
 
p {
 
p {
−
  max-height: 0;
+
margin-top:10px;
−
  overflow: hidden;
+
−
  padding-left: 30px;
+
−
  transition: max-height 0.4s ease;
+
−
  font-family: 'Habibi', serif;
+
−
}
+
−
input[type=checkbox]:checked ~ h2 ~ p {
+
−
  max-height: 80px;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
label:before {
+
−
  content: "";
+
−
  position: absolute;
+
−
  width: 0;
+
−
  height: 0;
+
−
  top: 50%;
+
−
  left: 10px;
+
−
  border-left: 8px solid black;
+
−
  border-top: 8px solid transparent;
+
−
  border-bottom: 8px solid transparent;
+
−
  margin-top: -8px;
+
−
}
+
−
h2 {
+
−
  font-size: 30px;
+
−
  font-weight: 400;
+
−
  color: #4a19ff;
+
−
  margin: 60px 0 10px 0;
+
 
}
 
}
  
Line 95: Line 46:
 
   left: 0;  
 
   left: 0;  
 
   width: 100%;
 
   width: 100%;
 +
  font-family: 'Karla', sans-serif;
 
}
 
}
  
 +
h4 {
 +
  font-family: 'Karla', sans-serif;
 +
  color:#4b524a;
 +
  font-weight: bold;
 +
}
 +
 +
.contentmargin{
 +
  margin: auto;
 +
    width: 60%;
 +
    padding: 10px;
 +
    font-family: 'Karla', sans-serif;
 +
    background-color: #ffffff;
 +
}
 +
 +
.wrapper {
 +
  width: 100%;
 +
  margin: 0 auto;
 +
  padding: 3em 0 0;
 +
}
 +
 +
.dropdown1 {
 +
  float: left;
 +
  width: 100%;
 +
  position: relative;
 +
  padding-bottom: 2em;
 +
}
 +
 +
.dropdown1 input[type=checkbox] {
 +
  position: absolute;
 +
  top: 30px;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
}
 +
 +
.dropdown1 label {
 +
  cursor: pointer;
 +
  display: inline-block;
 +
  padding-left: 1.75rem;
 +
  font-size: 5.0rem;
 +
  line-height: 2rem;
 +
  font-weight: 600;
 +
  color: #333;
 +
  font-family: Karla, sans-serif;
 +
}
 +
 +
.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 105: Line 142:
 
<body>
 
<body>
  
−
                  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+
               
  
 
<p><br>
 
<p><br>
Line 123: Line 160:
 
<h2><span>RESULTS:<span class='spacer'></span></h2>
 
<h2><span>RESULTS:<span class='spacer'></span></h2>
 
    
 
    
−
<h4>OBJECTIVE: CREATE pgRNA</h4>
+
 
 +
 
 +
 
 +
<div class="contentmargin">
 +
 
 +
 
 +
  
 
        
 
        
Line 132: Line 175:
  
 
    
 
    
−
   <h4>OBJECTIVE: CREATE pREPORTER</h4>
+
    
−
   <h4>OBJECTIVE: PROMOTER LIBRARY</h4>
+
    
−
  <h4>OBJECTIVE: RANDOM LIGATIONS</h4>
+
 
 
        
 
        
−
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: FREEZE DRYING</h4>
+
 
 +
 
 
        
 
        
−
  <h4>OBJECTIVE: CRISPRi & gRNA 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>
 
−
<input type="checkbox" id="faq-1">
 
−
<h2><label for="faq-1">OBJECTIVE: CRISPRi & gRNA EFFICIENCY</label></h2>
 
−
<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>
 
−
</div>
 
  
−
<div>
 
−
<input type="checkbox" id="faq-2">
 
−
<h2><label for="faq-2">Test</label></h2>
 
−
<p>As many as you need to wash you out from my mind and out of my consciousness.</p>
 
−
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
 
−
</div>
 
  
−
+
<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>
  
−
    
+
<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>
 +
 
 +
<br> 
 +
<div class="dropdown1">
 +
  <input type="checkbox" id="question-3">
 +
  <label for="question-3">  STEP 3: Create Promoter Library </label>
 +
    <div class="text">
 +
      <p>Text</p>
 +
    </div>
 +
  </div>
 +
 
 +
<br>
 +
<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>
 +
 
 +
<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>
 +
 
 +
<br>
 +
 
 +
<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">
 +
 
 +
    </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.