Line 26: | Line 26: | ||
max-width: 80vw; | max-width: 80vw; | ||
will-change: transform; | will-change: transform; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.introContainer #dtp-cycle svg { | .introContainer #dtp-cycle svg { | ||
Line 36: | Line 31: | ||
width: auto; | width: auto; | ||
will-change: transform; | will-change: transform; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.introContainer #dtp-cycle svg ellipse, | .introContainer #dtp-cycle svg ellipse, | ||
Line 115: | Line 105: | ||
margin: 0 auto; | margin: 0 auto; | ||
padding-bottom: 30vh; | padding-bottom: 30vh; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section { | ||
+ | width: 100vw; | ||
+ | } | ||
} | } | ||
main section h1 { | main section h1 { | ||
text-transform: uppercase; | text-transform: uppercase; | ||
font-size: 2em; | font-size: 2em; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section h1 { | ||
+ | font-size: 1.2em; | ||
+ | } | ||
} | } | ||
main section .section-title h1 { | main section .section-title h1 { | ||
Line 131: | Line 131: | ||
main section .iteration-title { | main section .iteration-title { | ||
font-family: "montserrat-black", sans-serif; | font-family: "montserrat-black", sans-serif; | ||
+ | display: grid; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .iteration-title::after { | ||
+ | content: "1 iteration"; | ||
+ | font-family: "montserrat-light", sans-serif; | ||
+ | font-size: 0.8em; | ||
+ | } | ||
} | } | ||
main section .row { | main section .row { | ||
Line 152: | Line 160: | ||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider { | ||
+ | width: 15%; | ||
+ | justify-content: initial; | ||
+ | } | ||
} | } | ||
main section .row .line-divider.nonCenter { | main section .row .line-divider.nonCenter { | ||
Line 176: | Line 190: | ||
width: 20px; | width: 20px; | ||
height: 20px; | height: 20px; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider .circle.top { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .line-divider .circle { | ||
+ | width: 8vw; | ||
+ | height: 8vw; | ||
+ | transform: translateX(55%); | ||
+ | } | ||
} | } | ||
main section .row .left { | main section .row .left { | ||
justify-content: flex-end; | justify-content: flex-end; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left { | ||
+ | background-color: #121212; | ||
+ | color: #FAFAFC; | ||
+ | width: 15%; | ||
+ | justify-content: center; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left h1 { | ||
+ | text-orientation: sideways; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .left .iteration-nr { | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .right { | ||
+ | width: 70%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .iteration-part { | ||
+ | transform: rotate(-90deg); | ||
+ | margin-block-end: 0em; | ||
+ | margin-block-start: 0em; | ||
+ | z-index: 9; | ||
+ | margin-left: 80%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .iteration-desc { | ||
+ | padding-right: 10px; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .box-mobile { | ||
+ | width: calc(7.5vw - 3.5px); | ||
+ | position: relative; | ||
+ | display: flex; | ||
+ | background-color: #121212; | ||
+ | width: 50%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | } | ||
+ | @media screen and (max-width: 767px) { | ||
+ | main section .row .mobile-divider { | ||
+ | background-color: #121212; | ||
+ | height: 90px; | ||
+ | width: calc(22.5% + 53px); | ||
+ | position: absolute; | ||
+ | left: -46px; | ||
+ | top: 63px; | ||
+ | border-radius: 33px; | ||
+ | box-sizing: border-box; | ||
+ | border: solid 7px #6281ef; | ||
+ | } | ||
} | } | ||
Revision as of 11:14, 11 October 2020
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.introContainer {
height: 100vh; width: 100%; background-color: #121212; position: fixed; z-index: 2;
} .introContainer .intro-section {
display: flex; justify-content: center; align-items: center;
} .introContainer #engineering-cycle {
height: 100%;
} .introContainer #engineering-cycle svg {
height: 70vh; width: auto; max-width: 80vw; will-change: transform;
} .introContainer #dtp-cycle svg {
height: 80vh; width: auto; will-change: transform;
} .introContainer #dtp-cycle svg ellipse, .introContainer #dtp-cycle svg tspan {
cursor: pointer;
} .introContainer svg .A {
stroke: #6281ef;
} .introContainer svg .B {
fill: #121212;
} .introContainer svg .C {
font-family: "montserrat-light", sans-serif;
} .introContainer svg .D {
font-family: "montserrat-bold", sans-serif;
} .introContainer svg .E {
fill: #fafafc;
} .introContainer svg .F {
stroke-width: 5;
} .introContainer svg .G {
font-size: 31px;
} .introContainer svg .H {
font-weight: 300;
} .introContainer svg .I {
stroke-linejoin: round;
} .introContainer svg .J {
stroke-width: 9;
} .introContainer svg .K {
fill: none;
} .introContainer svg .L {
stroke: #fafafc;
} .introContainer svg .M {
stroke-width: 3;
} .introContainer svg .N {
font-size: 38px;
}
.spacer {
height: 100vh; background-color: #121212; position: absolute; top: 100vh; width: 100vw; z-index: 1;
}
main {
height: fit-content; background-color: #fafafc; position: absolute; top: 200vh; width: 100vw; z-index: 3; font-family: "montserrat-light", sans-serif;
} main section {
display: flex; justify-content: center; flex-direction: column; align-items: center; width: 80vw; margin: 0 auto; padding-bottom: 30vh;
} @media screen and (max-width: 767px) {
main section { width: 100vw; }
} main section h1 {
text-transform: uppercase; font-size: 2em;
} @media screen and (max-width: 767px) {
main section h1 { font-size: 1.2em; }
} main section .section-title h1 {
margin-block-end: 0em;
} main section .section-title svg {
width: 100px;
} main section .section-title .right {
display: block !important;
} main section .iteration-title {
font-family: "montserrat-black", sans-serif; display: grid;
} @media screen and (max-width: 767px) {
main section .iteration-title::after { content: "1 iteration"; font-family: "montserrat-light", sans-serif; font-size: 0.8em; }
} main section .row {
display: flex; width: 100%;
} main section .row .left, main section .row .right {
display: flex; width: 40%; align-items: center; padding: 20px 0px;
} main section .row p {
margin-block-end: 0em; margin-block-start: 0em;
} main section .row .line-divider {
display: flex; width: 20%; justify-content: center; align-items: center;
} @media screen and (max-width: 767px) {
main section .row .line-divider { width: 15%; justify-content: initial; }
} main section .row .line-divider.nonCenter {
align-items: initial;
} main section .row .line-divider .line {
width: 7px; background-color: #6281ef; height: 100%;
} main section .row .line-divider .circle {
width: 35px; height: 35px; border-radius: 40px; background-color: #FFD762; position: absolute; display: flex; align-items: center; justify-content: center; font-family: "montserrat-black", sans-serif;
} main section .row .line-divider .circle.top {
margin-top: -15px; width: 20px; height: 20px;
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle.top { visibility: hidden; }
} @media screen and (max-width: 767px) {
main section .row .line-divider .circle { width: 8vw; height: 8vw; transform: translateX(55%); }
} main section .row .left {
justify-content: flex-end; text-transform: uppercase;
} @media screen and (max-width: 767px) {
main section .row .left { background-color: #121212; color: #FAFAFC; width: 15%; justify-content: center; z-index: 2; }
} @media screen and (max-width: 767px) {
main section .row .left h1 { text-orientation: sideways; }
} @media screen and (max-width: 767px) {
main section .row .left .iteration-nr { visibility: hidden; }
} @media screen and (max-width: 767px) {
main section .row .right { width: 70%; }
} @media screen and (max-width: 767px) {
main section .row .iteration-part { transform: rotate(-90deg); margin-block-end: 0em; margin-block-start: 0em; z-index: 9; margin-left: 80%; }
} @media screen and (max-width: 767px) {
main section .row .iteration-desc { padding-right: 10px; }
} @media screen and (max-width: 767px) {
main section .row .box-mobile { width: calc(7.5vw - 3.5px); position: relative; display: flex; background-color: #121212; width: 50%; height: 100%; }
} @media screen and (max-width: 767px) {
main section .row .mobile-divider { background-color: #121212; height: 90px; width: calc(22.5% + 53px); position: absolute; left: -46px; top: 63px; border-radius: 33px; box-sizing: border-box; border: solid 7px #6281ef; }
}
.milkWave svg {
margin-top: -60px;
} .milkWave svg path {
fill: #fafafc;
}