Difference between revisions of "Team:HK GTC"

Line 1: Line 1:
 
{{IGEM_TopBar}}
 
{{IGEM_TopBar}}
 
{{HK_GTC}}
 
{{HK_GTC}}
−
<html>
+
<!DOCTYPE html>
 +
<html lang="en">
  
 +
<head>
 +
    <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 {
 +
    font-family: "Monastic";
 +
    src: url("../fonts/Monastic.ttf");
 +
}
  
−
<div class="column full_size" >
+
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
−
<h1> Welcome to iGEM 2021! </h1>
+
−
<p>Your team has been approved and you are ready to start the iGEM season! </p>
+
  
−
<img src="https://via.placeholder.com/1080x320">
+
html{
 +
    scroll-behavior: smooth;
 +
}
  
−
</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;
 +
}
  
−
<div class="column full_size" >
+
#top{
 +
    position: absolute;
 +
    top:0;
 +
    left:0;
 +
    width: 100%;
 +
    height: 100%;
 +
}
  
−
<h3>Before you start</h3>
+
#top h1{
−
<p> Please read the following pages:</p>
+
    float: left;
−
<ul>
+
    padding:2rem;
−
<li> <a href="https://2021.igem.org/Competition">Competition Hub</a> </li>
+
    font-size: 2rem;
−
<li> <a href="https://2021.igem.org/Competition/Deliverables/Wiki">Wiki Requirements page</a></li>
+
    color: #fff;
−
<li> <a href="https://2021.igem.org/Resources/Template_Documentation">Template documentation</a></li>
+
}
−
</ul>
+
#nav-button{
−
</div>
+
    transition: all .25s;
 +
    float: right;
 +
    padding: 2rem;
 +
}
  
 +
#nav-button:hover{
 +
    cursor: pointer;
 +
    height:3rem;
 +
}
  
−
<div class="clear extra_space"></div>
+
#nav-button line{
−
<div class="line_divider"></div>
+
    stroke: #fff;
−
<div class="clear extra_space"></div>
+
    transition: all .5s;
 +
}
  
 +
#nav-button:hover line{
 +
    stroke: #eeeeee;
 +
}
  
 +
#back-button{
 +
    width: fit-content;
 +
}
  
−
<div class="column full_size" >
+
#back-button:hover{
−
<h3> Styling your wiki </h3>
+
    cursor: pointer;
−
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
+
}
−
<p>While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.</p>
+
  
−
</div>
+
.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;
 +
}
  
−
<div class="clear extra_space"></div>
+
#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;
 +
}
  
−
<div class="column third_size" >
+
#popup li:hover a{
 +
    color: #f4f4f4;
 +
    font-weight: 400;
 +
}
  
−
<h3> Uploading pictures and files </h3>
 
−
<p> You must upload any pictures and files to the iGEM 2021 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name. </p>
 
  
 +
#current-page{
 +
    font-weight: bold;
 +
}
  
−
<p>When you upload, set the "Destination Filename" to <b> T--YourOfficialTeamName--NameOfFile.jpg</b>. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)</p>
+
#popup nav,ul,li{
 +
    list-style-type: none;
 +
    width: 100%;
 +
    padding: .6rem;
 +
}
  
−
<div class="button_link">
+
#popup h1 {
−
<a href="https://2021.igem.org/Special:Upload">
+
    padding: .6rem
−
UPLOAD FILES
+
}
−
</a>
+
−
</div>
+
  
−
</div>
+
.navShow{
 +
    transform: translateX(0%) !important;
 +
    opacity: 1 !important;
 +
}
  
−
<div class="column third_size" >
+
.inactive{
−
<h3> Wiki template information </h3>
+
    display:none;
−
<p>We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the <a href="https://2021.igem.org/Judging/Pages_for_Awards">Pages for awards</a> link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!</p>
+
}
  
−
</div>
+
.show{
 +
    transition: opacity .25s;
 +
    opacity: 1;
 +
}
  
 +
.fade-out{
 +
    transition: opacity .25s;
 +
    opacity : 0 !important;
 +
}
  
 +
.rotate{
 +
    transform: rotate(90deg);
 +
}
  
−
<div class="column third_size" >
+
#welcome{
−
<div class="highlight decoration_B_full">
+
    position: relative;
−
<h3> Editing your wiki </h3>
+
    height: 100%;
−
<p>On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world! </p>
+
    width: 100%;
−
<p>Use WikiTools - Edit in the black menu bar to edit this page</p>
+
    font-size: 6rem;
 +
    background-color: #93D5DC;
 +
    background-image: url("../img/Main\ page\ background.png");
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
}
  
