Difference between revisions of "Team:HK GTC"

 
(45 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
 
 
{{HK_GTC}}
 
{{HK_GTC}}
−
<!DOCTYPE html>
 
−
<html lang="en">
 
  
−
<head>
+
<html>
−
    <meta charset="UTF-8">
+
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat">
+
−
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
−
    <link rel="stylesheet" href="../css/home-style.css">
+
−
    <script src="../home.js"></script>
+
−
    <title>HK_GTC 2021 Homepage</title>
+
−
</head>
+
−
<style>
+
−
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    border: 0;
+
−
    outline: 0;
+
−
    font-size: 100%;
+
−
    vertical-align: baseline;
+
−
    background: transparent;
+
−
}
+
  
−
@font-face {
+
     <div id="my-global-wrapper">
−
     font-family: "Monastic";
+
         <section id="welcome">
−
    src: url("../fonts/Monastic.ttf");
+
             <div class="left">
−
}
+
                 <div class="welcome-center">
−
 
+
                     <h1>PRACTICAL</h1>
−
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
+
                     <div class="bar">
−
 
+
                        <div class="leftcolor"></div>
−
html{
+
                        <div class="rightcolor"></div>
−
    scroll-behavior: smooth;
+
                    </div>
−
}
+
                    <p>PETase & Related Analogous Chimeras Transfused in Computer and AI Learning</p>
−
 
+
                 </div>
−
html, body{
+
−
    background-color: #f4f4f4;
+
−
    font-family: 'Raleway', serif;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
nav{
+
−
    position: fixed;
+
−
    width: 100%;
+
−
    height: 10%;
+
−
    transition: transform .5s;
+
−
    z-index: 3;
+
−
}
+
−
 
+
−
#top{
+
−
    position: absolute;
+
−
    top:0;
+
−
    left:0;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
#top h1{
+
−
    float: left;
+
−
    padding:2rem;
+
−
    font-size: 2rem;
+
−
    color: #fff;
+
−
}
+
−
#nav-button{
+
−
    transition: all .25s;
+
−
    float: right;
+
−
    padding: 2rem;
+
−
}
+
−
 
+
−
#nav-button:hover{
+
−
    cursor: pointer;
+
−
    height:3rem;
+
−
}
+
−
 
+
−
#nav-button line{
+
−
    stroke: #fff;
+
−
    transition: all .5s;
+
−
}
+
−
 
+
−
#nav-button:hover line{
+
−
    stroke: #eeeeee;
+
−
}
+
−
 
+
−
#back-button{
+
−
    width: fit-content;
+
−
}
+
−
 
+
−
#back-button:hover{
+
−
    cursor: pointer;
+
−
}
+
−
 
+
−
.inline{
+
−
    display: inline;
+
−
}
+
−
 
+
−
.inline h1{
+
−
    padding-right: 0 !important;
+
−
}
+
−
 
+
−
.logo{
+
−
    width: 6rem;
+
−
    height: 6rem;
+
−
}
+
−
 
+
−
#popup{
+
−
    position: fixed;
+
−
    width:25%;
+
−
    height:100%;
+
−
    right:0;
+
−
    transform: translateX(100%);
+
−
    padding: 2.5rem;
+
−
    background-color: #ffffff;
+
−
    font-size: 2rem;
+
−
    font-weight: 200;
+
−
    transition: all .5s;
+
−
    opacity: 0;
+
−
    color: #4f4f4f !important;
+
−
}
+
−
 
+
−
#popup a{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    text-decoration: none;
+
−
    color:#4f4f4f;
+
−
    font-weight: 200;
+
−
    transition: all .25s;
+
−
}
+
−
 
+
−
#popup li{
+
−
    transition: all .25s;
+
−
}
+
−
 
+
−
#popup li:hover{
+
−
    cursor: pointer;
+
−
    color: #f4f4f4;
+
−
    background-color: #1BA784;
+
−
    font-weight: 400;
+
−
}
+
−
 
+
−
#popup li:hover a{
+
−
    color: #f4f4f4;
+
−
    font-weight: 400;
+
−
}
+
−
 
+
−
 
+
−
#current-page{
+
−
    font-weight: bold;
+
−
}
+
−
 
+
−
#popup nav,ul,li{
+
−
    list-style-type: none;
+
−
    width: 100%;
+
−
    padding: .6rem;
+
−
}
+
−
 
+
−
#popup h1 {
+
−
    padding: .6rem
+
−
}
+
−
 
+
−
.navShow{
+
−
    transform: translateX(0%) !important;
+
−
    opacity: 1 !important;
+
−
}
+
−
 
+
−
.inactive{
+
−
    display:none;
+
−
}
+
−
 
+
−
.show{
+
−
    transition: opacity .25s;
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
.fade-out{
+
−
    transition: opacity .25s;
+
−
    opacity : 0 !important;
+
−
}
+
−
 
+
−
.rotate{
+
−
    transform: rotate(90deg);
+
−
}
+
−
 
+
−
#welcome{
+
−
    position: relative;
+
−
    height: 100%;
+
−
    width: 100%;
+
−
    font-size: 6rem;
+
−
    background-color: #93D5DC;
+
−
    background-image: url("../img/Main\ page\ background.png");
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr;
+
−
}
+
−
 
+
−
/* #welcome h1{
+
−
    color: #fff;
+
−
    width: 100%;
+
−
    text-align: center;
+
−
    padding-top:300px;
+
−
    animation-name: floaty;
+
−
    animation-duration: 1s;
+
−
    animation-iteration-count: infinite;
+
−
    animation-timing-function:cubic-bezier(0.59, 0.01, 0.4, 0.93);
+
−
} */
+
−
 
+
−
.center{
+
−
    position: absolute;
+
−
    top: 50%;
+
−
    left: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
}
+
−
 
+
−
#welcome .left{
+
−
    padding: 4rem;
+
−
    position: relative;
+
−
}
+
−
 
