Difference between revisions of "Template:HK GTC"

 
(156 intermediate revisions by 3 users not shown)
Line 14: Line 14:
 
<header>
 
<header>
 
     <nav id="my-nav">
 
     <nav id="my-nav">
−
         <div id="top">
+
         <div id="my-top">
−
             <a href="index.html">
+
             <a href="https://2021.igem.org/Team:HK_GTC">
 
                 <h1>HK_GTC</h1>
 
                 <h1>HK_GTC</h1>
 
             </a>
 
             </a>
Line 47: Line 47:
 
                 <ul>
 
                 <ul>
 
                     <li id="current-page">
 
                     <li id="current-page">
−
                         <a href="index.html">Home</a>
+
                         <a href="https://2021.igem.org/Team:HK_GTC">Home</a>
 
                     </li>
 
                     </li>
 
                     <li>Team</li>
 
                     <li>Team</li>
 
                     <li>Project</li>
 
                     <li>Project</li>
−
                     <li>Parts</li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Parts">Parts</a></li>
−
                     <li>Safety</li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Safety">Safety</a></li>
 
                     <li>Human Practice</li>
 
                     <li>Human Practice</li>
−
                     <li>Deep Learning</li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Deep_learning">Deep Learning</a></li>
−
                    <li>Awards</li>
+
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 61: Line 60:
 
                 <h1>Team</h1>
 
                 <h1>Team</h1>
 
                 <ul>
 
                 <ul>
−
                     <li><a href="../html/attributions.html">Team Members</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Team">Team Members</a></li>
−
                     <li><a href="../html/attributions.html">Attributions</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Attributions">Attributions</a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 68: Line 67:
 
                 <h1>Project</h1>
 
                 <h1>Project</h1>
 
                 <ul>
 
                 <ul>
−
                     <li><a href="../html/content-page-layout2.html">Description</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Description">Description</a></li>
−
                     <li><a href="../html/content-page-layout2.html">Design</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Engineering">Engineering Success</a></li>
−
                     <li><a href="../html/content-page-layout2.html">Notebook</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Proof_Of_Concept">Proof of Concept</a></li>
−
                     <li><a href="../html/content-page-layout1.html">Experiments and Results</a></li>
+
                    <li><a href="https://2021.igem.org/Team:HK_GTC/Notebook">Notebook</a></li>
−
                     <li><a href="../html/content-page-layout1.html">Future Perspective</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>
 
                 </ul>
 
             </div>
 
             </div>
Line 78: Line 79:
 
                 <h1>Human Practice</h1>
 
                 <h1>Human Practice</h1>
 
                 <ul>
 
                 <ul>
−
                     <li><a href="hp.html">Integrated Human Practice</a></li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Human_Practices">Integrated Human Practice</a></li>
−
                     <li>Collaborations</li>
+
                     <li><a href="https://2021.igem.org/Team:HK_GTC/Collaborations">Collaborations</a></li>
−
                     <li>Education & Engagement</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>
 
                 </ul>
 
             </div>
 
             </div>
Line 87: Line 89:
 
<style>
 
<style>
 
@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/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/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;1,300;1,500&display=swap');
 +
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
  
−
*{
+
* {
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
Line 98: Line 102:
 
}
 
}
  
−
header{
+
header {
 
     font-family: 'Raleway', sans-serif !important;
 
     font-family: 'Raleway', sans-serif !important;
 
}
 
}
Line 104: Line 108:
 
