Difference between revisions of "Team:KCL UK"

(Fixed all width issues)
 
(52 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
 
+
{{:Team:KCL_UK/Templates/Header}}
 
<html>
 
<html>
 
     <head>
 
     <head>
−
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+
 
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width= device-width, initial-scale=1">
 
     <meta name="viewport" content="width= device-width, initial-scale=1">
Line 8: Line 8:
  
  
−
     <style>
+
     <style>  
 +
    @import url('https://fonts.googleapis.com/css?family=Raleway');
  
 +
    #top_title {display:none;}
 +
   
  
−
        * {
+
 
 +
  #HQ_page p {
 +
font-family: 'Raleway', sans-serif;
 +
font-size: 1em;
 +
text-align: center;
 +
 
 +
}
 +
   
 +
    #HQ_page h1,h2,h3 {
 +
font-family: 'Raleway', sans-serif;
 +
font-weight: 300;
 +
}
 +
 
 +
      #content, #HQ_page {
 +
            animation : none;
 +
    animation-delay : 0;
 +
    animation-direction : normal;
 +
    animation-duration : 0;
 +
    animation-fill-mode : none;
 +
    animation-iteration-count : 1;
 +
    animation-name : none;
 +
    animation-play-state : running;
 +
    animation-timing-function : ease;
 +
    backface-visibility : visible;
 +
    background : 0;
 +
    background-attachment : scroll;
 +
    background-clip : border-box;
 +
    background-color : transparent;
 +
    background-image : none;
 +
    background-origin : padding-box;
 +
    background-position : 0 0;
 +
    background-position-x : 0;
 +
    background-position-y : 0;
 +
    background-repeat : repeat;
 +
    background-size : auto auto;
 +
    border : 0;
 +
    border-style : none;
 +
    border-width : medium;
 +
    border-color : inherit;
 +
    border-bottom : 0;
 +
    border-bottom-color : inherit;
 +
    border-bottom-left-radius : 0;
 +
    border-bottom-right-radius : 0;
 +
    border-bottom-style : none;
 +
    border-bottom-width : medium;
 +
    border-collapse : separate;
 +
    border-image : none;
 +
    border-left : 0;
 +
    border-left-color : inherit;
 +
    border-left-style : none;
 +
    border-left-width : medium;
 +
    border-radius : 0;
 +
    border-right : 0;
 +
    border-right-color : inherit;
 +
    border-right-style : none;
 +
    border-right-width : medium;
 +
    border-spacing : 0;
 +
    border-top : 0;
 +
    border-top-color : inherit;
 +
    border-top-left-radius : 0;
 +
    border-top-right-radius : 0;
 +
    border-top-style : none;
 +
    border-top-width : medium;
 +
    bottom : auto;
 +
    box-shadow : none;
 +
    box-sizing : content-box;
 +
    caption-side : top;
 +
    clear : none;
 +
    clip : auto;
 +
    color : inherit;
 +
    columns : auto;
 +
    column-count : auto;
 +
    column-fill : balance;
 +
    column-gap : normal;
 +
    column-rule : medium none currentColor;
 +
    column-rule-color : currentColor;
 +
    column-rule-style : none;
 +
    column-rule-width : none;
 +
    column-span : 1;
 +
    column-width : auto;
 +
    content : normal;
 +
    counter-increment : none;
 +
    counter-reset : none;
 +
    cursor : auto;
 +
    direction : ltr;
 +
    display : inline;
 +
    empty-cells : show;
 +
    float : none;
 +
    font : normal;
 +
    font-family: 'Raleway', sans-serif;
 +
    font-size : medium;
 +
    font-style : normal;
 +
    font-variant : normal;
 +
    font-weight : normal;
 +
    height : auto;
 +
    hyphens : none;
 +
    left : auto;
 +
    letter-spacing : normal;
 +
    line-height : normal;
 +
    list-style : none;
 +
    list-style-image : none;
 +
    list-style-position : outside;
 +
    list-style-type : disc;
 +
    margin : 0;
 +
    margin-bottom : 0;
 +
    margin-left : 0;
 +
    margin-right : 0;
 +
    margin-top : 0;
 +
    max-height : none;
 +
    max-width : none;
 +
    min-height : 0;
 +
    min-width : 0;
 +
    opacity : 1;
 +
    orphans : 0;
 +
    outline : 0;
 +
    outline-color : invert;
 +
    outline-style : none;
 +
    outline-width : medium;
 +
    overflow : visible;
 +
    overflow-x : visible;
 +
    overflow-y : visible;
 +
    padding : 0;
 +
    padding-bottom : 0;
 +
    padding-left : 0;
 +
    padding-right : 0;
 +
    padding-top : 0;
 +
    page-break-after : auto;
 +
    page-break-before : auto;
 +
    page-break-inside : auto;
 +
    perspective : none;
 +
    perspective-origin : 50% 50%;
 +
    position : static;
 +
    /* May need to alter quotes for different locales (e.g fr) */
 +
    quotes : '\201C' '\201D' '\2018' '\2019';
 +
    right : auto;
 +
    tab-size : 8;
 +
    table-layout : auto;
 +
    text-align : inherit;
 +
    text-align-last : auto;
 +
    text-decoration : none;
 +
    text-decoration-color : inherit;
 +
    text-decoration-line : none;
 +
    text-decoration-style : solid;
 +
    text-indent : 0;
 +
    text-shadow : none;
 +
    text-transform : none;
 +
    top : auto;
 +
    transform : none;
 +
    transform-style : flat;
 +
    transition : none;
 +
    transition-delay : 0s;
 +
    transition-duration : 0s;
 +
    transition-property : none;
 +
    transition-timing-function : ease;
 +
    unicode-bidi : normal;
 +
    vertical-align : baseline;
 +
    visibility : visible;
 +
    white-space : normal;
 +
    widows : 0;
 +
    width : auto;
 +
    word-spacing : normal;
 +
    z-index : auto;
 +
      }
 +
 
 +