+
−
#welcome .left h1{
+
−
    font-family: "Monastic";
+
−
    font-size: 6rem;
+
−
    padding: 1rem;
+
−
    letter-spacing: 1rem;
+
−
}
+
−
 
+
−
#welcome .left .bar{
+
−
    height: .6rem;
+
−
    width: 60%;
+
−
    margin: auto;
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr;
+
−
}
+
−
 
+
−
#welcome .left .bar .leftcolor{
+
−
    width: 110%;
+
−
    height: 100%;
+
−
    background-color: #71aada;
+
−
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
+
−
}
+
−
 
+
−
#welcome .left .bar .rightcolor{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    background-color: #cee5f7;
+
−
}
+
−
 
+
−
#welcome .left p{
+
−
    font-size: 2.5rem;
+
−
    font-weight: 200;
+
−
    padding: 1rem;
+
−
}
+
−
 
+
−
#welcome .right{
+
−
    position: relative;
+
−
}
+
−
 
+
−
#welcome .right img{
+
−
  width: 100%;
+
−
  max-width: none;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#desc{
+
−
    height: 100%;
+
−
    position: relative;
+
−
    background: rgb(2,0,36);
+
−
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(206,238,245,1) 0%, rgb(81, 105, 141) 0%, rgba(206,238,245,1) 100%);
+
−
}
+
−
 
+
−
#desc h1{
+
−
    color: #fff;
+
−
    font-size: 3rem;
+
−
    position: absolute;
+
−
    top: 40%;
+
−
    left: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
}
+
−
 
+
−
#desc p{
+
−
    color: #fff;
+
−
    font-size: 1.5rem;
+
−
    position: absolute;
+
−
    width: 60%;
+
−
    top: 60%;
+
−
    left: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* bottle navigation */
+
−
 
+
−
#bot-nav{
+
−
    height: 100%;
+
−
    display: grid;
+
−
    grid-template-columns: 2fr 1fr;
+
−
    background: linear-gradient(0deg,rgb(2,0,36) 0%, rgb(81, 105, 141) 100%);
+
−
    color:#f4f4f4;
+
−
}
+
−
 
+
−
#nav-desc-left{
+
−
    position: relative;
+
−
}
+
−
 
+
−
#nav-right{
+
−
    position: relative;
+
−
}
+
−
 
+
−
#the-bottle{
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr 1fr;
+
−
    grid-template-rows: 1fr 1fr 1fr 1fr;
+
−
    width: 215px;
+
−
    height: 766px;
+
−
    margin:auto;
+
−
    margin-top: 5rem;
+
−
    position: relative;
+
−
}
+
−
 
+
−
#the-bottle div{
+
−
    position:unset;
+
−
}
+
−
 
+
−
.bot-button{
+
−
    z-index: 3;
+
−
}
+
−
 
+
−
.bot-button .link {
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
.bot-button a{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
#bot-im{
+
−
    transition: all .2s;
+
−
}
+
−
 
+
−
.darken{
+
−
    opacity : .7;
+
−
}
+
−
 
+
−
#bot-team{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 1/3;
+
−
    grid-column: 1/2;
+
−
}
+
−
 
+
−
#bot-team:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-project{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 1/3;
+
−
    grid-column: 3/4;
+
−
}
+
−
 
+
−
#bot-project:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-part{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 3/4;
+
−
    grid-column: 1/2;
+
−
}
+
−
 
+
−
#bot-part:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-safety{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 3/4;
+
−
    grid-column: 3/4;
+
−
}
+
−
 
+
−
#bot-safety:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-dl{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 4/5;
+
−
    grid-column: 1/2;
+
−
}
+
−
 
+
−
#bot-dl:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-hp{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 4/5;
+
−
    grid-column: 3/4;
+
−
}
+
−
 
+
−
#bot-hp:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#bot-home{
+
−
    opacity: 0;
+
−
    transition: opacity .4s;
+
−
    grid-row: 2/4;
+
−
    grid-column: 2/3;
+
−
}
+
−
 
+
−
#bot-home:hover{
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#the-bottle img{
+
−
    position: absolute;
+
−
    z-index: 0;
+
−
}
+
−
 
+
−
.showable{
+
−
    position: absolute;
+
−
    pointer-events: none;
+
−
    left: 0;
+
−
    top:0;
+
−
}
+
−
 
+
−
.bot-button{
+
−
    z-index: 1;
+
−
}
+
−
 
+
−
#nav-desc-left .hap {
+
−
    position: relative;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
#nav-desc-left .hap h1{
+
−
    font-size: 6rem;
+
−
    margin-bottom: 2rem;
+
−
}
+
−
 
+
−
#nav-desc-left .hap p{
+
−
    font-size: 1.2rem;
+
−
}
+
−
 
+
−
.bottle-desc{
+
−
    position: absolute;
+
−
    left: 50%;
+
−
    top: 50%;
+
−
    padding:1rem;
+
−
    width: 70%;
+
−
    transform: translate(0,-100rem);
+
−
    transition: opacity .5s;
+
−
    opacity: 0;
+
−
}
+
−
 
+
−
.bottle-desc .img{
+
−
    width: 400px;
+
−
    height: 300px;
+
−
    margin-top: 3rem;
+
−
    margin-left: 1rem;
+
−
    background-color: #acacac;
+
−
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+
−
    border-radius: 1rem;
+
−
}
+
−
 
