Difference between revisions of "Team:Kent/Results"

(Prototype team page)
 
Line 1: Line 1:
−
{{Kent}}
+
 
 +
 
 
<html>
 
<html>
 +
    <head>
 +
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 +
        <meta charset="utf-8">
 +
    </head>
 +
    <style>
 +
        .logo_2017 a img{
 +
        display:none;
 +
        }
 +
        #firstHeading{
 +
        display:none;
 +
        }
 +
        #sideMenu{
 +
        display: none;
 +
        }
 +
        @font-face {
 +
        font-family: 'KentExo2';
 +
        src: url(https://static.igem.org/mediawiki/2017/7/76/T--Kent--Exo2.ttf) format('truetype');
 +
        }
 +
        #globalWrapper, #content { /*-- changes default wiki settings --*/
 +
        margin: 0px;
 +
        padding: 0px;
 +
        width: 100%;
 +
        height: 100%;
 +
        border: 0px;
 +
        background: #272e33 url(https://static.igem.org/mediawiki/2017/a/ab/T--Kent--Resultsbkg.png) no-repeat center center fixed;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        background-size: cover;
 +
        }
  
 +
        *{
 +
        padding: 0;
 +
        margin: 0;
 +
font-family: 'KentExo2';
 +
        }
  
−
<div class="column full_size" >
+
        #navdiv{
 +
        color: #FFFFFF;
 +
        left:0px;
 +
        padding: 30px;
 +
        text-align: center;
 +
        font-family:KentExo2;
 +
        position:fixed;
 +
        top:10px;
 +
        z-index:100;
 +
        }
  
−
<h1>Results</h1>
+
        #navdiv h1 img {
 +
        width:150px;
 +
        }
  
−
<p>Here you can describe the results of your project and your future plans. </p>
+
#navdiv h1 {
 +
line-height: 150px;
 +
margin-top:-25px;
 +
}
  
−
<h5>What should this page contain?</h5>
+
        #navdiv ul{
−
<ul>
+
background: transparent;
−
<li> Clearly and objectively describe the results of your work.</li>
+
        text-align: center;
−
<li> Future plans for the project. </li>
+
        list-style: none;
−
<li> Considerations for replicating the experiments. </li>
+
        padding: 0;
−
</ul>
+
        margin: 0;
 +
        display: block;
 +
                }
  
−
<h5>You should also describe what your results mean: </h5>
+
        #navdiv ul a{
 +
        text-decoration: none;
 +
        color: #FFFFFF;
  
−
<ul>
+
        }
−
<li> Interpretation of the results obtained during your project. Don't just show a plot/figure/graph/other, tell us what you think the data means. This is an important part of your project that the judges will look for. </li>
+
        #navdiv ul li{
−
<li> Show data, but remember all measurement and characterization data must be on part pages in the Registry. </li>
+
margin-top: 30px;
−
<li> Consider including an analysis summary section to discuss what your results mean. Judges like to read what you think your data means, beyond all the data you have acquired during your project. </li>
+
        float: left;
−
</ul>
+
        width: 169px;
 +
        height: 50px;
 +
        line-height: 50px;
 +
        position: relative;
 +
        text-transform: uppercase;
 +
        font-size: 16px;
 +
        color:#D0FEDC;
 +
        cursor: pointer;
 +
        opacity:0.8;
 +
border-radius: 10px;
 +
        }
  
−
</div>
+
#navdiv ul #teamLogo{
 +
margin-top:-10px;
 +
margin-left: 20px;
 +
margin-right: 20px;
 +
        float: left;
 +
        width: 150px;
 +
        height: 120px;
 +
        position: relative;
 +
        opacity:0.8;
 +
        }
  
−
<div class="clear"></div>
+
        #navdiv ul li:hover{
 +
border-radius:10px;
 +
        background: #28AAA1;
 +
        transition:all 0.3s;
 +
        opacity:0.9;
 +
        }
  
−
<div class="column half_size" >
 
  
 +
#navdiv ul #teamLogo:hover{
 +