h1 {
 +
display: block;
 +
font-size: 2em;
 +
margin-bottom: 0.67em;
 +
margin-left: 0;
 +
margin-right: 0;
 +
  }
 +
 
 +
  a:hover {text-decoration:none;}
 +
a:visited {
 +
  color:red;
 +
  text-decoration:none;
 +
}
 +
 
 +
  .dropdown-nav-buttonmasks:visited {
 +
    color:white;
 +
      text-decoration: none;
 +
    }
 +
.standalonenav:visited {
 +
  color:white;
 +
  text-decoration: none;
 +
}
 +
 
 +
 
 +
 
 +
        * {
 
             box-sizing: border-box;
 
             box-sizing: border-box;
 
             font-family: 'Raleway', sans-serif;
 
             font-family: 'Raleway', sans-serif;
 
         }
 
         }
 +
  
 
         body{
 
         body{
 
         margin: 0;
 
         margin: 0;
 +
    padding: 0;
 
         font-family: 'Raleway', sans-serif;
 
         font-family: 'Raleway', sans-serif;
 
         text-align: center;
 
         text-align: center;
Line 28: Line 222:
  
 
         .container {
 
         .container {
−
             width: 100%;
+
             width: 95%;
 
             margin: 0 auto;
 
             margin: 0 auto;
 +
        }
 +
        .fixcontainer {
 +
          width:100%;
 +
          margin: 0 auto;
 
         }
 
         }
  
Line 36: Line 234:
 
             font-weight: 900;
 
             font-weight: 900;
 
             font-weight: bold;
 
             font-weight: bold;
−
             font-size: 2.5rem;
+
             font-size: 3.2rem;
 
             margin-bottom: 1em;
 
             margin-bottom: 1em;
 
             padding-bottom: 2em;
 
             padding-bottom: 2em;
 
             text-emphasis: bold;
 
             text-emphasis: bold;
 +
        }
 +
        .smallertitle {
 +
          font-weight: 900;
 +
          font-weight: bold;
 +
          font-size: 1.4rem;
 +
          margin-bottom: 1em;
 +
          padding-top: 3.1em;
 +
          padding-bottom: 0em;
 +
          text-emphasis: bold;
  
 
         }
 
         }