+
−
.current-desc{
+
−
    transform: translate(-50%, -50%);
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
footer {
+
−
    width: 100%;
+
−
    height: 8rem;
+
−
    background-color: #222222;
+
−
    display: block;
+
−
    clear: both;
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr 1fr;
+
−
    color: #fff;
+
−
    align-items: center;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
 
+
−
footer div{
+
−
    padding:1rem;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* Section Landing Page */
+
−
.block1 {
+
−
    height: 60vh;
+
−
    display: grid;
+
−
    grid-template-columns: 1.2fr 1fr;
+
−
}
+
−
 
+
−
.block2 {
+
−
    height: 60vh;
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1.2fr;
+
−
}
+
−
 
+
−
.block .block-left {
+
−
    width: 100%;
+
−
    position: relative;
+
−
}
+
−
 
+
−
.block .block-left .wrapper{
+
−
    width: 60%;
+
−
    position: absolute;
+
−
    top: 50%;
+
−
    left: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
}
+
−
 
+
−
.block .block-left .wrapper h1 {
+
−
    font-size: 3rem;
+
−
    padding:1rem;
+
−
}
+
−
 
+
−
.block .block-left .wrapper p {
+
−
    padding:1rem;
+
−
    line-height: 1.7rem;
+
−
}
+
−
+
−
.learn-more{
+
−
    width: 100%;
+
−
    position: relative;
+
−
}
+
−
 
+
−
.learn-more a{
+
−
    position: absolute;
+
−
    font-weight: 900;
+
−
    right: 0;
+
−
    padding: .5rem;
+
−
    text-decoration: none;
+
−
    color: #4f4f4f;
+
−
    transition: all .1s;
+
−
}
+
−
 
+
−
.learn-more a:hover{
+
−
    border-left: #1BA784 solid 5px;
+
−
    color: #acacac;
+
−
    transform: translateX(1rem);
+
−
}
+
−
 
+
−
.block-right{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    position: relative;
+
−
}
+
−
 
+
−
.block-right .wrapper{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    position: relative;
+
−
}
+
−
 
+
−
.block-right .img{
+
−
    width: 70%;
+
−
    height: 60%;
+
−
    background-color: #acacac;
+
−
    position: absolute;
+
−
    top: 50%;
+
−
    left: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+
−
    border-radius: 1rem;
+
−
}
+
−
 
+
−
/* Attribute and Team*/
+
−
 
+
−
.section-heading{
+
−
    height: 230rem;
+
−
}
+
−
 
+
−
.position{
+
−
    font-size: 4rem;
+
−
    text-align: center;
+
−
    padding-top: 6rem;
+
−
    padding-bottom: 4rem;
+
−
}
+
−
 
+
−
.card-display{
+
−
    width: 80%;
+
−
    margin: auto;
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr;
+
−
    row-gap: 3rem;
+
−
    padding: 2.5rem;
+
−
}
+
−
 
+
−
.card-display.one-card{
+
−
    grid-template-columns: 1fr;
+
−
}
+
−
 
+
−
.card-display .img{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    background-color: #f5f5f5;
+
−
    left: 50%;
+
−
}
+
−
 
+
−
.card-display .card{
+
−
    display: grid;
+
−
    overflow: hidden;
+
−
    width: 70%;
+
−
    margin: auto;
+
−
    grid-template-rows: 3fr 1fr;
+
−
    margin-bottom: 3rem;
+
−
    background-color: #ffffff;
+
−
    border-radius: 2.5rem;
+
−
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+
−
}
+
−
 
+
−
.card .mem-desc{
+
−
    padding: 2rem;
+
−
}
+
−
 
+
−
.card-display h1{
+
−
    margin-bottom: 1rem;
+
−
    text-align: center;
+
−
    margin-bottom: 0;
+
−
    padding: 1rem;
+
−
    font-size: 2rem;
+
−
}
+
−
 
+
−
.card-display p{
+
−
    text-align: center;
+
−
}
+
−
 
+
−
.card-display .leader{
+
−
    background-color: goldenrod;
+
−
    color: #fff;
+
−
}
+
−
 
+
−
.card.pi{
+
−
    grid-template-rows: 1fr;
+
−
    grid-template-columns: 1fr 2.5fr;
+
−
    width: 90%;
+
−
    height: 100%;
+
−
}
+
−
 
+
−
.card.pi .mem-desc *{
+
−
    text-align: start;
+
−
    padding: 1rem;
+
−
}
+
−
 
+
−
.card.pi .mem-desc h1{
+
−
    font-size: 2rem;
+
−
}
+
−
 
+
−
 
+
−
.card-display.sub-leader{
+
−
    grid-template-columns: 1fr 1fr 1fr;
+
−
}
+
−
 
+
−
.card-display.sub-leader .card{
+
−
    grid-template-rows: 1.5fr 1fr;
+
−
    width: 80%;
+
−
}
+
−
 
+
−
 
+
−
/* Actual WIKI Pages*/
+
−
+
−
 
+
−
.section-selector{
+
−
    height: 100%;
+
−
    width: 20%;
+
−
    padding-top: 8rem;
+
−
    padding-left: 2rem;
+
−
    float: left;
+
−
}
+
−
+
−
.section-selector h1{
+
−
    padding-left: 1rem;
+
−
    font-size: 1.5rem;
+
−
    margin-bottom: 1rem;
+
−
}
+
−
+
−
.section-selector ul{
+
−
    width: 80%;
+
−
    margin: auto;
+
−
    padding: 1rem;
+
−
}
+
−
+
−
.section-selector a{
+
−
    text-decoration: none;
+
−
    color: #4f4f4f;
+
−
    font-size: 1.1rem;
+
−
    font-weight: bold;
+
−
    transition: all .1s;
+
−
}
+
−
+
−
.section-selector li:hover{
+
−
    transition: all .1s;
+
−
}
+
−
+
−
.section-selector li:hover{
+
−
    border-left: #29B7CB 5px;
+
−
    border-left-style: solid;
+
−
    background-color: #cbeff3;
+
−
}
+
−
+
−
.section-selector li:hover a{
+
−
    color: #fff;
+
−
}
+
−
+
−
.right-section{
+
−
    float: right;
+
−
    width: 75%;
+
−
    background-color: #f4f4f4;
+
−
}
+
−
+
−
.section-heading{
+
−
    background-color: #4f4f4f;
+
−
    height: 30rem;
+
−
    position: relative;
+
−
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+
−
    background-image: url("../img/_MG_0041.JPG");
+
−
    background-repeat:no-repeat;
+
−
    background-size: 100%;
+
−
    background-attachment: fixed;
+
−
    z-index: 2;
+
−
}
+
−
+
−
.section-heading .mask{
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    background-color: #4f4f4f;
+
−
    opacity: .5;
+
−
}
+
−
+
−
.section-heading h1{
+
−
    color: white;
+
−
    font-size: 3rem;
+
−
    position: absolute;
+
−
    left: 50%;
+
−
    top: 50%;
+
−
    transform: translate(-50%, -50%);
+
−
    z-index: 10;
+
−
}
+
−
+
−
.section-contents{
+
−
    float: right;
+
−
    padding: 6rem;
+
−
}
+
−
+
−
.section-contents h2{
+
−
    font-size: 2rem;
+
−
    font-weight: bold;
+
−
    padding-left: 1rem;
+
−
    border-left: #29B7CB 6px solid;
+
−
}
+
−
+
−
.section-contents p{
+
−
    font-size: 1.2rem;
+
−
    padding: 4rem;
+
−
}
+
−
+
−
.single-image-with-desc{
+
−
    display: block;
+
−
}
+
−
+
−
+
−
.single-image-with-desc img{
+
−
    width: 60%;
+
−
    margin: auto;
+
−
}
+
−
+
−
.single-image-with-desc p{
+
−
    font-size: 1rem;
+
−
    text-align: center;
+
−
}
+
−
+
−
.two-image-with-desc{
+
−
    display: block;
+
−
    width: 100%;
+
−
}
+
−
+
−
.two-image-with-desc .im-group{
+
−
    display: grid;
+
−
    grid-template-columns: 1fr 1fr;
+
−
}
+
−
+
−
.two-image-with-desc .im-group img{
+
−
    width: 90%;
+
−
}
+
−
+
−
.two-image-with-desc p{
+
−
    font-size: 1rem;
+
−
    text-align: center;
+
−
}
+
−
+
−
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/* responsive */
+
−
 
+
−
@keyframes floaty{
+
−
    0%{
+
−
        transform: translateY(0px);
+
−
    }
+
−
    50%{
+
−
        transform: translateY(10px);
+
−
    }
+
−
    100%{
+
−
        transform: translateY(0px);
+
−
    }
+
−
}
+
−
 
+
−
@media (max-width: 600px) {
+
−
 
+
−
    h1{
+
−
        font-size: 2rem;
+
−
    }
+
−
 
+
−
    #popup{
+
−
        width: 85%;
+
−
    }
+
−
 
+
−
    #welcome h1{
+
−
        font-size: 2.5rem;
+
−
        top:75%;
+
−
    }
+
−
 
+
−
    nav li{
+
−
        text-align: center;
+
−
    }
+
−
 
+
−
    #nav-button{
+
−
        height:2.3rem;
+
−
    }
+
−
 
+
−
    #nav-button{
+
−
        cursor: pointer;
+
−
        height :2rem !important;
+
−
    }
