Difference between revisions of "Team:UNOTT/Results"

Line 60: Line 60:
 
}
 
}
  
−
.wrapper
+
wrapper {
−
   margin: 40px auto
+
   margin: 40px auto;
−
   width: 400px
+
   width: 400px;
−
   display: block
+
   display: block;
−
   text-align: center
+
   text-align: center;
−
   transition: 0.15s ease
+
   -webkit-transition: 0.15s ease;
−
   &.active
+
   transition: 0.15s ease;
−
    .arrow  
+
}
−
      transform: rotate(45deg) translate(-5px,-5px)
+
.wrapper.active .arrow {
−
      &:before
+
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
−
        transform: translate(10px,0)
+
          transform: rotate(45deg) translate(-5px, -5px);
−
      &:after
+
}
−
        transform: rotate(90deg) translate(10px,0)
+
.wrapper.active .arrow:before {
−
    ul
+
  -webkit-transform: translate(10px, 0);
−
      opacity: 0.3
+
          transform: translate(10px, 0);
−
      height: 108px
+
}
−
     
+
.wrapper.active .arrow:after {
−
.wrapper2
+
  -webkit-transform: rotate(90deg) translate(10px, 0);
−
  ul
+
          transform: rotate(90deg) translate(10px, 0);
−
    border: 1px solid rgba(255, 255, 255, 0.5)
+
}
−
  li