@font-face {
 
@font-face {
 
     font-family: "Monastic";
 
     font-family: "Monastic";
−
     src: url("../fonts/Monastic.ttf");
+
     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 */
 
/* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
  
−
#my-nav{
+
#my-nav {
 
     position: fixed;
 
     position: fixed;
 
     width: 100%;
 
     width: 100%;
−
     height: 10vh;
+
     height: fit-content;
 
     transition: transform .5s;
 
     transition: transform .5s;
−
     z-index: 3;
+
     z-index: 999;
 
}
 
}
  
−
#my-nav #top{
+
#my-nav #my-top {
 
     position: absolute;
 
     position: absolute;
−
     top:0;
+
     top: 0;
−
     left:0;
+
     left: 0;
 
     width: 100%;
 
     width: 100%;
−
     height: 100%;
+
     height: fit-content;
 +
    transition: all .2s ease-in-out;
 
}
 
}
  
−
#my-nav #top h1{
+
#my-nav #my-top h1 {
 
     float: left;
 
     float: left;
−
     padding:2rem;
+
     padding: 2rem;
 
     font-size: 2rem;
 
     font-size: 2rem;
 
     color: #fff;
 
     color: #fff;
 +
    transition: all .25s;
 +
    line-height: normal !important;
 +
    filter: drop-shadow(1px 1px 0px#000);
 
}
 
}
−
#my-nav #nav-button{
+
 
 +
 
 +
#my-nav #nav-button {
 
     transition: all .25s;
 
     transition: all .25s;
 
     float: right;
 
     float: right;
−
     padding: 2rem;
+
    margin: 1rem;
 +
     padding: .5rem;
 +
    filter: drop-shadow(1px 1px 0px#000);
 
}
 
}
  
−
#my-nav #nav-button:hover{
+
#my-nav #nav-button:hover {
 
     cursor: pointer;
 
     cursor: pointer;
−
     height:3rem;
+
     height: 3rem;
 
}
 
}
  
−
#my-nav #nav-button line{
+
#my-nav #nav-button line {
−
     stroke: #fff;
+
     stroke: rgb(255, 255, 255);
 
     transition: all .5s;
 
     transition: all .5s;
 +
    stroke-width: 2px;
 
}
 
}
  
−
#my-nav #nav-button:hover line{
+
#my-nav #nav-button:hover line {
 
     stroke: #eeeeee;
 
     stroke: #eeeeee;
 
}
 
}
  
−
#my-nav #back-button{
+
#my-nav #back-button {
 
     width: fit-content;
 
     width: fit-content;
 
}
 
}
  
−
#my-nav #back-button:hover{
+
#my-nav #back-button:hover {
 
     cursor: pointer;
 
     cursor: pointer;
 
}
 
}
  
−
#my-nav .inline{
+
#my-nav .inline {
 
     display: inline;
 
     display: inline;
 
}
 
}
  
−
#my-nav .inline h1{
+
#my-nav .inline h1 {
 
     padding-right: 0 !important;
 
     padding-right: 0 !important;
 
}
 
}
  
−
#my-nav #my-nav.logo{
+
#my-nav #my-nav.logo {
 
     width: 6rem;
 
     width: 6rem;
 
     height: 6rem;
 
     height: 6rem;
 
}
 
}
  
−
#my-nav #popup{
+
#my-nav #popup {
 
     position: fixed;
 
     position: fixed;
−
     width:25%;
+
     width: 25%;
−
     height:100%;
+
     height: 100%;
−
     right:0;
+
     right: 0;
 
     transform: translateX(100%);
 
     transform: translateX(100%);
 
     padding: 2.5rem;
 
     padding: 2.5rem;
Line 187: Line 205:
 
}
 
}
  
−
#my-nav #popup a{
+
#my-nav #popup a {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     text-decoration: none;
 
     text-decoration: none;
 
     font-family: "Raleway", sans-serif;
 
     font-family: "Raleway", sans-serif;
−
     color:#4f4f4f;
+
     color: #4f4f4f;
 
     font-weight: 200;
 
     font-weight: 200;
 
     transition: all .25s;
 
     transition: all .25s;
 
}
 
}
  
−
#my-nav #popup li{
+
#my-nav #popup li {
 
     transition: all .25s;
 
     transition: all .25s;
 
}
 
}
  
−
#my-nav #popup li:hover{
+
#my-nav #popup li:hover {
 
     cursor: pointer;
 
     cursor: pointer;
 
     color: #f4f4f4;
 
     color: #f4f4f4;
Line 208: Line 226:
 
}
 
}
  
−
#my-nav #popup li:hover a{
+
#my-nav #popup li:hover a {
 
     color: #f4f4f4;
 
     color: #f4f4f4;
 
     font-weight: 400;
 
     font-weight: 400;
−
 
 
}
 
}
  
  
−
#my-nav #current-page{
+
#my-nav #current-page {
 
     font-weight: bold;
 
     font-weight: bold;
 
}
 
}
  
−
#my-nav #popup nav,#my-nav #popup ul,#my-nav #popup li{
+
#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;
 
     list-style: none;
−
     padding: .2rem;
+
     padding: .5rem 1rem;
 +
    margin: 0 !important;
 +
    font-size: 1.8rem !important;
 
}
 
}
  
 
#my-nav #popup h1 {
 
#my-nav #popup h1 {
−
     padding: .6rem
+
     padding: 1rem 0;
 +
    font-size: 2.5rem !important;
 
}
 
}
  
−
#my-nav .navShow{
+
#my-nav .navShow {
 
     transform: translateX(0%) !important;
 
     transform: translateX(0%) !important;
 
     opacity: 1 !important;
 
     opacity: 1 !important;
 
}
 
}
  
−
#my-nav .inactive{
+
#my-nav .inactive {
−
     display:none;
+
     display: none;
 
}
 
}
  
−
#my-nav .show{
+
#my-nav .show {
 
     transition: opacity .25s;
 
     transition: opacity .25s;
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#my-nav .fade-out{
+
#my-nav .fade-out {
 
     transition: opacity .25s;
 
     transition: opacity .25s;
−
     opacity : 0 !important;
+
     opacity: 0 !important;
 
}
 
}
  
−
#my-nav .rotate{
+
#my-nav .rotate {
 
     transform: rotate(90deg);
 
     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{
+
 
 +
 
 +
 
 +
 
 +
html {
 
     scroll-behavior: smooth;
 
     scroll-behavior: smooth;
 
}
 
}
  
−
html, body{
+
html,
 +
body {
 
     background-color: #f4f4f4;
 
     background-color: #f4f4f4;
 
}
 
}
  
−
body{
+
body {
 
     position: absolute;
 
     position: absolute;
 
     width: 100%;
 
     width: 100%;
 
}
 
}
  
−
h1,h2,h3,h4{
+
h1,
−
     font-family: "Montserrat",sans-serif !important;
+
h2,
−
     line-height: 6rem !important;
+
h3,
 +
h4,
 +
h5 {
 +
     font-family: "Montserrat", sans-serif !important;
 +
    padding: 0;
 +
     line-height: normal !important;
 +
    margin: 0 !important;
 
}
 
}
  
−
p{
+
p {
−
     font-family: "Raleway", sans-serif !important;
+
     font-family: "Open Sans", sans-serif !important;
−
}
+
    color: #f4f4f4;
 +
}  
  
−
#my-global-wrapper{
+
#my-global-wrapper {
 
     width: 100%;
 
     width: 100%;
 
     height: max-content;
 
     height: max-content;
Line 283: Line 341:
 
}
 
}
  
−
#welcome{
+
#welcome {
 
     position: relative;
 
     position: relative;
 
     height: 100vh;
 
     height: 100vh;
Line 289: Line 347:
 
     font-size: 6rem;
 
     font-size: 6rem;
 
     background-color: #93D5DC;
 
     background-color: #93D5DC;
−
     background-image: url("../img/Main\ page\ background.png");
+
     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;
 
     display: grid;
 
     grid-template-columns: 1fr 1fr;
 
     grid-template-columns: 1fr 1fr;
 
}
 
}
  
−
/* #welcome h1{
+
.welcome-center {
−
    color: #fff;
+
−
    width: 100%;
+
−
    text-align: center;
+
−
    padding-top:300px;
+
−
    animation-name: floaty;
+
−
    animation-duration: 1s;
+
−
    animation-iteration-count: infinite;
+
−
    animation-timing-function:cubic-bezier(0.59, 0.01, 0.4, 0.93);
+
−
} */
+
−
 
+
−
.center{
+
 
     position: absolute;
 
     position: absolute;
 
     top: 50%;
 
     top: 50%;
Line 312: Line 361:
 
}
 
}
  
−
#welcome .left{
+
#welcome .left {
−
    padding: 4rem;
+
 
     position: relative;
 
     position: relative;
 
}
 
}
  
−
#welcome .left h1{
+
#welcome .left h1 {
−
     font-family: "Monastic";