+
−
 
+
−
    /* homepage */
+
−
 
+
−
    #welcome{
+
−
        grid-template-columns: 1fr;
+
−
        grid-template-rows: 2.5fr 1fr;
+
−
    }
+
−
 
+
−
    #welcome .left{
+
−
        grid-row: 2/3;
+
−
    }
+
−
 
+
−
    #welcome .left h1{
+
−
        font-size: 2rem;
+
−
        text-align: center;
+
−
    }
+
−
 
+
−
    #welcome .left p{
+
−
        font-size: 1rem;
+
−
        text-align: center;
+
−
    }
+
−
 
+
−
    #desc{
+
−
        grid-column: 1fr;
+
−
       
+
−
    }
+
−
 
+
−
    #desc h1{
+
−
        font-size: 2rem;
+
−
        position: relative;
+
−
        text-align: center;
+
−
        padding: 1rem;
+
−
    }
+
−
    #desc p{
+
−
        font-size: 1rem;
+
−
        position: relative;
+
−
        text-align: center;
+
−
        width: 90%;
+
−
        margin-left: 0;
+
−
    }
+
−
 
+
−
    #bot-nav{
+
−
        grid-template-columns: 1fr;
+
−
        height: fit-content;
+
−
    }
+
−
 
+
−
    #bot-nav #nav-desc-left{
+
−
        display: none;
+
−
    }
+
−
 
+
−
    /* team (Actual wiki pages*/
+
−
 
+
−
    .section-heading{
+
−
        height: 15rem;
+
−
        overflow: hidden;
+
−
    }
+
−
   
+
−
    .position{
+
−
        font-size: 4rem;
+
−
        text-align: center;
+
−
        padding-top: 6rem;
+
−
        padding-bottom: 4rem;
+
−
    }
+
−
   
+
−
    .card-display{
+
−
        width: 80%;
+
−
        margin: auto;
+
−
        display: grid;
+
−
        grid-template-columns: 1fr;
+
−
        padding: 0;
+
−
    }
+
−
   
+
−
    .card-display.one-card{
+
−
        grid-template-columns: 1fr;
+
−
        width: 100%;
+
−
    }
+
−
   
+
−
    .card-display .img{
+
−
        width: 100%;
+
−
        height: 100%;
+
−
        background-color: #f5f5f5;
+
−
        left: 50%;
+
−
    }
+
−
   
+
−
    .card-display .card{
+
−
        display: grid;
+
−
        overflow: hidden;
+
−
        width: 70%;
+
−
        margin: auto;
+
−
        grid-template-rows: 3fr 1fr;
+
−
        margin-bottom: 3rem;
+
−
        background-color: #ffffff;
+
−
        border-radius: 2.5rem;
+
−
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+
−
    }
+
−
   
+
−
    .card .mem-desc{
+
−
        padding: 1rem;
+
−
    }
+
−
   
