Jonas232005 (Talk | contribs) |
Jonas232005 (Talk | contribs) |
||
(147 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="https://2021.igem.org/Team:HK_GTC"> | <a href="https://2021.igem.org/Team:HK_GTC"> | ||
<h1>HK_GTC</h1> | <h1>HK_GTC</h1> | ||
Line 47: | Line 47: | ||
<ul> | <ul> | ||
<li id="current-page"> | <li id="current-page"> | ||
− | <a href=" | + | <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> | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Deep_learning">Deep Learning</a></li> |
− | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
Line 61: | Line 60: | ||
<h1>Team</h1> | <h1>Team</h1> | ||
<ul> | <ul> | ||
− | <li><a href="../ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Team">Team Members</a></li> |
− | <li><a href="../ | + | <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="../ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Description">Description</a></li> |
− | <li><a href="../ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Engineering">Engineering Success</a></li> |
− | <li><a href="../ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Proof_Of_Concept">Proof of Concept</a></li> |
− | <li><a href="../ | + | <li><a href="https://2021.igem.org/Team:HK_GTC/Notebook">Notebook</a></li> |
− | <li><a href="../ | + | <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=" | + | <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 & | + | <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 105: | Line 109: | ||
font-family: "Monastic"; | font-family: "Monastic"; | ||
src: url("https://static.igem.org/mediawiki/2021/8/83/T--HK_GTC--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: | + | height: fit-content; |
transition: transform .5s; | transition: transform .5s; | ||
− | z-index: | + | 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: | + | 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; | 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: | + | 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: | + | 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 189: | 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 210: | Line 226: | ||
} | } | ||
− | #my-nav #popup li:hover a{ | + | #my-nav #popup li:hover a { |
color: #f4f4f4; | color: #f4f4f4; | ||
font-weight: 400; | font-weight: 400; | ||
Line 216: | Line 232: | ||
− | #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; | list-style: none; | ||
− | padding: . | + | 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 { | #my-nav #popup h1 { | ||
− | padding: . | + | 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: | + | h3, |
+ | h4, | ||
+ | h5 { | ||
+ | font-family: "Montserrat", sans-serif !important; | ||
+ | padding: 0; | ||
+ | line-height: normal !important; | ||
+ | margin: 0 !important; | ||
} | } | ||
− | p{ | + | p { |
− | font-family: " | + | 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 284: | Line 341: | ||
} | } | ||
− | #welcome{ | + | #welcome { |
position: relative; | position: relative; | ||
height: 100vh; | height: 100vh; | ||
Line 291: | Line 348: | ||
background-color: #93D5DC; | background-color: #93D5DC; | ||
background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png"); | background-image: url("https://static.igem.org/mediawiki/2021/e/e3/T--HK_GTC--welcome_background.png"); | ||
− | background- | + | background-size: 100% 100%; |
+ | background-position: center; | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
} | } | ||
− | + | .welcome-center { | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
top: 50%; | top: 50%; | ||
Line 314: | Line 361: | ||
} | } | ||
− | #welcome .left{ | + | #welcome .left { |
− | + | ||
position: relative; | position: relative; | ||
} | } | ||
− | #welcome .left h1{ | + | #welcome .left h1 { |
font-family: "Monastic" !important; | 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 336: | Line 384: | ||
} | } | ||
− | #welcome .left .bar .leftcolor{ | + | #welcome .left .bar .leftcolor { |
width: 110%; | width: 110%; | ||
height: 100%; | height: 100%; | ||
− | background-color: # | + | 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 349: | 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%; | width: 100%; | ||
padding: 1rem; | padding: 1rem; | ||
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%; | |
− | + | max-width: none; | |
− | + | ||
} | } | ||
− | #desc{ | + | #desc { |
height: 100vh; | height: 100vh; | ||
position: relative; | position: relative; | ||
− | background: | + | background-image: url("https://static.igem.org/mediawiki/2021/d/d9/T--HK_GTC--webpage--extended.jpg"); |
− | background | + | background-size: auto 100%; |
+ | background-position: left; | ||
+ | background-repeat: round; | ||
} | } | ||
− | #desc | + | #desc .desc-block { |
− | + | ||
− | + | ||
position: absolute; | position: absolute; | ||
− | + | transform: translate(-50%, -50%); | |
− | top: | + | width: 70%; |
+ | top: 50%; | ||
left: 50%; | left: 50%; | ||
− | |||
} | } | ||
− | #desc | + | #desc h1 { |
+ | font-family: 'Garlic', sans-serif !important; | ||
color: #fff; | color: #fff; | ||
− | font-size: | + | font-size: 3rem; |
− | + | text-align: center; | |
+ | width: 100%; | ||
+ | padding: 2rem 0; | ||
+ | } | ||
+ | |||
+ | #desc p { | ||
+ | color: #fff; | ||
+ | font-size: 1.2rem; | ||
text-align: center; | text-align: center; | ||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 399: | Line 454: | ||
/* bottle navigation */ | /* bottle navigation */ | ||
− | #bot-nav{ | + | #bot-nav { |
− | height: | + | height: fit-content; |
display: grid; | display: grid; | ||
grid-template-columns: 2fr 1fr; | grid-template-columns: 2fr 1fr; | ||
− | background | + | 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 421: | 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 439: | 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 459: | 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 470: | 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 481: | 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 492: | 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 503: | 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 514: | 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 525: | 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 551: | 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(99rem, | + | 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: | + | height: 225px; |
margin-top: 3rem; | margin-top: 3rem; | ||
margin-left: 1rem; | margin-left: 1rem; | ||
Line 583: | 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: | + | height: fit-content; |
− | background-color: | + | background-color: rgb(32, 32, 32); |
display: block; | display: block; | ||
clear: both; | clear: both; | ||
Line 605: | Line 693: | ||
− | footer div{ | + | footer div { |
− | padding: | + | 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 620: | Line 733: | ||
display: grid; | display: grid; | ||
grid-template-columns: 1.2fr 1fr; | grid-template-columns: 1.2fr 1fr; | ||
− | + | } | |
− | + | .block2 { | |
height: 60vh; | height: 60vh; | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1.2fr; | grid-template-columns: 1fr 1.2fr; | ||
− | + | } | |
− | + | .block .block-left { | |
width: 100%; | width: 100%; | ||
position: relative; | position: relative; | ||
− | + | } | |
− | + | .block .block-left .wrapper { | |
width: 60%; | width: 60%; | ||
position: absolute; | position: absolute; | ||
Line 639: | Line 752: | ||
left: 50%; | left: 50%; | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
− | + | } | |
− | + | .block .block-left .wrapper h1 { | |
font-size: 3rem; | font-size: 3rem; | ||
− | padding:1rem; | + | padding: 1rem; |
− | + | } | |
− | + | .block .block-left .wrapper p { | |
− | padding:1rem; | + | padding: 1rem; |
line-height: 1.7rem; | line-height: 1.7rem; | ||
− | + | } | |
− | + | ||
− | + | .learn-more { | |
width: 100%; | width: 100%; | ||
position: relative; | position: relative; | ||
− | + | } | |
− | + | .learn-more a { | |
position: absolute; | position: absolute; | ||
font-weight: 900; | font-weight: 900; | ||
Line 664: | Line 777: | ||
color: #4f4f4f; | color: #4f4f4f; | ||
transition: all .1s; | transition: all .1s; | ||
− | + | } | |
− | + | .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 { | |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
− | + | } | |
− | + | .block-right .wrapper { | |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
− | + | } | |
− | + | .block-right .img { | |
width: 70%; | width: 70%; | ||
height: 60%; | height: 60%; | ||
Line 694: | 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: | + | font-size: 3rem; |
text-align: center; | text-align: center; | ||
padding-top: 6rem; | padding-top: 6rem; | ||
Line 709: | 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 718: | 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; | ||
− | + | 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: | + | grid-template-rows: 8fr 1fr; |
margin-bottom: 3rem; | margin-bottom: 3rem; | ||
background-color: #ffffff; | background-color: #ffffff; | ||
Line 741: | Line 964: | ||
} | } | ||
− | .card .mem- | + | .card .mem-name { |
− | padding: | + | 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 751: | 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: | + | 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 769: | Line 1,038: | ||
} | } | ||
− | .card.pi .mem- | + | .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- | + | .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: | + | 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 798: | Line 1,247: | ||
padding-left: 2rem; | padding-left: 2rem; | ||
float: left; | float: left; | ||
− | + | } | |
− | + | ||
− | + | .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 { | |
width: 80%; | width: 80%; | ||
margin: auto; | margin: auto; | ||
padding: 1rem; | padding: 1rem; | ||
− | + | } | |
− | + | ||
− | + | .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: | + | font-weight: 400; |
+ | line-height: .8rem; | ||
transition: all .1s; | transition: all .1s; | ||
− | + | } | |
− | + | ||
− | + | .section-selector li:hover { | |
transition: all .1s; | transition: all .1s; | ||
− | + | } | |
− | + | ||
− | + | .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 { | |
color: #fff; | color: #fff; | ||
− | + | font-weight: 500; | |
− | + | } | |
− | + | ||
+ | .right-section { | ||
float: right; | float: right; | ||
width: 75%; | width: 75%; | ||
background-color: #f4f4f4; | background-color: #f4f4f4; | ||
− | + | } | |
− | + | ||
− | + | .section-heading { | |
− | background-color: # | + | background-color: #5d7296; |
− | height: | + | 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(" | + | background-image: url(""); |
− | background-repeat:no-repeat; | + | background-repeat: no-repeat; |
− | background-size: | + | background-size: cover; |
− | background- | + | background-position: 100%; |
z-index: 2; | z-index: 2; | ||
− | + | } | |
− | + | ||
− | + | .section-heading .mask { | |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
− | background-color: # | + | background-color: #2a4150; |
− | opacity: . | + | opacity: .8; |
− | + | } | |
− | + | ||
− | + | .section-heading h1 { | |
color: white; | color: white; | ||
font-size: 3rem; | font-size: 3rem; | ||
Line 867: | Line 1,324: | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
z-index: 10; | z-index: 10; | ||
− | + | } | |
− | + | ||
− | + | .section-wrapper { | |
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .section-contents { | ||
float: right; | float: right; | ||
padding: 6rem; | 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-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 h3 { | |
+ | border-left: #1BA784 6px solid; | ||
font-size: 1.2rem; | font-size: 1.2rem; | ||
− | padding: | + | 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; | display: block; | ||
− | + | height: auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
margin: auto; | margin: auto; | ||
− | + | } | |
− | + | ||
− | + | .section-contents table, th, td{ | |
− | font-size: 1rem; | + | 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; | 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%; | ||
− | + | } | |
− | + | ||
− | + | .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 { | |
width: 90%; | 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; | ||
+ | } | ||
Line 943: | Line 1,545: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | |||
+ | /* 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; | ||
− | |||
} | } | ||
+ | |||
+ | .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: | + | width: 100vw !important; |
+ | padding: 0 !important; | ||
} | } | ||
− | # | + | #popup #back-button { |
− | + | padding: 2rem !important; | |
− | + | ||
} | } | ||
− | + | #popup h1 { | |
text-align: center; | text-align: center; | ||
} | } | ||
− | #nav- | + | #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{ | + | #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: | + | 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- | + | grid-template-columns: 1fr; |
− | + | ||
} | } | ||
− | #desc | + | #desc .desc-block { |
− | + | width: 80%; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | #desc p{ | + | |
− | font-size: | + | |
+ | |||
+ | #desc p { | ||
+ | font-size: .8rem; | ||
position: relative; | position: relative; | ||
text-align: center; | text-align: center; | ||
− | width: | + | width: 100%; |
− | margin:auto; | + | margin: auto; |
top: 0; | top: 0; | ||
left: 0%; | left: 0%; | ||
Line 1,054: | 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,065: | Line 1,926: | ||
/* team (Actual wiki pages*/ | /* team (Actual wiki pages*/ | ||
− | .section-heading{ | + | .section-heading { |
− | height: | + | height: 36vh; |
overflow: hidden; | overflow: hidden; | ||
} | } | ||
− | + | ||
− | .position{ | + | .two-image-with-desc { |
− | font-size: | + | 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,084: | 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; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
− | .card .mem- | + | .card .mem-name { |
padding: 1rem; | padding: 1rem; | ||
} | } | ||
− | + | ||
− | .card-display h1{ | + | .card-display h1 { |
margin-bottom: 1rem; | margin-bottom: 1rem; | ||
text-align: center; | text-align: center; | ||
Line 1,120: | Line 1,985: | ||
font-size: 1.5rem; | font-size: 1.5rem; | ||
} | } | ||
− | + | ||
− | .card-display p{ | + | .card-display .card .mem-desc p { |
− | text-align: | + | text-align: justify; |
− | font-size: . | + | font-size: .8rem !important; |
+ | line-height: normal; | ||
} | } | ||
− | + | ||
− | .card.leader{ | + | .card.leader { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
height: 70vh; | height: 70vh; | ||
+ | width: 100%; | ||
} | } | ||
− | + | ||
− | .card. | + | .card-display.sub-leader .card { |
− | grid-template-rows: | + | grid-template-rows: 9fr 1fr; |
− | + | width: 80%; | |
− | width: | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | ||
− | + | .card-display.member{ | |
− | .card-display. | + | |
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
} | } | ||
− | + | ||
− | .card | + | .card.pi{ |
− | + | height: fit-content; | |
− | + | display: block; | |
} | } | ||
− | + | .card.pi .img{ | |
− | + | ||
height: fit-content; | height: fit-content; | ||
+ | position: relative; | ||
} | } | ||
− | . | + | .card.pi .mem-name-pi{ |
− | + | display: block; | |
− | + | ||
} | } | ||
− | . | + | .card.pi .mem-name-pi h1{ |
− | + | font-size: 1.3rem; | |
+ | } | ||
+ | |||
+ | .card.pi .mem-name-pi p{ | ||
+ | font-size: .8rem !important; | ||
+ | } | ||
+ | |||
+ | |||
+ | .card-display.small-cards .card { | ||
width: 90%; | width: 90%; | ||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | .card-display.small-cards-2 .card{ |
− | + | height: 35vh; | |
} | } | ||
− | . | + | .card-display.small-cards-2 .card .mem-name h1{ |
− | + | font-size: 1rem !important; | |
− | + | ||
} | } | ||
− | . | + | .card-display.small-cards-2 .card .ad-desc .mem-name{ |
− | + | padding: 1rem 0 !important; | |
} | } | ||
− | . | + | .card-display.small-cards-2 .card .ad-desc .mem-name h1{ |
− | + | font-size: 1rem !important; | |
− | + | padding: 0 !important; | |
− | padding: | + | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .card-display.small-cards-2 .card .ad-desc .desc p{ |
− | + | padding: 0 !important; | |
+ | 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 */ | ||
− | .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,228: | 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,244: | Line 2,110: | ||
} | } | ||
− | .block img{ | + | .block img { |
display: none; | display: none; | ||
} | } | ||
− | hr{ | + | hr { |
width: 80%; | width: 80%; | ||
} | } | ||
Line 1,275: | Line 2,141: | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
− | background-color: # | + | background-color: #f4f4f4; |
− | + | ||
− | + | ||
font-size: 100% !important; | font-size: 100% !important; | ||
} | } | ||
− | |||
+ | #globalWrapper { | ||
+ | height: fit-content; | ||
+ | padding: 0 !important; | ||
+ | } | ||
+ | </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,378: | 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); | + | console.log(e.target.parentElement.parentElement.parentElement.id); |
− | switch (e.target.parentElement.id) { | + | switch (e.target.parentElement.parentElement.parentElement.id) { |
case "bot-team": | case "bot-team": | ||
console.log(":D"); | console.log(":D"); | ||
Line 1,406: | 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,423: | 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": | 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