+
     font-family: "Monastic" !important;
 +
    color: #000 !important;
 
     font-size: 6rem;
 
     font-size: 6rem;
 
     padding: 1rem;
 
     padding: 1rem;
 
     letter-spacing: 1rem;
 
     letter-spacing: 1rem;
 
     overflow: visible;
 
     overflow: visible;
 +
    margin: 0;
 
}
 
}
  
−
#welcome .left .bar{
+
#welcome .left .bar {
 
     height: .6rem;
 
     height: .6rem;
 
     width: 60%;
 
     width: 60%;
Line 334: Line 384:
 
}
 
}
  
−
#welcome .left .bar .leftcolor{
+
#welcome .left .bar .leftcolor {
 
     width: 110%;
 
     width: 110%;
 
     height: 100%;
 
     height: 100%;
−
     background-color: #71aada;
+
     background-color: #8dc6fc;
 
     clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
 
     clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
 
}
 
}
  
−
#welcome .left .bar .rightcolor{
+
#welcome .left .bar .rightcolor {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
Line 347: Line 397:
 
}
 
}
  
−
#welcome .left p{
+
#welcome .left p {
 
     font-size: 2.5rem;
 
     font-size: 2.5rem;
 +
    font-family: "Montserrat" !important;
 
     font-weight: 200;
 
     font-weight: 200;
 +
    width: 100%;
 
     padding: 1rem;
 
     padding: 1rem;
−
    margin-left: 2rem;
 
 
     text-align: left;
 
     text-align: left;
 +
    margin: 0;
 +
    color: #4f4f4f !important;
 
}
 
}
  
−
#welcome .right{
+
#welcome .right {
 
     position: relative;
 
     position: relative;
 +
    overflow: hidden;
 
}
 
}
  
−
#welcome .right img{
+
#welcome .right img {
−
  width: 100%;
+
    width: 100%;
−
  max-width: none;
+
    max-width: none;
−
  overflow: hidden;
+
 
}
 
}
  
−
#desc{
+
#desc {
 
     height: 100vh;
 
     height: 100vh;
 
     position: relative;
 
     position: relative;
−
     background: rgb(2,0,36);
+
     background-image: url("https://static.igem.org/mediawiki/2021/d/d9/T--HK_GTC--webpage--extended.jpg");
−
     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%);
+
     background-size: auto 100%;
 +
    background-position: left;
 +
    background-repeat: round;
 
}
 
}
  
−
#desc h1{
+
#desc .desc-block {
−
    color: #fff;
+
−
    font-size: 3rem;
+
 
     position: absolute;
 
     position: absolute;
−
     font-family: 'Montserrat', sans-serif;
+
     transform: translate(-50%, -50%);
−
     top: 40%;
+
    width: 70%;
 +
     top: 50%;
 
     left: 50%;
 
     left: 50%;
−
    transform: translate(-50%, -50%);
 
 
}
 
}
  
−
#desc p{
+
#desc h1 {
 +
    font-family: 'Garlic', sans-serif !important;
 
     color: #fff;
 
     color: #fff;
−
     font-size: 1.5rem;
+
     font-size: 3rem;
−
     position: absolute;
+
     text-align: center;
 +
    width: 100%;
 +
    padding: 2rem 0;
 +
}
 +
 
 +
#desc p {
 +
    color: #fff;
 +
    font-size: 1.2rem;
 
     text-align: center;
 
     text-align: center;
−
    width: 60%;
 
−
    top: 60%;
 
−
    left: 50%;
 
−
    transform: translate(-50%, -50%);
 
 
}
 
}
  
Line 397: Line 454:
 
/* bottle navigation */
 
/* bottle navigation */
  
−
#bot-nav{
+
#bot-nav {
−
     height: 100vh;
+
     height: fit-content;
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 2fr 1fr;
 
     grid-template-columns: 2fr 1fr;
−
     background: linear-gradient(0deg,rgb(2,0,36) 0%, rgb(81, 105, 141) 100%);
+
     background-image: url("https://static.igem.org/mediawiki/2021/b/b5/T--HK_GTC--webpage_extend_2.png");
−
     color:#f4f4f4;
+
    background-size: 100% 100%;
 +
    background-position: center;
 +
     color: #f4f4f4;
 
}
 
}
  
−
#nav-desc-left{
+
#nav-desc-left {
 
     position: relative;
 
     position: relative;
 
}
 
}
  
−
#nav-right{
+
#nav-right {
 
     position: relative;
 
     position: relative;
 
}
 
}
  
−
#the-bottle{
+
#the-bottle {
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 1fr 1fr 1fr;
 
     grid-template-columns: 1fr 1fr 1fr;
Line 419: Line 478:
 
     width: 215px;
 
     width: 215px;
 
     height: 766px;
 
     height: 766px;
−
     margin:auto;
+
     margin: auto;
 
     margin-top: 5rem;
 
     margin-top: 5rem;
 
     position: relative;
 
     position: relative;
 
}
 
}
  
−
#the-bottle div{
+
#the-bottle div {
−
     position:unset;
+
     position: unset;
 
}
 
}
  
−
.bot-button{
+
.bot-button {
 
     z-index: 3;
 
     z-index: 3;
 
}
 
}
Line 437: Line 496:
 
}
 
}
  
−
.bot-button a{
+
.bot-button a {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
}
 
}
  
−
#bot-im{
+
#bot-im {
 
     transition: all .2s;
 
     transition: all .2s;
 
}
 
}
  
−
.darken{
+
.darken {
−
     opacity : .7;
+
     opacity: .7;
 
}
 
}
  
−
#bot-team{
+
#bot-team {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 457: Line 516:
 
}
 
}
  
−
#bot-team:hover{
+
#bot-team:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-project{
+
#bot-project {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 468: Line 527:
 
}
 
}
  
−
#bot-project:hover{
+
#bot-project:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-part{
+
#bot-part {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 479: Line 538:
 
}
 
}
  
−
#bot-part:hover{
+
#bot-part:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-safety{
+
#bot-safety {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 490: Line 549:
 
}
 
}
  
−
#bot-safety:hover{
+
#bot-safety:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-dl{
+
#bot-dl {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 501: Line 560:
 
}
 
}
  
−
#bot-dl:hover{
+
#bot-dl:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-hp{
+
#bot-hp {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 512: Line 571:
 
}
 
}
  