+
−
    .card-display h1{
+
−
        margin-bottom: 1rem;
+
−
        text-align: center;
+
−
        margin-bottom: 0;
+
−
        padding: 1rem;
+
−
        font-size: 1.5rem;
+
−
    }
+
−
   
+
−
    .card-display p{
+
−
        text-align: center;
+
−
        font-size: .9rem;
+
−
    }
+
−
   
+
−
    .card.leader{
+
−
        background-color: goldenrod;
+
−
        color: #fff;
+
−
        width: 100%;
+
−
        grid-template-rows: 2fr 1fr;
+
−
        height: 70vh;
+
−
    }
+
−
   
+
−
    .card.pi{
+
−
        grid-template-rows: 2fr 1fr;
+
−
        grid-template-columns: 1fr;
+
−
        width: 90%;
+
−
        height: 150vh;
+
−
    }
+
−
   
+
−
    .card.pi .mem-desc *{
+
−
        text-align: start;
+
−
        padding: 1rem;
+
−
    }
+
−
   
+
−
    .card.pi .mem-desc h1{
+
−
        font-size: 2rem;
+
−
    }
+
−
   
+
−
   
+
−
    .card-display.sub-leader{
+
−
        grid-template-columns: 1fr;
+
−
    }
+
−
   
+
−
    .card-display.sub-leader .card{
+
−
        grid-template-rows: 1.5fr 1fr;
+
−
        width: 80%;
+
−
    }
+
−
 
+
−
    footer{
+
−
        grid-template-columns: 1fr;
+
−
        height: fit-content;
+
−
    }
+
−
 
+
−
    .section-heading h1{
+
−
        font-size: 2rem;
+
−
        text-align: center;
+
−
    }
+
−
 
+
−
    .section-selector{
+
−
        float: none;
+
−
        width: 90%;
+
−
        height: 40vh;
+
−
        padding: 1rem;
+
−
        margin-bottom: 2rem;
+
−
    }
+
−
 
+
−
    .section-selector h1{
+
−
        font-size: 1.5rem;
+
−
    }
+
−
 
+
−
    .section-selector ul{
+
−
        width: 100%;
+
−
        padding:0;
+
−
    }
+
−
 
+
−
    .section-selector ul li a{
+
−
        font-size: 1rem;
+
−
    }
+
−
 
+
−
    .right-section{
+
−
        width: 100%;
+
−
        float: none;
+
−
        padding: none;
+
−
        height: fit-content;
+
−
        margin-bottom: 5rem;
+
−
    }
+
−
 
+
−
    .right-section *{
+
−
        margin-bottom: 1rem;
+
−
    }
+
−
 
+
−
    .right-section .section-contents {
+
−
        width: 100%;
+
−
        padding:0;
+
−
        float:none;
+
−
    }
+
−
 
+
−
    .right-section .section-contents h2{
+
−
        font-size: 2rem;
+
−
        margin-left: 1rem;
+
−
    }
+
−
 
+
−
    .right-section .section-contents p{
+
−
        font-size: 1rem;
+
−
        padding: 1rem;
+
−
        width: 90%;
+
−
    }
+
−
 
+
−
    /* hp */
+
−
 
+
−
    .block{
+
−
        display: block;
+
−
        height: fit-content;
+
−
        padding: 2rem;
+
−
    }
+
−
 
+
−
    .block-left,.block-right{
+
−
        height: fit-content;
+
−
    }
+
−
 
+
−
    .learn-more{
+
−
        height: 3rem;
+
−
    }
+
−
 
+
−
    .block .wrapper{
+
−
        width: 90% !important;
+
−
        position: relative !important;
+
−
        transform: translate(0) !important;
+
−
        top: 0 !important;
+
−
        left: 0 !important;
+
−
    }
+
−
 
+
−
    .block img{
+
−
        display: none;
+
−
    }
+
−
 
+
−
    hr{
+
−
        width: 80%;
+
−
    }
+
−
 
+
−
}
+
−
</style>
+
−
<body>
+
−
    <nav>
+
−
         <div id="top">
+
−
             <a href="index.html">
+
−
                 <h1>HK_GTC</h1>
+
−
            </a>
+
−
            <svg width="50" height="50" viewBox="0 0 21 32" fill="none" xmlns="http://www.w3.org/2000/svg"
+
−
                id="nav-button">
+
−
                <line x1="19.0869" y1="31.0863" x2="19.0869" y2="25.2838" stroke="#4F4F4F" stroke-width="2" />
+
−
                <line x1="19.0869" y1="6.71594" x2="19.0869" y2="0.913462" stroke="#4F4F4F" stroke-width="2" />
+
−
                <line x1="19.3798" y1="25.7934" x2="9.37979" y2="15.7934" stroke="#4F4F4F" stroke-width="2" />
+
−
                <line y1="-1" x2="14.1422" y2="-1"
+
−
                     transform="matrix(-0.707107 0.707107 0.707107 0.707107 20.0869 6.91333)" stroke="#4F4F4F"
+
−
                    stroke-width="2" />
+
−
                <line y1="-1" x2="5.80248" y2="-1" transform="matrix(-8.74228e-08 -1 -1 8.74228e-08 0.358398 31.0863)"
+
−
                    stroke="#4F4F4F" stroke-width="2" />
+
−
                <line y1="-1" x2="5.80248" y2="-1" transform="matrix(0 -1 -1 0 0.358398 6.71594)" stroke="#4F4F4F"
+
−
                    stroke-width="2" />
+
−
                <line y1="-1" x2="14.1422" y2="-1"
+
−
                     transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 0.0869141 25.0863)" stroke="#4F4F4F"
+
−
                    stroke-width="2" />
+
−
                <line x1="0.794021" y1="6.20622" x2="10.794" y2="16.2062" stroke="#4F4F4F" stroke-width="2" />
+
−
                <line x1="6.16089" y1="28.2653" x2="14.2844" y2="28.2653" stroke="#4F4F4F" />
+
−
                <line x1="7.32153" y1="24.7838" x2="13.124" y2="24.7838" stroke="#4F4F4F" />
