Difference between revisions of "Template:HK GTC"

 
(172 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<header>
 
  
 +
<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>
 +
 +
<header>
 +
    <nav id="my-nav">
 +
        <div id="my-top">
 +
            <a href="https://2021.igem.org/Team:HK_GTC">
 +
                <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="https://2021.igem.org/Team:HK_GTC">Home</a>
 +
                    </li>
 +
                    <li>Team</li>
 +
                    <li>Project</li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Parts">Parts</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Safety">Safety</a></li>
 +
                    <li>Human Practice</li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Deep_learning">Deep Learning</a></li>
 +
                </ul>
 +
            </div>
 +
            <div id="team" class="inactive fade-out">
 +
                <h1>Team</h1>
 +
                <ul>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Team">Team Members</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Attributions">Attributions</a></li>
 +
                </ul>
 +
            </div>
 +
            <div id="project" class="inactive fade-out">
 +
                <h1>Project</h1>
 +
                <ul>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Description">Description</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Engineering">Engineering Success</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Proof_Of_Concept">Proof of Concept</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Notebook">Notebook</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Results">Experiments and Results</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Implementation">Implementation</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Contribution">Contribution</a></li>
 +
                </ul>
 +
            </div>
 +
            <div id="human-practice" class="inactive fade-out">
 +
                <h1>Human Practice</h1>
 +
                <ul>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Human_Practices">Integrated Human Practice</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Collaborations">Collaborations</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Partnership">Partnership</a></li>
 +
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Communication">Education & Communication</a></li>
 +
                </ul>
 +
            </div>
 +
    </nav>
 
</header>
 
</header>
 
<style>
 
<style>
−
    /*Replace this with file on igem sever*/
+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
−
    @import url('https://fonts.googleapis.com/css?family=Lobster');
+
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,500&display=swap');
−
    @import url('https://fonts.googleapis.com/css?family=Lato:400,700|Roboto:300,400,500,700&display=swap');
+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
−
    /*Override default ruleset*/
+
  
−
     #home_logo,
+
* {
−
     #sideMenu,
+
     margin: 0;
−
     #top_title,
+
    padding: 0;
−
     .patrollink {
+
    border: 0;
−
        display: none;
+
    outline: 0;
 +
    font-size: 100%;
 +
    vertical-align: baseline;
 +
    background: transparent;
 +
}
 +
 
 +
header {
 +
    font-family: 'Raleway', sans-serif !important;
 +
}
 +
 
 +
@font-face {
 +
    font-family: "Monastic";
 +
    src: url("https://static.igem.org/mediawiki/2021/8/83/T--HK_GTC--Monastic.ttf");
 +
}
 +
 
 +
@font-face {
 +
    font-family: "Garlic";
 +
    src: url("https://static.igem.org/mediawiki/2021/b/bc/T--HK_GTC--Garlic.ttf");
 +
}
 +
 
 +
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
 +
 
 +
#my-nav {
 +
    position: fixed;
 +
    width: 100%;
 +
    height: fit-content;
 +
    transition: transform .5s;
 +
    z-index: 999;
 +
}
 +
 
 +
#my-nav #my-top {
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: fit-content;
 +
    transition: all .2s ease-in-out;
 +
}
 +
 
 +
#my-nav #my-top h1 {
 +
    float: left;
 +
    padding: 2rem;
 +
    font-size: 2rem;
 +
    color: #fff;
 +
    transition: all .25s;
 +
    line-height: normal !important;
 +
    filter: drop-shadow(1px 1px 0px#000);
 +
}
 +
 
 +
 
 +
#my-nav #nav-button {
 +
    transition: all .25s;
 +
    float: right;
 +
    margin: 1rem;
 +
    padding: .5rem;
 +
    filter: drop-shadow(1px 1px 0px#000);
 +
}
 +
 
 +
#my-nav #nav-button:hover {
 +
    cursor: pointer;
 +
    height: 3rem;
 +
}
 +
 
 +
#my-nav #nav-button line {
 +
    stroke: rgb(255, 255, 255);
 +
     transition: all .5s;
 +
    stroke-width: 2px;
 +
}
 +
 
 +
#my-nav #nav-button:hover line {
 +
    stroke: #eeeeee;
 +
}
 +
 
 +
#my-nav #back-button {
 +
    width: fit-content;
 +
}
 +
 
 +
#my-nav #back-button:hover {
 +
    cursor: pointer;
 +
}
 +
 
 +
#my-nav .inline {
 +
    display: inline;
 +
}
 +
 
 +
#my-nav .inline h1 {
 +
    padding-right: 0 !important;
 +
}
 +
 
 +
#my-nav #my-nav.logo {
 +
    width: 6rem;
 +
    height: 6rem;
 +
}
 +
 
 +
#my-nav #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;
 +
}
 +
 
 +
#my-nav #popup a {
 +
    width: 100%;
 +
    height: 100%;
 +
    text-decoration: none;
 +
    font-family: "Raleway", sans-serif;
 +
     color: #4f4f4f;
 +
    font-weight: 200;
 +
    transition: all .25s;
 +
}
 +
 
 +
#my-nav #popup li {
 +
    transition: all .25s;
 +
}
 +
 
 +
#my-nav #popup li:hover {
 +
    cursor: pointer;
 +
    color: #f4f4f4;
 +
    background-color: #1BA784;
 +
    font-weight: 400;
 +
}
 +
 
 +
#my-nav #popup li:hover a {
 +
    color: #f4f4f4;
 +
    font-weight: 400;
 +
}
 +
 
 +
 
 +
#my-nav #current-page {
 +
    font-weight: bold;
 +
}
 +
 
 +
#my-nav #popup nav,
 +
#my-nav #popup ul,
 +
#my-nav #popup li {
 +
     list-style: none;
 +
    margin: 0 !important;
 +
}
 +
 
 +
#my-nav #popup li {
 +
    list-style: none;
 +
    padding: .5rem 1rem;
 +
    margin: 0 !important;
 +
    font-size: 1.8rem !important;
 +
}
 +
 
 +
#my-nav #popup h1 {
 +
    padding: 1rem 0;
 +
    font-size: 2.5rem !important;
 +
}
 +
 
 +
#my-nav .navShow {
 +
    transform: translateX(0%) !important;
 +
    opacity: 1 !important;
 +
}
 +
 
 +
#my-nav .inactive {
 +
    display: none;
 +
}
 +
 
 +
#my-nav .show {
 +
    transition: opacity .25s;
 +
    opacity: 1;
 +
}
 +
 
 +
