Difference between revisions of "Team:Kent/Team"

 
(48 intermediate revisions by the same user not shown)
Line 46: Line 46:
  
 
          
 
          
 +
 
         #navdiv{
 
         #navdiv{
 
         color: #FFFFFF;
 
         color: #FFFFFF;
Line 57: Line 58:
 
         #navdiv h1 img {
 
         #navdiv h1 img {
 
         width:150px;
 
         width:150px;
−
margin-top:-50px;
 
 
         }
 
         }
  
Line 182: Line 182:
 
font-size:50px;
 
font-size:50px;
 
}
 
}
−
 
+
#video{
−
        .droptext {
+
margin: 20px 0 50px 0;
−
box-shadow: 0px 0px 0px 5px #F37524;
+
 
border-radius:10px;
 
border-radius:10px;
−
        margin: auto;
+
border-color:#F37524;
−
        margin-bottom:200px;
+
−
        margin-top:50px;
+
−
        width: 1200px;
+
−
opacity:0.85;
+
−
 
+
 
}
 
}
−
.droptext input {
+
.faces {
−
display: none;
+
margin: 20px 0 0 0;
 +
padding: 0;
 +
list-style: none;
 +
display: block;
 +
text-align: center;
 +
width: 100%;
 
}
 
}
−
.hull {
+
.bubble {
 +
width: 100%;
 +
height: 100%;
 +
border-radius: 50%;
 
position: relative;
 
position: relative;
−
height: 100px;
+
cursor: default;
−
background: transparent;
+
box-shadow:  
−
    transition: all .25s ease-in-out;
+
inset 0 0 0 0 rgba(200,95,66, 0.4),
 +
inset 0 0 0 16px rgba(255,255,255,0.6),
 +
0 1px 2px rgba(0,0,0,0.1);
 +
transition: all 0.4s ease-in-out;
 
}
 
}
−
.hull::before {
+
 
−
    content: '';
+
.face-1 {  
−
    position: absolute;
+
background-image: url(https://static.igem.org/mediawiki/2017/thumb/7/7b/T--Kent--A1.png/240px-T--Kent--A1.png);
−
    display: block;
+
−
    top: 0;
+
−
    bottom: 0;
+
−
    left: 0;
+
−
    right: 0;
+
−
    pointer-events: none;
+
 
}
 
}
−
header.hull {
 
−
border-radius:10px 10px 0px 0px;
 
−
border: 3px solid #455057;
 
−
border-style:solid;
 
−
border-bottom-color: #F37524;
 
−
background: #455057;
 
−
z-index: 50;
 
−
cursor: initial;
 
  
 +
.face-2 {
 +
background-image: url(https://static.igem.org/mediawiki/2017/thumb/c/c4/T--Kent--A2.png/240px-T--Kent--A2.png);
 
}
 
}
−
header .hull-title {
 
−
margin: 0;
 
−
font-weight: normal;
 
−
font-size: 25pt;
 
−
color: #F37524;
 
−
cursor: initial;
 
  
 +
.face-3 {
 +
background-image: url(https://static.igem.org/mediawiki/2017/9/90/T--Kent--A3.png);
 
}
 
}
−
.hull-title {
+
.face-4 {  
−
color:#f4ccb2;
+
background-image: url(https://static.igem.org/mediawiki/2017/thumb/f/f6/T--Kent--A4.png/240px-T--Kent--A4.png);
−
font-size: 20px;
+
−
width: calc(100% - 40px);
+
−
height: 50px;
+
−
line-height: 50px;
+
−
padding: 20px 0 0 50px;
+
−
display: inline-block;
+
−
cursor: pointer;
+
−
-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
+
 
}
 
}
−
.hull-content {
+
 
−
width: calc(100% - 40px);
+
.face-5 {  
−
padding: 30px 0 20px 20px;
+
background-image: url(https://static.igem.org/mediawiki/2017/thumb/4/49/T--Kent--A5.png/240px-T--Kent--A5.png);
−
font-size: 11pt;
+
−
color: #455057;
+
−
display: none;
+
 
}
 
}
−
.hull-close {
+
 
−
position: absolute;
+
.face-6 {  
−
height: 64px;
+
background-image: url(https://static.igem.org/mediawiki/2017/thumb/6/67/T--Kent--A6.png/240px-T--Kent--A6.png);
−
width: 100%;
+
}
−
top: 0;
+
.face-7 {
−
left: 0;
+
background-image: url(https://static.igem.org/mediawiki/2017/thumb/2/24/T--Kent--A7.png/240px-T--Kent--A7.png);
−
cursor: pointer;
+
−
display: none;
+
 
}
 
}
−
input:checked + .hull {
 
−
height: auto;
 
−
color:#455057;
 
−
background:#f4ccb2;
 
−
border-top: 2.5px solid #F37524;
 
  
 +
.face-8 {
 +
background-image: url(https://static.igem.org/mediawiki/2017/thumb/d/d1/T--Kent--A8.png/229px-T--Kent--A8.png);
 
}
 
}
−
input:checked + .hull .hull-title {
+
 
−
color:#455057;
+
 
 +
.bubble:hover {
 +
box-shadow:  
 +
inset 0 0 0 110px rgba(200,95,66, 0.4),
 +
outset 0 0 0 16px rgba(255,255,255,0.8),
 +
0 1px 2px rgba(0,0,0,0.1);
 
}
 
}
  
−
input:checked + .hull .hull-content,
+
 
−
input:checked + .hull .hull-close {
+
.faces:after,
 +
.bubble:before {
 +
content: '';
 +
    display: table;
 +
}
 +
 
 +
.faces:after {
 +
clear: both;
 +
}
 +
 
 +
.faces li {
 +
width: 300px;
 +
height: 300px;
 
display: inline-block;
 
display: inline-block;
−
border-bottom: 2.5px solid #F37524;
+
margin: 20px;
 
}
 
}
  
−
.arrows section .hull-title {
+
.subName h3 {
−
padding-left: 44px;
+
color: #F37524;
−
width: calc(100% - 80px);
+
text-transform: uppercase;
 +
position: relative;
 +
letter-spacing: 2px;
 +
font-size: 22px;
 +
margin: 70 0 0 0 px;
 +
padding: 65px 0 0 0;
 +
height: 110px;
 
}
 
}
−
input:checked + .arrows section .hull-title{
+
 
−
color:#455057;
+
.subName p {
 +
color: #F37524;
 +
font-style: italic;
 +
margin: 70 0 0 0 px;
 +
font-size: 12px;
 +
border-top: 1px solid rgba(255,255,255,0.5);
 
}
 
}
  
−
.arrows section .hull-title:before {
+
.centerizer{
−
position: absolute;
+
width:100%;
−
display: block;
+
text-align:center;
−
content: '\203a';
+
margin: 50px 0 50px 0;
−
font-size: 28pt;
+
−
left: 20px;
+
−
top: 17px;
+
−
color: #F37524;
+
−
transition: transform .5s ease-in-out;
+
−
+
 
}
 
}
−
input:checked + section.hull .hull-title:before {
+
.centerizer span{
−
transform: rotate(270deg);
+
color:#f4ccb2;
 +
font-size:50px;
 +
}
 +
 
 +
.lineSeparator{
 +
display:inline-block;
 +
width:850px;
 +
height:10px;
 +
background:#F37524;
 +
border-radius:10px;
 +
 
 +
 
 
}
 
}
  
Line 378: Line 384:
 
   z-index: 299;  
 
   z-index: 299;  
 
border-style: solid;
 
border-style: solid;
−
     border-color: #89d875;
+
     border-color: #F37524;
 
   outline: none;
 
   outline: none;
 
opacity:0.8;
 
opacity:0.8;
Line 389: Line 395:
  
 
#ScrollUp:hover {
 
#ScrollUp:hover {
−
   background-color: #89d875;
+
   background-color: #F37524;
 
}
 
}
 
         #foot ul li span:hover .fa
 
         #foot ul li span:hover .fa
Line 432: Line 438:
  
 
     <body>
 
     <body>
 +
<div id="navbox">
 
         <nav id="navdiv">
 
         <nav id="navdiv">
 
             <ul>
 
             <ul>
Line 438: Line 445:
 
                     <ul class="drop-menu menu-1">
 
                     <ul class="drop-menu menu-1">
 
                         <a href="https://2017.igem.org/Team:Kent/Description"><li>Description</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Description"><li>Description</li></a>
−
<a href="https://2017.igem.org/Team:Kent/Design"><li> Design </li></a>
+
<a href="https://2017.igem.org/Team:Kent/Model"><li>Modelling</li></a>
 
                       <a href="https://2017.igem.org/Team:Kent/Results"><li>Results</li></a>
 
                       <a href="https://2017.igem.org/Team:Kent/Results"><li>Results</li></a>
−
                         <a href="https://2017.igem.org/Team:Kent/Model"><li>Modelling</li></a>
+
                          
−
<a href="https://2017.igem.org/Team:Kent/Demonstrate"><li>Demonstrate</li></a>
+
 
 
                     </ul>
 
                     </ul>
 
                 <li>
 
                 <li>
Line 448: Line 455:
 
<a href="https://2017.igem.org/Team:Kent/Parts"> <li> Parts </li></a>
 
<a href="https://2017.igem.org/Team:Kent/Parts"> <li> Parts </li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Basic_Part"><li>Basic Parts</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Basic_Part"><li>Basic Parts</li></a>
−
                         <a href="https://2017.igem.org/Team:Kent/Composite_Part"><li>Composite Parts</li></a>
+
                          
−
<a href = "https://2017.igem.org/Team:Kent/Part_Collection"><li> Part Collection </li></a>
+
 
  
 
                     </ul>
 
                     </ul>
Line 471: Line 478:
 
                     <ul class="drop-menu menu-2">
 
                     <ul class="drop-menu menu-2">
 
                         <a href="https://2017.igem.org/Team:Kent/Safety"><li>Project Safety</li></a>
 
                         <a href="https://2017.igem.org/Team:Kent/Safety"><li>Project Safety</li></a>
−
                         <a href="https://2017.igem.org/Team:Kent/Signs"><li>Hazard Signs</li></a>
+
                          
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 494: Line 501:
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>
 +
</div>
 
         <div id ="title">
 
         <div id ="title">
 
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/8/84/T--Kent--TeamHeader.png/604px-T--Kent--TeamHeader.png" id="header1">  
 
                 <img src = "https://static.igem.org/mediawiki/2017/thumb/8/84/T--Kent--TeamHeader.png/604px-T--Kent--TeamHeader.png" id="header1">  
Line 499: Line 507:
 
<img src = "https://static.igem.org/mediawiki/2017/thumb/3/3d/T--Kent--TeamHeader2v2.png/800px-T--Kent--TeamHeader2v2.png" id="header2">
 
<img src = "https://static.igem.org/mediawiki/2017/thumb/3/3d/T--Kent--TeamHeader2v2.png/800px-T--Kent--TeamHeader2v2.png" id="header2">
 
         </div>
 
         </div>
−
        <nav class="droptext arrows">
+
<div class="centerizer">
−
<header class="hull">
+
<span>Get to know us!</span>
−
<label for="acc-close" class="hull-title">Basic Protocols</label>
+
−
</header>
+
−
<input type="radio" name="droptext" id="cb1" />
+
−
<section class="hull">
+
−
<label class="hull-title" for="cb1">Production of Lysogeny broth (LB)</label>
+
−
<label class="hull-close" for="acc-close"></label>
+
−
<div class="hull-content">For 1 litre of LB a mixture of 10g of sodium chloride, 10g peptone, 5g of yeast extract as well as 1
+
−
litre of distilled water in a glass bottle. We then used a magnetic spinner to help mix the powders
+
−
with the water, we avoided shaking the glass bottle as it would cause froth and waste some of the
+
−
LB.
+
 
<br>
 
<br>
−
When making the LB we also made another litre batch and added 15g of agar extract to be able to
+
<div class="lineSeparator"></div>
−
grow bacteria on plates.</div>
+
 
−
</section>
+
<div id="video">
−
<input type="radio" name="droptext" id="cb2" />
+
<iframe width="560" height="315" src="https://www.youtube.com/embed/sbWgrRLA2pA" frameborder="0" allowfullscreen></iframe>
−
<section class="hull">
+
</div>
−
<label class="hull-title" for="cb2">Production of SOB medium and magnesium stock</label>
+
 
−
<label class="hull-close" for="acc-close"></label>
+
<div class="centerizer">
−
<div class="hull-content">Bringing together 20g of tryptone, 5g of yeast extract, 0.584g of NaCl, 0.186g of KCl and mixing it
+
<span>Team Members</span>
−
with 990ml of millipure water (using the magnetic mixer again) which was then put in to autoclave
+
−
to sterilise it, after it was taken out and let for it to cool down to below 60 o C.
+
 
<br>
 
<br>
−
10ml of 2M Mg 2+ stock was then added and then brought to 100ml with millipure water, 0.2mm
+
<div class="lineSeparator"></div>
−
filter sterilize was then used</div>
+
 
−
</section>
+
</div>
−
<input type="radio" name="droptext" id="cb3" />
+
<ul class="faces">
−
<section class="hull">
+
<li>
−
<label class="hull-title" for="cb3">Production of SOC medium and glucose stock</label>
+
<div class="bubble face-1">
−
<label class="hull-close" for="acc-close"></label>
+
<div class="subName">
−
<div class="hull-content">Once again bring 20g of tryptone, 5g of yeast of extract, 0.584g of NaCl, 0.186g of KCL, and then
+
<h3>Abdul</h3>
−
bring 970 ml with millipure water and use the magnetic mixer once again, this was also then put in
+
<p>I did igem because It interested me as I took biology at Alevel and enjoyed it, so I relished the challenge of using my knowledge from physics and apply it to biochemistry. I found that the thing
−
to autoclave.
+
that stood out from igem is the fact that it involves many people from different disciplines to work
−
<br>
+
together in a project that can I have real life applications.</p>
−
10ml of 2M Mg 2+ stock and then bring it to 100ml with milllipure water, filter sterilize it with 0.2m
+
</div>
−
and then final add 20ml of 1M glucose stock.</div>
+
</div>
−
</section>
+
</li>
−
<input type="radio" name="droptext" id="acc-close" />
+
<li>
−
<input type="radio" name="droptext" id="cb4" />
+
<div class="bubble face-2">
−
<section class="hull">
+
<div class="subName">
−
<label class="hull-title" for="cb4">Production of Glycerol stock</label>
+
<h3>Dan</h3>
−
<label class="hull-close" for="acc-close"></label>
+
<p>Steve of House Safety, First of His Name, The Uncontaminated, King of The Autoclave Machine and the Agar Plates, Protector of The DNA samples, Breaker of Centrifuges (once), and Creator of Helmut
−
<div class="hull-content">If you wish to store bacteria long term, you will need to create a Glycerol Stock after
+
the Parafilm Snowman. I wanted to do iGEM to get experience in the lab and meet new people. iGEM has made me want to
−
inoculating an overnight liquid culture
+
do a phd after my undergrad studies are done. Still holding out for becoming the next Bon Jovi
−
<br>
+
though.</p>
−
<ul><li>Once bacterial growth has been achieved, 500μL of the overnight liquid
+
</div>
−
culture needs to be added to 500μL of 50% glycerol in a 2mL tube where it
+
</div>
−
should be gently mixed</li>
+
</li>
−
<li>The glycerol stock should then be frozen at -80 o C<ul>
+
<li>
−
<li> Successive freeze and thaw cycles will reduce the stocks shelf life</li></ul>
+
<div class="bubble face-3">
−
</li></ul></div>
+
<div class="subName">
−
</section>
+
<h3>Harman</h3>
−
<input type="radio" name="droptext" id="acc-close" />
+
<p>I have always had a deep interest in science and so I decided to do iGem which has helped me learn a lot about research which will help me in my career in the medical sector.</p>
−
<input type="radio" name="droptext" id="cb5" />
+
</div>
−
<section class="hull">
+
</div>
−
<label class="hull-title" for="cb5">Running Agarose Gel</label>
+
</li>
−
<label class="hull-close" for="acc-close"></label>
+
<li>
−
<div class="hull-content">After the cells have been miniprepped and the plasmid put through a restriction digest, the agarose gel can be run.
+
<div class="bubble face-4">
 +
<div class="subName">
 +
<h3>Ivy</h3>
 +
<p>The involvement of synthetic biology within iGEM has helped me confirm that biopharmaceuticals is the one for me.</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-5">
 +
<div class="subName">
 +
<h3>Laurens</h3>
 +
<p>I wanted to genetically engineered a super bacterium to employ in my masterplan for world domination. Settled on this project though, still moderately happy. I now know what a career in science could look like and aim to pursue just that.</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-6">
 +
<div class="subName">
 +
<h3>Lulu</h3>
 +
<p>I’ve always wanted to pursue a career in science and iGem proved to be the perfect place to grow that passion, despite all the constant trial and error.</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-7">
 +
<div class="subName">
 +
<h3>Nina</h3>
 +
<p>Through iGEM I realized I want to pursue a career in science but also that science is a vast ocean of disappointment.</p>
 +
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-8">
 +
<div class="subName">
 +
<h3>Tarek</h3>
 +
<p>I get it like a scientist, break it down like an engineer.</p>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
 
 +
     
 +
<div class="centerizer">
 +
<span>Advisors</span>
 
<br>
 
<br>
−
<ul><li>Make up some agarose. This is done by taking 0.5g of agarose powder and putting it in a
+
<div class="lineSeparator"></div>
−
250ml sterile conical flask, with 50ml of TAE buffer, then microwaving it in small pulses (20
+
<ul class="faces">
−
seconds then swirling it around) until it is dissolved. Don’t overheat it or it will evaporate too
+
<li>
−
much. Make up the evaporated volume to 50ml with distilled water.</li>
+
<div class="bubble face-9">
−
<li>Add 1 vial of cybersafe (ask technical services for a tube of it and add all of it)</li>
+
<div class="subName">
−
<li>Line the white sides of the tank with the agarose solution, to seal it and prevent leakage. Use
+
<h3>Dr. Neil Kad</h3>
−
a p1000 pipette set to 1ml. Let it dry (about 5 mins max)</li>
+
−
<li>Then pour all the agarose/sybrsafe solution into the tank and put in the comb. Let it set and
+
</div>
−
solidify (maximum 30 mins)</li>
+
</div>
−
<li>When the gel has set, remove the comb from the tank (gently!) and then cover the whole
+
</li>
−
tank with TAE buffer, so there’s at least half a centimetre of TAE covering the gel.</li>
+
<li>
−
<li>Now, the samples need to be loaded. Load some DNA markers (ask technical services for a
+
<div class="bubble face-10">
−
tube of this and load the whole tube) into well 1( left hand side) and then choose what you
+
<div class="subName">
−
load into wells 2, 3, and 4 etc. (make sure you note what’s in each lane!)</li>
+
<h3>Dr. Peter Ellis</h3>
−
<li>Load all of your digests into the wells 2,3, and 4.</li>
+
</div>
−
<li>Plug into a power supply and put the cover on. Run for 40 mins to an hour at 80v. The amps
+
</div>
−
don’t matter.</li>
+
</li>
−
<li>Once the visible markers have reached the half way point of the tank, turn off the power
+
<li>
−
supply and drain the TAE buffer form the tank. Remove the gel with a spatula and place in a
+
<div class="bubble face-11">
−
UV imaging box. Take an image of the gel under UV light, save it onto a USB stick.</li></ul></div>
+
<div class="subName">
−
</section>
+
<h3>Dr. Wei Feng Xue</h3>
−
<input type="radio" name="droptext" id="acc-close" />
+
−
</nav>
+
</div>
 +
</div>
 +
</li>
 +
<li>
 +
<div class="bubble face-12">
 +
<div class="subName">
 +
<h3>Dr. Mark Smales</h3>
 +
 +
</div>
 +
</div>
 +
</li>
  
 +
</ul>
 +
</div>
 
         <div id="foot">
 
         <div id="foot">
 
             <ul>
 
             <ul>

Latest revision as of 04:37, 16 December 2017


Meet the Team
Get to know us!
Team Members

  • Abdul

    I did igem because It interested me as I took biology at Alevel and enjoyed it, so I relished the challenge of using my knowledge from physics and apply it to biochemistry. I found that the thing that stood out from igem is the fact that it involves many people from different disciplines to work together in a project that can I have real life applications.

  • Dan

    Steve of House Safety, First of His Name, The Uncontaminated, King of The Autoclave Machine and the Agar Plates, Protector of The DNA samples, Breaker of Centrifuges (once), and Creator of Helmut the Parafilm Snowman. I wanted to do iGEM to get experience in the lab and meet new people. iGEM has made me want to do a phd after my undergrad studies are done. Still holding out for becoming the next Bon Jovi though.

  • Harman

    I have always had a deep interest in science and so I decided to do iGem which has helped me learn a lot about research which will help me in my career in the medical sector.

  • Ivy

    The involvement of synthetic biology within iGEM has helped me confirm that biopharmaceuticals is the one for me.

  • Laurens

    I wanted to genetically engineered a super bacterium to employ in my masterplan for world domination. Settled on this project though, still moderately happy. I now know what a career in science could look like and aim to pursue just that.

  • Lulu

    I’ve always wanted to pursue a career in science and iGem proved to be the perfect place to grow that passion, despite all the constant trial and error.

  • Nina

    Through iGEM I realized I want to pursue a career in science but also that science is a vast ocean of disappointment.

  • Tarek

    I get it like a scientist, break it down like an engineer.

Advisors

  • Dr. Neil Kad

  • Dr. Peter Ellis

  • Dr. Wei Feng Xue

  • Dr. Mark Smales