Line 46: Line 253:
 
             font-size: 2.5em;
 
             font-size: 2.5em;
 
             text-transform: capitalize;
 
             text-transform: capitalize;
−
            margin-top: 1em;
+
          }
−
        }
+
 
         .title span {
 
         .title span {
 
             margin-top: 1em;
 
             margin-top: 1em;
Line 56: Line 262:
  
  
−
         /*Buttons -------------------------------*/
+
         /*buttonmasks -------------------------------*/
−
         #HQ_page .button {
+
         .buttonmask {
 
             display: inline-block;
 
             display: inline-block;
 
             font-size: 1.25rem;
 
             font-size: 1.25rem;
Line 64: Line 270:
 
             border-width: 2px;
 
             border-width: 2px;
 
             border-style: solid;
 
             border-style: solid;
−
             padding: 1em 1.75em;
+
             padding: .5em 1.75em;
−
            color: #00ff6c;
+
 
−
            border-color: #00ff6c;
+
−
            background-color: Transparent;
+
−
            line-height: .1em;
+
−
            border-radius: 0px;
+
 
         }
 
         }
 +
  .buttonmask}
  
−
         .button-small {
+
         .buttonmask-small {
 
             font-size: .9rem;
 
             font-size: .9rem;
 
             font-weight: 700;
 
             font-weight: 700;
 
         }
 
         }
  
−
         .button-accent {
+
         .buttonmask-accent {
−
             color: #00ff6c;
+
             color: #FF0000;
−
             border-color: #00ff6c;
+
             border-color: #FF0000;
 
         }
 
         }
  
−
         #HQ_page .button:hover {
+
         .buttonmask-accent:hover {
−
         background: #00ff6c;
+
         background: #FF0000;
−
         color: #232323;
+
         color: black;
 
         }
 
         }
  
Line 93: Line 296:
 
             background-color: rgba(0,0,0,.75);
 
             background-color: rgba(0,0,0,.75);
 
             position: absolute;
 
             position: absolute;
−
            width: 100vw;
 
−
          max-width: 100%;
 
 
             left: 0;
 
             left: 0;
 
             right: 0;
 
             right: 0;
 
             max-height: 7em;
 
             max-height: 7em;
−
overflow:hidden;
 
 
         }
 
         }
  
Line 106: Line 306:
 
             list-style: none;
 
             list-style: none;
 
             float: right;
 
             float: right;
−
             margin-right: 5em;
+
             margin-right: 5em!important;
 
             margin-top: 2em;
 
             margin-top: 2em;
 
             position: relative;
 
             position: relative;
Line 117: Line 317:
 
         }
 
         }
  
−
         .nav-buttons {
+
         .nav-buttonmasks {
 
             font-weight: 900;
 
             font-weight: 900;
 
             text-decoration: none;
 
             text-decoration: none;
Line 128: Line 328:
 
         }
 
         }
  