#my-nav .fade-out {
 +
    transition: opacity .25s;
 +
    opacity: 0 !important;
 +
}
 +
 
 +
#my-nav .rotate {
 +
    transform: rotate(90deg);
 +
}
 +
 
 +
#my-top.onscroll {
 +
    background-color: #2a4150;
 +
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 +
}
 +
 
 +
#my-top.onscroll a h1 {
 +
    color: #fff !important;
 +
    filter: none !important;
 +
    font-size: 1rem !important;
 +
    padding: 1rem !important;
 +
}
 +
 
 +
#my-top.onscroll #nav-button line {
 +
    stroke: #fff !important;
 +
}
 +
 
 +
#my-top.onscroll #nav-button {
 +
    filter: none !important;
 +
    height: 2rem ;
 +
    padding: 0rem !important;
 +
    margin: .5rem !important;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
html {
 +
    scroll-behavior: smooth;
 +
}
 +
 
 +
html,
 +
body {
 +
    background-color: #f4f4f4;
 +
}
 +
 
 +
body {
 +
    position: absolute;
 +
    width: 100%;
 +
}
 +
 
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5 {
 +
    font-family: "Montserrat", sans-serif !important;
 +
    padding: 0;
 +
    line-height: normal !important;
 +
    margin: 0 !important;
 +
}
 +
 
 +
p {
 +
    font-family: "Open Sans", sans-serif !important;
 +
    color: #f4f4f4;
 +
}
 +
 
 +
#my-global-wrapper {
 +
    width: 100%;
 +
    height: max-content;
 +
    font-family: 'Raleway', serif !important;
 +
}
 +
 
 +
#welcome {
 +
    position: relative;
 +
    height: 100vh;
 +
    width: 100%;
 +
    font-size: 6rem;
 +
    background-color: #93D5DC;
 +
    background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png");
 +
    background-size: 100% 100%;
 +
    background-position: center;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 
 +
.welcome-center {
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
}
 +
 
 +
#welcome .left {
 +
    position: relative;
 +
}
 +
 
 +
#welcome .left h1 {
 +
    font-family: "Monastic" !important;
 +
    color: #000 !important;
 +
    font-size: 6rem;
 +
    padding: 1rem;
 +
    letter-spacing: 1rem;
 +
    overflow: visible;
 +
    margin: 0;
 +
}
 +
 
 +
#welcome .left .bar {
 +
    height: .6rem;
 +
    width: 60%;
 +
    margin: auto;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
    text-align: left;
 +
}
 +
 
 +
#welcome .left .bar .leftcolor {
 +
    width: 110%;
 +
    height: 100%;
 +
    background-color: #8dc6fc;
 +
    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-family: "Montserrat" !important;
 +
    font-weight: 200;
 +
    width: 100%;
 +
    padding: 1rem;
 +
    text-align: left;
 +
    margin: 0;
 +
    color: #4f4f4f !important;
 +
}
 +
 
 +
#welcome .right {
 +
    position: relative;
 +
    overflow: hidden;
 +
}
 +
 
 +
#welcome .right img {
 +
    width: 100%;
 +
    max-width: none;
 +
}
 +
 
 +
#desc {
 +
    height: 100vh;
 +
    position: relative;
 +
    background-image: url("https://static.igem.org/mediawiki/2021/d/d9/T--HK_GTC--webpage--extended.jpg");
 +
    background-size: auto 100%;
 +
    background-position: left;
 +
    background-repeat: round;
 +
}
 +
 
 +
#desc .desc-block {
 +
    position: absolute;
 +
    transform: translate(-50%, -50%);
 +
    width: 70%;
 +
    top: 50%;
 +
    left: 50%;
 +
}
 +
 
 +
#desc h1 {
 +
    font-family: 'Garlic', sans-serif !important;
 +
    color: #fff;
 +
    font-size: 3rem;
 +
    text-align: center;
 +
    width: 100%;
 +
    padding: 2rem 0;
 +
}
 +
 
 +
#desc p {
 +
    color: #fff;
 +
    font-size: 1.2rem;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
 
 +
/* bottle navigation */
 +
 
 +
#bot-nav {
 +
    height: fit-content;
 +
    display: grid;
 +
    grid-template-columns: 2fr 1fr;
 +
    background-image: url("https://static.igem.org/mediawiki/2021/b/b5/T--HK_GTC--webpage_extend_2.png");
 +
    background-size: 100% 100%;
 +
    background-position: center;
 +
    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;
 +
    width: 100%;
 +
    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 div h1 {
 +
    color: #fff;
 +
    font-size: 6rem;
 +
    margin-bottom: 2rem !important;
 +
    line-height: 7rem;
 +
}
 +
 
 +
#nav-desc-left .hap p {
 +
    font-size: 1.2rem;
 +
}
 +
 
 +
.bottle-desc {
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
 +
    padding: 1rem;
 +
    width: 70%;
 +
    transform: translate(-99rem, -99rem);
 +
    transition: opacity .5s;
 +
    opacity: 0;
 +
}
 +
 
 +
#bottle-guide h1 {
 +
    text-align: center;
 +
}
 +
 
 +
.bottle-desc p {
 +
    line-height: 1.8rem;
 +
}
 +
 
 +
.bottle-desc .img {
 +
    width: 400px;
 +
    height: 225px;
 +
    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;
 +
}
 +
 
 +
#bottle-project-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/4/4d/T--HK_GTC--res2.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
#bottle-team-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/7/73/T--HK_GTC--team_photo.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
#bottle-dl-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/6/6d/T--HK_GTC--dl_1.mp4");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
#bottle-hp-desc .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/c/c3/T--HK_GTC--cp2.jpeg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
 
 +
