Difference between revisions of "Team:KCL UK/Public Engagement"

(Prototype team page)
 
 
(92 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{KCL_UK}}
+
{{:Team:KCL_UK/Templates/Header}}
 +
 
 
<html>
 
<html>
  
−
<div class="column full_size judges-will-not-evaluate">
+
    <head>
−
<h3>★  ALERT! </h3>
+
 
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
 
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    <meta charset="UTF-8">
−
</div>
+
    <meta name="viewport" content="width= device-width, initial-scale=1">
 +
    <title>KCL iGEM</title>
 +
 
 +
 
 +
    <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: left;
 +
 
 +
}
 +
#globalWrapper {
 +
  padding-bottom:0;
 +
}
 +
   
 +
    #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;
 +
            font-family: 'Raleway', sans-serif;
 +
        }
 +
 
 +
 
 +
        body{
 +
        margin: 0;
 +
    padding: 0;
 +
        font-family: 'Raleway', sans-serif;
 +
        text-align: center;
 +
        }
 +
 
 +
        img {
 +
            max-width: 100%;
 +
            height: auto;
 +
        }
 +
 
 +
        .container {
 +
            width: 95%;
 +
            margin: 0 auto;
 +
        }
 +
        .fixcontainer {
 +
          width:100%;
 +
          margin: 0 auto;
 +
        }
 +
 
 +
        /*typography------------------------------*/
 +
        .title {
 +
            font-weight: 900;
 +
            font-weight: bold;
 +
            font-size: 3.2rem;
 +
            margin-bottom: 1em;
 +
            padding-bottom: 2em;
 +
            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;
 +
 
 +
        }
 +
        h1 {
 +
            font-weight: 300;
 +
            font-size: 2.5em;
 +
            text-transform: capitalize;
 +
          }
 +
.top h1 {
 +
  color:red;
 +
}
 +
        .title span {
 +
            margin-top: 1em;
 +
            font-weight: 200;
 +
            display: block;
 +
            font-size: .9em;
 +
        }
 +
 
 +
 
 +
        /*buttonmasks -------------------------------*/
 +
        .buttonmask {
 +
            display: inline-block;
 +
            font-size: 1.25rem;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            border-width: 2px;
 +
            border-style: solid;
 +
            padding: .5em 1.75em;
 +
 
 +
        }
 +
  .buttonmask}
 +
 
 +
        .buttonmask-small {
 +
            font-size: .9rem;
 +
            font-weight: 700;
 +
        }
 +
 
 +
        .buttonmask-accent {
 +
            color: #FF0000;
 +
            border-color: #FF0000;
 +
        }
 +
 
 +
        .buttonmask-accent:hover {
 +
        background: #FF0000;
 +
        color: black;
 +
        }
 +
 
 +
 
 +
        /*header------------------------------*/
 +
 
 +
        header {
 +
            background-color: rgba(0,0,0,.75);
 +
            position: absolute;
 +
            left: 0;
 +
            right: 0;
 +
            max-height: 7em;
 +
        }
 +
 
 +
        nav ul {
 +
            margin: 0;
 +
            padding: 0;
 +
            list-style: none;
 +
            float: right;
 +
            margin-right: 5em!important;
 +
            margin-top: 2em;
 +
            position: relative;
 +
        }
 +
 
 +
        nav li {
 +
            display: inline-block;
 +
            margin: 1em;
 +
            position: relative;
 +
        }
 +
 
 +
        .nav-buttonmasks {
 +
            font-weight: 900;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            font-size: 0.95rem;
 +
            padding: .5em;
 +
            color: #FFF;
 +
            position: relative;
 +
            padding-bottom: 3em;
 +
        }
 +
 
 +
        .nav-buttonmasks:hover {color: #FF0000;}
 +
        .dropdown-nav-buttonmasks:hover {color: #FF0000;}
 +
 
 +
        .dropdown-nav-buttonmasks {
 +
            font-weight: 900;
 +
            text-decoration: none;
 +
            text-transform: uppercase;
 +
            font-size: 0.95rem;
 +
            padding: .5em;
 +
            color: #FFF;
 +
            display: none;
 +
            background-color:  rgba(0,0,0,.75);
 +
            z-index: 1;
 +
            width: 10em;
 +
            margin-left: -3em;
 +
        }
 +
        #navadjust {
 +
          margin-left:-0.3em;
 +
        }
 +
 
 +
     
 +
        .nav-buttonmasks:hover .dropdown-nav-buttonmasks{
 +
            display: block;
 +
            position: absolute;
 +
        }
 +
        .logo {
 +
            height: 90px;
 +
            width: 90px;
 +
            float: left;
 +
            margin-left: 6em;
 +
            margin-top: .5em;
 +
        }
 +
.uselessspacer {
 +
          height: 16vh;
 +
          background-color: black;
 +
        }
 +
 
 +
        /*top------------------------------*/
 +
.backtotop {
 +
          height: 5em;
 +
          width: 5em;
 +
          margin: auto;
 +
          position: fixed;
 +
        }
 +
        .topimage {
 +
          opacity: 0.8;
 +
        }
 +
        .top {
 +
          background-color: black;
 +
          height: 19vh;
 +
        }
 +
        .line {
 +
                width: 30%;
 +
                height: 1.5px;
 +
                margin: auto;
 +
            background: red;
 +
        }
 +
        /*bottom------------------------------*/
 +
        .education {
 +
          height: 20em;
 +
        }
 +
        .eventhero {
 +
          height: 50em;
 +
          background-color: black;
 +
          width: 100%;
 +
        }
 +
        #kenyabigger {
 +
          height: 90vh!important;
 +
        }
 +
