talksik/clean-force
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

responsiveness practice and another div and fixing other issues

Browse Source
This commit is contained in:
talksik
2020-09-04 17:06:40 -07:00
parent a6f3ebb60a
commit 1fc1cb856c
3 changed files with 110 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/rameelo/landing/landing.js
+58 -47
View File
@@ -48,57 +48,68 @@ export default class Landing extends React.Component {
</div> </div>
<div className="quadrants-section"> <div className="quadrants-section">
<div class="quadrant"> <div class="container-fluid">
<span class="quadrant-header"> <div class="row">
<span class="title">Event Hosts</span> <div className="col">
<span class="subtitle"> <div class="quadrant">
For organizations and individuals who are hosting their own <span class="quadrant-header">
Navrati events, we would like to welcome you to get your event <span class="title">Event Hosts</span>
listed on our website, allow attendees to purchase tickets on <span class="subtitle">
the site, and advertise your event! For organizations and individuals who are hosting their
</span> own Navrati events, we would like to welcome you to get
</span> your event listed on our website, allow attendees to
purchase tickets on the site, and advertise your event!
</span>
</span>
<span class="quadrant-footer">Sign Up</span> <span class="quadrant-footer">Sign up</span>
</div> </div>
<div class="quadrant"> </div>
<span class="quadrant-header"> <div className="col">
<span class="title">Event Hosts</span> <div class="quadrant">
<span class="subtitle"> <span class="quadrant-header">
For organizations and individuals who are hosting their own <span class="title">Event Attendees</span>
Navrati events, we would like to welcome you to get your event <span class="subtitle">
listed on our website, allow attendees to purchase tickets on For attendees, you will be able to browse events, buy
the site, and advertise your event! tickets, and view videos of events! Sit tight until we
</span> roll these features out!
</span> </span>
</span>
<span class="quadrant-footer">Sign Up</span> <span class="quadrant-footer">Create Account</span>
</div> </div>
<div class="quadrant"> </div>
<span class="quadrant-header"> <div className="col">
<span class="title">Event Hosts</span> <div class="quadrant">
<span class="subtitle"> <span class="quadrant-header">
For organizations and individuals who are hosting their own <span class="title">Collegiate Teams</span>
Navrati events, we would like to welcome you to get your event <span class="subtitle">
listed on our website, allow attendees to purchase tickets on For collegiate teams, we welcome you to join the platform
the site, and advertise your event! to feature your team, share team details, and gain a
</span> centralized place for recognition beside other teams in
</span> the circuit!
</span>
</span>
<span class="quadrant-footer">Sign Up</span> <span class="quadrant-footer">Sign Up Team</span>
</div> </div>
<div class="quadrant"> </div>
<span class="quadrant-header"> <div className="col">
<span class="title">Event Hosts</span> <div class="quadrant">
<span class="subtitle"> <span class="quadrant-header">
For organizations and individuals who are hosting their own <span class="title">Collegiate competitions</span>
Navrati events, we would like to welcome you to get your event <span class="subtitle">
listed on our website, allow attendees to purchase tickets on For organizations and individuals who are hosting their
the site, and advertise your event! own Navrati events, we would like to welcome you to get
</span> your event listed on our website, allow attendees to
</span> purchase tickets on the site, and advertise your event!
</span>
</span>
<span class="quadrant-footer">Sign Up</span> <span class="quadrant-footer">Sign Up Event</span>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
src/components/rameelo/landing/landing.scss
+49 -25
View File
@@ -6,9 +6,8 @@
.top-section { .top-section {
background-color: blue; background-color: blue;
height: 1078px;
max-height: 1078px;
@extend %flex; @extend %flex;
min-height: 1078px;
.row { .row {
height: 100%; height: 100%;
@@ -29,10 +28,16 @@
margin: 20px 20px; margin: 20px 20px;
font-size: 30px; font-size: 30px;
} }
.motto { .motto {
font-size: 140px; font-size: 140px;
color: $white; color: $white;
} }
@media only screen and (max-width: 768px) {
.motto {
font-size: 90px;
}
}
} }
.info-side { .info-side {
@@ -51,6 +56,10 @@
margin: 20px 40px; margin: 20px 40px;
font-size: 20px; font-size: 20px;
} }
@media only screen and (max-width: 992px) {
display: none !important;
}
} }
.welcome { .welcome {
@@ -59,16 +68,25 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
margin: 30px;
padding: 15px; border-right: 1px solid $red;
border-right: 1px solid red;
position: relative; 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 { .title {
font-size: 70px; font-size: 70px;
.red-text { .red-text {
color: red; color: $red;
} }
} }
@@ -79,7 +97,7 @@
.learn-more { .learn-more {
margin-top: 20px; margin-top: 20px;
color: red; color: $red;
font-size: 14px; font-size: 14px;
text-decoration: underline; text-decoration: underline;
@extend %font-inter; @extend %font-inter;
@@ -92,7 +110,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
color: red; color: $red;
.scroll-content { .scroll-content {
display: flex; display: flex;
@@ -112,23 +130,32 @@
} }
.quadrants-section { .quadrants-section {
background-color: red; background-color: $red;
margin: 0 !important;
display: flex; @media only screen and (min-width: 992px) {
flex-direction: row; padding: 4em 6em;
justify-content: space-evenly; }
align-items: center;
flex-wrap: wrap;
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 { .quadrant {
height: 250px; padding: 2em;
flex: 1;
border-right: 1px solid white;
margin: 0px;
padding: 20px 60px;
display: flex; display: flex;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@@ -136,6 +163,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
.title { .title {
color: $white; color: $white;
font-size: 38px; font-size: 38px;
@@ -150,14 +178,10 @@
} }
.quadrant-footer { .quadrant-footer {
color: gold; color: $gold;
font-size: 14px; font-size: 14px;
text-decoration: underline; text-decoration: underline;
@extend %font-inter; @extend %font-inter;
} }
} }
:last-child {
border: none !important;
}
} }
src/styles/_colors.scss
+3
View File
@@ -5,6 +5,9 @@ $secondary-text: #b5b5c3;
$primary-color: #0bb7af; $primary-color: #0bb7af;
$white: white; $white: white;
$red: #ff1d46;
$gold: #ffcb5a;
body { body {
color: $primary-text; color: $primary-text;
background-color: $primary-background; background-color: $primary-background;