footer {
 +
    width: 100%;
 +
    height: fit-content;
 +
    background-color: rgb(32, 32, 32);
 +
    display: block;
 +
    clear: both;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
    color: #fff;
 +
    align-items: center;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
footer div {
 +
    padding: 2rem;
 +
}
 +
 
 +
footer div h1 {
 +
    font-size: 1rem;
 +
    color: #fff !important;
 +
    line-height: normal !important;
 +
}
 +
 
 +
footer a {
 +
    text-decoration: none;
 +
    color: white !important;
 +
}
 +
 
 +
footer p {
 +
    text-align: center !important;
 +
}
 +
 
 +
footer .icon {
 +
    padding-top: 1rem;
 +
    transition: all .5s;
 +
}
 +
 
 +
footer .icon:hover {
 +
    color: #29B7CB;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* 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;
 +
}
 +
 
 +
.hp-intro {
 +
    width: 80%;
 +
    margin: auto;
 +
    margin-top: 5rem;
 +
}
 +
 
 +
.hp-intro p {
 +
    font-size: 1.3rem !important;
 +
    text-align: center !important;
 +
    color: #4f4f4f !important;
 +
    font-style: italic;
 +
    font-weight: bold;
 +
}
 +
 
 +
.hp-intro .single-image-with-desc img {
 +
    margin-top: 3rem;
 +
    width: 80%;
 +
}
 +
 
 +
.ihp-content {
 +
    width: 70%;
 +
    margin: auto;
 +
    margin-bottom: 4rem;
 +
    margin-top: 7rem;
 +
}
 +
 
 +
.ihp-content h2 {
 +
    font-size: 2rem;
 +
    border-left: #1BA784 solid 6px;
 +
    padding: 0;
 +
    padding-left: 1rem;
 +
    line-height: normal !important;
 +
    margin: 2rem 0 !important;
 +
}
 +
 
 +
.block p{
 +
    color: #4f4f4f !important;
 +
}
 +
 
 +
.ihp-content p {
 +
    padding: 1rem;
 +
    color: #4f4f4f !important;
 +
    line-height: 2rem;
 +
}
 +
 
 +
#ihp-res .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/d/de/T--HK_GTC--ihp.prof.ngo2.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
#ihp-hp .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/4/4a/T--HK_GTC--ihp-sharing-session.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
#ihp-di .img {
 +
    background-image: url("https://static.igem.org/mediawiki/2021/b/b6/T--HK_GTC--ihp.clearbot1.hp.jpg");
 +
    background-size: cover;
 +
    background-position: center;
 +
}
 +
 
 +
 
 +
 
 +
/* Attribute and Team*/
 +
 
 +
.section-heading {
 +
    height: 230rem;
 +
}
 +
 
 +
.position {
 +
    font-size: 3rem;
 +
    text-align: center;
 +
    padding-top: 6rem;
 +
    padding-bottom: 4rem;
 +
}
 +
 
 +
.brief-team {
 +
    width: 100%;
 +
    height: 70vh;
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 
 +
.brief-team img {
 +
    width: 80%;
 +
    margin-top: 4rem;
 +
    margin: auto;
 +
    border-radius: 1rem;
 +
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 +
}
 +
 
 +
.brief-team .brief-team-right {
 +
    padding: 4rem;
 +
    text-align: left;
 +
}
 +
 
 +
.brief-team .brief-team-right h1 {
 +
    text-align: left;
 +
    font-size: 3rem;
 +
    padding-bottom: 3rem;
 +
}
 +
 
 +
.brief-team .brief-team-right p {
 +
    line-height: 2rem;
 +
    font-size: 1rem !important;
 +
    color: #4f4f4f;
 +
}
 +
 
 +
 
 +
.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;
 +
    position: relative;
 +
    overflow: hidden;
 +
}
 +
 
 +
.card-display img {
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
    object-fit: cover;
 +
    /* or object-fit: contain; */
 +
}
 +
 
 +
 
 +
 
 +