border-radius:10px;
 +
        background: #455057;
 +
        transition:all 0.3s;
 +
        opacity:0.8;
 +
        }
  
−
<h5> Project Achievements </h5>
 
  
−
<p>You can also include a list of bullet points (and links) of the successes and failures you have had over your summer. It is a quick reference page for the judges to see what you achieved during your summer.</p>
+
        #navdiv ul li:hover a{
 +
        color:#455057;
 +
        }
  
−
<ul>
+
        #navdiv ul.drop-menu {
−
<li>A list of linked bullet points of the successful results during your project</li>
+
        position: absolute;
−
<li>A list of linked bullet points of the unsuccessful results during your project. This is about being scientifically honest. If you worked on an area for a long time with no success, tell us so we know where you put your effort.</li>
+
        top: 100%;
−
</ul>
+
        left: 0%;
 +
        width: 100%;
 +
        padding: 0;
 +
        z-index:100;
 +
        }
  
−
</div>
+
        #navdiv ul.drop-menu li {
 +
        background: #455057;
 +
        color: #FFFFFF;
 +
       
 +
        }
 +
        #navdiv ul.drop-menu li:hover {
 +
color:#455057;
 +
        background: #35DBCB;
  
 +
        }
 +
#navdiv ul.drop-menu li ul{
 +
        border-radius: 10px;
 +
        }
 +
     
 +
        #navdiv ul.drop-menu li {
 +
        display: none;
 +
        }
  
−
<div class="column half_size" >
+
        #navdiv li:hover > ul.drop-menu{
 +
        perspective: 1000px;
 +
        }
  
−
<h5>Inspiration</h5>
+
        #navdiv li:hover > ul.drop-menu li {
−
<p>See how other teams presented their results.</p>
+
margin-top: 5px;
−
<ul>
+
        display: block;
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results/Pathway">2014 TU Darmstadt </a></li>
+
        text-align: center;
−
<li><a href="https://2014.igem.org/Team:Imperial/Results">2014 Imperial </a></li>
+
        }
−
<li><a href="https://2014.igem.org/Team:Paris_Bettencourt/Results">2014 Paris Bettencourt </a></li>
+
−
</ul>
+
  
−
</div>
+
#title{
 +
margin-top:170px;
 +
}
  
 +
        #title img{
 +
display:inline-block;
 +
        margin-left:12%;
 +
margin-right:12%;
 +
margin-bottom:100px;
 +
        width:250px;
 +
        }
  
 +
#title span{
 +
position:absolute:
 +
margin-top:500px;
 +
display: inline-block;
 +
color:#28AAA1;
 +
font-size:50px;
 +
}
  
 +
        .droptext {
 +
box-shadow: 0px 0px 0px 5px #28AAA1;
 +
border-radius:10px;
 +
        margin: auto;
 +
        margin-bottom:200px;
 +
        margin-top:50px;
 +
        width: 1200px;
 +
opacity:0.85;
 +
 +
}
 +
.droptext input {
 +
display: none;
 +
}
 +
.hull {
 +
position: relative;
 +
height: 100px;
 +
background: transparent;
 +
    transition: all .25s ease-in-out;
 +
}
 +
.hull::before {
 +
    content: '';
 +
    position: absolute;
 +
    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: #28AAA1;
 +
background: #455057;
 +
z-index: 50;
 +
cursor: initial;
 +
 +
}
 +
header .hull-title {
 +
margin: 0;
 +
font-weight: normal;
 +
font-size: 25pt;
 +
color: #28AAA1;
 +
cursor: initial;
 +
 +
}
 +
.hull-title {
 +
color:#def7f5;
 +
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);
 +
padding: 30px 0 20px 20px;
 +
font-size: 11pt;
 +
color: #455057;
 +
display: none;
 +
}
 +
.hull-close {
 +
position: absolute;
 +
height: 64px;
 +
width: 100%;
 +
top: 0;
 +
left: 0;
 +
cursor: pointer;
 +
display: none;
 +
}
 +