#Kenyabigger p {
 +
  font-size: .85em;
 +
}
 +
 
 +
        #kenyabigger .eventdesc{
 +
          height: 40em;
 +
        }
 +
        .lefteventhero{
 +
          width: 35vw;
 +
          float: left;
 +
          height: 34em;
 +
          background-color: black;
 +
          display: inline-block;
 +
        }
 +
        .lefteventherospacer {
 +
          height: 10em;
 +
          background-color: black;
 +
        }
 +
        .righteventhero {
 +
          width: 59vw;
 +
          float: right;
 +
          display: inline-block;
 +
          height: 34em;
 +
          background-color: black;
 +
          outline: 2px solid #FF0000;
 +
          outline-offset: -2em;
 +
        }
 +
        .righteventhero p {
 +
          color: white;
 +
          width: 50vw;
 +
          margin: auto;
 +
          margin-top: 7em;
 +
          font-size: 1.3em;
 +
        }
 +
        .left {
 +
          float: left;
 +
          margin-left: 1em;
 +
        }
 +
        .right {
 +
          float: right;
 +
          margin-right: 1em;
 +
 
 +
        }
 +
        .eventimage {
 +
          width: 45vw;
 +
          height: 35em;
 +
          display: inline-block;
 +
margin-top: 2em;
 +
        }
 +
        .eventdesc {
 +
text-align:left!important;
 +
          width: 50vw;
 +
          height: 45em;
 +
          background-color: black;
 +
          display: inline-block;
 +
          outline: 2px solid #FF0000;
 +
          outline-offset: -2em;
 +
        }
 +
        .eventdesc p {
 +
          width: 42vw;
 +
          margin: auto;
 +
          margin-top: 3.5em;
 +
          color: white;
 +
        }
 +
        .eventdesc a {
 +
          margin-top: 1.5em;
 +
        }
 +
        .elderlyimageleft {
 +
          width: 28vw;
 +
          margin-left: 7vw;
 +
        }
 +
        .elderlyimageright {
 +
          width: 28vw;
 +
          margin-right: 7vw;
 +
        }
 +
#Kenyabigger img {
 +
width: 40vw;
 +
}
 +
#elderly p {
 +
font-size: 1em;
 +
}
 +
.elderly1 p {
 +
font-size: 1.5em!important;
 +
}
 +
#elderly1 {
 +
font-size: 1.5em!important;
 +
}
 +
.elderly1desc {
 +
height: 34em;
 +
}
 +
#elderlylarge{
 +