.card-display .card {
 +
    display: grid;
 +
    overflow: hidden;
 +
    position: relative;
 +
    width: 70%;
 +
    margin: auto;
 +
    grid-template-rows: 8fr 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-name {
 +
    padding: 1rem;
 +
    height: 100%;
 +
    z-index: 1;
 +
}
 +
 
 +
.card .mem-desc {
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #fff;
 +
    color: #000000;
 +
    line-height: 1.5rem;
 +
    z-index: 4;
 +
    opacity: 0;
 +
    transition: opacity .2s;
 +
}
 +
 
 +
.card .mem-desc:hover {
 +
    opacity: .8;
 +
}
 +
 
 +
.card .mem-desc:hover p {
 +
    opacity: 1;
 +
}
 +
 
 +
.card .mem-desc p {
 +
    width: 80%;
 +
    font-size: 1rem !important;
 +
    margin: auto;
 +
    position: absolute;
 +
    top: 50%;
 +
    left: 50%;
 +
    transform: translate(-50%, -50%);
 +
    color: #4f4f4f;
 +
}
 +
 
 +
.card.leader .mem-name h1 {
 +
    color: #fff !important;
 +
}
 +
 
 +
 
 +
.card-display h1 {
 +
    margin-bottom: 1rem;
 +
    text-align: center;
 +
    margin-bottom: 0;
 +
    padding: 1rem;
 +
    font-size: 2rem;
 +
    line-height: normal !important;
 +
}
 +
 
 +
.card-display p {
 +
    text-align: center;
 +
}
 +
 
 +
.card-display .leader {
 +
    background-color: #1BA784;
 +
    height: 60vh;
 +
    width: 70%;
 +
    color: #fff;
 +
    margin: auto;
 +
}
 +
 
 +
.card-display .leader h1{
 +
    font-size: 1rem;
 +
}
 +
 
 +
.card.pi {
 +
    grid-template-rows: 1fr;
 +
    grid-template-columns: 1fr 2.5fr;
 +
    width: 90%;
 +
    height: 100%;
 +
}
 +
 
 +
.card.pi .mem-name-pi {
 +
    padding: 7rem 4rem;
 +
}
 +
 
 +
.card.pi .mem-name-pi * {
 +
    text-align: start;
 +
    padding: 1rem;
 +
}
 +
 
 +
.card.pi .mem-name-pi h1 {
 +
    font-size: 2rem;
 +
}
 +
 
 +
.card.pi .mem-name-pi p {
 +
    font-size: 1rem !important;
 +
    line-height: 1.5rem;
 +
    color: #4f4f4f;
 +
}
 +
 
 +
 
 +
.card-display.sub-leader {
 +
    grid-template-columns: 1fr 1fr 1fr;
 +
}
 +
 
 +
.card-display.sub-leader .card {
 +
    grid-template-rows: 8r 1fr;
 +
    height: 60vh;
 +
    width: 80%;
 +
}
 +
 
 +
.card-display.sub-leader .card .mem-name h1 {
 +
    font-size: 1rem !important;
 +
    line-height: normal !important;
 +
}
 +
 
 +
 
 +
.card-display.member {
 +
    display: grid;
 +
    grid-template-columns: 1fr 1fr 1fr 1fr;
 +
    gap: 0;
 +
    width: 90%;
 +
}
 +
 
 +
.card-display.member .card {
 +
    grid-template-columns: 1fr;
 +
    grid-template-rows: 8fr 1fr;
 +
    height: 60vh;
 +
    width: 80%;
 +
}
 +
 
 +
.card-display.member .card .mem-name h1 {
 +
    font-size: 1rem;
 +
    margin: 0%;
 +
    text-align: center;
 +
}
 +
 
 +
.card-display.small-cards {
 +
    display: block;
 +
}
 +
 
 +
.card-display.small-cards .card {
 +
    display: block;
 +
    background-color: #fff;
 +
    width: 60%;
 +
    height: fit-content;
 +
    border-radius: 2rem;
 +
}
 +
 
 +
.card-display.small-cards .card .mem-name {
 +
    padding: 1rem;
 +
}
 +
 
 +
.card-display.small-cards .card .mem-name h1 {
 +
    text-align: start;
 +
    font-size: 1.5rem;
 +
}
 +
 
 +
.card-display.small-cards .card .desc p {
 +
    text-align: start;
 +
    padding: 2rem;
 +
    color: #4f4f4f;
 +
}
 +
 
 +
.card-display.small-cards-2 {
 +
    grid-template-columns: 1fr 1fr;
 +
}
 +
 
 +
.card-display.small-cards-2 .card {
 +
    display: block;
 +
    background-color: #fff;
 +
    width: 90%;
 +
    height: 17rem;
 +
    border-radius: 2rem;
 +
    display: block;
 +
    position: relative;
 +
}
 +
 
 +
.card-display.small-cards-2 .card .mem-name {
 +
    height: fit-content;
 +
    padding: 1rem;
 +
}
 +
 
 +
.card-display.small-cards-2 .card .mem-name h1 {
 +
    text-align: start;
 +
    font-size: 1.5rem !important;
 +
}
 +
 
 +
.card-display.small-cards-2 .card .desc p {
 +
    text-align: start;
 +
    padding: 2rem;
 +
    font-size: 1rem !important;
 +
    color: #4f4f4f;
 +
}
 +
 
 +
.card-display.small-cards-2 .card.with-img {
 +
    display: grid;
 +
    grid-template-columns: 1fr 2fr;
 +
}
 +
 
 +
.card-display.small-cards-2 .card.with-img .ad-desc {
 +
    height: 17rem;
 +
}
 +
 
 +
.card-display.small-cards-2 .card.with-img .img {
 +
    height: 17rem;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* Attribution */
 +
 
 +
.attri-wrapper {
 +
    width: 90%;
 +
    margin: auto;
 +
    height: fit-content;
 +
}
 +
 
 +
.attri-card {
 +
    width: 70%;
 +
    margin: auto;
 +
    display: block;
 +
    margin: 3rem auto;
 +
    border-radius: 3rem;
 +
    overflow: hidden;
 +
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
 +
}
 +
 
 +
 
 +
.attri-card .attri-content {
 +
    padding: 3rem;
 +
    background-color: #fff;
 +
}
 +
 
 +
.attri-card .attri-content h1 {
 +
    font-size: 2rem;
 +
    padding: 1rem;
 +
    color: #2a4150;
 +
    border-bottom: solid 1px #1BA784 !important;
 +
}
 +
 
 +
.attri-card .attri-content ul {
 +
    list-style: none;
 +
    padding: 1rem;
 +
}
 +
 
 +
.attri-card .attri-content ul li {
 +
    padding: .2rem 0;
 +
    font-family: "Open Sans", sans-serif;
 +
}
 +
 
 +
.attri-card .attri-content ul li::before {
 +
    content: "\2713";
 +
    color: #1BA784;
 +
    display: inline-block;
 +
    width: 1rem;
 +
}
 +
 
 +
 
 +
/* Actual WIKI Pages*/
 +
 
 +
 
 +
.to-top{
 +
    position: fixed;
 +
    bottom: 0;
 +
    right: 0;
 +
    padding: 1rem;
 +
    font-size: 3rem;
 +
    transition: transform .2s;
 +
}
 +
 
 +
.to-top a{
 +
    text-decoration: none;
 +
    color: #4f4f4f;
 +
}
 +
 
 +
.to-top:hover{
 +
    transform: translateY(-5px);
 +
}
 +
 
 +
.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 li {
 +
    list-style: none;
 +
    font-family: "Open Sans", sans-serif;
 +
    padding: .4rem;
 +
}
 +
 
 +
.section-selector a {
 +
    text-decoration: none;
 +
    color: #4f4f4f;
 +
    font-size: 1.1rem;
 +
    font-weight: 400;
 +
    line-height: .8rem;
 +
    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;
 +
    font-weight: 500;
 +
}
 +
 
 +
.right-section {
 +
    float: right;
 +
    width: 75%;
 +
    background-color: #f4f4f4;
 +
}
 +
 
 +
.section-heading {
 +
    background-color: #5d7296;
 +
    height: 50vh;
 +
    position: relative;
 +
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 +
    background-image: url("");
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position: 100%;
 +
    z-index: 2;
 +
}
 +
 
 +
.section-heading .mask {
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #2a4150;
 +
    opacity: .8;
 +
}
 +
 
 +
.section-heading h1 {
 +
    color: white;
 +
    font-size: 3rem;
 +
    position: absolute;
 +
    left: 50%;
 +
    top: 50%;
 +
    transform: translate(-50%, -50%);
 +
    z-index: 10;
 +
}
 +
 
 +
.section-wrapper {
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents {
 +
    float: right;
 +
    padding: 6rem;
 +
    width: 80%;
 +
    margin: auto;
 +
    text-align: justify;
 +
}
 +
 
 +
.section-contents-mid{
 +
    width: 80%;
 +
    margin: auto;
 +
    padding: 6rem;
 +
}
 +
 
 +
.section-contents-mid p{
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents img {
 +
    width: 100%;
 +
}
 +
 
 +
.section-contents h1{
 +
    line-height: normal !important;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin: 2rem 0 !important;
 +
    font-size: 2rem;
 +
    font-weight: bold;
 +
    padding-left: 1rem;
 +
    border-left: #2a4150 6px solid;
 +
}
 +
 
 +
.section-contents h2, .section-contents-mid h2 {
 +
    line-height: normal !important;
 +
    padding: 0;
 +
    margin: 0;
 +
    margin: 2rem 0 !important;
 +
    font-size: 2rem;
 +
    font-weight: bold;
 +
    padding-left: 1rem;
 +
    border-left: #29B7CB 6px solid;
 +
}
 +
 
 +
.section-contents h3 {
 +
    border-left: #1BA784 6px solid;
 +
    font-size: 1.2rem;
 +
    margin: 1rem 0 !important;
 +
    padding-left: 1rem;
 +
}
 +
 
 +
.section-contents h4 {
 +
    border-left: #8dc6fc 6px solid;
 +
    font-size: 1.1rem;
 +
    margin: 1rem 0 !important;
 +
    padding-left: 1rem;
 +
}
 +
 
 +
.section-contents h5 {
 +
    border-left: #c5e2db 6px solid;
 +
    font-size: 1rem;
 +
    margin: 1rem 0 !important;
 +
    padding-left: 1rem;
 +
}
 +
 
 +
.section-contents p , .section-contents-mid p{
 +
    font-size: 1.1rem !important;
 +
    line-height: 1.8rem !important;
 +
    color: #4f4f4f;
 +
    padding: 2rem 0;
 +
    overflow-wrap: break-word;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents .intro {
 +
    font-style: italic;
 +
    font-weight: bold;
 +
    line-height: 1.7rem !important;
 +
    text-align: justify;
 +
}
 +
 
 +
.section-contents ul {
 +
    font-size: 1.2rem !important;
 +
    font-family: "Raleway", sans-serif;
 +
    line-height: 1.6rem !important;
 +
    padding: 1rem;
 +
}
 +
 
 +
.section-contents video {
 +
    width: 80%;
 +
    display: block;
 +
    height: auto;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents table, th, td{
 +
    border: 2px solid #000;
 +
    border-collapse: collapse;
 +
}
 +
 
 +
.section-contents table{
 +
    margin:auto;
 +
}
 +
 
 +
.section-contents ul{
 +
    padding: 1rem;
 +
}
 +
 
 +
.section-contents li{
 +
    font-family: "Open Sans";
 +
    font-size: 1.1rem;
 +
    color: #4f4f4f;
 +
    padding-top: 1rem;
 +
}
 +
 
 +
.section-contents th,td{
 +
    padding: 1rem;
 +
}
 +
 
 +
.single-image-with-desc {
 +
    display: block;
 +
    padding: 2rem;
 +
}
 +
 
 +
 
 +
.single-image-with-desc img {
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
.single-image-with-desc p {
 +
    font-size: .8rem !important;
 +
    text-align: center !important;
 +
    padding: .5rem !important;
 +
    line-height: normal !important;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents.large-img .single-image-with-desc {
 +
    padding: 1rem 0 ;
 +
}
 +
 
 +
.section-contents.large-img .single-image-with-desc img{
 +
    padding: 0;
 +
    width: 100%;
 +
}
 +
 
 +
.section-contents.nb p{
 +
    padding: 0 ;
 +
}
 +
 
 +
 
 +
.two-image-with-desc {
 +
    display: block;
 +
    width: 100%;
 +
    padding: 2rem;
 +
    overflow: hidden;
 +
}
 +
 
 +
.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: .8rem !important;
 +
    text-align: center !important;
 +
    padding: .1rem !important;
 +
    line-height: 1.1rem !important;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents.exp-res .two-image-with-desc p{
 +
    text-align: start !important;
 +
}
 +
 
 +
.section-wrapper iframe.edu-mat{
 +
    width: 90%;
 +
    height: 80vh;
 +
    display: block;
 +
    padding: 4rem;
 +
    margin: auto;
 +
}
 +
 
 +
.clear {
 +
    clear: both;
 +
}
 +
 
 +
hr {
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* responsive */
 +
@media (max-width: 1400px) {
 +
    #welcome {
 +
        grid-template-columns: 1fr;
 +
        grid-template-rows: 2fr 1fr;
 
     }
 
     }
  
−
     #content {
+
     #welcome .left {
 +
        grid-row: 2/3;
 +
    }
 +
 
 +
    #welcome .left h1 {
 +
        font-size: 5rem;
 +
        padding: 0;
 +
        text-align: center;
 +
    }
 +
 
 +
    #welcome .left p {
 +
        font-size: 1.5rem;
 +
        text-align: center;
 +
        margin-left: 0;
 +
        padding: 0;
 +
        padding-top: 1rem;
 +
    }
 +
 
 +
    #welcome .right img {
 +
        height: 100%;
 +
        width: auto;
 +
        margin-top: 4rem;
 +
    }
 +
 
 +
    .bottle-desc h1 {
 +
        font-size: 4rem !important;
 +
        text-align: center;
 +
    }
 +
 
 +
    .bottle-desc p {
 +
        font-size: 1rem !important;
 +
        text-align: center;
 +
    }
 +
 
 +
    .bottle-desc .img {
 +
        margin: auto;
 +
        margin-top: 2rem;
 +
    }
 +
 
 +
    .card-display {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
    .card-display.two-card {
 +
        grid-template-columns: 1fr 1fr;
 +
    }
 +
 
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr 1fr 1fr;
 +
    }
 +
 
 +
    .card-display.member {
 +
        grid-template-columns: 1fr 1fr 1fr;
 +
    }
 +
 
 +
    .card-display.small-cards-2{
 +
        display: block;
 +
    }
 +
}
 +
 
 +
@media (max-width: 1100px) {
 +
 
 +
    .bottle-desc .img {
 +
        display: none !important;
 +
    }
 +
 
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr 1fr;
 +
    }
 +
 
 +
    .brief-team {
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
        margin-top: 2rem;
 +
    }
 +
 
 +
    .brief-team .brief-team-right h1 {
 +
        line-height: normal !important;
 +
        font-size: 2rem;
 +
    }
 +
 
 +
    .brief-team .brief-team-right p {
 +
        line-height: 1.2rem;
 +
        font-size: 1rem;
 +
    }
 +
 
 +
    .card.pi{
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
    .single-image-with-desc {
 +
        display: block;
 +
        padding: 0;
 +
    }
 +
   
 +
   
 +
    .single-image-with-desc img {
 
         width: 100%;
 
         width: 100%;
−
        padding: 0px;
+
         margin: auto;
−
         margin: -7px 0 0;
+
−
        background-color: transparent;
+
 
     }
 
     }
  
−
    /*style of body content*/
+
}
  
−
     body {
+
 
−
         margin: 0;
+
@media (max-width: 900px) {
 +
     #bot-nav {
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
    }
 +
 
 +
    #bot-nav #nav-desc-left {
 +
        display: none;
 +
    }
 +
 
 +
    .attri-card {
 +
        width: 90vw;
 +
        grid-template-columns: 1fr;
 +
        grid-template-rows: 3fr 1fr;
 +
    }
 +
 
 +
    .attri-card .right-attri h1 {
 +
        font-size: 1.2rem;
 +
    }
 +
 
 +
    .attri-card .right-attri ul li {
 +
         margin: .5rem;
 +
    }
 +
 
 +
 
 +
    .section-heading h1 {
 +
        font-size: 2rem;
 +
        text-align: center;
 +
    }
 +
 
 +
    .section-selector {
 +
        float: none;
 +
        width: 80%;
 +
        height: fit-content;
 +
        padding: 1rem;
 +
        margin-bottom: 2rem;
 +
        background-color: #e6f3f3;
 +
        margin: 1rem auto;
 +
        border-radius: 1rem;
 +
    }
 +
 
 +
    .section-selector h1 {
 +
        font-size: 1.5rem;
 +
        padding: 1rem 0;
 +
    }
 +
 
 +
    .section-selector ul {
 +
        width: 100%;
 
         padding: 0;
 
         padding: 0;
−
        background-color: #ffffff;
 
−
        color: #000000;
 
−
        font-family: 'Roboto', sans-serif;
 
−
        font-size: 100% !important;
 
 
     }
 
     }
  
−
     /*the following rulesets are used to configure the navigation bar. DO NOT EDIT.*/
+
     .section-selector ul li a {
 +
        font-size: 1rem;
 +
        font-weight: lighter;
 +
    }
  
−
     .navbar {
+
     .right-section {
−
        position: fixed;
+
 
         width: 100%;
 
         width: 100%;
−
         list-style-type: none !important;
+
         float: none;
−
         list-style-image: none !important;
+
        padding: none;
−
         margin: -8px 0 0 !important;
+
        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 h1 {
 +
        font-size: 1.7rem;
 +
        margin-left: 1rem !important;
 +
    }
 +
 
 +
    .right-section .section-contents h2 {
 +
         font-size: 1.5rem;
 +
        margin-left: 1rem !important;
 +
    }
 +
 
 +
    .right-section .section-contents p {
 +
         font-size: 1rem !important;
 +
        padding-bottom: 3.5rem;
 +
        line-height: 1.6rem !important;
 +
        width: 90%;
 +
    }
 +
 
 +
    .card.pi {
 +
        grid-template-rows: 2fr 1fr;
 +
        grid-template-columns: 1fr;
 +
        width: 90%;
 +
        height: 100vh;
 +
    }
 +
 
 +
    .card-display.member {
 +
        display: grid;
 +
        grid-template-columns: 1fr 1fr;
 +
        gap: 0;
 +
        width: 90%;
 +
    }
 +
 
 +
    .card-display.two-card {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
 
 +
    .card.pi .mem-name-pi * {
 +
        text-align: start;
 +
        padding: 1rem;
 +
    }
 +
 
 +
    .card.pi .mem-name-pi {
 +
        text-align: start;
 +
        padding: 1rem;
 +
    }
 +
 
 +
    .card.pi .mem-name-pi h1 {
 +
        font-size: 2rem;
 +
    }
 +
 
 +
    .card-display.small-cards-2 .card .desc p{
 +
        padding: 0rem 2rem;
 +
    }
 +
 
 +
    .card-display.small-cards-2 {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
}
 +
 
 +
@media (max-width: 800px) {
 +
 
 +
    .card-display.small-cards-2 .card .mem-name h1{
 +
        font-size: 1.1rem;
 +
    }
 +
 
 +
    .card-display.small-cards-2 .card{
 +
        grid-template-columns: 1fr !important;
 +
    }
 +
 
 +
    .card-display.small-cards-2 .card.with-img{
 +
        height: fit-content;
 +
        display: block;
 +
    }
 +
 
 +
    .card-display.small-cards-2 .card.with-img .ad-desc{
 +
        height: fit-content;
 +
        padding: 2rem;
 +
    }
 +
 
 +
    .card-display.small-cards-2 .card.with-img .img{
 +
        height: fit-content;
 +
    }
 +
 
 +
    .card-display.sub-leader {
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
}
 +
 
 +
@media (max-width: 600px) {
 +
 
 +
    h1 {
 +
        font-size: 2rem;
 +
    }
 +
 
 +
    #popup {
 +
        width: 100vw !important;
 
         padding: 0 !important;
 
         padding: 0 !important;
−
        background-color: #798cff;
 
−
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 
−
        z-index: 999
 
 
     }
 
     }
−
     .navButton,
+
 
−
     .dropdown {
+
     #popup #back-button {
−
         float: left;
+
        padding: 2rem !important;
 +
    }
 +
 
 +
    #popup h1 {
 +
        text-align: center;
 +
    }
 +
 
 +
    #welcome h1 {
 +
        font-size: 2.5rem;
 +
        top: 75%;
 +
     }
 +
 
 +
    header #my-nav #my-top a h1 {
 +
        font-size: 1.2rem;
 +
    }
 +
 
 +
    nav li {
 +
         text-align: center;
 +
    }
 +
 
 +
    #nav-button {
 
         cursor: pointer;
 
         cursor: pointer;
−
         user-select: none;
+
         height: 2rem !important;
−
        margin: 0;
+
 
     }
 
     }
  