input:checked + .hull {
 +
height: auto;
 +
color:#455057;
 +
background:#def7f5;
 +
border-top: 2.5px solid #28AAA1;
 +
 +
}
 +
input:checked + .hull .hull-title {
 +
color:#455057;
 +
}
 +
 +
input:checked + .hull .hull-content,
 +
input:checked + .hull .hull-close {
 +
display: inline-block;
 +
border-bottom: 2.5px solid #28AAA1;
 +
}
 +
 +
.arrows section .hull-title {
 +
padding-left: 44px;
 +
width: calc(100% - 80px);
 +
}
 +
input:checked + .arrows section .hull-title{
 +
color:#455057;
 +
}
 +
 +
.arrows section .hull-title:before {
 +
position: absolute;
 +
display: block;
 +
content: '\203a';
 +
font-size: 28pt;
 +
left: 20px;
 +
top: 17px;
 +
color: #28AAA1;
 +
transition: transform .5s ease-in-out;
 +
 +
}
 +
input:checked + section.hull .hull-title:before {
 +
transform: rotate(270deg);
 +
 +
}
 +
        #foot ul{
 +
        display: flex;
 +
        position: fixed;
 +
        top:92%;
 +
        left:50%;
 +
        transform: translate(-50%,-50%);
 +
        }
 +
        #foot ul li{
 +
        list-style: none;
 +
        }
 +
        #foot ul li span{
 +
        width:50px;
 +
        height:50px;
 +
        background: #455057;
 +
        text-align:center;
 +
        line-height:50px;
 +
        font-size: 25px;
 +
        margin: 0 15px;
 +
        display: block;
 +
        border-radius: 50%;
 +
        position: relative;
 +
        overflow:hidden;
 +
        border: 4px solid #455057;
 +
        z-index:50;
 +
        }
 +
        #foot ul li span .fa{
 +
        margin:25%;
 +
        position:relative;
 +
        color:white;
 +
        transition: 0.5s;
 +
}
 +
 +
        #foot ul li span:hover .fa
 +
        {
 +
        color:#25343D;
 +
        transform: rotateY(360deg);
 +
        }
 +
        #foot ul li span:before
 +
        {
 +
        content:'';
 +
        position: absolute;
 +
        top:100%;
 +
        left:0;
 +
        width:100%;
 +
        height:100%;
 +
        background: #1AE195;
 +
        transition: 0.5s;
 +
        }
 +
        #foot ul li span:hover:before{
 +
        top:0;
 +
        }
 +
        #foot ul li:nth-child(1) span:before{
 +
        background: #E10C2B;
 +
        }
 +
        #foot ul li:nth-child(2) span:before{
 +
        background: #AA5EE7;
 +
        }
 +
        #foot ul li:nth-child(3) span:before{
 +
        background: #09F99E;
 +
        }
 +
        #foot ul li:nth-child(4) span:before{
 +
        background: #0367A6;
 +
        }
 +
        #foot ul li:nth-child(5) span:before{
 +
        background: #299CE4;
 +
        }
 +
        #foot ul li:nth-child(6) span:before{
 +
        background: #5BBBF7;
 +
        }
 +
 +
#sponsors{
 +
margin-left:50px;
 +
}
 +
#sponsors img{
 +
width:150px;
 +
}
 +
 +
#sponsorsdown #snapg img{
 +
margin-left:750px;
 +
}
 +
 +
    </style>
 +
 +
 +
 +
    <body>
 +
        <nav id="navdiv">
 +
            <ul>
 +
                <li>
 +
                    <a href="#">Project</a>
 +
                    <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/Design"><li> Design </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>
 +
                <li>
 +
                    <a href="#">Parts</a>
 +
                    <ul class="drop-menu menu-2">
 +
<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/Composite_Part"><li>Composite Parts</li></a>
 +
<a href = "https://2017.igem.org/Team:Kent/Part_Collection"><li> Part Collection </li></a>
 +
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Notebook</a>
 +
                    <ul class="drop-menu menu-2">
 +
                        <a href="https://2017.igem.org/Team:Kent/Notebook"><li>Logbook</li></a>
 +
