Line 59: | Line 59: | ||
background-color: #ffffff; | background-color: #ffffff; | ||
} | } | ||
+ | |||
+ | .wrapper | ||
+ | margin: 40px auto | ||
+ | width: 400px | ||
+ | display: block | ||
+ | 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 | ||
+ | .arrow | ||
+ | transform: rotate(0) | ||
+ | left: 0 | ||
+ | &:before, &:after | ||
+ | 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 | ||
+ | width: 13px | ||
+ | height: 13px | ||
+ | display: inline-block | ||
+ | position: relative | ||
+ | bottom: -5px | ||
+ | left: -10px | ||
+ | transition: 0.4s ease | ||
+ | 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 | ||
+ | list-style-type: none | ||
+ | margin: 0 auto | ||
+ | padding: 4px 12px | ||
+ | text-align: left | ||
+ | cursor: pointer | ||
+ | &:first-child | ||
+ | margin-top: 12px | ||
+ | &:last-child | ||
+ | margin-bottom: 12px | ||
+ | |||
+ | |||
+ | |||
</style> | </style> | ||
Line 117: | Line 245: | ||
</div> | </div> | ||
− | |||
+ | <div class="wrapper wrapper1" id="wrapper"> | ||
+ | <p class="click-text"> | ||
+ | What does Marsellus Wallace not look like? <span class="arrow"></span> | ||
+ | </p> | ||
+ | <ul> | ||
+ | <li>Black</li> | ||
+ | <li>Bald</li> | ||
+ | <li>A Bitch</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div class="wrapper wrapper2" id="wrapper2"> | ||
+ | <p class="click-text"> | ||
+ | Malkovich malkovich? <span class="arrow"></span> | ||
+ | </p> | ||
+ | <ul> | ||
+ | <li>Malkovich</li> | ||
+ | <li>Malkovich</li> | ||
+ | <li>Malkovich</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <div class="wrapper wrapper3" id="wrapper3"> | ||
+ | <p class="click-text"> | ||
+ | What is your favourite colour? <span class="arrow"></span> | ||
+ | </p> | ||
+ | <ul> | ||
+ | <li>Blue</li> | ||
+ | <li>Yellow</li> | ||
+ | <li>Not Sure</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | document.getElementById('wrapper').onclick = function() { | ||
+ | |||
+ | var className = ' ' + wrapper.className + ' '; | ||
+ | |||
+ | this.className = ~className.indexOf(' active ') ? | ||
+ | className.replace(' active ', ' ') : | ||
+ | this.className + ' active'; | ||
+ | }; | ||
+ | |||
+ | document.getElementById('wrapper2').onclick = function() { | ||
+ | |||
+ | var className = ' ' + wrapper2.className + ' '; | ||
+ | |||
+ | this.className = ~className.indexOf(' active ') ? | ||
+ | className.replace(' active ', ' ') : | ||
+ | this.className + ' active'; | ||
+ | } | ||
+ | |||
+ | document.getElementById('wrapper3').onclick = function() { | ||
+ | |||
+ | var className = ' ' + wrapper3.className + ' '; | ||
+ | |||
+ | this.className = ~className.indexOf(' active ') ? | ||
+ | className.replace(' active ', ' ') : | ||
+ | this.className + ' active'; | ||
+ | } | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 19:46, 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