−
     .navButton>a,
+
     #my-top.onscroll a h1 {
−
     .dropdownButton {
+
        font-size: .7rem !important;
−
         font-family: 'Amaranth', sans-serif;
+
     }
−
         display: block;
+
   
 +
    #my-top.onscroll #nav-button {
 +
         filter: none !important;
 +
        height: 1.5rem !important;
 +
    }
 +
   
 +
 
 +
    /* homepage */
 +
 
 +
    #welcome {
 +
        grid-template-columns: 1fr;
 +
        grid-template-rows: 2.5fr 1fr;
 +
    }
 +
 
 +
    #welcome .left {
 +
        grid-row: 2/3;
 +
    }
 +
 
 +
    #welcome .left h1 {
 +
        font-size: 1.6rem;
 +
         padding: 1rem 0;
 
         text-align: center;
 
         text-align: center;
−
         padding: 14px 16px;
+
         margin: auto;
−
        text-decoration: none;
+
−
        color: #fff;
+
−
        transition: all .2s;
+
 
     }
 
     }
  
−
     .navButton:hover,
+
     #welcome .left p {
−
    .dropdown:hover>.dropdownButton {
+
        font-size: 1rem;
−
         background-color: #ffffff;
+
        margin: 0;
 +
         text-align: center;
 
     }
 
     }
  