−
#bot-hp:hover{
+
#bot-hp:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#bot-home{
+
#bot-home {
 
     opacity: 0;
 
     opacity: 0;
 
     transition: opacity .4s;
 
     transition: opacity .4s;
Line 523: Line 582:
 
}
 
}
  
−
#bot-home:hover{
+
#bot-home:hover {
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
  
−
#the-bottle img{
+
#the-bottle img {
 
     position: absolute;
 
     position: absolute;
 +
    width: 100%;
 
     z-index: 0;
 
     z-index: 0;
 
}
 
}
  
−
.showable{
+
.showable {
 
     position: absolute;
 
     position: absolute;
 
     pointer-events: none;
 
     pointer-events: none;
 
     left: 0;
 
     left: 0;
−
     top:0;
+
     top: 0;
 
}
 
}
  
−
.bot-button{
+
.bot-button {
 
     z-index: 1;
 
     z-index: 1;
 
}
 
}
Line 549: Line 609:
 
}
 
}
  
−
#nav-desc-left .hap h1{
+
#nav-desc-left .hap div h1 {
 
     color: #fff;
 
     color: #fff;
 
     font-size: 6rem;
 
     font-size: 6rem;
−
     margin-bottom: 2rem;
+
     margin-bottom: 2rem !important;
 
     line-height: 7rem;
 
     line-height: 7rem;
 
}
 
}
  
−
#nav-desc-left .hap p{
+
#nav-desc-left .hap p {
 
     font-size: 1.2rem;
 
     font-size: 1.2rem;
 
}
 
}
  
−
.bottle-desc{
+
.bottle-desc {
 
     position: absolute;
 
     position: absolute;
 
     left: 50%;
 
     left: 50%;
 
     top: 50%;
 
     top: 50%;
−
     padding:1rem;
+
     padding: 1rem;
 
     width: 70%;
 
     width: 70%;
−
     transform: translate(0,-100rem);
+
     transform: translate(-99rem, -99rem);
 
     transition: opacity .5s;
 
     transition: opacity .5s;
 
     opacity: 0;
 
     opacity: 0;
 
}
 
}
  
−
.bottle-desc .img{
+
#bottle-guide h1 {
 +
    text-align: center;
 +
}
 +
 
 +
.bottle-desc p {
 +
    line-height: 1.8rem;
 +
}
 +
 
 +
.bottle-desc .img {
 
     width: 400px;
 
     width: 400px;
−
     height: 300px;
+
     height: 225px;
 
     margin-top: 3rem;
 
     margin-top: 3rem;
 
     margin-left: 1rem;
 
     margin-left: 1rem;
Line 581: Line 649:
 
}
 
}
  