<a href="https://2017.igem.org/Team:Kent/Experiments"><li>Experiments</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/Improve"><li>Future Ideas</li></a>
 +
                       
 +
                    </ul>
 +
                </li>
 +
                <li id="teamLogo">
 +
                    <a href="https://2017.igem.org/Team:Kent">
 +
                        <h1><img src="https://static.igem.org/mediawiki/2017/thumb/4/4f/T--Kent--Kenttemplogo.png/667px-T--Kent--Kenttemplogo.png"></h1>
 +
                    </a>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Safety</a>
 +
                    <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/Signs"><li>Hazard Signs</li></a>
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Team</a>
 +
                    <ul class="drop-menu menu-2">
 +
                        <a href="https://2017.igem.org/Team:Kent/Team"><li>Meet the Team</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/Contribution"><li>Contribution</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/Attributions"><li>Attribution</li></a>
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="#">Human Practices</a>
 +
                    <ul class="drop-menu menu-2">
 +
                        <a href="https://2017.igem.org/Team:Kent/HP/Silver"><li>Silver</li></a>
 +
<a href="https://2017.igem.org/Team:Kent/HP/Gold_Integrated"><li>Gold</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/Engagement"><li>Public Engagement</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/InterLab"><li>Interlab</li></a>
 +
                        <a href="https://2017.igem.org/Team:Kent/Collaborations"><li>Collaboration</li></a>
 +
                    </ul>
 +
                </li>
 +
            </ul>
 +
        </nav>
 +
        <div id ="title">
 +
                <img src = "https://static.igem.org/mediawiki/2017/thumb/0/03/T--Kent--ResultsHeader.png/599px-T--Kent--ResultsHeader.png">
 +
<span>Design </span>
 +
<img src = "https://static.igem.org/mediawiki/2017/thumb/2/2f/T--Kent--ResultsHeader2.png/800px-T--Kent--ResultsHeader2.png">
 +
        </div>
 +
        <nav class="droptext arrows">
 +
<header class="hull">
 +
<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>
 +
When making the LB we also made another litre batch and added 15g of agar extract to be able to
 +
grow bacteria on plates.</div>
 +
</section>
 +
<input type="radio" name="droptext" id="cb2" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb2">Production of SOB medium and magnesium stock</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<div class="hull-content">Bringing together 20g of tryptone, 5g of yeast extract, 0.584g of NaCl, 0.186g of KCl and mixing it
 +
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>
 +
10ml of 2M Mg 2+ stock was then added and then brought to 100ml with millipure water, 0.2mm
 +
filter sterilize was then used</div>
 +
</section>
 +
<input type="radio" name="droptext" id="cb3" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb3">Production of SOC medium and glucose stock</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<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
 +
bring 970 ml with millipure water and use the magnetic mixer once again, this was also then put in
 +
to autoclave.
 +
<br>
 +
10ml of 2M Mg 2+ stock and then bring it to 100ml with milllipure water, filter sterilize it with 0.2m
 +
and then final add 20ml of 1M glucose stock.</div>
 +
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 +
<input type="radio" name="droptext" id="cb4" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb4">Production of Glycerol stock</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<div class="hull-content">If you wish to store bacteria long term, you will need to create a Glycerol Stock after
 +
inoculating an overnight liquid culture
 +
<br>
 +
<ul><li>Once bacterial growth has been achieved, 500μL of the overnight liquid
 +
culture needs to be added to 500μL of 50% glycerol in a 2mL tube where it
 +
should be gently mixed</li>
 +
<li>The glycerol stock should then be frozen at -80 o C<ul>
 +
<li> Successive freeze and thaw cycles will reduce the stocks shelf life</li></ul>
 +
</li></ul></div>
 +
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 +
<input type="radio" name="droptext" id="cb5" />
 +
<section class="hull">
 +
<label class="hull-title" for="cb5">Running Agarose Gel</label>
 +
<label class="hull-close" for="acc-close"></label>
 +