−
     .navButton:hover>a,
+
     #desc {
−
    .dropdown:hover>.dropdownButton {
+
         grid-template-columns: 1fr;
−
         color: #000000;
+
−
        text-decoration: none;
+
 
     }
 
     }
  
−
     .navButton:active,
+
     #desc .desc-block {
−
    .dropdownButton:active .dropdownContent>a:active {
+
         width: 80%;
−
         background-color: #ffffff;
+
 
     }
 
     }
  
−
     .navButton:active>a,
+
 
−
    .dropdownButton:active .dropdownContent>a:active {
+
 
−
         color: #000000;
+
     #desc p {
 +
        font-size: .8rem;
 +
        position: relative;
 +
        text-align: center;
 +
        width: 100%;
 +
         margin: auto;
 +
        top: 0;
 +
        left: 0%;
 +
        transform: translate(0);
 
     }
 
     }
  
−
     .dropdown>.dropdownContent {
+
     #bot-nav {
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
    }
 +
 
 +
    #bot-nav #nav-desc-left {
 
         display: none;
 
         display: none;
−
        position: absolute;
 
−
        background-color: #000000;
 
−
        box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
 
 
     }
 
     }
  
−
     .dropdown:hover>.dropdownContent {
+
    /* team (Actual wiki pages*/
 +
 
 +
     .section-heading {
 +
        height: 36vh;
 +
        overflow: hidden;
 +
    }
 +
 
 +
    .two-image-with-desc {
 +
        padding: 1rem 0;
 +
    }
 +
 
 +
    .two-image-with-desc .im-group{
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
    .brief-team .brief-team-right{
 +
        padding: 2rem;
 +
        text-align: justify;
 +
    }
 +
 
 +
    .brief-team .brief-team-right h1{
 +
        text-align: center;
 +
    }
 +
 
 +
    .position {
 +
        font-size: 2rem;
 +
        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;
 +
    }
 +
 
 +
    .card .mem-name {
 +
        padding: 1rem;
 +
    }
 +
 
 +
    .card-display h1 {
 +
        margin-bottom: 1rem;
 +
        text-align: center;
 +
        margin-bottom: 0;
 +
        padding: 1rem;
 +
        font-size: 1.5rem;
 +
    }
 +
 
 +
    .card-display .card .mem-desc p {
 +
        text-align: justify;
 +
        font-size: .8rem !important;
 +
        line-height: normal;
 +
    }
 +
 
 +
    .card.leader {
 +
        height: 70vh;
 +
        width: 100%;
 +
    }
 +
 
 +
    .card-display.sub-leader .card {
 +
        grid-template-rows: 9fr 1fr;
 +
        width: 80%;
 +
    }
 +
 
 +
    .card-display.member{
 +
        grid-template-columns: 1fr;
 +
    }
 +
 
 +
    .card.pi{
 +
        height: fit-content;
 
         display: block;
 
         display: block;
 
     }
 
     }
  
 +
    .card.pi .img{
 +
        height: fit-content;
 +
        position: relative;
 +
    }
  
−
     .dropdownContent>a {
+
     .card.pi .mem-name-pi{
−
        font-family: 'Amaranth', sans-serif;
+
−
        color: #ffffff;
+
−
        padding: 12px 16px;
+
−
        text-decoration: none;
+
 
         display: block;
 
         display: block;
−
        text-align: left;
 
−
        transition: all .2s;
 
 
     }
 
     }
  
−
     .dropdownContent>a:hover {
+
     .card.pi .mem-name-pi h1{
−
         background-color: #ffffff;
+
         font-size: 1.3rem;
−
        color: #000000;
+
−
        text-decoration: none;
+
 
     }
 
     }
  
 +
    .card.pi .mem-name-pi p{
 +
        font-size: .8rem !important;
 +
    }
  
−
     blockquote {
+
 
−
        margin: 15px 45px;
+
     .card-display.small-cards .card {
−
        font-size: 19px !important;
+
         width: 90%;
−
        line-height: 1.5;
+
−
         color: #ffffff;
+
 
     }
 
     }
  
−
     li {
+
     .card-display.small-cards-2 .card{
−
         color: #000000;
+
         height: 35vh;
 
     }
 
     }
  
−
     /*ruleset for collage display*/
+
     .card-display.small-cards-2 .card .mem-name h1{
 +
        font-size: 1rem !important;
 +
    }
  
−
     .collage {
+
     .card-display.small-cards-2 .card .ad-desc .mem-name{
−
        display: inline-table;
+
         padding: 1rem 0 !important;
−
         border: 3mm solid #fdfcf9 !important;
+
 
     }
 
     }
  
−
     .collage img, .collage td, .collage tr, .collage tbody{
+
     .card-display.small-cards-2 .card .ad-desc .mem-name h1{
 +
        font-size: 1rem !important;
 
         padding: 0 !important;
 
         padding: 0 !important;
−
        border: 0 !important;
 
−
        margin: 0;
 
 
     }
 
     }
−
     .formula {
+
 
−
         border: 0mm solid #fdfcf9;
+
     .card-display.small-cards-2 .card .ad-desc .desc p{
−
         margin: 1px;
+
         padding: 0 !important;
−
        box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
+
         font-size: .8rem !important;
 
     }
 
     }
  
 +
    .card-display.small-cards-2 .card .desc p{
 +
        font-size: .8rem !important;
 +
    }
 +
 +
    footer {
 +
        grid-template-columns: 1fr;
 +
        height: fit-content;
 +
    }
 +
 +
    .attri-card .attri-content ul li {
 +
        padding: .2rem 0;
 +
        font-size: 1rem !important;
 +
        line-height: normal;
 +
    }
 +
   
 +
 +
 +
    /* hp */
 +
 +
    .hp-intro p {
 +
        font-size: 1rem !important;
 +
        text-align: center !important;
 +
        font-style: italic;
 +
        font-weight: bold;
 +
    }
 +
 +
    .hp-intro .single-image-with-desc img {
 +
        margin-top: 3rem;
 +
        width: 100%;
 +
        border-radius: 1rem;
 +
    }
 +
 +
    .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%;
 +
    }
 +
 +
}
 +
 +