−
.current-desc{
+
.current-desc {
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
 
     opacity: 1;
 
     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 {
 
footer {
 
     width: 100%;
 
     width: 100%;
−
     height: 8rem;
+
     height: fit-content;
−
     background-color: #222222;
+
     background-color: rgb(32, 32, 32);
 
     display: block;
 
     display: block;
 
     clear: both;
 
     clear: both;
Line 603: Line 693:
  
  
−
footer div{
+
footer div {
−
     padding:1rem;
+
     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;
 +
}
 +
  
  
Line 618: Line 733:
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 1.2fr 1fr;
 
     grid-template-columns: 1.2fr 1fr;
−
}
+
}
  
−
.block2 {
+
.block2 {
 
     height: 60vh;
 
     height: 60vh;
 
     display: grid;
 
     display: grid;
 
     grid-template-columns: 1fr 1.2fr;
 
     grid-template-columns: 1fr 1.2fr;
−
}
+
}
  
−
.block .block-left {
+
.block .block-left {
 
     width: 100%;
 
     width: 100%;
 
     position: relative;
 
     position: relative;
−
}
+
}
  
−
.block .block-left .wrapper{
+
.block .block-left .wrapper {
 
     width: 60%;
 
     width: 60%;
 
     position: absolute;
 
     position: absolute;
Line 637: Line 752:
 
     left: 50%;
 
     left: 50%;
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
−
}
+
}
  
−
.block .block-left .wrapper h1 {
+
.block .block-left .wrapper h1 {
 
     font-size: 3rem;
 
     font-size: 3rem;
−
     padding:1rem;
+
     padding: 1rem;
−
}
+
}
  
−
.block .block-left .wrapper p {
+
.block .block-left .wrapper p {
−
     padding:1rem;
+
     padding: 1rem;
 
     line-height: 1.7rem;
 
     line-height: 1.7rem;
−
}
+
}
−
+
 
−
.learn-more{
+
.learn-more {
 
     width: 100%;
 
     width: 100%;
 
     position: relative;
 
     position: relative;
−
}
+
}
  
−
.learn-more a{
+
.learn-more a {
 
     position: absolute;
 
     position: absolute;
 
     font-weight: 900;
 
     font-weight: 900;
Line 662: Line 777:
 
     color: #4f4f4f;
 
     color: #4f4f4f;
 
     transition: all .1s;
 
     transition: all .1s;
−
}
+
}
  
−
.learn-more a:hover{
+
.learn-more a:hover {
 
     border-left: #1BA784 solid 5px;
 
     border-left: #1BA784 solid 5px;
 
     color: #acacac;
 
     color: #acacac;
 
     transform: translateX(1rem);
 
     transform: translateX(1rem);
−
}
+
}
  
−
.block-right{
+
.block-right {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     position: relative;
 
     position: relative;
−
}
+
}
  
−
.block-right .wrapper{
+
.block-right .wrapper {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     position: relative;
 
     position: relative;
−
}
+
}
  
−
.block-right .img{
+
.block-right .img {
 
     width: 70%;
 
     width: 70%;
 
     height: 60%;
 
     height: 60%;
Line 692: Line 807:
 
     box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 
     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;
 
     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*/
 
/* Attribute and Team*/
  
−
.section-heading{
+
.section-heading {
 
     height: 230rem;
 
     height: 230rem;
 
}
 
}
  
−
.position{
+
.position {
−
     font-size: 4rem;
+
     font-size: 3rem;
 
     text-align: center;
 
     text-align: center;
 
     padding-top: 6rem;
 
     padding-top: 6rem;
Line 707: Line 887:
 
}
 
}
  
−
.card-display{
+
.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%;
 
     width: 80%;
 
     margin: auto;
 
     margin: auto;
Line 716: Line 929:
 
}
 
}
  
−
.card-display.one-card{
+
.card-display.one-card {
 
     grid-template-columns: 1fr;
 
     grid-template-columns: 1fr;
 
}
 
}
  
−
.card-display .img{
+
.card-display .img {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     background-color: #f5f5f5;
 
     background-color: #f5f5f5;
−
     left: 50%;
+
     position: relative;
 +
    overflow: hidden;
 
}
 
}
  
−
.card-display .card{
+
.card-display img {
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
    object-fit: cover;
 +
    /* or object-fit: contain; */
 +
}
 +
 
 +
 
 +
 
 +
.card-display .card {
 
     display: grid;
 
     display: grid;
 
     overflow: hidden;
 
     overflow: hidden;
 +
    position: relative;
 
     width: 70%;
 
     width: 70%;
 
     margin: auto;
 
     margin: auto;
−
     grid-template-rows: 3fr 1fr;
+
     grid-template-rows: 8fr 1fr;
 
     margin-bottom: 3rem;
 
     margin-bottom: 3rem;
 
     background-color: #ffffff;
 
     background-color: #ffffff;
Line 739: Line 964:
 
}
 
}
  
−
.card .mem-desc{
+
.card .mem-name {
−
     padding: 2rem;
+
     padding: 1rem;
 +
    height: 100%;
 +
    z-index: 1;
 
}
 
}
  
−
.card-display h1{
+
.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;
 
     margin-bottom: 1rem;
 
     text-align: center;
 
     text-align: center;
Line 749: Line 1,012:
 
     padding: 1rem;
 
     padding: 1rem;
 
     font-size: 2rem;
 
     font-size: 2rem;
 +
    line-height: normal !important;
 
}
 
}
  
−
.card-display p{
+
.card-display p {
 
     text-align: center;
 
     text-align: center;
 
}
 
}
  
−
.card-display .leader{
+
.card-display .leader {
−
     background-color: goldenrod;
+
     background-color: #1BA784;
 +
    height: 60vh;
 +
    width: 70%;
 
     color: #fff;
 
     color: #fff;
 +
    margin: auto;
 
}
 
}
  
−
.card.pi{
+
.card-display .leader h1{
 +
    font-size: 1rem;
 +
}
 +
 
 +
.card.pi {
 
     grid-template-rows: 1fr;
 
     grid-template-rows: 1fr;
 
     grid-template-columns: 1fr 2.5fr;
 
     grid-template-columns: 1fr 2.5fr;
Line 767: Line 1,038:
 
}
 
}
  
−
.card.pi .mem-desc *{
+
.card.pi .mem-name-pi {
 +
    padding: 7rem 4rem;
 +
}
 +
 
 +
.card.pi .mem-name-pi * {
 
     text-align: start;
 
     text-align: start;
 
     padding: 1rem;
 
     padding: 1rem;
 
}
 
}
  
−
.card.pi .mem-desc h1{
+
.card.pi .mem-name-pi h1 {
 
     font-size: 2rem;
 
     font-size: 2rem;
 +
}
 +
 +
.card.pi .mem-name-pi p {
 +
    font-size: 1rem !important;
 +
    line-height: 1.5rem;
 +
    color: #4f4f4f;
 
}
 
}
  
  
−
.card-display.sub-leader{
+
.card-display.sub-leader {
 
     grid-template-columns: 1fr 1fr 1fr;
 
     grid-template-columns: 1fr 1fr 1fr;
 
}
 
}
  
−
.card-display.sub-leader .card{
+
.card-display.sub-leader .card {
−
     grid-template-rows: 1.5fr 1fr;
+
     grid-template-rows: 8r 1fr;
 +
    height: 60vh;
 
     width: 80%;
 
     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*/
 
/* Actual WIKI Pages*/
−
 
  
−
.section-selector{
+
 
 +
.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%;
 
     height: 100%;
 
     width: 20%;
 
     width: 20%;
Line 796: Line 1,247:
 
     padding-left: 2rem;
 
     padding-left: 2rem;
 
     float: left;
 
     float: left;
−
}
+
}
−
+
 
−
.section-selector h1{
+
.section-selector h1 {
 
     padding-left: 1rem;
 
     padding-left: 1rem;
 
     font-size: 1.5rem;
 
     font-size: 1.5rem;
 
     margin-bottom: 1rem;
 
     margin-bottom: 1rem;
−
}
+
}
−
+
 
−
.section-selector ul{
+
.section-selector ul {
 
     width: 80%;
 
     width: 80%;
 
     margin: auto;
 
     margin: auto;
 
     padding: 1rem;
 
     padding: 1rem;
−
}
+
}
−
+
 
−
.section-selector a{
+
.section-selector li {
 +
    list-style: none;
 +
    font-family: "Open Sans", sans-serif;
 +
    padding: .4rem;
 +
}
 +
 
 +
.section-selector a {
 
     text-decoration: none;
 
     text-decoration: none;
 
     color: #4f4f4f;
 
     color: #4f4f4f;
 
     font-size: 1.1rem;
 
     font-size: 1.1rem;
−
     font-weight: bold;
+
     font-weight: 400;
 +
    line-height: .8rem;
 
     transition: all .1s;
 
     transition: all .1s;
−
}
+
}
−
+
 
−
.section-selector li:hover{
+
.section-selector li:hover {
 
     transition: all .1s;
 
     transition: all .1s;
−
}
+
}
−
+
 
−
.section-selector li:hover{
+
.section-selector li:hover {
 
     border-left: #29B7CB 5px;
 
     border-left: #29B7CB 5px;
 
     border-left-style: solid;
 
     border-left-style: solid;
 
     background-color: #cbeff3;
 
     background-color: #cbeff3;
−
}
+
}
−
+
 
−
.section-selector li:hover a{  
+
.section-selector li:hover a {
 
     color: #fff;
 
     color: #fff;
−
}
+
    font-weight: 500;
−
+
}
−
.right-section{
+
 
 +
.right-section {
 
     float: right;
 
     float: right;
 
     width: 75%;
 
     width: 75%;
 
     background-color: #f4f4f4;
 
     background-color: #f4f4f4;
−
}
+
}
−
+
 
−
.section-heading{
+
.section-heading {
−
     background-color: #4f4f4f;
+
     background-color: #5d7296;
−
     height: 30rem;
+
     height: 50vh;
 
     position: relative;
 
     position: relative;
 
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
−
     background-image: url("../img/_MG_0041.JPG");
+
     background-image: url("");
−
     background-repeat:no-repeat;
+
     background-repeat: no-repeat;
−
     background-size: 100%;
+
     background-size: cover;
−
     background-attachment: fixed;
+
     background-position: 100%;
 
     z-index: 2;
 
     z-index: 2;
−
}
+
}
−
+
 
−
.section-heading .mask{
+
.section-heading .mask {
 
     width: 100%;
 
     width: 100%;
 
     height: 100%;
 
     height: 100%;
−
     background-color: #4f4f4f;
+
     background-color: #2a4150;
−
     opacity: .5;
+
     opacity: .8;
−
}
+
}
−
+
 
−
.section-heading h1{
+
.section-heading h1 {
 
     color: white;
 
     color: white;
 
     font-size: 3rem;
 
     font-size: 3rem;
Line 865: Line 1,324:
 
     transform: translate(-50%, -50%);
 
     transform: translate(-50%, -50%);
 
     z-index: 10;
 
     z-index: 10;
−
}
+
}
−
+
 
−
.section-contents{
+
.section-wrapper {
 +
    width: 80%;
 +
    margin: auto;
 +
}
 +
 
 +
.section-contents {
 
     float: right;
 
     float: right;
 
     padding: 6rem;
 
     padding: 6rem;
−
}
+
    width: 80%;
−
+
    margin: auto;
−
.section-contents h2{
+
    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-size: 2rem;
 
     font-weight: bold;
 
     font-weight: bold;
 
     padding-left: 1rem;
 
     padding-left: 1rem;
 
     border-left: #29B7CB 6px solid;
 
     border-left: #29B7CB 6px solid;
−
}
+
}
−
+
 
−
.section-contents p{
+
.section-contents h3 {
 +
    border-left: #1BA784 6px solid;
 
     font-size: 1.2rem;
 
     font-size: 1.2rem;
−
     padding: 4rem;
+
    margin: 1rem 0 !important;
−
}
+
     padding-left: 1rem;
−
+
}
−
.single-image-with-desc{
+
 
 +
.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;
 
     display: block;
−
}
+
     height: auto;
−
+
−
+
−
.single-image-with-desc img{
+
−
     width: 60%;
+
 
     margin: auto;
 
     margin: auto;
−
}
+
}
−
+
 
−
.single-image-with-desc p{
+
.section-contents table, th, td{
−
     font-size: 1rem;
+
    border: 2px solid #000;
−
     text-align: center;
+
    border-collapse: collapse;
−
}
+
}
−
+
 
−
.two-image-with-desc{
+
.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;
 
     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%;
 
     width: 100%;
−
}
+
}
−
+
 
−
.two-image-with-desc .im-group{
+
.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;
 
     display: grid;
 
     grid-template-columns: 1fr 1fr;
 
     grid-template-columns: 1fr 1fr;
−
}
+
}
−
+
 
−
.two-image-with-desc .im-group img{
+
.two-image-with-desc .im-group img {
 
     width: 90%;
 
     width: 90%;
−
}
+
}
−
+
−
.two-image-with-desc p{
+
−
    font-size: 1rem;
+
−
    text-align: center;
+
−
}
+
−
+
−
+
  
 +
.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;
 +
}
  
  
Line 941: Line 1,545:
  
  
−
/* responsive */
 
  
−
@keyframes floaty{
 
−
    0%{
 
−
        transform: translateY(0px);
 
−
    }
 
−
    50%{
 
−
        transform: translateY(10px);
 
−
    }
 
−
    100%{
 
−
        transform: translateY(0px);
 
−
    }
 
−
}
 
  
 +
 +