font-size: 1.3em!important;
 +
}
 +
 
 +
        /*middle------------------------------*/
 +
        .middle {
 +
          background-color: black;
 +
          height: 31vh;
 +
          font-size: 0;
 +
        }
 +
        .middle > div {font-size: 1rem;}
 +
 
 +
        .links {
 +
          display: inline-block;
 +
          width: 48vw;
 +
          height: 33vh;
 +
          margin-left: 0;
 +
          background-color: black;
 +
        }
 +
        #management {
 +
        }
 +
        #education {
 +
          margin-left: 0;
 +
          float: left;
 +
        }
 +
        #engagement {
 +
          margin-right:0;
 +
          float: right;
 +
        }
 +
        .middledesc {
 +
            color: black;
 +
            background: rgba(0,0,0,.75);
 +
            position: absolute;
 +
            margin-top: -18vh;
 +
            margin-left: 18vw;
 +
        }
 +
        .middledesc p {
 +
            font-size: 1.2em;
 +
        }
 +
 
 +
 
 +
 
 +
                .slider {
 +
        height: inherit;
 +
        width: inherit;
 +
          margin: auto;
 +
          position: relative;
 +
        }
 +
        .slide1,.slide2,.slide3,.slide4,.slide5 {
 +
          position: absolute;
 +
          width: 100%;
 +
          height: 100%;
 +
        }
 +
        .slide1 {
 +
              background-size: cover;
 +
            animation:fade 8s infinite;
 +
        -webkit-animation:fade 8s infinite;
 +
 
 +
        }
 +
        .slide2 {
 +
              background-size: cover;
 +
            animation:fade2 8s infinite;
 +
        -webkit-animation:fade2 8s infinite;
 +
        }
 +
        .slide3 {
 +
              background-size: cover;
 +
            animation:fade3 8s infinite;
 +
        -webkit-animation:fade3 8s infinite;
 +
        }
 +
        #leftfirst {
 +
          background-image: url(img/overviewleftfirst.jpg);
 +
        }
 +
        #leftsecond {
 +
          background-image: url(img/overviewleftsecond.jpg);
 +
        }
 +
        #leftthird {
 +
          background-image: url(img/overviewleftthird.jpg);
 +
        }
 +
        #middlefirst {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/9/95/T--KCL_UK--overviewmiddlefirst.jpg);
 +
        }
 +
        #middlesecond {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/f/f7/T--KCL_UK--overviewmiddlesecond.jpg);
 +
        }
 +
        #middlethird {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/3/3d/T--KCL_UK--overviewmiddlethird.jpg);
 +
        }
 +
        #rightfirst {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/3/38/T--KCL_UK--overviewrightfirst.jpg);
 +
        }
 +
        #rightsecond {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/f/f0/T--KCL_UK--overviewrightsecond.jpg);
 +
        }
 +
        #rightthird {
 +
          background-image: url(https://static.igem.org/mediawiki/2018/b/b6/T--KCL_UK--overviewrightthird.jpg);
 +
        }
 +
 
 +
        @keyframes fade
 +
        {
 +
          0%  {opacity:1}
 +
          33.333% { opacity: 0}
 +
          66.666% { opacity: 0}
 +
          100% { opacity: 1}
 +
        }
 +
        @keyframes fade2
 +
        {
 +
          0%  {opacity:0}
 +
          33.333% { opacity: 1}
 +
          66.666% { opacity: 0 }
 +
          100% { opacity: 0}
 +
        }
 +
        @keyframes fade3
 +
        {
 +
          0%  {opacity:0}
 +
          33.333% { opacity: 0}
 +
          66.666% { opacity: 1}
 +
          100% { opacity: 0}
 +
        }
 +
        .backgroundfancy {
 +
          background-color: black;
 +
          height: 30em;
 +
          width: auto;
 +
          background-repeat: no-repeat;
 +
          background-size: cover;
 +
        }
 +
        #backgroundfancy{
 +
          width: 100%;
 +
        }
 +
 
 +
        /*scrolldown------------------------------*/
 +
        .scrolldown {
 +
          width: 100%;
 +
          height:15em;;
 +
          background-color: black;
 +
        }
 +
        #wrapper {
 +
          display: table;
 +
          width:100%;
 +
          height:100%;
 +
        }
 +
 
 +
        #wrapper-inner {
 +
          display: table-cell;
 +
          vertical-align:middle;
 +
          width:100%;
 +
          height:100%;
 +
        }
 +
 
 +
        #scroll-down {
 +
            display: block;
 +
            position: relative;
 +
            padding-top: 79px;
 +
          text-align:center;
 +
        }
 +
        .arrow-down {
 +
            display: block;
 +
            margin: 0 auto;
 +
            width: 10px;
 +
            height: 38px;
 +
        }
 +
        .arrow-down:after {
 +
            content: '';
 +
            display: block;
 +
            margin: 0;
 +
            padding: 0;
 +
            width: 8px;
 +
            height: 8px;
 +
            border-top: 2px solid red;
 +
            border-right: 2px solid red;
 +
            behavior: url(-ms-transform.htc);
 +
            -moz-transform: rotate(135deg);
 +
            -webkit-transform: rotate(135deg);
 +
            -o-transform: rotate(135deg);
 +
            -ms-transform: rotate(135deg);
 +
            transform: rotate(135deg);
 +
        }
 +
        .first{padding-left: 2em;
 +
        text-decoration: none;}
 +
        .second {
 +
          padding-left: 2em
 +
        }
 +
        #scroll-title {
 +
            display: block;
 +
            text-transform: uppercase;
 +
            color: red;
 +
          font-family: Helvetica Neue, Helvetica, Arial;
 +
          font-size:23px;
 +
          font-weight:bold;
 +
          letter-spacing:.1em;
 +
        }
 +
        #scroll-down::before {
 +
            -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
 +
            /* Safari 4+ */
 +
 
 +
            -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
 +
            /* Fx 5+ */
 +
 
 +
            -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
 +
            /* Opera 12+ */
 +
 
 +
            animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;
 +
            /* IE 10+, Fx 29+ */
 +
 
 +
            position: absolute;
 +
            top: 0px;
 +
            left: 50%;
 +
            margin-left: -1px;
 +
            width: 2px;
 +
            height: 90px;
 +
            background: red;
 +
            content: ' ';
 +
        }
 +
        @-webkit-keyframes elasticus {
 +
            0% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
            50% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            50.1% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            100% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
        }
 +
        @-moz-keyframes elasticus {
 +
            0% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
            50% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            50.1% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            100% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
        }
 +
        @-o-keyframes elasticus {
 +
            0% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
            50% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            50.1% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            100% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
        }
 +
        @keyframes elasticus {
 +
            0% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
            50% {
 +
                -webkit-transform-origin: 0% 0%;
 +
                -ms-transform-origin: 0% 0%;
 +
                -moz-transform-origin: 0% 0%;
 +
                -o-transform-origin: 0% 0%;
 +
                transform-origin: 0% 0%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            50.1% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 1);
 +
                -ms-transform: scale(1, 1);
 +
                -moz-transform: scale(1, 1);
 +
                -o-transform: scale(1, 1);
 +
                transform: scale(1, 1);
 +
            }
 +
            100% {
 +
                -webkit-transform-origin: 0% 100%;
 +
                -ms-transform-origin: 0% 100%;
 +
                -moz-transform-origin: 0% 100%;
 +
                -o-transform-origin: 0% 100%;
 +
                transform-origin: 0% 100%;
 +
                -webkit-transform: scale(1, 0);
 +
                -ms-transform: scale(1, 0);
 +
                -moz-transform: scale(1, 0);
 +
                -o-transform: scale(1, 0);
 +
                transform: scale(1, 0);
 +
            }
 +
        }
 +
 
 +
 
 +
 
 +
        // codepen profile logo
 +
        #paschka {
 +
          display: block;
 +
          color:white;
 +
          font-family:helvetica neue, helvetica, arial;
 +
          font-size:32px;
 +
          text-decoration: none;
 +
          position: fixed;
 +
          bottom:0px;
 +
          right:0px;
 +
          padding:0px;
 +
          transition: all .1s ease;
 +
          background:#000;
 +
          height:40px;
 +
          line-height:30px;
 +
          vertical-align:middle;
 +
          width:40px;
 +
          text-align:center;
 +
          border-radius: 5%;
 +
          bottom:20px;
 +
          right:20px;
 +
 
 +
          &:hover {
 +
            background:#232323;
 +
            transition:all .1s ease;
 +
            color:#f0f0f0;
 +
          }
 +
 
 +
 
 +
        /*bottom------------------------------*/
 +
 
 +
 
 +
        .bottom {
 +
          height: 34vh;
 +
          background-color: black;
 +
        }
 +
        .overviewtextbox {
 +
          background-color: black;
 +
          height: 34vh;
 +
          width: 100vw;
 +
          margin: auto;
 +
          outline: 2px solid #FF0000;
 +
          color: #FFF;
 +
          outline-offset: -2.5em;
 +
        }
 +
        .overviewtextbox h1 {
 +
          padding-top: .3em;
 +
          background-color: black;
 +
          width: 17vw;
 +
          margin-left: 2em;
 +
          z-index: 2;
 +
          position: sticky;
 +
        }
 +
        #overviewdesc {
 +
          padding-left: 5em;
 +
          padding-right: 5em;
 +
          margin: auto;
 +
          text-align: middle;
 +
        }
 +
        #mrsa {
 +
          text-decoration: underline;
 +
          color: green;
 +
        }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
    </style>
 +
 
 +
    <script type="text/javascript" src="https://2018.igem.org/Template:UCL/JQuery?action=raw&ctype=text/javascript"></script>
 +
    <script>
 +
    $(document).ready(function (){
 +
      $("#educationbutton").click(function() {
 +
        $([document.documentElement, document.body]).animate({
 +
            scrollTop: $("#educationsection").offset().top
 +
        }, 2000);
 +
      });
 +
    });
 +
 
 +
    $(document).ready(function (){
 +
      $("#engagementbutton").click(function() {
 +
        $([document.documentElement, document.body]).animate({
 +
            scrollTop: $("#engagementsection").offset().top
 +
        }, 2500);
 +
      });
 +
    });
 +
 
 +
    $(document).ready(function (){
 +
      $("#totopofpage").click(function() {
 +
        $([document.documentElement, document.body]).animate({
 +
            scrollTop: $("#topofpage").offset().top
 +
        }, 2000);
 +
      });
 +
    });
 +
    </script>
 +
 
 +
 
 +
 
 +
    </head>
 +
 
 +
 
 +
 
 +
    <body>
 +
 
 +
 
 +
    <div class="uselessspacer"></div>
 +
 
 +
    <div class="backtotop"><a id="totopofpage"href="#topofpage"><img class="topimage"src="https://static.igem.org/mediawiki/2018/c/cf/T--KCL_UK--top.png"></img></a></div>
 +
    <section class="top">
 +
      <h1 id="hptitle">Public Engagement</h1>
 +
      <div class="line"></div>
 +
    </section>
 +
 
 +
 
 +
 
 +