/*Override default ruleset*/
 +
 +
#home_logo,
 +
#sideMenu,
 +
#top_title,
 +
.patrollink {
 +
    display: none;
 +
}
 +
 +
#content {
 +
    width: 100%;
 +
    padding: 0px;
 +
    margin: -7px 0 0;
 +
    background-color: transparent;
 +
}
 +
 +
/*style of body content*/
 +
 +
body {
 +
    margin: 0;
 +
    padding: 0;
 +
    background-color: #f4f4f4;
 +
    font-size: 100% !important;
 +
}
 +
 +
#globalWrapper {
 +
    height: fit-content;
 +
    padding: 0 !important;
 +
}
  
 
</style>
 
</style>
 +
 +
 +
 +
 +
<script src="https://kit.fontawesome.com/b004fa1cf0.js" crossorigin="anonymous"></script>
 +
<script>
 +
window.onload = function () {
 +
 +
    var top = document.querySelector("#my-top");
 +
    window.addEventListener("scroll", ()=>{
 +
        top.classList.toggle("onscroll", window.scrollY > 300);
 +
    });
 +
 +
    //original navigation
 +
    var backAvaliable = false;
 +
    var navbutton = document.querySelector("#nav-button");
 +
    var navbar = document.getElementById("popup");
 +
    var backbutton = document.getElementById("back-button");
 +
    var main_items = document.querySelector("#main");
 +
 +
    function smoothTransition(id){
 +
        main_items.classList.add("fade-out");
 +
        document.querySelector(id).classList.remove("inactive");
 +
        setTimeout(function() {
 +
            main_items.classList.add("inactive");
 +
            document.querySelector(id).classList.remove("fade-out");
 +
            document.querySelector(id).classList.add("show");
 +
        }, 250);
 +
        backAvaliable = true;
 +
    }
 +
 +
    function resetNav(){
 +
        document.querySelector("#team").classList.add("fade-out");
 +
        document.querySelector("#project").classList.add("fade-out");
 +
        document.querySelector("#human-practice").classList.add("fade-out");
 +
        setTimeout(function() {
 +
            main_items.classList.remove("inactive");
 +
            document.querySelector("#team").classList.add("inactive");
 +
            document.querySelector("#project").classList.add("inactive");
 +
            document.querySelector("#human-practice").classList.add("inactive");
 +
            main_items.classList.remove("fade-out");
 +
            main_items.classList.add("show");
 +
        }, 250);
 +
        backAvaliable = false;
 +
    }
 +
 +
    navbutton.addEventListener("click", e => {
 +
        navbar.classList.add("navShow");
 +
        navbutton.classList.add("rotate");
 +
    });
 +
    backbutton.addEventListener("click", e => {
 +
        if(backAvaliable){
 +
            resetNav();
 +
        }else{
 +
            navbar.classList.remove("navShow");
 +
            navbutton.classList.remove("rotate");
 +
        }
 +
    });
 +
 +
    for(var i = 0; i < main_items.children.length; i++){
 +
        main_items.children[i].addEventListener("click", e =>{
 +
            switch (e.target.textContent) {
 +
                case "Team":
 +
                    smoothTransition("#team");
 +
                    break;
 +
                case "Project":
 +
                    smoothTransition("#project");
 +
                    break;
 +
                case "Human Practice":
 +
                    smoothTransition("#human-practice");
 +
                    break;
 +
            }
 +
        });
 +
    };
 +
 +
    //bottle navigation
 +
 +
    //i know
 +
    var bot_buttons = [
 +
        document.querySelector("#bot-team"),
 +
        document.querySelector("#bot-project"),
 +
        document.querySelector("#bot-part"),
 +
        document.querySelector("#bot-safety"),
 +
        document.querySelector("#bot-dl"),
 +
        document.querySelector("#bot-hp"),
 +
        document.querySelector("#bot-home")
 +
    ]
 +
 +
    var bot_im = {
 +
        "bot" : document.querySelector("#bot-im"),
 +
        // "bot-team" : document.querySelector("#bot-team-im"),
 +
        // "bot-project" : document.querySelector("#bot-project-im"),
 +
        // "bot-part" : document.querySelector("#bot-part-im"),
 +
        // "bot-safety" : document.querySelector("#bot-safe-im"),
 +
        // "bot-dl" : document.querySelector("#bot-dl-im"),
 +
        // "bot-hp" : document.querySelector("#bot-hp-im"),
 +
        // "bot-home" : document.querySelector("#bot-home-im"),
 +
    }
 +
 +
    //showing the descriptions
 +
    for(var i = 0; i < Object.keys(bot_buttons).length; i++){
 +
        bot_buttons[i].addEventListener("mouseover", e => {
 +
            console.log(e.target.parentElement.parentElement.parentElement.id);
 +
            switch (e.target.parentElement.parentElement.parentElement.id) {
 +
                case "bot-team":
 +
                    console.log(":D");
 +
                    document.getElementById("bottle-team-desc").classList.add("current-desc");
 +
                    break;
 +
                case "bot-project":
 +
                    document.getElementById("bottle-project-desc").classList.add("current-desc");
 +
                    break;
 +
                case "bot-safety":
 +
                    document.getElementById("bottle-safety-desc").classList.add("current-desc");
 +
                    break;
 +
                case "bot-part":
 +
                    document.getElementById("bottle-parts-desc").classList.add("current-desc");
 +
                    break;
 +
                case "bot-hp":
 +
                    document.getElementById("bottle-hp-desc").classList.add("current-desc");
 +
                    break; 
 +
                case "bot-dl":
 +
                    document.getElementById("bottle-dl-desc").classList.add("current-desc");
 +
                    break;
 +
                default:
 +
                    break;
 +
            }
 +
            document.getElementById("bottle-guide").classList.remove("current-desc");
 +
        });
 +
 +
        bot_buttons[i].addEventListener("mouseout", e => {
 +
            switch (e.target.parentElement.parentElement.parentElement.id) {
 +
                case "bot-team":
 +
                    console.log(":D");
 +
                    document.getElementById("bottle-team-desc").classList.remove("current-desc");
 +
                    break;
 +
                case "bot-project":
 +
                    document.getElementById("bottle-project-desc").classList.remove("current-desc");
 +
                    break;
 +
                case "bot-safety":
 +
                    document.getElementById("bottle-safety-desc").classList.remove("current-desc");
 +
                    break;
 +
                case "bot-part":
 +
                    document.getElementById("bottle-parts-desc").classList.remove("current-desc");
 +
                    break;
 +
                case "bot-hp":
 +
                    document.getElementById("bottle-hp-desc").classList.remove("current-desc");
 +
                    break; 
 +
                case "bot-dl":
 +
                    document.getElementById("bottle-dl-desc").classList.remove("current-desc");
 +
                    break;
 +
                default:
 +
                    break;
 +
            }
 +
            document.getElementById("bottle-guide").classList.add("current-desc");
 +
        });
 +
    }
 +
   
 +
    //bottle effects
 +
    document.querySelectorAll(".bot-button").forEach(e=>{
 +
        e.addEventListener("mouseover", e=> {
 +
            bot_im["bot"].classList.add("darken");
 +
        });
 +
    });
 +
 +
    document.querySelectorAll(".bot-button").forEach(e=>{
 +
        e.addEventListener("mouseout", e=> {
 +
            bot_im["bot"].classList.remove("darken");
 +
        });
 +
    });
 +
   
 +
};
 +
</script>
  
 
</html>
 
</html>

Latest revision as of 09:39, 21 October 2021

HK_GTC 2021 Homepage