/* responsive */
 
@media (max-width: 1400px) {
 
@media (max-width: 1400px) {
−
     #welcome{
+
     #welcome {
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
 
         grid-template-rows: 2fr 1fr;
 
         grid-template-rows: 2fr 1fr;
 
     }
 
     }
  
−
     #welcome .left{
+
     #welcome .left {
 
         grid-row: 2/3;
 
         grid-row: 2/3;
 
     }
 
     }
  
−
     #welcome .left h1{
+
     #welcome .left h1 {
 
         font-size: 5rem;
 
         font-size: 5rem;
 +
        padding: 0;
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
  
−
     #welcome .left p{
+
     #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%;
 +
        margin: auto;
 +
    }
 +
 
 +
}
 +
 
 +
 
 +
@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;
 
         font-size: 2rem;
 
         text-align: center;
 
         text-align: center;
−
        margin-left: 0 ;
 
 
     }
 
     }
 +
 +
    .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;
 +
    }
 +
 +
    .section-selector ul li a {
 +
        font-size: 1rem;
 +
        font-weight: lighter;
 +
    }
 +
 +
    .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 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) {
 
@media (max-width: 600px) {
  
−
     h1{
+
     h1 {
 
         font-size: 2rem;
 
         font-size: 2rem;
 
     }
 
     }
  
−
     #popup{
+
     #popup {
−
         width: 85%;
+
         width: 100vw !important;
 +
        padding: 0 !important;
 
     }
 
     }
  
−
     #welcome h1{
+
     #popup #back-button {
−
         font-size: 2.5rem;
+
         padding: 2rem !important;
−
        top:75%;
+
 
     }
 
     }
  
−
     nav li{
+
     #popup h1 {
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
  
−
     #nav-button{
+
     #welcome h1 {
−
         height:2.3rem;
+
         font-size: 2.5rem;
 +
        top: 75%;
 
     }
 
     }
  
−
     #nav-button{
+
    header #my-nav #my-top a h1 {
 +
        font-size: 1.2rem;
 +
    }
 +
 
 +
    nav li {
 +
        text-align: center;
 +
    }
 +
 
 +
     #nav-button {
 
         cursor: pointer;
 
         cursor: pointer;
−
         height :2rem !important;