<section class="middle">
 +
      <div class="links" id="education">
 +
        <div class='slider'>
 +
          <div class='slide1' id="middlefirst"></div>
 +
          <div class='slide2' id="middlesecond"></div>
 +
          <div class='slide3' id="middlethird"></div>
 +
        </div>
 +
        <figcaption class="middledesc">
 +
            <a id="educationbutton" class="buttonmask buttonmask-accent buttonmask-small">Education</a>
 +
        </figcaption>
 +
      </div>
 +
 
 +
      <div class="links" id="engagement">
 +
        <div class='slider'>
 +
          <div class='slide1' id="rightfirst"></div>
 +
          <div class='slide2' id="rightsecond"></div>
 +
          <div class='slide3' id="rightthird"></div>
 +
        </div>
 +
        <figcaption class="middledesc">
 +
            <a id="engagementbutton" class="buttonmask buttonmask-accent buttonmask-small">Engagement</a>
 +
        </figcaption>
 +
      </div>
 +
    </section>
 +
 
 +
    <section class="scrolldown">
 +
      <div id="wrapper">
 +
        <div id="wrapper-inner">
 +
          <div id="scroll-down">
 +
            <span class="arrow-down">
 +
              <!-- css generated icon -->
 +
            </span>
 +
            <span id="scroll-title">
 +
              Or Scroll Down For a Quick Overview
 +
            </span>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
 +
 
 +
  <section>
 +