+
.wrapper.active ul {
−
    &:first-child
+
  opacity: 0.3;
−
      margin-top: 16px
+
  height: 108px;
−
    &: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
+
.wrapper2 ul {
−
   .arrow
+
   border: 1px solid rgba(255, 255, 255, 0.5);
−
    transform: rotate(0)
+
}
−
    left: 0
+
.wrapper2 li:first-child {
−
    &:before, &:after
+
  margin-top: 16px;
−
      background-color: transparent
+
}
−
      width: 3px
+
.wrapper2 li:last-child {
−
      height: 10px
+
  margin-bottom: 3px;
−
      display: inline-block
+
}
−
      position: absolute
+
.wrapper2.active ul {
−
      border-bottom: 12px solid white
+
  margin-top: 12px;
−
      top: 0
+
}
−
      left: 0
+
.wrapper2.active .arrow {
−
      transform: rotate(0)
+
  -webkit-transform: rotate(45deg) translate(38px, 38px);
−
    &:before
+
          transform: rotate(45deg) translate(38px, 38px);
−
      transform: rotate(-135deg)
+
   opacity: 0.6;
−
    &:after
+
}
−
      transform: rotate(135deg)
+
.wrapper2.active .arrow:before {
−
     
+
  -webkit-transform: translate(5px, 0);
−
   &.active
+
          transform: translate(5px, 0);
−
    .arrow
+
}
−
      transform: rotate(0)
+
.wrapper2.active .arrow:after {
−
      transform: translate(0, -6px)
+
  -webkit-transform: rotate(90deg) translate(5px, 0);
−
      &:before
+
          transform: rotate(90deg) translate(5px, 0);
−
        transform: rotate(-45deg)
+
}
−
      &:after
+
−
        transform: rotate(45deg)
+
−
     
+
−
 
+
  
−
.arrow
+
.wrapper3 .arrow {
−
   width: 13px
+
   -webkit-transform: rotate(0);
−
  height: 13px
+
          transform: rotate(0);
−
  display: inline-block
+
   left: 0;
−
  position: relative
+
}
−
  bottom: -5px
+
.wrapper3 .arrow:before, .wrapper3 .arrow:after {
−
  left: -10px
+
  background-color: transparent;
−
  transition: 0.4s ease
+
  width: 3px;
−
  margin-top: 2px
+
  height: 10px;
−
  text-align: left
+
  display: inline-block;
−
  transform: rotate(45deg)
+
  position: absolute;
−
   float: right
+
  border-bottom: 12px solid white;
−
  &:before, &:after
+
  top: 0;
−
    position: absolute
+
   left: 0;
−
    content: ''
+
  -webkit-transform: rotate(0);
−
    display: inline-block
+
          transform: rotate(0);
−
    width: 12px
+
}
−
    height: 3px
+
.wrapper3 .arrow:before {
−
    background-color: #fff
+
   -webkit-transform: rotate(-135deg);
−
    transition: 0.4s ease
+
          transform: rotate(-135deg);
−
   &:after
+
}
−
    position: absolute
+
.wrapper3 .arrow:after {
−
    transform: rotate(90deg)
+
   -webkit-transform: rotate(135deg);
−
    top: -5px
+
          transform: rotate(135deg);
−
    left: 5px
+
}
−
 
+
.wrapper3.active .arrow {
−
.click-text
+
   -webkit-transform: rotate(0);
−
  display: block
+
          transform: rotate(0);
−
   text-align: left
+
  -webkit-transform: translate(0, -6px);
−
  padding: 0 12px 16px
+
          transform: translate(0, -6px);
−
  margin: 0
+
}
−
  cursor: pointer
+
.wrapper3.active .arrow:before {
−
   color: rgba(255, 255, 255, 0.3)
+
   -webkit-transform: rotate(-45deg);
−
  border-bottom: 1px solid rgba(255, 255, 255, 0.2)
+
          transform: rotate(-45deg);
−
  transition: 0.15s ease
+
}
−
   &:hover
+
.wrapper3.active .arrow:after {
−
    color: rgba(255, 255, 255, 0.6)
+
   -webkit-transform: rotate(45deg);
−
    border-bottom-color: rgba(255, 255, 255, 0.4)
+
          transform: rotate(45deg);
−
 
+
}
−
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
+
.arrow {
−
   list-style-type: none
+
   width: 13px;
−
   margin: 0 auto
+
  height: 13px;
−
   padding: 4px 12px
+
  display: inline-block;
−
   text-align: left
+
  position: relative;
−
   cursor: pointer
+
  bottom: -5px;
−
   &:first-child
+
  left: -10px;
−
    margin-top: 12px
+
   -webkit-transition: 0.4s ease;
−
   &:last-child
+
   transition: 0.4s ease;
−
    margin-bottom: 12px
+
  margin-top: 2px;
 +
   text-align: left;
 +
   -webkit-transform: rotate(45deg);
 +
          transform: rotate(45deg);
 +
   float: right;
 +
}
 +
.arrow:before, .arrow:after {
 +
  position: absolute;
 +
  content: "";
 +
  display: inline-block;
 +
  width: 12px;
 +
   height: 3px;
 +
  background-color: #fff;
 +
  -webkit-transition: 0.4s ease;
 +
  transition: 0.4s ease;
 +
}
 +
.arrow:after {
 +
  position: absolute;
 +
  -webkit-transform: rotate(90deg);
 +
          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);
 +
  -webkit-transition: 0.15s ease;
 +
  transition: 0.15s ease;
 +
}
 +
.click-text: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;
 +
  -webkit-transition: 0.4s ease;
 +
  transition: 0.4s ease;
 +
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 +
}
 +
 +
li {
 +
  list-style-type: none;
 +
  margin: 0 auto;
 +
  padding: 4px 12px;
 +
  text-align: left;
 +
  cursor: pointer;
 +
}
 +
li:first-child {
 +
  margin-top: 12px;
 +
}
 +
li:last-child {
 +
  margin-bottom: 12px;
 +
}
  
 
    
 
    

Revision as of 19:52, 29 October 2017





RESULTS:

STEP 1: Create guideRNA Plasmid

STEP 2: Create Reporter Plasmid

STEP 3: Create Promoter Library

STEP 4: Random Ligations

STEP 5: Freeze drying & Revivial

STEP 6: CRISPRi & guideRNA efficiency

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.

What does Marsellus Wallace not look like?

  • Black
  • Bald
  • A Bitch

Malkovich malkovich?

  • Malkovich
  • Malkovich
  • Malkovich

What is your favourite colour?

  • Blue
  • Yellow
  • Not Sure