+
         height: 2rem !important;
 
     }
 
     }
 +
 +
    #my-top.onscroll a h1 {
 +
        font-size: .7rem !important;
 +
    }
 +
   
 +
    #my-top.onscroll #nav-button {
 +
        filter: none !important;
 +
        height: 1.5rem !important;
 +
    }
 +
   
  
 
     /* homepage */
 
     /* homepage */
  
−
     #welcome{
+
     #welcome {
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
 
         grid-template-rows: 2.5fr 1fr;
 
         grid-template-rows: 2.5fr 1fr;
 
     }
 
     }
  
−
     #welcome .left{
+
     #welcome .left {
 
         grid-row: 2/3;
 
         grid-row: 2/3;
 
     }
 
     }
  
−
     #welcome .left h1{
+
     #welcome .left h1 {
−
         font-size: 2rem;
+
         font-size: 1.6rem;
 +
        padding: 1rem 0;
 
         text-align: center;
 
         text-align: center;
 +
        margin: auto;
 
     }
 
     }
  
−
     #welcome .left p{
+
     #welcome .left p {
 
         font-size: 1rem;
 
         font-size: 1rem;
 +
        margin: 0;
 
         text-align: center;
 
         text-align: center;
 
     }
 
     }
  
−
     #desc{
+
     #desc {
−
         grid-column: 1fr;
+
         grid-template-columns: 1fr;
−
       
+
 
     }
 
     }
  
−
     #desc h1{
+
     #desc .desc-block {
−
         font-size: 2rem;
+
         width: 80%;
−
        position: relative;
+
−
        text-align: center;
+
−
        padding: 1rem;
+
−
        padding: 11rem 0 2rem 0;
+
−
        top: 0;
+
−
        left: 0%;
+
−
        transform: translate(0);
+
 
     }
 
     }
−
     #desc p{
+
 
−
         font-size: 1rem;
+
 
 +
 
 +
     #desc p {
 +
         font-size: .8rem;
 
         position: relative;
 
         position: relative;
 
         text-align: center;
 
         text-align: center;
−
         width: 90%;
+
         width: 100%;
−
         margin:auto;
+
         margin: auto;
 
         top: 0;
 
         top: 0;
 
         left: 0%;
 
         left: 0%;
Line 1,052: Line 1,915:
 
     }
 
     }
  
−
     #bot-nav{
+
     #bot-nav {
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
 
         height: fit-content;
 
         height: fit-content;
 
     }
 
     }
  
−
     #bot-nav #nav-desc-left{
+
     #bot-nav #nav-desc-left {
 
         display: none;
 
         display: none;
 
     }
 
     }
Line 1,063: Line 1,926:
 
     /* team (Actual wiki pages*/
 
     /* team (Actual wiki pages*/
  
−
     .section-heading{
+
     .section-heading {
−
         height: 15rem;
+
         height: 36vh;
 
         overflow: hidden;
 
         overflow: hidden;
 
     }
 
     }
−
      
+
 
−
     .position{
+
     .two-image-with-desc {
−
         font-size: 4rem;
+
        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;
 
         text-align: center;
 
         padding-top: 6rem;
 
         padding-top: 6rem;
 
         padding-bottom: 4rem;
 
         padding-bottom: 4rem;
 
     }
 
     }
−
   
+
 
−
     .card-display{
+
     .card-display {
 
         width: 80%;
 
         width: 80%;
 
         margin: auto;
 
         margin: auto;
Line 1,082: Line 1,962:
 
         padding: 0;
 
         padding: 0;
 
     }
 
     }
−
   
+
 
−
     .card-display.one-card{
+
     .card-display.one-card {
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
 
         width: 100%;
 
         width: 100%;
 
     }
 
     }
−
   
+
 
−
     .card-display .img{
+
     .card-display .img {
 
         width: 100%;
 
         width: 100%;
 
         height: 100%;
 
         height: 100%;
 
         background-color: #f5f5f5;
 
         background-color: #f5f5f5;
−
        left: 50%;
 
 
     }
 
     }
−
   
+
 
−
    .card-display .card{
+
     .card .mem-name {
−
        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;
 
         padding: 1rem;
 
     }
 
     }
−
   
+
 
−
     .card-display h1{
+
     .card-display h1 {
 
         margin-bottom: 1rem;
 
         margin-bottom: 1rem;
 
         text-align: center;
 
         text-align: center;
Line 1,118: Line 1,985:
 
         font-size: 1.5rem;
 
         font-size: 1.5rem;
 
     }
 
     }
−
   
+
 
−
     .card-display p{
+
     .card-display .card .mem-desc p {
−
         text-align: center;
+
         text-align: justify;
−
         font-size: .9rem;
+
         font-size: .8rem !important;
 +
        line-height: normal;
 
     }
 
     }
−
   
+
 
−
     .card.leader{
+
     .card.leader {
−
         background-color: goldenrod;
+
         height: 70vh;
−
        color: #fff;
+
 
         width: 100%;
 
         width: 100%;
−
        grid-template-rows: 2fr 1fr;
 
−
        height: 70vh;
 
 
     }
 
     }
−
   
+
 
−
     .card.pi{
+
     .card-display.sub-leader .card {
−
         grid-template-rows: 2fr 1fr;
+
         grid-template-rows: 9fr 1fr;
−
        grid-template-columns: 1fr;
+
         width: 80%;
−
         width: 90%;
+
−
        height: 150vh;
+
 
     }
 
     }
−
   
+
 
−
    .card.pi .mem-desc *{
+
     .card-display.member{
−
        text-align: start;
+
−
        padding: 1rem;
+
−
    }
+
−
   
+
−
    .card.pi .mem-desc h1{
+
−
        font-size: 2rem;
+
−
    }
+
−
   
+
−
   
+
−
     .card-display.sub-leader{
+
 
         grid-template-columns: 1fr;
 
         grid-template-columns: 1fr;
 
     }
 
     }
−
   
+
 
−
     .card-display.sub-leader .card{
+
     .card.pi{
−
         grid-template-rows: 1.5fr 1fr;
+
         height: fit-content;
−
         width: 80%;
+
         display: block;
 
     }
 
     }
  
−
     footer{
+
     .card.pi .img{
−
        grid-template-columns: 1fr;
+
 
         height: fit-content;
 
         height: fit-content;
 +
        position: relative;
 
     }
 
     }
  
