Difference between revisions of "Team:KCL UK"

m (changed container to 100% width in css)
 
(53 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;
Line 105: 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 116: Line 317:
 
         }
 
         }
  
−
         .nav-buttons {
+
         .nav-buttonmasks {
 
             font-weight: 900;
 
             font-weight: 900;
 
             text-decoration: none;
 
             text-decoration: none;
Line 127: 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 144: 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 171: 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 177: 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 196: 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 210: 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 222: Line 428:
 
             padding-bottom: .7em;
 
             padding-bottom: .7em;
 
             padding-top: 1em;
 
             padding-top: 1em;
−
             color: #00ff6c;
+
             color: #FF0000;
 
         }
 
         }
 
         .line {
 
         .line {
Line 228: Line 434:
 
                 height: 1px;
 
                 height: 1px;
 
                 margin: auto;
 
                 margin: auto;
−
             background: #00ff6c;
+
             background: #FF0000;
 
         }
 
         }
 
         .spacer {
 
         .spacer {
Line 234: Line 440:
 
             height: 2em;
 
             height: 2em;
 
         }
 
         }
−
         .portfolio {https://static.igem.org/mediawiki/2018/f/fe/T--KCL_UK--symposium.png
+
         .portfolio {
 
             margin: 3em 0;
 
             margin: 3em 0;
−
             background-color: #232323;
+
             background-color: black;
−
            min-width: 100vw;
+
 
−
max-width: 100%;
+
 
         }
 
         }
  
Line 250: Line 455:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             height: 35vw;
+
             height: 15em;
 
             object-fit: cover;
 
             object-fit: cover;
  
Line 263: 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 269: 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 290: 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 349: 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 359: 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 368: 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 377: 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