<div class="hull-content">After the cells have been miniprepped and the plasmid put through a restriction digest, the agarose gel can be run.
 +
<br>
 +
<ul><li>Make up some agarose. This is done by taking 0.5g of agarose powder and putting it in a
 +
250ml sterile conical flask, with 50ml of TAE buffer, then microwaving it in small pulses (20
 +
seconds then swirling it around) until it is dissolved. Don’t overheat it or it will evaporate too
 +
much. Make up the evaporated volume to 50ml with distilled water.</li>
 +
<li>Add 1 vial of cybersafe (ask technical services for a tube of it and add all of it)</li>
 +
<li>Line the white sides of the tank with the agarose solution, to seal it and prevent leakage. Use
 +
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
 +
solidify (maximum 30 mins)</li>
 +
<li>When the gel has set, remove the comb from the tank (gently!) and then cover the whole
 +
tank with TAE buffer, so there’s at least half a centimetre of TAE covering the gel.</li>
 +
<li>Now, the samples need to be loaded. Load some DNA markers (ask technical services for a
 +
tube of this and load the whole tube) into well 1( left hand side) and then choose what you
 +
load into wells 2, 3, and 4 etc. (make sure you note what’s in each lane!)</li>
 +
<li>Load all of your digests into the wells 2,3, and 4.</li>
 +
<li>Plug into a power supply and put the cover on. Run for 40 mins to an hour at 80v. The amps
 +
don’t matter.</li>
 +
<li>Once the visible markers have reached the half way point of the tank, turn off the power
 +
supply and drain the TAE buffer form the tank. Remove the gel with a spatula and place in a
 +
UV imaging box. Take an image of the gel under UV light, save it onto a USB stick.</li></ul></div>
 +
</section>
 +
<input type="radio" name="droptext" id="acc-close" />
 +
</nav>
 +
 +
        <div id="foot">
 +
            <ul>
 +
                <li><span><a href="https://www.youtube.com/channel/UCV4kIcIodwiGjgEX_Rad1Ig"><i class="fa fa-youtube" aria-hidden="true"></i></a></span></li>
 +
                <li><span><a href="https://www.instagram.com/igem_kent2017/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a></span></li>
 +
                <li><span><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></span></li>
 +
                <li><span><a href="https://www.facebook.com/iGEMkent2017"><i class="fa fa-facebook-square" aria-hidden="true"></i></a></span></li>
 +
                <li><span><a href="https://www.linkedin.com/company/18159542/"><i class="fa fa-linkedin" aria-hidden="true"></i></a></span></li>
 +
                <li><span><a href="https://twitter.com/Kent_iGEM"><i class="fa fa-twitter" aria-hidden="true"></i></a></span></li>
 +
            </ul>
 +
        </div>
 +
<div id="sponsors">
 +
<div id="sponsorstop">
 +
<a href="https://www.kent.ac.uk/" id="ukc">
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/a/a3/T--Kent--UKCwhite.png/800px-T--Kent--UKCwhite.png">
 +
</a>
 +
<a href="http://avokiddo.com/" id="avo">
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/a/a7/T--Kent--avokiddo.png/800px-T--Kent--avokiddo.png">
 +
</a>
 +
</div>
 +
 +
<div id ="sponsorsdown">
 +
<a href="http://www.clicktravel.com" id="clickt">
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/1/1e/T--Kent--clicktravel.png/799px-T--Kent--clicktravel.png">
 +
</a>
 +
<a href="http://www.bbsrc.ac.uk/" id="bbsrc">
 +
<img src="https://static.igem.org/mediawiki/2017/thumb/4/4e/T--Kent--bbsrc.png/800px-T--Kent--bbsrc.png">
 +
</a>
 +
<a href="http://www.snapgene.com/" id="snapg">
 +
<img src="https://static.igem.org/mediawiki/2017/3/36/T--Kent--snapgene.png">
 +
</a>
 +
</div>
 +
</div>
 +
    </body>
 
</html>
 
</html>

Revision as of 21:53, 5 October 2017


Design