From 1fc1cb856ca1e47ad9702d543b9bbe34a783feb5 Mon Sep 17 00:00:00 2001 From: talksik Date: Fri, 4 Sep 2020 17:06:40 -0700 Subject: [PATCH] responsiveness practice and another div and fixing other issues --- src/components/rameelo/landing/landing.js | 105 +++++++++++--------- src/components/rameelo/landing/landing.scss | 74 +++++++++----- src/styles/_colors.scss | 3 + 3 files changed, 110 insertions(+), 72 deletions(-) diff --git a/src/components/rameelo/landing/landing.js b/src/components/rameelo/landing/landing.js index c1503f1..5475344 100644 --- a/src/components/rameelo/landing/landing.js +++ b/src/components/rameelo/landing/landing.js @@ -48,57 +48,68 @@ export default class Landing extends React.Component {
-
- - Event Hosts - - For organizations and individuals who are hosting their own - Navrati events, we would like to welcome you to get your event - listed on our website, allow attendees to purchase tickets on - the site, and advertise your event! - - +
+
+
+
+ + Event Hosts + + For organizations and individuals who are hosting their + own Navrati events, we would like to welcome you to get + your event listed on our website, allow attendees to + purchase tickets on the site, and advertise your event! + + - Sign Up -
-
- - Event Hosts - - For organizations and individuals who are hosting their own - Navrati events, we would like to welcome you to get your event - listed on our website, allow attendees to purchase tickets on - the site, and advertise your event! - - + Sign up +
+
+
+
+ + Event Attendees + + For attendees, you will be able to browse events, buy + tickets, and view videos of events! Sit tight until we + roll these features out! + + - Sign Up -
-
- - Event Hosts - - For organizations and individuals who are hosting their own - Navrati events, we would like to welcome you to get your event - listed on our website, allow attendees to purchase tickets on - the site, and advertise your event! - - + Create Account +
+
+
+
+ + Collegiate Teams + + For collegiate teams, we welcome you to join the platform + to feature your team, share team details, and gain a + centralized place for recognition beside other teams in + the circuit! + + - Sign Up -
-
- - Event Hosts - - For organizations and individuals who are hosting their own - Navrati events, we would like to welcome you to get your event - listed on our website, allow attendees to purchase tickets on - the site, and advertise your event! - - + Sign Up Team +
+
+
+
+ + Collegiate competitions + + For organizations and individuals who are hosting their + own Navrati events, we would like to welcome you to get + your event listed on our website, allow attendees to + purchase tickets on the site, and advertise your event! + + - Sign Up + Sign Up Event +
+
+
diff --git a/src/components/rameelo/landing/landing.scss b/src/components/rameelo/landing/landing.scss index 7e87f8a..a395464 100644 --- a/src/components/rameelo/landing/landing.scss +++ b/src/components/rameelo/landing/landing.scss @@ -6,9 +6,8 @@ .top-section { background-color: blue; - height: 1078px; - max-height: 1078px; @extend %flex; + min-height: 1078px; .row { height: 100%; @@ -29,10 +28,16 @@ margin: 20px 20px; font-size: 30px; } + .motto { font-size: 140px; color: $white; } + @media only screen and (max-width: 768px) { + .motto { + font-size: 90px; + } + } } .info-side { @@ -51,6 +56,10 @@ margin: 20px 40px; font-size: 20px; } + + @media only screen and (max-width: 992px) { + display: none !important; + } } .welcome { @@ -59,16 +68,25 @@ flex-direction: column; align-items: flex-start; justify-content: center; - margin: 30px; - padding: 15px; - border-right: 1px solid red; + + border-right: 1px solid $red; position: relative; + @media only screen and (min-width: 992px) { + padding: 4rem; + margin: 30px; + } + + @media only screen and (max-width: 992px) { + border: none !important; + margin: 20px; + } + .title { font-size: 70px; .red-text { - color: red; + color: $red; } } @@ -79,7 +97,7 @@ .learn-more { margin-top: 20px; - color: red; + color: $red; font-size: 14px; text-decoration: underline; @extend %font-inter; @@ -92,7 +110,7 @@ display: flex; flex-direction: column; align-items: flex-end; - color: red; + color: $red; .scroll-content { display: flex; @@ -112,23 +130,32 @@ } .quadrants-section { - background-color: red; + background-color: $red; + margin: 0 !important; - display: flex; - flex-direction: row; - justify-content: space-evenly; - align-items: center; - flex-wrap: wrap; + @media only screen and (min-width: 992px) { + padding: 4em 6em; + } - padding: 60px 140px; + .row { + .col { + min-height: 250px; + } + @media only screen and (min-width: 992px) { + .col { + border-right: 1px solid white !important; + } + + :last-child { + border: none !important; + } + } + } .quadrant { - height: 250px; - flex: 1; - border-right: 1px solid white; - margin: 0px; - padding: 20px 60px; + padding: 2em; display: flex; + height: 100%; flex-direction: column; justify-content: space-between; @@ -136,6 +163,7 @@ display: flex; flex-direction: column; align-items: flex-start; + .title { color: $white; font-size: 38px; @@ -150,14 +178,10 @@ } .quadrant-footer { - color: gold; + color: $gold; font-size: 14px; text-decoration: underline; @extend %font-inter; } } - - :last-child { - border: none !important; - } } diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss index 097e528..e7c3ee5 100644 --- a/src/styles/_colors.scss +++ b/src/styles/_colors.scss @@ -5,6 +5,9 @@ $secondary-text: #b5b5c3; $primary-color: #0bb7af; $white: white; +$red: #ff1d46; +$gold: #ffcb5a; + body { color: $primary-text; background-color: $primary-background;