<img id="backgroundfancy"src="https://static.igem.org/mediawiki/2018/c/cc/T--KCL_UK--eefinal.png"></img>
 +
    </section>
 +
 
 +
  <section class="top" id="educationsection">
 +
    <h1 id="hptitle">Education</h1>
 +
    <div class="line"></div>
 +
  </section>
  
 +
  <section>
  
−
<div class="clear"></div>
+
  <div class="eventhero">
 +
    <div class="lefteventhero">
 +
      <div class="lefteventherospacer"></div>
 +
    <section class="scrolldown">
 +
      <div id="wrapper">
 +
        <div id="wrapper-inner">
 +
          <div id="scroll-down">
 +
            <span class="arrow-down">
 +
              <!-- css generated icon -->
 +
            </span>
 +
            <span id="scroll-title">
 +
              See Our Events Below
 +
            </span>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </section>
 +
  </div>
 +
  <div class="righteventhero">
 +
    <p>How much do we really need to know about antibiotic resistance? Is it really relevant to our everyday lives if we can’t understand half the information we’re reading? (What does <a href="https://www.nhs.uk/conditions/mrsa/">methicillin-resistant Staphylococcus aureus</a> even mean?) </br></br> Our team believes that everyone from the age of eleven to seventy seven should have the same understanding of the medications they’re taking as the food that they eat- and by extension the medication going into the food that they eat.
 +
