Difference between revisions of "Team:Oxford/wetlab"

Line 18: Line 18:
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 
<style>
 
<style>
−
a {
+
body {
−
    position: relative;
+
  background: #f1c40f;
−
    display: inline-block;
+
−
    padding: 1.2em 2em;
+
−
    text-decoration: none;
+
−
    text-align: center;
+
−
    cursor: pointer;
+
−
    user-select: none;
+
−
    color: white;
+
−
   
+
−
    &::before {
+
−
        content: '';
+
−
        position: absolute;
+
−
        top: 0;
+
−
        left: 0;
+
−
        bottom: 0;
+
−
        right: 0;
+
−
        background: linear-gradient(135deg, #6e8efb, #a777e3);
+
−
        border-radius: 4px;
+
−
        transition: box-shadow .5s ease, transform .2s ease;
+
−
        will-change: transform;
+
−
        box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
+
−
        transform:
+
−
            translateY(var(--ty, 0))
+
−
            rotateX(var(--rx, 0))
+
−
            rotateY(var(--ry, 0))
+
−
            translateZ(var(--tz, -12px));
+
−
    }
+
−
   
+
−
    &:hover::before {
+
−
        box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
+
−
    }
+
−
   
+
−
    &::after {
+
−
        position: relative;
+
−
        display: inline-block;
+
−
        content: attr(data-title);
+
−
        transition: transform .2s ease;
+
−
        font-weight: bold;
+
−
        letter-spacing: .01em;
+
−
        will-change: transform;
+
−
        transform:
+
−
            translateY(var(--ty, 0))
+
−
            rotateX(var(--rx, 0))
+
−
            rotateY(var(--ry, 0));
+
−
    }
+
 
}
 
}
  
−
body {
+
.button {
−
    display: flex;
+
  background: #3498db;
−
     align-items: center;
+
  width: 180px;
−
     justify-content: center;
+
  padding: 4px 0;
−
     height: 100vh;
+
 
−
     transform-style: preserve-3d;
+
  position: absolute;
−
     transform: perspective(800px);
+
  left: 50%;
 +
  top: 50%;
 +
  transform: translateX(-50%) translateY(-50%);
 +
  border-radius: 3px;
 +
 
 +
  p {
 +
     font-family: 'Roboto';
 +
      text-align: center;
 +
     text-transform: uppercase;
 +
    color: #FFF;
 +
    user-select: none;
 +
  }
 +
 
 +
  &:hover {
 +
    cursor: pointer;
 +
  }
 +
 
 +
  &:after {
 +
    content: "";
 +
    display: block;
 +
    position: absolute;
 +
    width: 100%;
 +
     height: 10%;
 +
     border-radius: 50%;
 +
     background-color: darken(#f1c40f, 20%);
 +
    opacity: 0.4;
 +
    bottom: -30px;
 +
  }
 +
}
 
</style>
 
</style>
 
   </head>
 
   </head>
Line 97: Line 81:
 
How we used these protocols in different experiments can be found below.<br>
 
How we used these protocols in different experiments can be found below.<br>
 
</p>
 
</p>
−
<a href="#" data-title="Results"></a>
+
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Roboto:400"/>
 +
 
 +
<div class="button">
 +
  <p>Click me</p>
 +
</div>
 
<br>
 
<br>
 
<p><b>Wet Lab day to day working </b></p>
 
<p><b>Wet Lab day to day working </b></p>
Line 111: Line 99:
 
       </div>
 
       </div>
 
     </section>
 
     </section>
−
 
+
<script>
 +
var $button = document.querySelector('.button');
 +
$button.addEventListener('click', function() {
 +
  var duration = 0.3,
 +
      delay = 0.08;
 +
  TweenMax.to($button, duration, {scaleY: 1.6, ease: Expo.easeOut});
 +
  TweenMax.to($button, duration, {scaleX: 1.2, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay});
 +
  TweenMax.to($button, duration * 1.25, {scaleX: 1, scaleY: 1, ease: Back.easeOut, easeParams: [6], delay: delay * 3 });
 +
});
 +
</script>
  
 
     <!-- Footer -->
 
     <!-- Footer -->
Line 122: Line 119:
 
     </ul>
 
     </ul>
 
</div>
 
</div>
−
<script>
 
−
const docStyle = document.documentElement.style
 
−
const aElem = document.querySelector('a')
 
−
const boundingClientRect = aElem.getBoundingClientRect()
 
−
 
−
aElem.onmousemove = function(e) {
 
−
 
−
    const x = e.clientX - boundingClientRect.left
 
−
    const y = e.clientY - boundingClientRect.top
 
−
   
 
−
    const xc = boundingClientRect.width/2
 
−
    const yc = boundingClientRect.height/2
 
−
   
 
−
    const dx = x - xc
 
−
    const dy = y - yc
 
−
   
 
−
    docStyle.setProperty('--rx', `${ dy/-1 }deg`)
 
−
    docStyle.setProperty('--ry', `${ dx/10 }deg`)
 
−
   
 
−
}
 
−
 
−
aElem.onmouseleave = function(e) {
 
−
   
 
−
    docStyle.setProperty('--ty', '0')
 
−
    docStyle.setProperty('--rx', '0')
 
−
    docStyle.setProperty('--ry', '0')
 
−
   
 
−
}
 
−
 
−
aElem.onmousedown = function(e) {
 
−
   
 
−
    docStyle.setProperty('--tz', '-25px')
 
−
   
 
−
}
 
−
 
−
document.body.onmouseup = function(e) {
 
−
   
 
−
    docStyle.setProperty('--tz', '-12px')
 
−
    </script>
 
−
    </footer>
 
−
 
  
−
    <!-- Bootstrap core JavaScript -->
 
−
    <script src="vendor/jquery/jquery.min.js"></script>
 
−
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
 
  
 
   </body>
 
   </body>
  
 
</html>
 
</html>

Revision as of 16:04, 14 October 2018

Full Width Pics - Start Bootstrap Template

Overview

Wet Lab

A key part of our project has been our work in the Wet Lab. This page contains links and summaries of all the aspects of lab work we did.


Results

The first port of call for any lab work is to clone the DNA for our constructs into pSB1C3. This is the simple cloning vector with Chloramphenicol resistance chosen by iGEM to be the shipping vector for all parts to be submitted in. After this, the vectors would be transformed into the ideal cells optimised for the particular experiments they were undergoing.
All the protocols we used during the duration of iGEM can be found below.
How we used these protocols in different experiments can be found below.

Click me


Wet Lab day to day working

We only had a few months in the lab and made a lot of progress but there’s much more that could have been done. See our day to day workings here as well as what we’d have in store to take the project on after the jamboree .


Interlab

This year we participated in the 5th instalment of the iGEM’s interlab study. For the details pertaining to what interlab is and what we did - click on the link below.