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 className="quadrants-section">
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Hosts</span>
<span class="subtitle">
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!
</span>
</span>
<div class="container-fluid">
<div class="row">
<div className="col">
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Hosts</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Sign Up</span>
</div>
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Hosts</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Sign up</span>
</div>
</div>
<div className="col">
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Attendees</span>
<span class="subtitle">
For attendees, you will be able to browse events, buy
tickets, and view videos of events! Sit tight until we
roll these features out!
</span>
</span>
<span class="quadrant-footer">Sign Up</span>
</div>
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Hosts</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Create Account</span>
</div>
</div>
<div className="col">
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Collegiate Teams</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Sign Up</span>
</div>
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Event Hosts</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Sign Up Team</span>
</div>
</div>
<div className="col">
<div class="quadrant">
<span class="quadrant-header">
<span class="title">Collegiate competitions</span>
<span class="subtitle">
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!
</span>
</span>
<span class="quadrant-footer">Sign Up</span>
<span class="quadrant-footer">Sign Up Event</span>
</div>
</div>
</div>
</div>
</div>
</div>
src/components/rameelo/landing/landing.scss
+49 -25
View File
@@ -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;
}
}
src/styles/_colors.scss
+3
View File
@@ -5,6 +5,9 @@ $secondary-text: #b5b5c3;
$primary-color: #0bb7af;
$white: white;
$red: #ff1d46;
$gold: #ffcb5a;
body {
color: $primary-text;
background-color: $primary-background;