In many circles synthetic biology has been given a bad name- it’s time to show what we can do for good!</p>
 +
  </div>
 +
  </div>
  
 +
  <section class="top">
 +
    <h1 id="hptitle">Bexley School Visit</h1>
 +
    <div class="line"></div>
 +
  </section>
  
 +
  <div class="eventhero">
 +
    <div class="left eventdesc">
 +
      <p>We organised a symposium for the year eleven pupils of Bexley Grammar, to teach them a little about what iGEM is and does, but mostly to extend their knowledge and understanding beyond GCSE requirement of synthetic biology. We set up different stations, using everyday objects to explain the complex science behind genetic engineering. We built DNA out of sweets; explained cell biology with LegoTM, and separated strawberry DNA with mango juice and alcohol. The final debate we staged was easily the star of the show. The pupils took on the attitudes of different peoples affected by genetic engineering: farmers, doctors, and scientists both for an against GM products. It was a great exercise in concisely and clearly communicating your point and we could see first-hand exactly how much they had learned from us. We asked them to fill out a survey about their experience, and the responses were encouraging.
 +
      </p>
 +
      <a style="margin-left: 17.5vw;margin-top: 2em;" href="bexleyinfographic.html" class="buttonmask buttonmask-accent buttonmask-large">See the Results</a>
 +
    </div>
 +
    <img class="right eventimage" src="https://static.igem.org/mediawiki/2018/2/26/T--KCL_UK--overviewleftfirst.jpg"></div>
 +
  </div>
  
−
<div class="column full_size">
+
  <section class="top">
 +
    <h1 id="hptitle">Work In Kenya</h1>
 +
    <div class="line"></div>
 +
  </section>
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
+
  <div class="eventhero" id="Kenya">
 +
    <div class="right eventdesc">
 +
      <p>"The reality of life in Kenya is, unsurprisingly, very different to life in the UK. The local wild life is much more exciting for starters, trading in sheep for lions and leopards. The cuisine is more exciting than “bangers and mash”. The healthcare expenditure per capita in Kenya is approximately £2700 less than in the UK (looking at statistics from 2014).
 +
</br></br>I realised that the situation was worse than I was expecting. The knowledge about [antibiotic resistance] is very poor. Most people don’t know which medications are classed as an antibiotic and that use must be controlled. The control of medication within the food industry is rudimental, which enables livestock companies to use major doses of antibiotics that results in excessive animal growth and more profit. The lack of sanitation and infrastructures with the addition of a poor correlation between diet and health are aspects that worsen the situation in the fight against antibiotic resistance..."
 +
      </p>
 +
    </div>
 +
    <img class="left eventimage" src="https://static.igem.org/mediawiki/2018/1/1a/T--KCL_UK--kenyapic1.png"></div>
 +
  </div>
  
−
<p>Innovative educational tools and public engagement activities have the ability to discuss the science behind synthetic biology, spark new scientific curiosity and establish a public dialogue about synthetic biology from voices and views outside the lab. </p>
+
  <div class="eventhero" id="Kenyabigger">
 +
    <div class="left eventdesc">
 +
      <p>While I was living in the outskirts of Nairobi, I worked as a volunteer in an orphanage of 34 children, from aged six to seventeen. One of the eldest girls at the orphanage attended one of the best schools in Kenya, and she told me that it was common knowledge amongst the more privileged that in very poor areas of the country where people don’t have any money to buy antibiotics and other drugs, there are pharmaceutical companies distributing non-approved (or experimental) drugs. It was a horrifying realisation for me, that large companies take advantage of the lack of conditions and knowledge of these people.
 +
</br></br>
 +
Once I was living near the orphanage and working there every day, I decided to give some lectures about genetics and synthetic biology to the older kids. I organised evening lectures, after all the kids had finished school and were already at the house. I began with curriculum science- talking about DNA composition and its functions in our cell, and consequently in our lives. As interest piqued, we discussed some of the applications of synthetic biology and how we can now start editing DNA and the consequences that these can have in the future of humanity.
 +