−
<div class="button_link">
+
/* #welcome h1{
−
<a href="https://2021.igem.org/wiki/index.php?title=Team:HK_GTC&action=edit">
+
    color: #fff;
−
EDIT PAGE
+
    width: 100%;
−
</a>
+
    text-align: center;
−
</div>
+
    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%);
 +
}
  
−
</div>
+
#welcome .left{
−
</div>
+
    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;
 +
}
  
−
<div class="clear extra_space"></div>
+
#welcome .left p{
−
<div class="line_divider"></div>
+
    font-size: 2.5rem;
−
<div class="clear extra_space"></div>
+
    font-weight: 200;
 +
    padding: 1rem;
 +
}
  
 +
#welcome .right{
 +
    position: relative;
 +
}
  
 +
#welcome .right img{
 +
  width: 100%;
 +
  max-width: none;
 +
  overflow: hidden;
 +
}
  
−
<div class="column two_thirds_size" >
+
#desc{
−
<h3>Tips</h3>
+
    height: 100%;
−
<p>This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started: </p>
+
    position: relative;
−
<ul>
+
    background: rgb(2,0,36);
−
<li>State your accomplishments! Tell people what you have achieved from the start. </li>
+
    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%);
−
<li>Be clear about what you are doing and how you plan to do this.</li>
+
}
−
<li>You have a global audience! Consider the different backgrounds that your users come from.</li>
+
−
<li>Make sure information is easy to find; nothing should be more than 3 clicks away.  </li>
+
−
<li>Avoid using very small fonts and low contrast colors; information should be easy to read.  </li>
+
−
<li>Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the <a href="https://2021.igem.org/Calendar">iGEM 2021 calendar</a> </li>
+
−
<li>Have lots of fun! </li>
+
−
</ul>
+
−
</div>
+
  
 +
#desc h1{
 +
    color: #fff;
 +
    font-size: 3rem;
 +
    position: absolute;
 +
    top: 40%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
  
−
<div class="column third_size">
+
#desc p{
−
<div class="highlight decoration_A_full">
+
    color: #fff;
−
<h3>Inspiration</h3>
+
    font-size: 1.5rem;
−
<p> You can also view other team wikis for inspiration! Here are some examples:</p>
+
    position: absolute;
−
<ul>
+
    width: 60%;
−
<li> <a href="https://2019.igem.org/Team:Vilnius-Lithuania"> 2019 Vilnius Lithuania</a> </li>
+
    top: 60%;
−
<li> <a href="https://2019.igem.org/Team:NUS_Singapore">2019 NUS Singapore</a> </li>
+
    left: 50%;
−
<li> <a href="https://2019.igem.org/Team:Lambert_GA">2019 Lambert GA</a> </li>
+
    transform: translate(-50%, -50%);
−
<li> <a href="https://2020.igem.org/Team:Waterloo"> 2020 Waterloo</a></li>
+
}
−
<li> <a href="https://2020.igem.org/Team:TUDelft">2020 TUDelft</a></li>
+
−
<li> <a href="https://2020.igem.org/Team:XMU-China"> 2020 XMU China </a></li>
+
−
<li> <a href="https://2020.igem.org/Team:TAS_Taipei"> 2020 TAS Taipei </a></li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
  
  
  
 +
/* 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 id="main" class="show">
 +
                <ul>
 +
                    <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 id="team" class="inactive fade-out">
 +
                <h1>Team</h1>
 +
                <ul>
 +
                    <li><a href="../html/attributions.html">Team Members</a></li>
 +
                    <li><a href="../html/attributions.html">Attributions</a></li>
 +
                </ul>
 +
            </div>
 +
            <div id="project" class="inactive fade-out">
 +
                <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">
 +
        <h1>Nice Description</h1>
 +
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quia consequatur autem est provident sint ad
 +
            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="nav-desc-left">
 +
            <div class="hap">
 +
 +
                <div id="bottle-guide" class="bottle-desc current-desc">
 +
                    <h1>Hover the Bottle!</h1>
 +
                </div>
 +
                <div id="bottle-team-desc" class="bottle-desc">
 +
                    <h1>Team</h1>
 +
                    <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">
 +
                    <h1>Human Practice</h1>
 +
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur a debitis nisi odio
 +
                        necessitatibus deleniti sit hic harum nesciunt ullam! Esse quo pariatur fugit id aut et sequi
 +
                        vitae in? Doloremque aliquid ad, nulla blanditiis, corporis laboriosam minima iure similique
 +
                        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 id="nav-right">
 +
            <div id="the-bottle">
 +
                <div id="bot-team" class="bot-button">
 +
                    <a href="index.html">
 +
                        <div class="link"></div>
 +
                    </a>
 +
                    <img id="bot-project-im" class="showable" src="../img/Navigation/top-left-bottle.png">
 +
                </div>
 +
                <div id="bot-project" class="bot-button">
 +
                    <a href="index.html">
 +
                        <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">
 +
 +
            </div>
 +
        </div>
 +
    </section>
 +
 +
    <footer>
 +
        <div>GT COLLEGE
 +
 +
            iGEM2021</div>
 +
        <div>
 +
            Follow Us
 +
        </div>
 +
        <div>
 +
            <h1>Contact</h1>
 +
            <p>
 +
                gtigem2019@gmail.com</p>
 +
        </div>
 +
    </footer>
 +
 +
</body>
  
 
</html>
 
</html>

Revision as of 06:41, 18 September 2021
HK_GTC 2021 Homepage
<!DOCTYPE html> HK_GTC 2021 Homepage

PRACTICAL

PETase & Related Analogous Chrimeras Transfused in Computer and AI Learning

Nice Description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quia consequatur autem est provident sint ad 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.

GT COLLEGE iGEM2021
Follow Us

Contact

gtigem2019@gmail.com