−
         .nav-buttons:hover {color: #00ff6c;}
+
         .nav-buttonmasks:hover {color: #FF0000;}
−
         .dropdown-nav-buttons:hover {color: #00ff6c;}
+
         .dropdown-nav-buttonmasks:hover {color: #FF0000;}
  
−
         .dropdown-nav-buttons {
+
         .dropdown-nav-buttonmasks {
 
             font-weight: 900;
 
             font-weight: 900;
 
             text-decoration: none;
 
             text-decoration: none;
Line 145: Line 345:
 
         }
 
         }
 
         #navadjust {
 
         #navadjust {
−
           margin-left:-0.3em;;
+
           margin-left:-0.3em;
−
        }
+
−
        .dropdownone {
+
−
          margin-top: 2.58em;
+
−
        }
+
−
        .dropdowntwo {
+
−
            margin-top: 4.75em;
+
−
        }
+
−
        .dropdownthree {
+
−
          margin-top: 6.93em;
+
 
         }
 
         }
  
−
         .nav-buttons:hover .dropdown-nav-buttons{
+
     
 +
 
 +
         .nav-buttonmasks:hover .dropdown-nav-buttonmasks{
 
             display: block;
 
             display: block;
 
             position: absolute;
 
             position: absolute;
Line 172: Line 365:
  
 
         .home-hero {
 
         .home-hero {
−
             background-image: url(https://static.igem.org/mediawiki/2018/5/50/T--KCL_UK--teampic.png);
+
             background-image: url(https://static.igem.org/mediawiki/2018/e/ed/T--KCL_UK--homehero.png);
 
             background-repeat: no-repeat;
 
             background-repeat: no-repeat;
 
             background-size: cover;
 
             background-size: cover;
Line 178: Line 371:
 
             color: #FFF;
 
             color: #FFF;
 
             height: 100vh;
 
             height: 100vh;
−
            width: 100vw;
 
−
max-width: 100%;
 
 
             background-attachment: fixed;
 
             background-attachment: fixed;
 
             background-position: center;
 
             background-position: center;
 +
        }
 +
 +
        #seeourwork {
 +
          margin-top: 0em;
 +
          margin-bottom: 2em;
 
         }
 
         }
  
 
   /*home-about------------------------------*/
 
   /*home-about------------------------------*/
 
         .home-about-textbox {
 
         .home-about-textbox {
−
             background-color: #232323;
+
             background-color: black;
 
             padding: 15em;
 
             padding: 15em;
−
             width: 100vw;
+
 
−
max-width: 100%;
+
             margin-left: -2.5vw;
−
       
+
             outline: 2px solid #FF0000;
−
             outline: 2px solid #00ff6c;
+
 
             outline-offset: -5em;
 
             outline-offset: -5em;
 
             color: #FFF;
 
             color: #FFF;
Line 197: Line 392:
  
 
         .home-about-textbox h1 {
 
         .home-about-textbox h1 {
−
             color: #00ff6c;
+
             color: #FF0000;
 
             position: relative;
 
             position: relative;
−
             margin-top: -4.5em;
+
             margin-top: -5em;
 
             margin-bottom: 3em;
 
             margin-bottom: 3em;
−
             background: #232323;
+
             background: black;
 
             margin-left: auto;
 
             margin-left: auto;
 
             margin-right: auto;
 
             margin-right: auto;
−
width:100%
+
            width: 35vw;
 
             text-align: center;
 
             text-align: center;
 +
       
 
         }
 
         }
 
         .home-about-textbox a {
 
         .home-about-textbox a {
Line 211: Line 407:
 
             margin-bottom: 0;
 
             margin-bottom: 0;
 
             width: 60%;
 
             width: 60%;
 +
        }
 +
 +
        #projectdescshort {
 +
          color: white;
 +
font-size: 1.4em!important;
 +
margin-top: 2em!important;
 +
padding-top:2em!important;
 +
         
 +
     
 
         }
 
         }
  
Line 223: Line 428:
 
             padding-bottom: .7em;
 
             padding-bottom: .7em;
 
             padding-top: 1em;
 
             padding-top: 1em;
−
             color: #00ff6c;
+
             color: #FF0000;
 
         }
 
         }
 
         .line {
 
         .line {
Line 229: Line 434:
 
                 height: 1px;
 
                 height: 1px;
 
                 margin: auto;
 
                 margin: auto;
−
             background: #00ff6c;
+
             background: #FF0000;
 
         }
 
         }
 
         .spacer {
 
         .spacer {
Line 235: Line 440:
 
             height: 2em;
 
             height: 2em;
 
         }
 
         }
−
         .portfolio {https://static.igem.org/mediawiki/2018/f/fe/T--KCL_UK--symposium.png
+
         .portfolio {
−
             margin: 0;
+
             margin: 3em 0;
−
             background-color: #232323;
+
             background-color: black;
−
            min-width: 100%;
+
 
−
max-width: 100%;
+
 
         }
 
         }
  
Line 251: Line 455:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             height: 35vw;
+
             height: 15em;
 
             object-fit: cover;
 
             object-fit: cover;
  
Line 264: Line 468:
 
             background: rgba(0,0,0,.75);
 
             background: rgba(0,0,0,.75);
 
             padding-bottom: 1em;        }
 
             padding-bottom: 1em;        }
−
        .port-desc p {
+
          .port-desc p {
 
             margin: 1em;
 
             margin: 1em;
 
             font-size: 1.2em;
 
             font-size: 1.2em;
Line 270: Line 474:
 
         }
 
         }
 
         #projectdescshort {
 
         #projectdescshort {
−
           font-size: 1.5em;
+
           font-size: 1.5em!imporant;
 
         }
 
         }
  
  