</br></br>
 +
Teaching can be unforgiving, but teaching kids who are actually interested is incredibly rewarding. Many children in the UK and across Europe take their education for granted- whether that is because of cultural attitudes or the fact that education is a given right, I do not know. The children in the orphanage were, in contrast, committed to learning. They knew the hurdles they had to overcome, and persisted- which was inspiring.
 +
      </p>
 +
    </div>
 +
    <img class="right eventimage" src="https://static.igem.org/mediawiki/2018/0/01/T--KCL_UK--kenyapic2.jpg"></div>
 +
  </div>
  
−
<p>On this page, your team should document your Education and Public Engagement work and activities. Describe your team’s efforts to include more people in shaping synthetic biology (such as creating or building upon innovative educational tools and/or public engagement activities to establish two-way dialogue with new communities, and/or engaging new groups in discussions about synthetic biology and public values). Describe your approach, why you chose it, and what was learned by everyone involved (including yourselves!).</p>
+
  <section class="top">
 +
    <h1 id="hptitle">Belvedere Wellbeing Centre Visit</h1>
 +
    <div class="line"></div>
 +
  </section>
  
−
<p>This work may relate to or overlap with the work you document on your Human Practices page. Whereas Integrated Human Practices relates to the process of refining your project purpose and design, this page may highlight significant efforts that go beyond your particular project focus and/or address a significant broader concern in iGEM.
+
  <div class="eventhero" id="elderly elderly1">
 +
    <div class="right eventdesc elderly1desc">
 +
      <p>As part of our Public Engagement activities, in September a few of our team visited the Belvedere Wellbeing Centre for elderly people in the London Borough of Bexley.  We set out to open up the dialogue about antibiotic resistance to include more people in shaping synthetic biology, including groups not traditionally consulted. We thought it best to shed the conventional methods of teaching that we had relied on at Bexley Grammar School, and instead simply start a conversation about the elderly’s experiences of antibiotic administration and whether they see the use of antibiotics in animal farming as a factor in their shopping habits.
 
</p>
 
</p>
 +
    </div>
 +
    <img class="left eventimage elderlyimageleft" src="https://static.igem.org/mediawiki/2018/4/43/T--KCL_UK--elderly1.jpg"></div>
 +
  </div>
  
 +
  <div class="eventhero" id="elderly elderlylarge elderly2">
 +
    <div class="left eventdesc">
 +
      <p id="elderlylarge">Throughout our project, antibiotics have, in one way or another, become the ‘bad guy’- we use them too much; they are the cause of hospital deaths- but one man’s tale truly brought the reality of antibiotics to us. His son’s leg was due to be amputated earlier this year due to sepsis, and after requesting a second opinion, he was transferred to an Oxford hospital where he was treated with two antibiotics in combination.  Quick thinking doctors saved his leg. It was a story that highlighted the importance of our project, from a previously unseen angle.
 +
      </br></br>
 +
      Over tea and iGEM-themed cakes, it was fun and refreshing to get a new perspective on the personal medical experiences of these people, and to be able to educate them about the science behind synthetic biology.  They were genuinely interested in our project and had lots to say about antibiotic use and how we can begin to solve the problem of antibiotic resistance.
 +
      </p>
 +
    </div>
 +
    <img class="right eventimage elderlyimageright" src="https://static.igem.org/mediawiki/2018/a/a7/T--KCL_UK--elderly2.jpg"></div>
 +
  </div>
 +
</section>
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
<section id="engagementsection">
−
+
<img id="backgroundfancy"src="https://static.igem.org/mediawiki/2018/6/66/T--KCL_UK--socialmediainfographic.png"></img>
−
<ul>
+
  </section>
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
−
<li>tips on <a href="https://2018.igem.org/Human_Practices/How_to_Succeed">how to succeed</a> including explanations of judging criteria and advice about how to conduct and document your Human Practices work</li>
+
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
−
<li>links to helpful <a href="https://2018.igem.org/Human_Practices/Resources">resources</a></li>
+
−
<li>And more! </li>
+
−
</ul>
+
−
+
−
+
−
<div class="clear extra_space"></div>
+
−
+
−
<p>If you nominate your team for the <a href="https://2018.igem.org/Judging/Awards"></a>Best Education and Public Engagement Special Prize</a> by filling out the corresponding field in the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>, the judges will review this page to consider your team for that prize. The criteria are listed below. </p>
+
  
