Difference between revisions of "Team:KCL UK"

(Added heights and widths to elements (98vw seems to be the appropriate page-spanning width))
 
(57 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 30: Line 224:
 
             width: 95%;
 
             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 -------------------------------*/
−
         .button {
+
         .buttonmask {
 
             display: inline-block;
 
             display: inline-block;
 
             font-size: 1.25rem;
 
             font-size: 1.25rem;
Line 65: Line 271:
 
             border-style: solid;
 
             border-style: solid;
 
             padding: .5em 1.75em;
 
             padding: .5em 1.75em;
 +
 
         }
 
         }
 +
  .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;
 
         }
 
         }
  
−
         .button-accent:hover {
+
         .buttonmask-accent:hover {
−
         background: #00ff6c;
+
         background: #FF0000;
−
         color: #232323;
+
         color: black;
 
         }
 
         }
  
Line 88: Line 296:
 
             background-color: rgba(0,0,0,.75);
 
             background-color: rgba(0,0,0,.75);
 
             position: absolute;
 
             position: absolute;
−
            width: 98vw;
 
 
             left: 0;
 
             left: 0;
 
             right: 0;
 
             right: 0;
Line 99: 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 110: Line 317:
 
         }
 
         }
  
−
         .nav-buttons {
+
         .nav-buttonmasks {
 
             font-weight: 900;
 
             font-weight: 900;
 
             text-decoration: none;
 
             text-decoration: none;
Line 121: 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 138: 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 165: 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 171: Line 371:
 
             color: #FFF;
 
             color: #FFF;
 
             height: 100vh;
 
             height: 100vh;
−
            width: 98vw;
 
 
             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: 98vw;
+
 
 
             margin-left: -2.5vw;
 
             margin-left: -2.5vw;
−
             outline: 2px solid #00ff6c;
+
             outline: 2px solid #FF0000;
 
             outline-offset: -5em;
 
             outline-offset: -5em;
 
             color: #FFF;
 
             color: #FFF;
Line 188: 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: 35vw;
 
             width: 35vw;
 
             text-align: center;
 
             text-align: center;
 +
       
 
         }
 
         }
 
         .home-about-textbox a {
 
         .home-about-textbox a {
Line 202: 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 214: Line 428:
 
             padding-bottom: .7em;
 
             padding-bottom: .7em;
 
             padding-top: 1em;
 
             padding-top: 1em;
−
             color: #00ff6c;
+
             color: #FF0000;
 
         }
 
         }
 
         .line {
 
         .line {
Line 220: Line 434:
 
                 height: 1px;
 
                 height: 1px;
 
                 margin: auto;
 
                 margin: auto;
−
             background: #00ff6c;
+
             background: #FF0000;
 
         }
 
         }
 
         .spacer {
 
         .spacer {
Line 228: Line 442:
 
         .portfolio {
 
         .portfolio {
 
             margin: 3em 0;
 
             margin: 3em 0;
−
             background-color: #232323;
+
             background-color: black;
−
            width: 98vw;
+
  
 
         }
 
         }
Line 242: Line 455:
 
             display: block;
 
             display: block;
 
             width: 100%;
 
             width: 100%;
−
             height: 35vw;
+
             height: 15em;
 
             object-fit: cover;
 
             object-fit: cover;
  
Line 255: 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 261: Line 474:
 
         }
 
         }
 
         #projectdescshort {
 
         #projectdescshort {
−
           font-size: 1.5em;
+
           font-size: 1.5em!imporant;
 
         }
 
         }
 +
  
  
Line 272: 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">
+
     <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 331: 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 341: 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 350: 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 359: 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