|
|
Line 1: |
Line 1: |
− | <html>
| |
− | <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");
| |
− | }
| |
− |
| |
− | #my-global-wrapper{
| |
− | width: 100%;
| |
− | height: max-content;
| |
− | font-family: 'Raleway', serif !important;
| |
− | }
| |
− |
| |
− | /* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
| |
− |
| |
− | html{
| |
− | scroll-behavior: smooth;
| |
− | }
| |
− |
| |
− | html, body{
| |
− | background-color: #f4f4f4;
| |
− | height: 100vw;
| |
− | }
| |
− |
| |
− | #my-nav{
| |
− | position: fixed;
| |
− | width: 100%;
| |
− | height: 10vh;
| |
− | transition: transform .5s;
| |
− | z-index: 3;
| |
− | }
| |
− |
| |
− | #top{
| |
− | position: absolute;
| |
− | top:0;
| |
− | left:0;
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | }
| |
− |
| |
− | #top h1{
| |
− | float: left;
| |
− | padding:2rem;
| |
− | font-size: 2rem;
| |
− | color: #fff;
| |
− | }
| |
− | #nav-button{
| |
− | transition: all .25s;
| |
− | float: right;
| |
− | padding: 2rem;
| |
− | }
| |
− |
| |
− | #nav-button:hover{
| |
− | cursor: pointer;
| |
− | height:3rem;
| |
− | }
| |
− |
| |
− | #nav-button line{
| |
− | stroke: #fff;
| |
− | transition: all .5s;
| |
− | }
| |
− |
| |
− | #nav-button:hover line{
| |
− | stroke: #eeeeee;
| |
− | }
| |
− |
| |
− | #back-button{
| |
− | width: fit-content;
| |
− | }
| |
− |
| |
− | #back-button:hover{
| |
− | cursor: pointer;
| |
− | }
| |
− |
| |
− | .inline{
| |
− | display: inline;
| |
− | }
| |
− |
| |
− | .inline h1{
| |
− | padding-right: 0 !important;
| |
− | }
| |
− |
| |
− | .logo{
| |
− | width: 6rem;
| |
− | height: 6rem;
| |
− | }
| |
− |
| |
− | #popup{
| |
− | position: fixed;
| |
− | width:25%;
| |
− | height:100%;
| |
− | right:0;
| |
− | transform: translateX(100%);
| |
− | padding: 2.5rem;
| |
− | background-color: #ffffff;
| |
− | font-size: 2rem;
| |
− | font-weight: 200;
| |
− | transition: all .5s;
| |
− | opacity: 0;
| |
− | color: #4f4f4f !important;
| |
− | }
| |
− |
| |
− | #popup a{
| |
− | width: 100%;
| |
− | height: 100%;
| |
− | text-decoration: none;
| |
− | color:#4f4f4f;
| |
− | font-weight: 200;
| |
− | transition: all .25s;
| |
− | }
| |
− |
| |
− | #popup li{
| |
− | transition: all .25s;
| |
− | }
| |
− |
| |
− | #popup li:hover{
| |
− | cursor: pointer;
| |
− | color: #f4f4f4;
| |
− | background-color: #1BA784;
| |
− | font-weight: 400;
| |
− | }
| |
− |
| |
− | #popup li:hover a{
| |
− | color: #f4f4f4;
| |
− | font-weight: 400;
| |
− | }
| |
− |
| |
− |
| |
− | #current-page{
| |
− | font-weight: bold;
| |
− | }
| |
− |
| |
− | #popup nav,ul,li{
| |
− | list-style-type: none;
| |
− | width: 100%;
| |
− | padding: .6rem;
| |
− | }
| |
− |
| |
− | #popup h1 {
| |
− | padding: .6rem
| |
− | }
| |
− |
| |
− | .navShow{
| |
− | transform: translateX(0%) !important;
| |
− | opacity: 1 !important;
| |
− | }
| |
− |
| |
− | .inactive{
| |
− | display:none;
| |
− | }
| |
− |
| |
− | .show{
| |
− | transition: opacity .25s;
| |
− | opacity: 1;
| |
− | }
| |
− |
| |
− | .fade-out{
| |
− | transition: opacity .25s;
| |
− | opacity : 0 !important;
| |
− | }
| |
− |
| |
− | .rotate{
| |
− | transform: rotate(90deg);
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | #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%;
| |
− | }
| |
− |
| |
− | }
| |
− | </style>
| |
− |
| |
− | </html>
| |