+
−
                <line y1="-0.5" x2="8.12347" y2="-0.5" transform="matrix(1 0 0 -1 6.16089 3.23438)" stroke="#4F4F4F" />
+
−
                <line y1="-0.5" x2="5.80248" y2="-0.5" transform="matrix(1 0 0 -1 7.32153 6.71594)" stroke="#4F4F4F" />
+
−
            </svg>
+
−
        </div>
+
−
        <div id="popup">
+
−
            <div id="back-button">
+
−
                 <i class="large material-icons">arrow_back</i>
+
 
             </div>
 
             </div>
−
             <div id="main" class="show">
+
             <div class="right">
−
                 <ul>
+
                 <img class="welcome-center" src="https://static.igem.org/mediawiki/2021/7/78/T--HK_GTC--logo.png" alt="">
−
                    <li id="current-page">
+
−
                        <a href="index.html">Home</a>
+
−
                    </li>
+
−
                    <li>Team</li>
+
−
                    <li>Project</li>
+
−
                    <li>Parts</li>
+
−
                    <li>Safety</li>
+
−
                    <li>Human Practice</li>
+
−
                    <li>Deep Learning</li>
+
−
                    <li>Awards</li>
+
−
                </ul>
+
 
             </div>
 
             </div>
−
            <div id="team" class="inactive fade-out">
+
        </section>
−
                 <h1>Team</h1>
+
 
−
                <ul>
+
        <section id="desc">
−
                    <li><a href="../html/attributions.html">Team Members</a></li>
+
            <div class="desc-block">
−
                    <li><a href="../html/attributions.html">Attributions</a></li>
+
                 <h1>Project Abstract</h1>
−
                </ul>
+
<p>Plastic pollution has been a global issue since the last century. In this study, we provide solutions to alleviate the plastic pollution problem from multiple perspectives. We develop a dual enzyme system as chimeras between PETase and MHETase to degrade polyethylene terephthalate (PET) into its constituent monomers. The performance of PETase and MHETase cocktail mixtures is also compared for the extent of hydrolysis of amorphous PET film, and the mixture exhibits improved depolymerization activity compared with the single enzyme. A survey of 60 items, aimed to investigate knowledge, values and actions of secondary students towards plastic pollution, was designed and conducted in 4 secondary schools. The findings suggest the need for environmental education to engage students to take part in preserving the natural environment. Drone and AI technology was applied to train and develop a deep learning PET bottle detection model, which maps plastic pollution on beaches.</p>
 
             </div>
 
             </div>
−
            <div id="project" class="inactive fade-out">
+
         </section>
−
                <h1>Project</h1>
+
−
                <ul>
+
−
                    <li><a href="../html/content-page-layout2.html">Description</a></li>
+
−
                    <li><a href="../html/content-page-layout2.html">Design</a></li>
+
−
                    <li><a href="../html/content-page-layout2.html">Notebook</a></li>
+
−
                    <li><a href="../html/content-page-layout1.html">Experiments and Results</a></li>
+
−
                    <li><a href="../html/content-page-layout1.html">Future Perspective</a></li>
+
−
                </ul>
+
−
            </div>
+
−
            <div id="human-practice" class="inactive fade-out">
+
−
                <h1>Human Practice</h1>
+
−
                <ul>
+
−
                    <li><a href="hp.html">Integrated Human Practice</a></li>
+
−
                    <li>Collaborations</li>
+
−
                    <li>Education & Engagement</li>
+
−
                </ul>
+
−
            </div>
+
−
    </nav>
+
−
    <section id="welcome">
+
−
         <div class="left">
+
−
            <div class="center">
+
−
                <h1>PRACTICAL</h1>
+
−
                <div class="bar">
+
−
                    <div class="leftcolor"></div>
+
−
                    <div class="rightcolor"></div>
+
−
                </div>
+
−
                <p>PETase & Related Analogous Chrimeras Transfused in Computer and AI Learning</p>
+
−
            </div>
+
−
        </div>
+
−
        <div class="right">
+
−
            <img class="center" src="../img/logo.png" alt="">
+
−
        </div>
+
−
    </section>
+
  
−
    <section id="desc">
+
        <section id="bot-nav">
−
        <h1>Nice Description</h1>
+
            <div id="nav-desc-left">
−
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quia consequatur autem est provident sint ad
+
                <div class="hap">
−
            sunt eum quam, quo libero rem error aut qui perferendis enim? Laboriosam eligendi tempore ab! Dolorum,
+
−
            deleniti cupiditate ipsum asperiores itaque id pariatur quo, sequi maxime culpa voluptates deserunt. Maxime
+
−
            laboriosam minus architecto pariatur.</p>
+
−
    </section>
+
  
−
    <section id="bot-nav">
+
                    <div id="bottle-guide" class="bottle-desc current-desc">
−
        <div id="nav-desc-left">
+
                        <h1>Hover over the Bottle!</h1>
−
            <div class="hap">
+
                    </div>
 +
                    <div id="bottle-team-desc" class="bottle-desc">
 +
                        <h1>Team</h1>
 +
                        <p>We are team HK_GTC - A secondary school team from Hong Kong. Click to explore more about the
 +
us.</p>
 +
                        <div class="img"></div>
 +
                    </div>
 +
                    <div id="bottle-project-desc" class="bottle-desc">
 +
                        <h1>Project</h1>
 +
                        <p>Our research team develops different dual enzyme systems of PETase and MHETase to increase the rate of PET depolymerization. We constructed chimeras between PETase and MHETase, with the C-terminus of PETase linked to the N-terminus of MHETase using a 12 amino acid link. The degradation rates of PET film using PETase-MHETase chimera, as well as PETase and MHETase cocktail mixtures, are compared. We have shown that the two enzymes act synergistically, increasing the efficiency of the digestion of PET into its final monomers, TPA and EG, and that the mixture exhibits improved depolymerization activity compared with the single enzyme.
 +