−
    #content {
+
 
−
      width: 99vw;
+
 
−
      padding: 0;
+
−
      margin: 0;
+
−
margin-right: 0;
+
−
 
+
−
      }
+
−
#top_title {
+
−
height: 0;
+
−
display: none;
+
−
}
+
 
     </style>
 
     </style>
  
Line 291: Line 486:
  
  
 +
    <body>
  
−
     <header>
+
      
−
        <img src="https://static.igem.org/mediawiki/2018/4/46/T--KCL_UK--Logo.png" alt="logo" class="logo">
+
 
 +
  <div class="loading">
 +
  <div>
  
−
        <nav>
 
−
            <ul>
 
−
                <li><a href="index.html" class="nav-buttons">Home</a></li>
 
−
                <li class="nav-buttons">Team
 
−
                  <a href="teammembers.html" class="dropdown-nav-buttons dropdownone">Team Members</a>
 
−
                    <a href="#" class="dropdown-nav-buttons dropdowntwo">Collaborations</a>
 
−
                </li>
 
−
                <li class="nav-buttons">Project
 
−
                  <a href="#" class="dropdown-nav-buttons dropdownone">Description</a>
 
−
                  <a href="#" class="dropdown-nav-buttons dropdowntwo">Design</a>
 
−
                  <a href="#" class="dropdown-nav-buttons dropdownthree">Results</a>
 
−
                </li>
 
−
                <li class="nav-buttons">Parts
 
−
                  <a href="#" class="dropdown-nav-buttons dropdownone">Parts Overview</a>
 
−
                  <a href="#" class="dropdown-nav-buttons dropdowntwo">Basic Parts</a>
 
−
                  <a href="#" class="dropdown-nav-buttons dropdownthree">Composite Parts</a>
 
−
                </li>
 
−
                <a href="#" class="nav-buttons">Safety</a>
 
−
                <li class="nav-buttons">Human Practices
 
−
                  <a href="#" class="dropdown-nav-buttons dropdownone" id="navadjust">Overview</a>
 
−
                  <a href="#" class="dropdown-nav-buttons dropdowntwo" id="navadjust">Education and Engagement</a>
 
−
                </li>
 
−
            </ul>
 
−
        </nav>
 
−
    </header>
 
  
−
    <body>
 
  
 
     <section class="home-hero">
 
     <section class="home-hero">
 
         <div class="container">
 
         <div class="container">
−
         <h1 class="title">3' Suspects
+
          <!--
−
             <span>Investigating Untranslated regions on 3' end</span>
+
         <h1 class="title titleadjust">3' Suspects
 +
             <span><h1 class="smallertitle">Investigating Untranslated regions on 3' end</h1></span>
 
         </h1>
 
         </h1>
−
         <a href="#" class="button button-accent">See Our Work</a>
+
         <a href="#" class="buttonmask buttonmask-accent" id="seeourwork">See Our Work</a>
 
         </div>
 
         </div>
 +
        --->
 
     </section>
 
     </section>
  
−
     <div class="container" id ="home-about-container">
+
     <div class="fullcontainer" id="fix">
 
     <section class="home-about">
 
     <section class="home-about">
 
         <div class="home-about-textbox">
 
         <div class="home-about-textbox">
−
             <h1>what are we doing?</h1>
+
             <h1>What Have We Done?</h1>
−
             <p id="projectdescshort">We are developing a new technology platform based on 3'UTR sequence characterisation to control soluble protein expression in E.coli. <br> <br>We will use E.coli K12 to test our "Proof of Concept" Principle by engineering 3'UTR sequences (Sharma et al, 2011) to interact with either cytosolic proteins or 5'UTR sequences of our gene of interest: trxA and gor. Down regulation of these genes will be quantified by assessing quantitatively GFP signal. Efficiency of down regulation of genes will be quantified by assessing reaction kinetics of Alkaline Phosphatase (AP).</p>
