|
|
| Line 1: |
Line 1: |
| − | <html> | + | <html></html> |
| − | <style>
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: "Monastic";
| + | |
| − | src: url("../fonts/Monastic.ttf");
| + | |
| − | }
| + | |
| − | | + | |
| − | /* #93D5DC #1BA784 #55BB8A #29B7CB #5CB3CC */
| + | |
| − | | + | |
| − | html{
| + | |
| − | scroll-behavior: smooth;
| + | |
| − | }
| + | |
| − | | + | |
| − | html, body{
| + | |
| − | background-color: #f4f4f4;
| + | |
| − | font-family: 'Raleway', serif;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav{
| + | |
| − | position: fixed;
| + | |
| − | width: 100%;
| + | |
| − | height: 10%;
| + | |
| − | 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: 100%;
| + | |
| − | 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: 100%;
| + | |
| − | 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: 100%;
| + | |
| − | 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> | + | |
