Jonas232005 (Talk | contribs) |
Jonas232005 (Talk | contribs) |
||
Line 4: | Line 4: | ||
</header> | </header> | ||
<style> | <style> | ||
+ | *{ | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | outline: 0; | ||
+ | font-size: 100%; | ||
+ | vertical-align: baseline; | ||
+ | background: transparent; | ||
+ | } | ||
+ | |||
+ | header{ | ||
+ | font-family: 'Raleway', serif !important; | ||
+ | } | ||
+ | |||
+ | @font-face { | ||
+ | font-family: "Monastic"; | ||
+ | src: url("../fonts/Monastic.ttf"); | ||
+ | } | ||
+ | |||
+ | /* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */ | ||
+ | |||
+ | #my-nav{ | ||
+ | position: fixed; | ||
+ | width: 100%; | ||
+ | height: 10vh; | ||
+ | transition: transform .5s; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | #my-nav #top{ | ||
+ | position: absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #my-nav #top h1{ | ||
+ | float: left; | ||
+ | padding:2rem; | ||
+ | font-size: 2rem; | ||
+ | color: #fff; | ||
+ | } | ||
+ | #my-nav #nav-button{ | ||
+ | transition: all .25s; | ||
+ | float: right; | ||
+ | padding: 2rem; | ||
+ | } | ||
+ | |||
+ | #my-nav #nav-button:hover{ | ||
+ | cursor: pointer; | ||
+ | height:3rem; | ||
+ | } | ||
+ | |||
+ | #my-nav #nav-button line{ | ||
+ | stroke: #fff; | ||
+ | transition: all .5s; | ||
+ | } | ||
+ | |||
+ | #my-nav #nav-button:hover line{ | ||
+ | stroke: #eeeeee; | ||
+ | } | ||
+ | |||
+ | #my-nav #back-button{ | ||
+ | width: fit-content; | ||
+ | } | ||
+ | |||
+ | #my-nav #back-button:hover{ | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | #my-nav .inline{ | ||
+ | display: inline; | ||
+ | } | ||
+ | |||
+ | #my-nav .inline h1{ | ||
+ | padding-right: 0 !important; | ||
+ | } | ||
+ | |||
+ | #my-nav #my-nav.logo{ | ||
+ | width: 6rem; | ||
+ | height: 6rem; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup{ | ||
+ | position: fixed; | ||
+ | width:25%; | ||
+ | height:100%; | ||
+ | right:0; | ||
+ | transform: translateX(100%); | ||
+ | padding: 2.5rem; | ||
+ | background-color: #ffffff; | ||
+ | font-size: 2rem; | ||
+ | font-weight: 200; | ||
+ | transition: all .5s; | ||
+ | opacity: 0; | ||
+ | color: #4f4f4f !important; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup a{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | text-decoration: none; | ||
+ | color:#4f4f4f; | ||
+ | font-weight: 200; | ||
+ | transition: all .25s; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup li{ | ||
+ | transition: all .25s; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup li:hover{ | ||
+ | cursor: pointer; | ||
+ | color: #f4f4f4; | ||
+ | background-color: #1BA784; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup li:hover a{ | ||
+ | color: #f4f4f4; | ||
+ | font-weight: 400; | ||
+ | } | ||
+ | |||
+ | |||
+ | #my-nav #current-page{ | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup nav,#my-nav #popup ul,#my-nav #popup li{ | ||
+ | list-style-type: none; | ||
+ | width: 100%; | ||
+ | padding: .6rem; | ||
+ | } | ||
+ | |||
+ | #my-nav #popup h1 { | ||
+ | padding: .6rem | ||
+ | } | ||
+ | |||
+ | #my-nav .navShow{ | ||
+ | transform: translateX(0%) !important; | ||
+ | opacity: 1 !important; | ||
+ | } | ||
+ | |||
+ | #my-nav .inactive{ | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #my-nav .show{ | ||
+ | transition: opacity .25s; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #my-nav .fade-out{ | ||
+ | transition: opacity .25s; | ||
+ | opacity : 0 !important; | ||
+ | } | ||
+ | |||
+ | #my-nav .rotate{ | ||
+ | transform: rotate(90deg); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | html{ | ||
+ | scroll-behavior: smooth; | ||
+ | } | ||
+ | |||
+ | html, body{ | ||
+ | background-color: #f4f4f4; | ||
+ | } | ||
+ | |||
+ | body{ | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | #my-global-wrapper{ | ||
+ | width: 100%; | ||
+ | height: max-content; | ||
+ | font-family: 'Raleway', serif !important; | ||
+ | } | ||
+ | |||
+ | #welcome{ | ||
+ | position: relative; | ||
+ | height: 100vh; | ||
+ | width: 100%; | ||
+ | font-size: 6rem; | ||
+ | background-color: #93D5DC; | ||
+ | background-image: url("../img/Main\ page\ background.png"); | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | /* #welcome h1{ | ||
+ | color: #fff; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | padding-top:300px; | ||
+ | animation-name: floaty; | ||
+ | animation-duration: 1s; | ||
+ | animation-iteration-count: infinite; | ||
+ | animation-timing-function:cubic-bezier(0.59, 0.01, 0.4, 0.93); | ||
+ | } */ | ||
+ | |||
+ | .center{ | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | #welcome .left{ | ||
+ | padding: 4rem; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #welcome .left h1{ | ||
+ | font-family: "Monastic"; | ||
+ | font-size: 6rem; | ||
+ | padding: 1rem; | ||
+ | letter-spacing: 1rem; | ||
+ | } | ||
+ | |||
+ | #welcome .left .bar{ | ||
+ | height: .6rem; | ||
+ | width: 60%; | ||
+ | margin: auto; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | #welcome .left .bar .leftcolor{ | ||
+ | width: 110%; | ||
+ | height: 100%; | ||
+ | background-color: #71aada; | ||
+ | clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); | ||
+ | } | ||
+ | |||
+ | #welcome .left .bar .rightcolor{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #cee5f7; | ||
+ | } | ||
+ | |||
+ | #welcome .left p{ | ||
+ | font-size: 2.5rem; | ||
+ | font-weight: 200; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | |||
+ | #welcome .right{ | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #welcome .right img{ | ||
+ | width: 100%; | ||
+ | max-width: none; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #desc{ | ||
+ | height: 100vh; | ||
+ | position: relative; | ||
+ | background: rgb(2,0,36); | ||
+ | background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(206,238,245,1) 0%, rgb(81, 105, 141) 0%, rgba(206,238,245,1) 100%); | ||
+ | } | ||
+ | |||
+ | #desc h1{ | ||
+ | color: #fff; | ||
+ | font-size: 3rem; | ||
+ | position: absolute; | ||
+ | top: 40%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | #desc p{ | ||
+ | color: #fff; | ||
+ | font-size: 1.5rem; | ||
+ | position: absolute; | ||
+ | width: 60%; | ||
+ | top: 60%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* bottle navigation */ | ||
+ | |||
+ | #bot-nav{ | ||
+ | height: 100vh; | ||
+ | display: grid; | ||
+ | grid-template-columns: 2fr 1fr; | ||
+ | background: linear-gradient(0deg,rgb(2,0,36) 0%, rgb(81, 105, 141) 100%); | ||
+ | color:#f4f4f4; | ||
+ | } | ||
+ | |||
+ | #nav-desc-left{ | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #nav-right{ | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #the-bottle{ | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | grid-template-rows: 1fr 1fr 1fr 1fr; | ||
+ | width: 215px; | ||
+ | height: 766px; | ||
+ | margin:auto; | ||
+ | margin-top: 5rem; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #the-bottle div{ | ||
+ | position:unset; | ||
+ | } | ||
+ | |||
+ | .bot-button{ | ||
+ | z-index: 3; | ||
+ | } | ||
+ | |||
+ | .bot-button .link { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .bot-button a{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #bot-im{ | ||
+ | transition: all .2s; | ||
+ | } | ||
+ | |||
+ | .darken{ | ||
+ | opacity : .7; | ||
+ | } | ||
+ | |||
+ | #bot-team{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 1/3; | ||
+ | grid-column: 1/2; | ||
+ | } | ||
+ | |||
+ | #bot-team:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-project{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 1/3; | ||
+ | grid-column: 3/4; | ||
+ | } | ||
+ | |||
+ | #bot-project:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-part{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 3/4; | ||
+ | grid-column: 1/2; | ||
+ | } | ||
+ | |||
+ | #bot-part:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-safety{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 3/4; | ||
+ | grid-column: 3/4; | ||
+ | } | ||
+ | |||
+ | #bot-safety:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-dl{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 4/5; | ||
+ | grid-column: 1/2; | ||
+ | } | ||
+ | |||
+ | #bot-dl:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-hp{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 4/5; | ||
+ | grid-column: 3/4; | ||
+ | } | ||
+ | |||
+ | #bot-hp:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #bot-home{ | ||
+ | opacity: 0; | ||
+ | transition: opacity .4s; | ||
+ | grid-row: 2/4; | ||
+ | grid-column: 2/3; | ||
+ | } | ||
+ | |||
+ | #bot-home:hover{ | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | #the-bottle img{ | ||
+ | position: absolute; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | |||
+ | .showable{ | ||
+ | position: absolute; | ||
+ | pointer-events: none; | ||
+ | left: 0; | ||
+ | top:0; | ||
+ | } | ||
+ | |||
+ | .bot-button{ | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | #nav-desc-left .hap { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | #nav-desc-left .hap h1{ | ||
+ | font-size: 6rem; | ||
+ | margin-bottom: 2rem; | ||
+ | } | ||
+ | |||
+ | #nav-desc-left .hap p{ | ||
+ | font-size: 1.2rem; | ||
+ | } | ||
+ | |||
+ | .bottle-desc{ | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | padding:1rem; | ||
+ | width: 70%; | ||
+ | transform: translate(0,-100rem); | ||
+ | transition: opacity .5s; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .bottle-desc .img{ | ||
+ | width: 400px; | ||
+ | height: 300px; | ||
+ | margin-top: 3rem; | ||
+ | margin-left: 1rem; | ||
+ | background-color: #acacac; | ||
+ | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; | ||
+ | border-radius: 1rem; | ||
+ | } | ||
+ | |||
+ | .current-desc{ | ||
+ | transform: translate(-50%, -50%); | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | footer { | ||
+ | width: 100%; | ||
+ | height: 8rem; | ||
+ | background-color: #222222; | ||
+ | display: block; | ||
+ | clear: both; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | color: #fff; | ||
+ | align-items: center; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | footer div{ | ||
+ | padding:1rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* Section Landing Page */ | ||
+ | .block1 { | ||
+ | height: 60vh; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1.2fr 1fr; | ||
+ | } | ||
+ | |||
+ | .block2 { | ||
+ | height: 60vh; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1.2fr; | ||
+ | } | ||
+ | |||
+ | .block .block-left { | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .block .block-left .wrapper{ | ||
+ | width: 60%; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | } | ||
+ | |||
+ | .block .block-left .wrapper h1 { | ||
+ | font-size: 3rem; | ||
+ | padding:1rem; | ||
+ | } | ||
+ | |||
+ | .block .block-left .wrapper p { | ||
+ | padding:1rem; | ||
+ | line-height: 1.7rem; | ||
+ | } | ||
+ | |||
+ | .learn-more{ | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .learn-more a{ | ||
+ | position: absolute; | ||
+ | font-weight: 900; | ||
+ | right: 0; | ||
+ | padding: .5rem; | ||
+ | text-decoration: none; | ||
+ | color: #4f4f4f; | ||
+ | transition: all .1s; | ||
+ | } | ||
+ | |||
+ | .learn-more a:hover{ | ||
+ | border-left: #1BA784 solid 5px; | ||
+ | color: #acacac; | ||
+ | transform: translateX(1rem); | ||
+ | } | ||
+ | |||
+ | .block-right{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .block-right .wrapper{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .block-right .img{ | ||
+ | width: 70%; | ||
+ | height: 60%; | ||
+ | background-color: #acacac; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; | ||
+ | border-radius: 1rem; | ||
+ | } | ||
+ | |||
+ | /* Attribute and Team*/ | ||
+ | |||
+ | .section-heading{ | ||
+ | height: 230rem; | ||
+ | } | ||
+ | |||
+ | .position{ | ||
+ | font-size: 4rem; | ||
+ | text-align: center; | ||
+ | padding-top: 6rem; | ||
+ | padding-bottom: 4rem; | ||
+ | } | ||
+ | |||
+ | .card-display{ | ||
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr; | ||
+ | row-gap: 3rem; | ||
+ | padding: 2.5rem; | ||
+ | } | ||
+ | |||
+ | .card-display.one-card{ | ||
+ | grid-template-columns: 1fr; | ||
+ | } | ||
+ | |||
+ | .card-display .img{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #f5f5f5; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | .card-display .card{ | ||
+ | display: grid; | ||
+ | overflow: hidden; | ||
+ | width: 70%; | ||
+ | margin: auto; | ||
+ | grid-template-rows: 3fr 1fr; | ||
+ | margin-bottom: 3rem; | ||
+ | background-color: #ffffff; | ||
+ | border-radius: 2.5rem; | ||
+ | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | ||
+ | } | ||
+ | |||
+ | .card .mem-desc{ | ||
+ | padding: 2rem; | ||
+ | } | ||
+ | |||
+ | .card-display h1{ | ||
+ | margin-bottom: 1rem; | ||
+ | text-align: center; | ||
+ | margin-bottom: 0; | ||
+ | padding: 1rem; | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | .card-display p{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .card-display .leader{ | ||
+ | background-color: goldenrod; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .card.pi{ | ||
+ | grid-template-rows: 1fr; | ||
+ | grid-template-columns: 1fr 2.5fr; | ||
+ | width: 90%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .card.pi .mem-desc *{ | ||
+ | text-align: start; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | |||
+ | .card.pi .mem-desc h1{ | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | .card-display.sub-leader{ | ||
+ | grid-template-columns: 1fr 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | .card-display.sub-leader .card{ | ||
+ | grid-template-rows: 1.5fr 1fr; | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Actual WIKI Pages*/ | ||
+ | |||
+ | |||
+ | .section-selector{ | ||
+ | height: 100%; | ||
+ | width: 20%; | ||
+ | padding-top: 8rem; | ||
+ | padding-left: 2rem; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | .section-selector h1{ | ||
+ | padding-left: 1rem; | ||
+ | font-size: 1.5rem; | ||
+ | margin-bottom: 1rem; | ||
+ | } | ||
+ | |||
+ | .section-selector ul{ | ||
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | |||
+ | .section-selector a{ | ||
+ | text-decoration: none; | ||
+ | color: #4f4f4f; | ||
+ | font-size: 1.1rem; | ||
+ | font-weight: bold; | ||
+ | transition: all .1s; | ||
+ | } | ||
+ | |||
+ | .section-selector li:hover{ | ||
+ | transition: all .1s; | ||
+ | } | ||
+ | |||
+ | .section-selector li:hover{ | ||
+ | border-left: #29B7CB 5px; | ||
+ | border-left-style: solid; | ||
+ | background-color: #cbeff3; | ||
+ | } | ||
+ | |||
+ | .section-selector li:hover a{ | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | .right-section{ | ||
+ | float: right; | ||
+ | width: 75%; | ||
+ | background-color: #f4f4f4; | ||
+ | } | ||
+ | |||
+ | .section-heading{ | ||
+ | background-color: #4f4f4f; | ||
+ | height: 30rem; | ||
+ | position: relative; | ||
+ | box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; | ||
+ | background-image: url("../img/_MG_0041.JPG"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-size: 100%; | ||
+ | background-attachment: fixed; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | .section-heading .mask{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #4f4f4f; | ||
+ | opacity: .5; | ||
+ | } | ||
+ | |||
+ | .section-heading h1{ | ||
+ | color: white; | ||
+ | font-size: 3rem; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .section-contents{ | ||
+ | float: right; | ||
+ | padding: 6rem; | ||
+ | } | ||
+ | |||
+ | .section-contents h2{ | ||
+ | font-size: 2rem; | ||
+ | font-weight: bold; | ||
+ | padding-left: 1rem; | ||
+ | border-left: #29B7CB 6px solid; | ||
+ | } | ||
+ | |||
+ | .section-contents p{ | ||
+ | font-size: 1.2rem; | ||
+ | padding: 4rem; | ||
+ | } | ||
+ | |||
+ | .single-image-with-desc{ | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | |||
+ | .single-image-with-desc img{ | ||
+ | width: 60%; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .single-image-with-desc p{ | ||
+ | font-size: 1rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .two-image-with-desc{ | ||
+ | display: block; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .two-image-with-desc .im-group{ | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr 1fr; | ||
+ | } | ||
+ | |||
+ | .two-image-with-desc .im-group img{ | ||
+ | width: 90%; | ||
+ | } | ||
+ | |||
+ | .two-image-with-desc p{ | ||
+ | font-size: 1rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /* responsive */ | ||
+ | |||
+ | @keyframes floaty{ | ||
+ | 0%{ | ||
+ | transform: translateY(0px); | ||
+ | } | ||
+ | 50%{ | ||
+ | transform: translateY(10px); | ||
+ | } | ||
+ | 100%{ | ||
+ | transform: translateY(0px); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (max-width: 600px) { | ||
+ | |||
+ | h1{ | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | #popup{ | ||
+ | width: 85%; | ||
+ | } | ||
+ | |||
+ | #welcome h1{ | ||
+ | font-size: 2.5rem; | ||
+ | top:75%; | ||
+ | } | ||
+ | |||
+ | nav li{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #nav-button{ | ||
+ | height:2.3rem; | ||
+ | } | ||
+ | |||
+ | #nav-button{ | ||
+ | cursor: pointer; | ||
+ | height :2rem !important; | ||
+ | } | ||
+ | |||
+ | /* homepage */ | ||
+ | |||
+ | #welcome{ | ||
+ | grid-template-columns: 1fr; | ||
+ | grid-template-rows: 2.5fr 1fr; | ||
+ | } | ||
+ | |||
+ | #welcome .left{ | ||
+ | grid-row: 2/3; | ||
+ | } | ||
+ | |||
+ | #welcome .left h1{ | ||
+ | font-size: 2rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #welcome .left p{ | ||
+ | font-size: 1rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #desc{ | ||
+ | grid-column: 1fr; | ||
+ | |||
+ | } | ||
+ | |||
+ | #desc h1{ | ||
+ | font-size: 2rem; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | #desc p{ | ||
+ | font-size: 1rem; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | width: 90%; | ||
+ | margin-left: 0; | ||
+ | } | ||
+ | |||
+ | #bot-nav{ | ||
+ | grid-template-columns: 1fr; | ||
+ | height: fit-content; | ||
+ | } | ||
+ | |||
+ | #bot-nav #nav-desc-left{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | /* team (Actual wiki pages*/ | ||
+ | |||
+ | .section-heading{ | ||
+ | height: 15rem; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .position{ | ||
+ | font-size: 4rem; | ||
+ | text-align: center; | ||
+ | padding-top: 6rem; | ||
+ | padding-bottom: 4rem; | ||
+ | } | ||
+ | |||
+ | .card-display{ | ||
+ | width: 80%; | ||
+ | margin: auto; | ||
+ | display: grid; | ||
+ | grid-template-columns: 1fr; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .card-display.one-card{ | ||
+ | grid-template-columns: 1fr; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | .card-display .img{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #f5f5f5; | ||
+ | left: 50%; | ||
+ | } | ||
+ | |||
+ | .card-display .card{ | ||
+ | display: grid; | ||
+ | overflow: hidden; | ||
+ | width: 70%; | ||
+ | margin: auto; | ||
+ | grid-template-rows: 3fr 1fr; | ||
+ | margin-bottom: 3rem; | ||
+ | background-color: #ffffff; | ||
+ | border-radius: 2.5rem; | ||
+ | box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; | ||
+ | } | ||
+ | |||
+ | .card .mem-desc{ | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | |||
+ | .card-display h1{ | ||
+ | margin-bottom: 1rem; | ||
+ | text-align: center; | ||
+ | margin-bottom: 0; | ||
+ | padding: 1rem; | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | |||
+ | .card-display p{ | ||
+ | text-align: center; | ||
+ | font-size: .9rem; | ||
+ | } | ||
+ | |||
+ | .card.leader{ | ||
+ | background-color: goldenrod; | ||
+ | color: #fff; | ||
+ | width: 100%; | ||
+ | grid-template-rows: 2fr 1fr; | ||
+ | height: 70vh; | ||
+ | } | ||
+ | |||
+ | .card.pi{ | ||
+ | grid-template-rows: 2fr 1fr; | ||
+ | grid-template-columns: 1fr; | ||
+ | width: 90%; | ||
+ | height: 150vh; | ||
+ | } | ||
+ | |||
+ | .card.pi .mem-desc *{ | ||
+ | text-align: start; | ||
+ | padding: 1rem; | ||
+ | } | ||
+ | |||
+ | .card.pi .mem-desc h1{ | ||
+ | font-size: 2rem; | ||
+ | } | ||
+ | |||
+ | |||
+ | .card-display.sub-leader{ | ||
+ | grid-template-columns: 1fr; | ||
+ | } | ||
+ | |||
+ | .card-display.sub-leader .card{ | ||
+ | grid-template-rows: 1.5fr 1fr; | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | footer{ | ||
+ | grid-template-columns: 1fr; | ||
+ | height: fit-content; | ||
+ | } | ||
+ | |||
+ | .section-heading h1{ | ||
+ | font-size: 2rem; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .section-selector{ | ||
+ | float: none; | ||
+ | width: 90%; | ||
+ | height: 40vh; | ||
+ | padding: 1rem; | ||
+ | margin-bottom: 2rem; | ||
+ | } | ||
+ | |||
+ | .section-selector h1{ | ||
+ | font-size: 1.5rem; | ||
+ | } | ||
+ | |||
+ | .section-selector ul{ | ||
+ | width: 100%; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .section-selector ul li a{ | ||
+ | font-size: 1rem; | ||
+ | } | ||
+ | |||
+ | .right-section{ | ||
+ | width: 100%; | ||
+ | float: none; | ||
+ | padding: none; | ||
+ | height: fit-content; | ||
+ | margin-bottom: 5rem; | ||
+ | } | ||
+ | |||
+ | .right-section *{ | ||
+ | margin-bottom: 1rem; | ||
+ | } | ||
+ | |||
+ | .right-section .section-contents { | ||
+ | width: 100%; | ||
+ | padding:0; | ||
+ | float:none; | ||
+ | } | ||
+ | |||
+ | .right-section .section-contents h2{ | ||
+ | font-size: 2rem; | ||
+ | margin-left: 1rem; | ||
+ | } | ||
+ | |||
+ | .right-section .section-contents p{ | ||
+ | font-size: 1rem; | ||
+ | padding: 1rem; | ||
+ | width: 90%; | ||
+ | } | ||
+ | |||
+ | /* hp */ | ||
+ | |||
+ | .block{ | ||
+ | display: block; | ||
+ | height: fit-content; | ||
+ | padding: 2rem; | ||
+ | } | ||
+ | |||
+ | .block-left,.block-right{ | ||
+ | height: fit-content; | ||
+ | } | ||
+ | |||
+ | .learn-more{ | ||
+ | height: 3rem; | ||
+ | } | ||
+ | |||
+ | .block .wrapper{ | ||
+ | width: 90% !important; | ||
+ | position: relative !important; | ||
+ | transform: translate(0) !important; | ||
+ | top: 0 !important; | ||
+ | left: 0 !important; | ||
+ | } | ||
+ | |||
+ | .block img{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | hr{ | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | } | ||
/*Replace this with file on igem sever*/ | /*Replace this with file on igem sever*/ | ||
@import url('https://fonts.googleapis.com/css?family=Lobster'); | @import url('https://fonts.googleapis.com/css?family=Lobster'); |
Revision as of 08:13, 18 September 2021