</p>
 +
                        <div class="img"></div>
 +
                    </div>
 +
                    <div id="bottle-safety-desc" class="bottle-desc">
 +
                        <h1>Safety</h1>
 +
                    </div>
 +
                    <div id="bottle-parts-desc" class="bottle-desc">
 +
                        <h1>Parts</h1>
 +
                    </div>
  
−
                <div id="bottle-guide" class="bottle-desc current-desc">
+
                     <div id="bottle-hp-desc" class="bottle-desc">
−
                     <h1>Hover the Bottle!</h1>
+
                        <h1>Human Practice</h1>
−
                </div>
+
                        <p>Human practice team is responsible for raising the awareness of the plastic pollution problem, and our project. We have interviewed local professionals from relevant fields and integrated their advice into our project to strive for improvement. Aside from that, we have also done some educational work. Click to explore.</p>
−
                <div id="bottle-team-desc" class="bottle-desc">
+
                         <div class="img"></div>
−
                    <h1>Team</h1>
+
                     </div>
−
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolores optio, aliquid nesciunt
+
−
                        eligendi pariatur eius numquam beatae itaque velit corporis adipisci. Corrupti et amet numquam
+
−
                        odio eaque quo non facilis suscipit, ullam sunt quibusdam tempora, libero debitis neque ratione
+
−
                        nostrum repellat. Id illum, magni laboriosam quos aliquam neque asperiores mollitia.</p>
+
−
                    <div class="img"></div>
+
−
                </div>
+
−
                <div id="bottle-project-desc" class="bottle-desc">
+
−
                    <h1>Project</h1>
+
−
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero a, magni incidunt vel nobis
+
−
                         officiis quod ea alias inventore architecto tempore blanditiis soluta aspernatur aliquid
+
−
                        accusantium assumenda! Fugiat quidem molestiae in esse quisquam inventore vero ducimus
+
−
                        reprehenderit eligendi repellendus, neque sequi reiciendis a beatae obcaecati dolorum temporibus
+
−
                        ipsum, libero nobis?</p>
+
−
                    <div class="img"></div>
+
−
                </div>
+
−
                <div id="bottle-safety-desc" class="bottle-desc">
+
−
                     <h1>Safety</h1>
+
−
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda necessitatibus error quasi
+
−
                        quam voluptate eligendi nobis blanditiis mollitia rem eos eius consectetur velit voluptatem
+
−
                        repellendus, quo earum at! Consequatur cupiditate, molestias totam tempora ad repudiandae,
+
−
                        corporis explicabo, consequuntur quaerat dolore veritatis sapiente eos nam. Harum quam iusto
+
−
                        dolor sit exercitationem.</p>
+
−
                    <div class="img"></div>
+
−
                </div>
+
−
                <div id="bottle-parts-desc" class="bottle-desc">
+
−
                    <h1>Parts</h1>
+
−
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex nemo ratione, debitis totam tempora
+
−
                        inventore qui? Voluptate fugit esse eaque deserunt id voluptatibus non, nam magnam dolor a enim
+
−
                        eligendi corrupti praesentium accusantium tenetur quidem suscipit unde in, quas ratione
+
−
                        doloribus harum? Facere fuga, saepe similique modi sint aut animi.</p>
+
−
                    <div class="img"></div>
+
−
                </div>
+
  
−
                <div id="bottle-hp-desc" class="bottle-desc">
+
                    <div id="bottle-dl-desc" class="bottle-desc">
−
                    <h1>Human Practice</h1>
+
                        <h1>Deep Learning</h1>
−
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur a debitis nisi odio
+
                        <p>Responding to the plastic pollution problem, the team created a plastic bottle detecting deep learning model to map PET bottles on beaches. The data allows government, councils, NGO to have an overview of the current situation and to estimate how effective their proposal is to reduce the impact of plastic wastes. Our ultimate goal is to help to reduce the amount of plastic pollution in the ocean. </p>
−
                        necessitatibus deleniti sit hic harum nesciunt ullam! Esse quo pariatur fugit id aut et sequi
+
                        <div class="img"></div>
−
                        vitae in? Doloremque aliquid ad, nulla blanditiis, corporis laboriosam minima iure similique
+
                    </div>
−
                        nihil neque unde facere veniam quasi magnam! Doloribus, enim amet.</p>
+
−
                    <div class="img"></div>
+
−
                </div>
+
  
−
                <div id="bottle-dl-desc" class="bottle-desc">
 
−
                    <h1>Deep Learning</h1>
 
−
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus commodi exercitationem, enim,
 
−
                        atque provident autem velit recusandae natus, officiis maiores non aperiam? Ullam eaque,
 
−
                        voluptas debitis ut, at consequatur illo molestias modi, eligendi nihil aliquid explicabo?
 
−
                        Laboriosam similique accusantium hic ab, maxime ipsam placeat obcaecati soluta earum molestias
 
−
                        deleniti ipsa.</p>
 
−
                    <div class="img"></div>
 
 
                 </div>
 
                 </div>
−
 
 
             </div>
 
             </div>
−
        </div>
+
            <div id="nav-right">
−
        <div id="nav-right">
+
                <div id="the-bottle">
−
            <div id="the-bottle">
+
                    <div id="bot-team" class="bot-button">
−
                <div id="bot-team" class="bot-button">
+
                       
−
                     <a href="index.html">
+
                            <a href="https://2021.igem.org/Team:HK_GTC/Team"><span><div class="link"></div></span></a>
−
                         <div class="link"></div>
+
                       
−
                     </a>
+
                        <img id="bot-project-im" class="showable" src="https://static.igem.org/mediawiki/2021/a/ad/T--HK_GTC--home_bot_purple_plastic.png">
−
                     <img id="bot-project-im" class="showable" src="../img/Navigation/top-left-bottle.png">
