-
+ >
+
+
-
+
+
+
+
+
+
+ We’re featured on
+
NBC Nightly News!
+
+
+
+
+
+
+
+
-
-
+
);
}
diff --git a/src/components/atoms/SectionHeading.jsx b/src/components/atoms/SectionHeading.jsx
index cbbecd5..560bf5c 100644
--- a/src/components/atoms/SectionHeading.jsx
+++ b/src/components/atoms/SectionHeading.jsx
@@ -1,28 +1,16 @@
import React from 'react'
import { Box, Grid } from "@material-ui/core";
-function SectionHeading () {
+function SectionHeading (props) {
return(
-
- Why RightOn!
-
-
+
+ {props.title}
+
- {/*
-
-
-
-
- Why RightOn!
-
-
-
-
- */}
)
diff --git a/src/components/atoms/SingleWhy.jsx b/src/components/atoms/SingleWhy.jsx
index ea52a45..24aefb8 100644
--- a/src/components/atoms/SingleWhy.jsx
+++ b/src/components/atoms/SingleWhy.jsx
@@ -1,8 +1,10 @@
import React from 'react'
+import topBackground from '../../images/background-symbols.svg'
import {
Grid,
Card,
CardContent,
+ Box,
} from "@material-ui/core";
function singleWhy(props) {
@@ -15,7 +17,6 @@ function singleWhy(props) {
@@ -30,6 +31,14 @@ function singleWhy(props) {
dangerouslySetInnerHTML={{ __html: description }} />
+
+
+
+ 
);
diff --git a/src/components/molecules/ProfileAdvisors.jsx b/src/components/molecules/ProfileAdvisors.jsx
index 81163d0..28ce119 100644
--- a/src/components/molecules/ProfileAdvisors.jsx
+++ b/src/components/molecules/ProfileAdvisors.jsx
@@ -5,10 +5,10 @@ import { FaArrowAltCircleRight, FaArrowAltCircleLeft } from 'react-icons/fa';
import Carousel from 'react-material-ui-carousel'
function Advisors({ advisorProfiles }) {
- const decks = [[0, 1, 2], [3, 4, 5], [6, 0, 1], [2, 3, 4], [5, 6, 0], [1, 2, 3], [4, 5, 6]]
+ const decks = [[0, 1, 2], [3, 4, 5], [6, 7, 0], [1, 2, 3], [4, 5, 6], [7, 0, 1], [2, 3, 4], [5, 6, 7],]
return (
-
{advisorProfiles.map((advisor, index) => {
- var deck = decks[(index % 7)]
+ var deck = decks[(index % 8)]
console.log(deck)
var first = deck[0]
var second = deck[1]
@@ -64,7 +64,7 @@ function Advisors({ advisorProfiles }) {
);
})}
-
{advisorProfiles.map((advisor, index) => {
diff --git a/src/components/organisms/Supporters.jsx b/src/components/organisms/Supporters.jsx
new file mode 100755
index 0000000..7698b50
--- /dev/null
+++ b/src/components/organisms/Supporters.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import {
+ Box,
+ Grid
+} from "@material-ui/core";
+import Logos from '../atoms/Logos' ;
+import SectionHeading from '../atoms/SectionHeading';
+
+function Supporters(props) {
+ const { supporters } = props
+ return (
+
+
+
+
+
+ {supporters.map((logo) => (
+
+ 
+
+ ))}
+
+
+ );
+}
+export default Supporters;
\ No newline at end of file
diff --git a/src/components/organisms/WhyRightOn.jsx b/src/components/organisms/WhyRightOn.jsx
index 38ee03c..50d7a1d 100755
--- a/src/components/organisms/WhyRightOn.jsx
+++ b/src/components/organisms/WhyRightOn.jsx
@@ -5,17 +5,23 @@ import {
} from "@material-ui/core";
import SectionHeading from '../atoms/SectionHeading'
import SingleWhy from '../atoms/SingleWhy'
+import topBackground from '../../images/background-symbols.svg'
import RightOnVideo from '../atoms/RightOnVideo';
function WhyRightOn(props) {
const { whyRightOn } = props
+
return (
-
-
+
+
+
+
+
+
-
+
+
+
+
);
}
diff --git a/src/components/pages/LandingPage.jsx b/src/components/pages/LandingPage.jsx
index 271ca6c..fcb98a7 100644
--- a/src/components/pages/LandingPage.jsx
+++ b/src/components/pages/LandingPage.jsx
@@ -3,6 +3,7 @@ import React from 'react'
import ProductFeatures from '../organisms/ProductFeatures'
import WhyRightOn from '../organisms/WhyRightOn'
import ProblemSection from '../organisms/ProblemSection'
+import Supporters from '../organisms/Supporters'
import featureData from '../../_localDb/features'
@@ -10,12 +11,13 @@ import GoToTop from '../../GoToTop'
function LandingPage (props) {
const {styles} = props
- const { whyRightOn, productFeatures } = featureData
+ const { whyRightOn, productFeatures, supporters } = featureData
return (
)
diff --git a/src/images/background-symbols.svg b/src/images/background-symbols.svg
new file mode 100644
index 0000000..6a43eb4
--- /dev/null
+++ b/src/images/background-symbols.svg
@@ -0,0 +1,368 @@
+
diff --git a/src/images/profile_yonglin.png b/src/images/profile_yonglin.png
new file mode 100644
index 0000000..3987c99
Binary files /dev/null and b/src/images/profile_yonglin.png differ
diff --git a/src/landingPage.scss b/src/landingPage.scss
index 1052fe4..38771c7 100644
--- a/src/landingPage.scss
+++ b/src/landingPage.scss
@@ -1,34 +1,260 @@
@import '/node_modules/bootstrap/scss/bootstrap.scss';
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
+// video aspect ration used in padding-bottom per: http://alistapart.com/article/creating-intrinsic-ratios-for-video/
+$video-aspect-ratio: 56.25%;
+
+/*landing-page*/
+.landing-page-banners {
+ font-family: "filson-pro";
+ font-style: normal;
+ font-size: 55px;
+ font-weight: 700;
+ line-height: 84px;
+ letter-spacing: 0em;
+ text-align: center;
+ color: white;
+ justify-items: center;
+ display: grid;
+}
+.landing-page-banners-underline {
+ width: 550px;
+ border: 3.5px solid #E29B5D;
+ opacity: 1;
+ justify-content: center;
+ align-items: center;
+ margin-top: 5px;
+}
+.problem-section {
+ position: relative;
+ top: 0px;
+ left: 0px;
+ margin-top: -100px;
+}
+.problem-section-top-background {
+ position: absolute;
+ height: 1123.12px;
+ top: -150px;
+ right: -50px;
+}
+.why-section-top-background {
+ position: absolute;
+ height: 1123.12px;
+ bottom: -1960px;
+ z-index: -21;
+ right: 56%;
+}
+.problem-section-landing-block {
+ position: absolute;
+ width: 700px;
+ height: 850px;
+ left: 0px;
+ top: 1px;
+ z-index: 3;
+}
+.problem-section-landing-block-header1 {
+ position: absolute;
+ width: 375px;
+ height: 179px;
+ left: 111px;
+ top: 200px;
+ z-index: 4;
+ font-family: 'filson-pro';
+ display: flex;
+ align-items: center;
+ text-align: left;
+ color: #FEFDFF;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 45px;
+ line-height: 106.3%;
+}
+.problem-section-landing-block-header2 {
+ font-family: 'roboto';
+ font-style: normal;
+ font-size: 24px;
+ font-weight: 400;
+ line-height: 33px;
+ letter-spacing: 0em;
+ text-align: left;
+ color: #FFFFFF;
+ z-index: 4;
+ left: 111px;
+ top: 410px;
+ position: absolute;
+}
+.problem-section-landing-block-underline {
+ position: absolute;
+ width: 279px;
+ margin-top: 190px;
+ border: 2px solid #FFFFFF;
+ opacity: 1;
+}
+.problem-section-chromebook {
+ position: absolute;
+ width: 80%;
+ left: 150px;
+ top: 220px;
+ z-index: 2;
+}
+.problem-section-monster {
+ position: absolute;
+ z-index: 4;
+ margin-left: 75px;
+ margin-top: 60px;
+}
+.product-features-button {
+ position: absolute;
+ z-index: 5;
+ margin-left: 15px;
+}
+.supporters{
+ // display: flex;
+ // display: grid;
+ // grid-template-rows:30% 30% 30%;
+ justify-content: center;
+ align-items: center;
+}
+.why-cards-section {
+ z-index: 1;
+}
+.why-cards {
+ width: 359px;
+ height: 628.71px;
+ align-items: center;
+ justify-content: center;
+ z-index: -2;
+}
+.video-cards {
+ position: absolute;
+ left: 90%;
+ bottom: 135px;
+ height: 90px;
+ width: 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 5;
+ border-radius: 20px;
+}
+.video-comment {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 130.2%;
+ color: white;
+ text-align: center;
+}
+.video-cards-title {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 130.2%;
+ color: white;
+ text-align: center;
+}
+.why-cards-title {
+ font-family: 'filson-pro';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 29px;
+ color: white;
+}
+.why-cards-title-underline {
+ border: 2px solid #FFFFFF;
+ width: 172px;
+ height: 0px;
+ left: 136px;
+ top: 2988px;
+ opacity: 1;
+}
+.why-cards-description {
+ font-family: 'Roboto';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 19px;
+ line-height: 22px;
+ color: #FFFFFF;
+}
+.why-right-on-bottom-background {
+ position: absolute;
+ left: -200px;
+ top: 2120px;
+ z-index: 0;
+}
+.right-on-video-container {
+ position: relative;
+ padding-bottom: $video-aspect-ratio;
+ height: 0;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.right-on-video {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ z-index: 4;
+ top: 0;
+ left: 0;
+}
+.red-monster {
+ position: absolute;
+ right: -189px;
+ bottom: -55px;
+ z-index: 3;
+}
+.blue-monster {
+ position: absolute;
+ left: -180px;
+ bottom: -55px;
+ z-index: 3;
+}
- /*landing-page*/
-
+@media screen and (max-width: 1200px) {
+ /*home-page*/
+ .landing-page-banners {
+ font-family: "filson-pro";
+ font-style: normal;
+ font-size: 45px;
+ font-weight: 700;
+ line-height: 60px;
+ letter-spacing: 0em;
+ text-align: center;
+ color: white;
+ justify-items: center;
+ display: grid;
+ }
+ .landing-page-banners-underline {
+ width: 550px;
+ border: 3.5px solid #E29B5D;
+ opacity: 1;
+ justify-content: center;
+ margin-top: 15px;
+ }
.problem-section {
position: relative;
top: 0px;
left: 0px;
margin-top: -100px;
}
-
.problem-section-top-background {
-
position: absolute;
- // width: 1146.89px;
- height: 1123.12px;
- top: -150px;
- right: -50px;
+ width: 100%;
}
-
.problem-section-landing-block {
position: absolute;
- width: 700px;
- height: 850px;
+ // width: 100%;
+ // height: 100%;
+ width: 60%;
left: 0px;
top: 1px;
z-index: 3;
}
-
.problem-section-landing-block-header1 {
position: absolute;
width: 375px;
@@ -46,7 +272,6 @@
font-size: 45px;
line-height: 106.3%;
}
-
.problem-section-landing-block-header2 {
font-family: 'roboto';
font-style: normal;
@@ -57,64 +282,73 @@
text-align: left;
color: #FFFFFF;
z-index: 4;
- // height: 147px;
- // width: 375px;
left: 111px;
top: 410px;
position: absolute;
}
-
.problem-section-landing-block-underline {
position: absolute;
width: 279px;
margin-top: 190px;
- // height: 0px;
- // left: 111px;
- // top: 300px;
border: 2px solid #FFFFFF;
opacity: 1;
}
-
.problem-section-chromebook {
position: absolute;
- // width: 1336px;
- // height: 506px;
width: 80%;
left: 150px;
- top: 220px;
+ top: 290px;
z-index: 2;
}
-
.problem-section-monster {
position: absolute;
- // top: 625px;
- // left: 150px;
z-index: 4;
- //width: 20%;
- margin-left: 75px;
+ margin-left: 60px;
margin-top: 60px;
}
-
.product-features-button {
position: absolute;
- // margin-top: 470px;
z-index: 5;
- // width: 25%;
- margin-left: 15px;
}
-
- .why-cards-section {
- z-index: 1;
+ .why-right-on-bottom-background {
+ position: absolute;
+ width: 100%;
+ z-index: 0;
+ }
+ .right-on-video-container {
+ position: relative;
+ padding-bottom: $video-aspect-ratio;
+ height: 0;
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .right-on-video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+ .red-monster {
+ position: absolute;
+ right: -189px;
+ bottom: -55px;
+ z-index: 3;
+ }
+ .blue-monster {
+ position: absolute;
+ left: -180px;
+ bottom: -55px;
+ z-index: 3;
}
-
.why-cards {
- width: 359px;
- height: 628.71px;
+ width: 296px;
+ height: 570px;
align-items: center;
justify-content: center;
-
}
-
.why-cards-title {
font-family: 'filson-pro';
font-style: normal;
@@ -123,246 +357,233 @@
line-height: 29px;
color: white;
}
-
.why-cards-title-underline {
border: 2px solid #FFFFFF;
width: 172px;
height: 0px;
left: 136px;
top: 2988px;
- opacity: 1;
}
-
.why-cards-description {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
- font-size: 19px;
+ font-size: 17px;
line-height: 22px;
color: #FFFFFF;
-
}
+}
- .why-right-on-bottom-background {
+@media screen and(max-width: 960px) {
+ .red-monster {
position: absolute;
- left: -200px;
- top: 2120px;
- z-index: 0;
- }
-
- .right-on-video-container {
- width: 100%;
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
+ left: 70%;
+ top: -130px;
+ z-index: 3;
+ rotate: -20deg;
+ scale: .8;
}
-
- .right-on-video {
+ .blue-monster {
position: absolute;
- //max-width: 50vw;
- width: 100%;
- z-index: 2;
+ right: 65%;
+ top: -111px;
+ z-index: 3;
+ rotate: 20deg;
+ scale: .9;
+ left: auto;
}
-
- .red-monster {
+ .video-cards {
position: absolute;
- left: 90%;
- top: 50px;
- z-index: 1;
+ left: 70%;
+ top: -130px;
+ height: 90px;
+ width: 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 5;
+ border-radius: 20px;
}
+ footer .MuiGrid-root img {
+ width: 40%;
+ height: auto;
+ }
+}
- .blue-monster {
+@media screen and(max-width: 836px) {
+ .video-cards {
position: absolute;
- left: -180px;
- top: 30px;
- z-index: 1;
+ left: 70%;
+ top: -130px;
+ height: 90px;
+ width: 260px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 5;
+ border-radius: 20px;
+ display: none;
+ }
+ .landing-page-banners {
+ font-family: "filson-pro";
+ font-style: normal;
+ font-size: 34px;
+ font-weight: 700;
+ line-height: 45px;
+ letter-spacing: 0em;
+ text-align: center;
+ color: white;
+ justify-items: center;
+ display: grid;
}
-
-
-@media screen and (max-width: 1200px) {
-
- /*home-page*/
.problem-section {
position: relative;
top: 0px;
left: 0px;
- margin-top: -100px;
+ margin-top: 80px;
+ z-index: 1;
}
-
.problem-section-top-background {
-
position: absolute;
- // width: 1146.89px;
- // height: 1123.12px;
- // top: -150px;
- // right: -50px;
- width: 100%;
+ width: 858.8px;
+ height: 841px;
}
-
.problem-section-landing-block {
position: absolute;
- // width: 700px;
- // height: 850px;
- width: 100%;
- height: 100%;
+ transform: matrix(1, 0, 0, -1, 0, 0);
+ width: 540px;
+ height: 480px;
left: 0px;
- top: 1px;
+ top: 250px;
z-index: 3;
}
-
.problem-section-landing-block-header1 {
position: absolute;
- width: 375px;
- height: 179px;
- left: 111px;
- top: 200px;
- z-index: 4;
font-family: 'filson-pro';
+ font-style: normal;
+ font-weight: 700;
+ font-size: 34px;
+ line-height: 36px;
display: flex;
align-items: center;
- text-align: left;
color: #FEFDFF;
- font-style: normal;
- font-weight: 700;
- font-size: 45px;
- line-height: 106.3%;
+ left: 48px;
+ top: 280px;
+ z-index: 4;
}
-
.problem-section-landing-block-header2 {
font-family: 'roboto';
font-style: normal;
- font-size: 24px;
font-weight: 400;
- line-height: 33px;
+ font-size: 20px;
+ line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #FFFFFF;
z-index: 4;
- // height: 147px;
- // width: 375px;
- left: 111px;
- top: 410px;
+ left: 48px;
+ top: 470px;
position: absolute;
}
-
.problem-section-landing-block-underline {
position: absolute;
- width: 279px;
- margin-top: 190px;
- // height: 0px;
- // left: 111px;
- // top: 300px;
+ width: 215px;
+ margin-top: 150px;
border: 2px solid #FFFFFF;
opacity: 1;
}
-
.problem-section-chromebook {
position: absolute;
- // width: 1336px;
- // height: 506px;
- width: 80%;
- left: 150px;
- top: 290px;
+ width: 100%;
+ height: auto;
+ left: -8px;
+ top: 35px;
z-index: 2;
+ padding: 0 25px;
}
-
.problem-section-monster {
position: absolute;
- // top: 625px;
- // left: 150px;
z-index: 4;
- //width: 20%;
- margin-left: 60px;
- margin-top: 60px;
+ margin-left: 350px;
+ margin-top: 80px;
+ width: 35%;
}
-
.product-features-button {
position: absolute;
- // margin-top: 470px;
z-index: 5;
- // width: 25%;
- // margin-left: 30px;
+ margin-left: 300px;
+ margin-top: 25px;
+ width: 50%;
+ }
+ footer .MuiGrid-root img {
+ width: 40%;
+ height: auto;
}
+}
- .why-right-on-bottom-background {
+@media screen and(max-width: 650px) {
+ .problem-section-landing-block {
position: absolute;
- width: 100%;
- // left: -200px;
- // top: 2120px;
- z-index: 0;
+ transform: matrix(1, 0, 0, -1, 0, 0);
+ width: 450px;
+ height: 450px;
+ left: 0px;
+ top: 370px;
+ z-index: 3;
}
-
- .right-on-video-container {
- width: 100%;
- height: 100%;
- overflow: hidden;
- display: flex;
- justify-content: center;
- align-items: center;
+ .problem-section-landing-block-header1 {
+ left: 48px;
+ top: 380px;
}
-
- .right-on-video {
- position: absolute;
- //max-width: 50vw;
- width: 100%;
- z-index: 2;
+ .problem-section-landing-block-header2 {
+ left: 48px;
+ top: 570px;
}
-
- .red-monster {
- position: absolute;
- left: 90%;
- top: 50px;
- z-index: 1;
+ .problem-section-landing-block {
+ position: absolute;
+ transform: matrix(1, 0, 0, -1, 0, 0);
+ width: 450px;
+ height: 480px;
+ left: 0px;
+ top: 370px;
+ z-index: 3;
+ }.problem-section-monster {
+ margin-left: 245px;
+ margin-top: 200px;
}
-
- .blue-monster {
- position: absolute;
- left: -180px;
- top: 30px;
- z-index: 1;
+ .product-features-button {
+ margin-left: 210px;
+ margin-top: 160px;
+ width: 50%;
}
-
- .why-cards {
- width: 296px;
- height: 570px;
- align-items: center;
- justify-content: center;
+ .problem-section-chromebook {
+ left: -282px;
+ top: 95px;
+ width: 756px;
+ height: auto;
}
+}
- .why-cards-title {
- font-family: 'filson-pro';
+@media screen and(max-width: 414px) {
+ /*home-page*/
+ .landing-page-banners {
+ font-family: "filson-pro";
font-style: normal;
+ font-size: 34px;
font-weight: 700;
- font-size: 25px;
- line-height: 29px;
+ line-height: 45px;
+ letter-spacing: 0em;
+ text-align: center;
color: white;
+ justify-items: center;
+ display: grid;
}
-
- .why-cards-title-underline {
- border: 2px solid #FFFFFF;
- width: 172px;
- height: 0px;
- left: 136px;
- top: 2988px;
- }
-
- .why-cards-description {
- font-family: 'Roboto';
- font-style: normal;
- font-weight: 400;
- font-size: 17px;
- line-height: 22px;
- color: #FFFFFF;
-
+ .landing-page-banners-underline {
+ justify-content: center;
+ width: 300px;
+ border: 3px solid #E29B5D;
+ opacity: 1;
}
-
-}
-
-@media screen and(max-width: 414px) {
-
- /*home-page*/
.problem-section {
position: relative;
top: 0px;
@@ -370,14 +591,11 @@
margin-top: 80px;
z-index: 1;
}
-
.problem-section-top-background {
-
position: absolute;
width: 858.8px;
height: 841px;
}
-
.problem-section-landing-block {
position: absolute;
transform: matrix(1, 0, 0, -1, 0, 0);
@@ -387,7 +605,6 @@
top: 370px;
z-index: 3;
}
-
.problem-section-landing-block-header1 {
position: absolute;
font-family: 'filson-pro';
@@ -402,7 +619,6 @@
top: 380px;
z-index: 4;
}
-
.problem-section-landing-block-header2 {
font-family: 'roboto';
font-style: normal;
@@ -417,106 +633,79 @@
top: 570px;
position: absolute;
}
-
.problem-section-landing-block-underline {
position: absolute;
width: 215px;
margin-top: 150px;
- // height: 0px;
- // left: 111px;
- // top: 300px;
border: 2px solid #FFFFFF;
opacity: 1;
}
-
.problem-section-chromebook {
position: absolute;
- // width: 1336px;
- // height: 506px;
width: 630px;
height: 239px;
left: -280px;
top: 150px;
z-index: 2;
}
-
.problem-section-monster {
position: absolute;
- // top: 625px;
- // left: 150px;
z-index: 4;
- //width: 20%;
margin-left: 180px;
margin-top: 230px;
width: 35%;
}
-
.product-features-button {
position: absolute;
- // margin-top: 470px;
z-index: 5;
- // width: 25%;
margin-left: 150px;
margin-top: 200px;
width: 50%;
}
-
.why-right-on-bottom-background {
position: absolute;
- //width: 100%;
- // left: -200px;
- //top: 3000px;
- //width: 375px;
- // height: 841px;
z-index: 0;
}
-
.right-on-video-container {
- width: 100%;
- height: 100%;
+ position: relative;
+ padding-bottom: $video-aspect-ratio;
+ height: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
-
.right-on-video {
position: absolute;
- //max-width: 50vw;
+ top: 0;
+ left: 0;
width: 100%;
- height: 177px;
- margin-top: -360px;
- z-index: 2;
+ height: 100%;
}
.red-monster {
position: absolute;
left: 90%;
- top: 50px;
- z-index: 1;
+ bottom: -11%;
+ z-index: 2;
display: none;
}
-
.blue-monster {
position: absolute;
left: -180px;
- top: 30px;
- z-index: 1;
+ bottom: -11%;
+ z-index: 2;
display: none;
}
-
.why-cards-section {
z-index: 1;
- margin-top: -400px !important;
}
-
.why-cards {
width: 296px;
height: 570px;
align-items: center;
justify-content: center;
}
-
.why-cards-title {
font-family: 'filson-pro';
font-style: normal;
@@ -525,7 +714,6 @@
line-height: 29px;
color: white;
}
-
.why-cards-title-underline {
border: 2px solid #FFFFFF;
width: 172px;
@@ -533,7 +721,6 @@
left: 136px;
top: 2988px;
}
-
.why-cards-description {
font-family: 'Roboto';
font-style: normal;
@@ -541,7 +728,6 @@
font-size: 17px;
line-height: 22px;
color: #FFFFFF;
-
.value-card {
width: 329px;
height: 151px;
@@ -550,25 +736,21 @@
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
padding: 0px
}
-
.value-img {
height: 151px;
}
-
.value-text {
width: 180px;
height: 165px;
padding-left: 21px;
padding-right: 29px;
}
-
.values-text {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
-
color: #FFFFFF;
}
}
diff --git a/src/teamPage.scss b/src/teamPage.scss
index 8b9229c..e0df587 100644
--- a/src/teamPage.scss
+++ b/src/teamPage.scss
@@ -1,7 +1,6 @@
@import '/node_modules/bootstrap/scss/bootstrap.scss';
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
-
.team-page-monsters {
width: 100%;
background: #322759;
@@ -13,17 +12,14 @@
align-items: center;
display: flex;
}
-
.team-page-monsters-mobile {
display: none;
}
-
.team-page-intros {
margin-top: 55px;
margin-bottom: 55px;
text-align: center;
}
-
.team-page-banners {
font-family: "filson-pro";
font-style: normal;
@@ -33,17 +29,16 @@
letter-spacing: 0em;
text-align: center;
color: white;
-
+ justify-items: center;
+ display: grid;
}
-
.team-page-banners-underline {
width: 550px;
border: 3.5px solid #E29B5D;
opacity: 1;
justify-content: center;
+ align-items: center;
}
-
-
.flip-card-outer {
perspective: 1000px;
width: 300px;
@@ -54,10 +49,11 @@
.flip-card-inner {
transform-style: preserve-3d;
- transition: .5s linear .1s;
+ transition: .3s linear .1s;
position: relative;
width: inherit;
height: inherit;
+ cursor: pointer;
.flip-card-outer:focus {
outline: none !important;
@@ -93,28 +89,22 @@
}
}
-
.css-1f8sh1y {
width: 1500px !important;
- height: 730px !important;
+ height: 730px !important;
}
-
.desktop-advisors {
- display: block;
+ display: block;
}
-
.mobile-advisors {
display: none;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -122,59 +112,48 @@
font-size: 32px;
font-weight: 700;
line-height: 38px;
-/* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 20px;
line-height: 23px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 18px;
font-weight: 400;
line-height: 22px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 370px;
height: 690px;
perspective: 1px;
align-items: center;
border-radius: 30px;
- box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25)
+ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}
-
@media screen and (max-width: 2000px) {
-
.css-1f8sh1y {
width: 1450px !important;
height: 730px !important;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.desktop-advisors {
display: block;
}
-
.mobile-advisors {
display: none;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -182,41 +161,35 @@
font-size: 32px;
font-weight: 700;
line-height: 38px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 20px;
line-height: 23px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 18px;
font-weight: 400;
line-height: 22px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 370px;
height: 690px;
perspective: 1px;
align-items: center;
border-radius: 30px;
- box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25)
+ box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25);
}
-
.team-page-intros {
margin-top: 55px;
margin-bottom: 55px;
text-align: center;
}
-
.team-page-banners {
font-family: "filson-pro";
font-style: normal;
@@ -226,18 +199,14 @@
letter-spacing: 0em;
text-align: center;
color: white;
-
}
-
.team-page-banners-underline {
width: 550px;
border: 3.5px solid #E29B5D;
opacity: 1;
justify-content: center;
}
-
- /*team-page-profile-cards*/
-
+ /* team-page-profile-cards */
.flip-card-outer {
perspective: 1000px;
width: 300px;
@@ -245,26 +214,21 @@
margin: 25px, 0;
margin-right: 5px;
margin-left: 5px;
-
.flip-card-inner {
transform-style: preserve-3d;
- transition: .5s linear .1s;
+ transition: .3s linear .1s;
position: relative;
width: inherit;
height: inherit;
-
.flip-card-outer:focus {
outline: none !important;
}
-
.flip-card-outer:active {
outline: none !important;
}
-
&.showBack {
transform: rotateY(180deg);
}
-
.card {
backface-visibility: hidden;
position: absolute;
@@ -294,15 +258,12 @@
width: 1270px !important;
height: 670px !important;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -310,26 +271,22 @@
font-size: 28px;
font-weight: 700;
line-height: 34px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 18px;
line-height: 21px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 20px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 310px;
height: 630px;
@@ -345,15 +302,12 @@
width: 1100px !important;
height: 750px !important;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -361,26 +315,22 @@
font-size: 28px;
font-weight: 700;
line-height: 34px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 18px;
line-height: 21px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 20px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 250px;
height: 700px;
@@ -397,7 +347,6 @@
margin-top: 35px;
margin-bottom: 45px;
}
-
.team-page-banners {
font-family: "filson-pro";
font-size: 34px;
@@ -407,7 +356,6 @@
text-align: center;
color: white;
}
-
.team-page-banners-underline {
justify-content: center;
width: 300px;
@@ -415,7 +363,6 @@
opacity: 1;
margin-top: -4px;
}
-
.flip-card-outer {
perspective: 1000px;
width: 300px;
@@ -423,29 +370,21 @@
margin: 10px, 0;
margin-right: 1px;
margin-left: 1px;
-
-
.flip-card-outer:focus {
outline: none !important;
}
-
.flip-card-outer:active {
outline: none !important;
}
-
-
.flip-card-inner {
transform-style: preserve-3d;
- transition: .5s linear .1s;
+ transition: .3s linear .1s;
position: relative;
width: inherit;
height: inherit;
-
-
&.showBack {
transform: rotateY(180deg);
}
-
.card {
backface-visibility: hidden;
position: absolute;
@@ -455,17 +394,13 @@
height: 100%;
background-color: #322759;
border: none;
-
-
&.front {
transform: rotateY(0);
}
-
&.back {
transform: rotateY(180deg);
}
-
}
}
@@ -474,23 +409,18 @@
width: 670px !important;
height: 730px !important;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.desktop-advisors {
display: none;
}
-
.mobile-advisors {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -498,26 +428,22 @@
font-size: 32px;
font-weight: 700;
line-height: 38px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 20px;
line-height: 23px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 18px;
font-weight: 400;
line-height: 22px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 370px;
height: 690px;
@@ -533,23 +459,18 @@
width: 610px !important;
height: 700px !important;
}
-
.no-arrows {
display: none;
}
-
.arrows {
display: block;
}
-
.desktop-advisors {
display: none;
}
-
.mobile-advisors {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -557,26 +478,22 @@
font-size: 28px;
font-weight: 700;
line-height: 34px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 18px;
line-height: 21px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 20px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 350px;
height: 640px;
@@ -592,23 +509,18 @@
width: 380px !important;
height: 700px !important;
}
-
.no-arrows {
display: block;
}
-
.arrows {
display: none;
}
-
.desktop-advisors {
display: none;
}
-
.mobile-advisors {
display: block;
}
-
.advisor-header {
font-family: Roboto;
font-style: normal;
@@ -616,26 +528,22 @@
font-size: 28px;
font-weight: 700;
line-height: 34px;
- /* identical to box height */
+ // identical to box height
color: #FFFFFF;
}
-
.advisor-title {
font-weight: 500;
font-size: 18px;
line-height: 21px;
}
-
.advisor-description {
font-family: Roboto;
font-style: normal;
font-size: 16px;
font-weight: 400;
line-height: 20px;
-
color: #FFFFFF;
}
-
.advisor-card {
width: 350px;
height: 640px;
@@ -651,23 +559,18 @@
width: 310px !important;
height: 740px !important;
}
-
.no-arrows {
display: block;
}
-
.arrows {
display: none;
}
-
.desktop-advisors {
display: none;
}
-
.mobile-advisors {
display: block;
}
-
.advisor-card {
width: 250px;
height: 700px;
@@ -676,11 +579,9 @@
border-radius: 30px;
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.25)
}
-
.team-page-monsters {
display: none;
}
-
.team-page-monsters-mobile {
display: block;
margin-top: 30%;