+
             <p id="projectdescshort">Our team have engineered a library of sRNA scaffolds that have the potential to be used as a tool in the understanding of sRNA functions such as regulation of protein expression. </br></br>
−
             <a href="#" class= "button button-accent">Full Project Description</a>
+
 
 +
Our project is based on a “Proof of Concept” principle and we have used E.coli K12 to test this. Regulation of gene expression has been quantitively assessed through GFP signalling. We have chosen to focus on sRNAs that target the 3’ UTR of mRNA.</br></br>
 +
 
 +
We hope that future scientists will be able to use our novel tool as a way to use sRNAs to tackle issues involving sRNA interactions such as antibiotic resistance.
 +
 
 +
 
 +
 
 +
    </p>
 +
             <a href="https://2018.igem.org/Team:KCL_UK/Description" class= "buttonmask buttonmask-accent">Full Project Description</a>
 
         </div>
 
         </div>
 
     </section>
 
     </section>
Line 350: Line 532:
 
             <img src="https://static.igem.org/mediawiki/2018/f/fe/T--KCL_UK--symposium.png" alt="portfolio item">
 
             <img src="https://static.igem.org/mediawiki/2018/f/fe/T--KCL_UK--symposium.png" alt="portfolio item">
 
             <figcaption class="port-desc">
 
             <figcaption class="port-desc">
−
                 <p>iGEM Symposium</p>
+
                 <p>Integrated Human Practices</p>
−
                 <a href="" class="button button-accent button-small">See More</a>
+
                 <a href="https://2018.igem.org/Team:KCL_UK/Human_Practices" class="buttonmask buttonmask-accent buttonmask-small">See More</a>
 
             </figcaption>
 
             </figcaption>
 
         </figure>
 
         </figure>
Line 360: Line 542:
 
             <figcaption class="port-desc">
 
             <figcaption class="port-desc">
 
                 <p>Bexley School Visit</p>
 
                 <p>Bexley School Visit</p>
−
                 <a href="" class="button button-accent button-small">See More</a>
+
                 <a href="https://2018.igem.org/Team:KCL_UK/Public_Engagement" class="buttonmask buttonmask-accent buttonmask-small">See More</a>
 
             </figcaption>
 
             </figcaption>
 
         </figure>
 
         </figure>
Line 369: Line 551:
 
             <figcaption class="port-desc">
 
             <figcaption class="port-desc">
 
                 <p>Social Media</p>
 
                 <p>Social Media</p>
−
                 <a href="" class="button button-accent button-small">See More</a>
+
                 <a href="https://www.instagram.com/igem_kcl/" class="buttonmask buttonmask-accent buttonmask-small">See More</a>
 
             </figcaption>
 
             </figcaption>
 
         </figure>
 
         </figure>
Line 378: Line 560:
 
             <figcaption class="port-desc">
 
             <figcaption class="port-desc">
 
                 <p>Lab Work</p>
 
                 <p>Lab Work</p>
−
                 <a href="" class="button button-accent button-small">See More</a>
+
                 <a href="https://2018.igem.org/Team:KCL_UK/Design" class="buttonmask buttonmask-accent buttonmask-small">See More</a>
 
             </figcaption>
 
             </figcaption>
 
         </figure>
 
         </figure>

Latest revision as of 11:12, 17 October 2018

KCL iGEM

KCL iGEM

What Have We Done?

Our team have engineered a library of sRNA scaffolds that have the potential to be used as a tool in the understanding of sRNA functions such as regulation of protein expression.

Our project is based on a “Proof of Concept” principle and we have used E.coli K12 to test this. Regulation of gene expression has been quantitively assessed through GFP signalling. We have chosen to focus on sRNAs that target the 3’ UTR of mRNA.

We hope that future scientists will be able to use our novel tool as a way to use sRNAs to tackle issues involving sRNA interactions such as antibiotic resistance.

Full Project Description

Some of Our Work

portfolio item

Integrated Human Practices

See More
portfolio item

Bexley School Visit

See More
portfolio item

Social Media

See More
portfolio item

Lab Work

See More