+
                    </div>
 +
                    <div id="bot-project" class="bot-button">
 +
                        <a href="https://2021.igem.org/Team:HK_GTC/Description"><span><div class="link"></div></span></a>
 +
                        <img id="bot-project-im" class="showable"
 +
                            src="https://static.igem.org/mediawiki/2021/d/da/T--HK_GTC--top-right-bottle.png">
 +
                    </div>
 +
                    <div id="bot-part" class="bot-button">
 +
                        <a href="https://2021.igem.org/Team:HK_GTC/Parts"><span><div class="link"></div></span></a>
 +
                        <img id="bot-part-im" class="showable"
 +
                            src="https://static.igem.org/mediawiki/2021/7/72/T--HK_GTC--home_bot_blue_plastic.png">
 +
                     </div>
 +
                    <div id="bot-safety" class="bot-button">
 +
                        <a href="https://2021.igem.org/Team:HK_GTC/Safety"><span><div class="link"></div></span></a>
 +
                         <img id="bot-safe-im" class="showable"
 +
                            src="https://static.igem.org/mediawiki/2021/2/2c/T--HK_GTC--right-bottle.png">
 +
                    </div>
 +
                    <div id="bot-dl" class="bot-button">
 +
                        <a href="https://2021.igem.org/Team:HK_GTC/Deep_learning"><span><div class="link"></div></span></a>
 +
                        <img id="bot-dl-im" class="showable" src="https://static.igem.org/mediawiki/2021/4/4d/T--HK_GTC--bot-left-bottle.png">
 +
                     </div>
 +
                    <div id="bot-hp" class="bot-button">
 +
                        <a href="https://2021.igem.org/Team:HK_GTC/Human_Practices"><span><div class="link"></div></span></a>
 +
                        <img id="bot-hp-im" class="showable"
 +
                            src="https://static.igem.org/mediawiki/2021/1/10/T--HK_GTC--bot-right-bottle.png">
 +
                     </div>
 +
                    <div id="bot-home" class="bot-button">
 +
                        <a href="#welcome"><span><div class="link"></div></span></a>
 +
                        <img id="bot-home-im" class="showable"
 +
                            src="https://static.igem.org/mediawiki/2021/d/df/T--HK_GTC--home-bottle.png">
 +
                    </div>
 +
                    <img id="bot-im" src="https://static.igem.org/mediawiki/2021/4/49/T--HK_GTC--bottle.png">
 
                 </div>
 
                 </div>
−
                <div id="bot-project" class="bot-button">
+
            </div>
−
                    <a href="index.html">
+
        </section>
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-project-im" class="showable" src="../img/Navigation/top-right-bottle.png">
+
−
                </div>
+
−
                <div id="bot-part" class="bot-button">
+
−
                    <a href="index.html">
+
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-part-im" class="showable" src="../img/Navigation/left-bottle.png">
+
−
                </div>
+
−
                <div id="bot-safety" class="bot-button">
+
−
                    <a href="index.html">
+
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-safe-im" class="showable" src="../img/Navigation/right-bottle.png">
+
−
                </div>
+
−
                <div id="bot-dl" class="bot-button">
+
−
                    <a href="index.html">
+
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-dl-im" class="showable" src="../img/Navigation/bot-left-bottle.png">
+
−
                </div>
+
−
                <div id="bot-hp" class="bot-button">
+
−
                    <a href="index.html">
+
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-hp-im" class="showable" src="../img/Navigation/bot-right-bottle.png">
+
−
                </div>
+
−
                <div id="bot-home" class="bot-button">
+
−
                    <a href="index.html">
+
−
                        <div class="link"></div>
+
−
                    </a>
+
−
                    <img id="bot-home-im" class="showable" src="../img/Navigation/home-bottle.png">
+
−
                </div>
+
−
                <img id="bot-im" src="../img/Navigation/bottle.png">
+
  
 +
        <footer>
 +
            <div>
 +
                <h1>GT COLLEGE iGEM2021</h1>
 +
                <img width="30%" src="https://static.igem.org/mediawiki/2021/7/78/T--HK_GTC--logo.png" alt="">
 
             </div>
 
             </div>
−
        </div>
+
            <div>
−
    </section>
+
                <h1>Follow Us!</h1>
−
 
+
                <a href="https://www.instagram.com/gtigemteam/">
−
    <footer>
+
                    <i class="icon fab fa-instagram fa-2x"></i>
−
        <div>GT COLLEGE
+
                </a>
−
 
+
             </div>
−
            iGEM2021</div>
+
            <div>
−
        <div>
+
                <h1>Contact:</h1>
−
             Follow Us
+
                <p>igemteam.gt@gmail.com</p>
−
        </div>
+
            </div>
−
        <div>
+
        </footer>
−
            <h1>Contact</h1>
+
    </div>
−
            <p>
+
−
                gtigem2019@gmail.com</p>
+
−
        </div>
+
−
    </footer>
+
−
 
+
−
</body>
+
−
 
+
 
</html>
 
</html>

Latest revision as of 23:11, 28 November 2021

HK_GTC 2021 Homepage

PRACTICAL

PETase & Related Analogous Chimeras Transfused in Computer and AI Learning

Project Abstract

Plastic pollution has been a global issue since the last century. In this study, we provide solutions to alleviate the plastic pollution problem from multiple perspectives. We develop a dual enzyme system as chimeras between PETase and MHETase to degrade polyethylene terephthalate (PET) into its constituent monomers. The performance of PETase and MHETase cocktail mixtures is also compared for the extent of hydrolysis of amorphous PET film, and the mixture exhibits improved depolymerization activity compared with the single enzyme. A survey of 60 items, aimed to investigate knowledge, values and actions of secondary students towards plastic pollution, was designed and conducted in 4 secondary schools. The findings suggest the need for environmental education to engage students to take part in preserving the natural environment. Drone and AI technology was applied to train and develop a deep learning PET bottle detection model, which maps plastic pollution on beaches.

GT COLLEGE iGEM2021

Follow Us!

Contact:

igemteam.gt@gmail.com