−
     .section-heading h1{
+
     .card.pi .mem-name-pi{
−
         font-size: 2rem;
+
         display: block;
−
        text-align: center;
+
 
     }
 
     }
  
−
     .section-selector{
+
     .card.pi .mem-name-pi h1{
−
         float: none;
+
         font-size: 1.3rem;
 +
    }
 +
 
 +
    .card.pi .mem-name-pi p{
 +
        font-size: .8rem !important;
 +
    }
 +
 
 +
 
 +
    .card-display.small-cards .card {
 
         width: 90%;
 
         width: 90%;
−
        height: 40vh;
 
−
        padding: 1rem;
 
−
        margin-bottom: 2rem;
 
 
     }
 
     }
  
−
     .section-selector h1{
+
     .card-display.small-cards-2 .card{
−
         font-size: 1.5rem;
+
         height: 35vh;
 
     }
 
     }
  
−
     .section-selector ul{
+
     .card-display.small-cards-2 .card .mem-name h1{
−
         width: 100%;
+
         font-size: 1rem !important;
−
        padding:0;
+
 
     }
 
     }
  
−
     .section-selector ul li a{
+
     .card-display.small-cards-2 .card .ad-desc .mem-name{
−
         font-size: 1rem;
+
         padding: 1rem 0 !important;
 
     }
 
     }
  
−
     .right-section{
+
     .card-display.small-cards-2 .card .ad-desc .mem-name h1{
−
         width: 100%;
+
         font-size: 1rem !important;
−
        float: none;
+
         padding: 0 !important;
−
         padding: none;
+
−
        height: fit-content;
+
−
        margin-bottom: 5rem;
+
 
     }
 
     }
  
−
     .right-section *{
+
     .card-display.small-cards-2 .card .ad-desc .desc p{
−
         margin-bottom: 1rem;
+
         padding: 0 !important;
 +
        font-size: .8rem !important;
 
     }
 
     }
  
−
     .right-section .section-contents {
+
     .card-display.small-cards-2 .card .desc p{
−
         width: 100%;
+
         font-size: .8rem !important;
−
        padding:0;
+
−
        float:none;
+
 
     }
 
     }
  
−
     .right-section .section-contents h2{
+
     footer {
−
         font-size: 2rem;
+
         grid-template-columns: 1fr;
−
         margin-left: 1rem;
+
         height: fit-content;
 
     }
 
     }
  
−
     .right-section .section-contents p{
+
     .attri-card .attri-content ul li {
−
         font-size: 1rem;
+
         padding: .2rem 0;
−
         padding: 1rem;
+
         font-size: 1rem !important;
−
         width: 90%;
+
         line-height: normal;
 
     }
 
     }
 +
   
 +
  
 
     /* hp */
 
     /* hp */
  
−
     .block{
+
    .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;
 
         display: block;
 
         height: fit-content;
 
         height: fit-content;
Line 1,226: Line 2,093:
 
     }
 
     }
  
−
     .block-left,.block-right{
+
     .block-left,
 +
    .block-right {
 
         height: fit-content;
 
         height: fit-content;
 
     }
 
     }
  
−
     .learn-more{
+
     .learn-more {
 
         height: 3rem;
 
         height: 3rem;
 
     }
 
     }
  
−
     .block .wrapper{
+
     .block .wrapper {
 
         width: 90% !important;
 
         width: 90% !important;
 
         position: relative !important;
 
         position: relative !important;
Line 1,242: Line 2,110:
 
     }
 
     }
  
−
     .block img{
+
     .block img {
 
         display: none;
 
         display: none;
 
     }
 
     }
  
−
     hr{
+
     hr {
 
         width: 80%;
 
         width: 80%;
 
     }
 
     }
Line 1,273: Line 2,141:
 
     margin: 0;
 
     margin: 0;
 
     padding: 0;
 
     padding: 0;
−
     background-color: #ffffff;
+
     background-color: #f4f4f4;
−
    color: #000000;
+
−
    font-family: 'Roboto', sans-serif;
+
 
     font-size: 100% !important;
 
     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>
 
<script>
 
window.onload = function () {
 
window.onload = function () {
 +
 +
    var top = document.querySelector("#my-top");
 +
    window.addEventListener("scroll", ()=>{
 +
        top.classList.toggle("onscroll", window.scrollY > 300);
 +
    });
  
 
     //original navigation
 
     //original navigation
Line 1,372: Line 2,253:
 
     for(var i = 0; i < Object.keys(bot_buttons).length; i++){
 
     for(var i = 0; i < Object.keys(bot_buttons).length; i++){
 
         bot_buttons[i].addEventListener("mouseover", e => {
 
         bot_buttons[i].addEventListener("mouseover", e => {
−
             console.log(e.target.parentElement.parentElement);
+
             console.log(e.target.parentElement.parentElement.parentElement.id);
−
             switch (e.target.parentElement.parentElement.id) {
+
             switch (e.target.parentElement.parentElement.parentElement.id) {
 
                 case "bot-team":
 
                 case "bot-team":
 
                     console.log(":D");
 
                     console.log(":D");
Line 1,400: Line 2,281:
  
 
         bot_buttons[i].addEventListener("mouseout", e => {
 
         bot_buttons[i].addEventListener("mouseout", e => {
−
             switch (e.target.parentElement.parentElement.id) {
+
             switch (e.target.parentElement.parentElement.parentElement.id) {
 
                 case "bot-team":
 
                 case "bot-team":
 
                     console.log(":D");
 
                     console.log(":D");
Line 1,417: Line 2,298:
 
                     document.getElementById("bottle-hp-desc").classList.remove("current-desc");
 
                     document.getElementById("bottle-hp-desc").classList.remove("current-desc");
 
                     break;   
 
                     break;   
−
                case "bot-dl":
 
−
                    document.getElementById("bottle-dl-desc").classList.remove("current-desc");
 
−
                    break;
 
 
                 case "bot-dl":
 
                 case "bot-dl":
 
                     document.getElementById("bottle-dl-desc").classList.remove("current-desc");
 
                     document.getElementById("bottle-dl-desc").classList.remove("current-desc");

Latest revision as of 09:39, 21 October 2021

HK_GTC 2021 Homepage