−
<div class="highlight decoration_background">
+
    </body>
−
<p>How have you developed new opportunities to include more people in shaping synthetic biology? Innovative educational tools and public engagement activities have the ability to establish a two-way dialogue with new communities by discussing public values and the science behind synthetic biology. Document your approach and what was learned by everyone involved to compete for this award.
+
</html>
−
</p>
+
−
</div>
+
−
</div>
+

Latest revision as of 20:51, 17 October 2018

KCL iGEM

KCL iGEM

Public Engagement

Education

How much do we really need to know about antibiotic resistance? Is it really relevant to our everyday lives if we can’t understand half the information we’re reading? (What does methicillin-resistant Staphylococcus aureus even mean?)

Our team believes that everyone from the age of eleven to seventy seven should have the same understanding of the medications they’re taking as the food that they eat- and by extension the medication going into the food that they eat. In many circles synthetic biology has been given a bad name- it’s time to show what we can do for good!

Bexley School Visit

We organised a symposium for the year eleven pupils of Bexley Grammar, to teach them a little about what iGEM is and does, but mostly to extend their knowledge and understanding beyond GCSE requirement of synthetic biology. We set up different stations, using everyday objects to explain the complex science behind genetic engineering. We built DNA out of sweets; explained cell biology with LegoTM, and separated strawberry DNA with mango juice and alcohol. The final debate we staged was easily the star of the show. The pupils took on the attitudes of different peoples affected by genetic engineering: farmers, doctors, and scientists both for an against GM products. It was a great exercise in concisely and clearly communicating your point and we could see first-hand exactly how much they had learned from us. We asked them to fill out a survey about their experience, and the responses were encouraging.

See the Results

Work In Kenya

"The reality of life in Kenya is, unsurprisingly, very different to life in the UK. The local wild life is much more exciting for starters, trading in sheep for lions and leopards. The cuisine is more exciting than “bangers and mash”. The healthcare expenditure per capita in Kenya is approximately £2700 less than in the UK (looking at statistics from 2014).

I realised that the situation was worse than I was expecting. The knowledge about [antibiotic resistance] is very poor. Most people don’t know which medications are classed as an antibiotic and that use must be controlled. The control of medication within the food industry is rudimental, which enables livestock companies to use major doses of antibiotics that results in excessive animal growth and more profit. The lack of sanitation and infrastructures with the addition of a poor correlation between diet and health are aspects that worsen the situation in the fight against antibiotic resistance..."

While I was living in the outskirts of Nairobi, I worked as a volunteer in an orphanage of 34 children, from aged six to seventeen. One of the eldest girls at the orphanage attended one of the best schools in Kenya, and she told me that it was common knowledge amongst the more privileged that in very poor areas of the country where people don’t have any money to buy antibiotics and other drugs, there are pharmaceutical companies distributing non-approved (or experimental) drugs. It was a horrifying realisation for me, that large companies take advantage of the lack of conditions and knowledge of these people.

Once I was living near the orphanage and working there every day, I decided to give some lectures about genetics and synthetic biology to the older kids. I organised evening lectures, after all the kids had finished school and were already at the house. I began with curriculum science- talking about DNA composition and its functions in our cell, and consequently in our lives. As interest piqued, we discussed some of the applications of synthetic biology and how we can now start editing DNA and the consequences that these can have in the future of humanity.

Teaching can be unforgiving, but teaching kids who are actually interested is incredibly rewarding. Many children in the UK and across Europe take their education for granted- whether that is because of cultural attitudes or the fact that education is a given right, I do not know. The children in the orphanage were, in contrast, committed to learning. They knew the hurdles they had to overcome, and persisted- which was inspiring.

Belvedere Wellbeing Centre Visit

As part of our Public Engagement activities, in September a few of our team visited the Belvedere Wellbeing Centre for elderly people in the London Borough of Bexley. We set out to open up the dialogue about antibiotic resistance to include more people in shaping synthetic biology, including groups not traditionally consulted. We thought it best to shed the conventional methods of teaching that we had relied on at Bexley Grammar School, and instead simply start a conversation about the elderly’s experiences of antibiotic administration and whether they see the use of antibiotics in animal farming as a factor in their shopping habits.