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

Line 1: Line 1:
−
{{KCL_UK}}
 
 
<html>
 
<html>
 +
    <head>
 +
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  
 +
    <meta charset="UTF-8">
 +
    <meta name="viewport" content="width= device-width, initial-scale=1">
 +
    <title>KCL iGEM</title>
  
−
<div class="clear"></div>
 
  
 +
    <style>
  
  
−
<div class="column full_size">
+
    #top_title {display:none;}
 +
   
  
−
<h1>Human Practices: Education and Public Engagement Special Prize</h1>
 
  
−
<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>
+
  #HQ_page p {
 +
font-family: 'Raleway', sans-serif;
 +
font-size: 1em;
 +
text-align: center;
  
−
<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>
+
}
 +
   
 +
    #HQ_page h1,h2,h3 {
 +
font-family: 'Raleway', sans-serif;
 +
font-weight: 300;
 +
color:red!important;
 +
}
  
−
<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.
+
      #content, #HQ_page {
−
</p>
+
            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-top: 0.67em;
 +
margin-bottom: 0.67em;
 +
margin-left: 0;
 +
margin-right: 0;
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
  }
−
+
−
<ul>
+
−
<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">
+
  a:hover {text-decoration:none;}
−
<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.
+
a:visited {
−
</p>
+
  color:red;
−
</div>
+
  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;
 +
            margin-top: 1em;
 +
          }
 +
        .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;
 +
        }
 +
 
 +
        .dropdownone {
 +
          margin-top: 2.58em!important;
 +
        }
 +
        .dropdowntwo {
 +
            margin-top: 4.75em!important;
 +
        }
 +
        .dropdownthree {
 +
          margin-top: 6.93em!important;
 +
        }
 +
 
 +
        .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------------------------------*/
 +
        .top {
 +
          background-color: black;
 +
          height: 19vh;
 +
        }
 +
        .line {
 +
                width: 30%;
 +
                height: 1.5px;
 +
                margin: auto;
 +
            background: red;
 +
        }
 +
 
 +
        /*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(img/overviewmiddlefirst.jpg);
 +
        }
 +
        #middlesecond {
 +
          background-image: url(img/overviewmiddlesecond.jpg);
 +
        }
 +
        #middlethird {
 +
          background-image: url(img/overviewmiddlethird.jpg);
 +
        }
 +
        #rightfirst {
 +
          background-image: url(img/overviewrightfirst.jpg);
 +
        }
 +
        #rightsecond {
 +
          background-image: url(img/overviewrightsecond.jpg);
 +
        }
 +
        #rightthird {
 +
          background-image: url(img/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: pink;
 +
          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>
 +
 
 +
 
 +
    </head>
 +
 
 +
 
 +
    <body>
 +
 
 +
    <header>
 +
        <img src="img/newlogo.gif" alt="logo" class="logo">
 +
 
 +
        <nav>
 +
            <ul>
 +
                <li><a href="index.html" class="nav-buttonmasks">Home</a></li>
 +
                <li class="nav-buttonmasks">Team
 +
                  <a href="teammembers.html" class="dropdown-nav-buttonmasks dropdownone">Team Members</a>
 +
                    <a href="#" class="dropdown-nav-buttonmasks dropdowntwo">Collaborations</a>
 +
                </li>
 +
                <li class="nav-buttonmasks">Project
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdownone">Description</a>
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdowntwo">Design</a>
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdownthree">Results</a>
 +
                </li>
 +
                <li class="nav-buttonmasks">Parts
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdownone">Parts Overview</a>
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdowntwo">Basic Parts</a>
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdownthree">Composite Parts</a>
 +
                </li>
 +
                <a href="#" class="nav-buttonmasks">Safety</a>
 +
                <li class="nav-buttonmasks">Human Practices
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdownone" id="navadjust">Overview</a>
 +
                  <a href="#" class="dropdown-nav-buttonmasks dropdowntwo" id="navadjust">Education and Engagement</a>
 +
                </li>
 +
            </ul>
 +
        </nav>
 +
    </header>
 +
    <div class="uselessspacer"></div>
 +
 
 +
    <section class="top">
 +
      <h1>Human Practices</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 href="education.html" 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 href="" 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 >
 +
    <div class="backgroundfancy">
 +
<img id="backgroundfancy"src="img/humpracticesoverview.png"></img>
 
</div>
 
</div>
 +
    </section>
 +
 +
<!---
 +
    <section class="bottom">
 +
      <div class="overviewtextbox">
 +
        <div id="overviewblock"><h1>Overview</h1></div>
 +
        <p id="overviewdesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 +
      </div>
 +
    </section>
 +
    --->
 +
 +
    </body>
 +
</html>

Revision as of 08:03, 10 October 2018

KCL iGEM

Human Practices