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

solid work for rameelo

Browse Source
This commit is contained in:
talksik
2020-09-04 15:53:43 -07:00
parent 342c108e92
commit a6f3ebb60a
9 changed files with 366 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+6
View File
@@ -31,6 +31,12 @@
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css"
/>
<!-- Fontawesome CDN -->
<script
src="https://kit.fontawesome.com/57fe177d25.js"
crossorigin="anonymous"
></script>
<title>React App</title>
</head>
<body>
src/components/home/home.js
+22 -3
View File
@@ -4,10 +4,11 @@ import React from 'react';
import './home.scss';
// Routing
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';
import { BrowserRouter, Switch, Route, NavLink, Link } from 'react-router-dom';
// Routed Components
import Dashboard from '../dashboard';
import RameeloLanding from '../rameelo/landing';
export default function Home() {
return (
@@ -29,6 +30,10 @@ export default function Home() {
</Route>{' '}
*/}
<Route path="/rameelo">
<RameeloLanding />
</Route>
{/* If none of the previous routes render anything,
this route acts as a fallback.
@@ -78,8 +83,22 @@ class ComponentSelection extends React.Component {
</div>
<div class="pages">
<div class="card">
<div class="card-header">Rameelo</div>
<div class="card rameelo-card">
<div class="custom-card-content">
<span class="flex-column flex-align-center justify">
<i class="fab fa-atlassian"></i>
<span class="main-text">Rameelo</span>
{/* <span class="secondary-text">
Welcome to the online platform for everything garba/raas.
</span> */}
</span>
<span>
<Link to="/rameelo">
<button>View</button>
</Link>
</span>
</div>
</div>
<div class="card"></div>
</div>
src/components/home/home.scss
+25 -1
View File
@@ -3,6 +3,7 @@
.nav {
@extend %flex;
flex-direction: row;
margin-top: 10px;
ul {
@extend %flex;
@@ -37,6 +38,29 @@ div .pages {
.card {
height: 200px;
width: 200px;
width: 300px;
padding: 30px;
}
.custom-card-content {
@extend %flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
flex: 1;
.main-text {
font-size: 30px;
}
}
.rameelo-card {
background-color: #ffe2e5;
color: red;
i {
color: red;
font-size: 3em;
}
}
}
src/components/rameelo/landing/index.js
+1
View File
@@ -0,0 +1 @@
export { default } from './landing';
src/components/rameelo/landing/landing.js
+107
View File
@@ -0,0 +1,107 @@
import React from 'react';
// Styles
import './landing.scss';
export default class Landing extends React.Component {
render() {
return (
<div className="wrapper">
<div className="top-section">
<div className="container-fluid">
<div className="row">
<div className="col-lg-5 graphic-side">
<span className="logo">Rameelo</span>
<span className="motto">Raas Garba Forever.</span>
</div>
<div className="col info-side">
<div className="nav">
<span>About Us</span>
<span>Events</span>
<span>Registration</span>
<span>What is Raas Garba?</span>
</div>
<div className="welcome">
<span class="title">
Welcome to the online platform for{' '}
<span class="red-text">everything</span> Raas/Garba
</span>
<span class="subtitle">
If you love Raas/Garba, you are in the right place! Connect,
share, and grow with our community of passionate Raas/Garba
enthusiasts.
</span>
<span class="learn-more">Learn More</span>
</div>
<span className="scroll-widget">
<span className="scroll-content">
<font>Scroll</font>
<i className="fas fa-sort-down"></i>
</span>
</span>
</div>
</div>
</div>
</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>
<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 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>
);
}
}
src/components/rameelo/landing/landing.scss
+163
View File
@@ -0,0 +1,163 @@
@import '../../../styles/index';
.wrapper {
max-width: 1920px !important;
}
.top-section {
background-color: blue;
height: 1078px;
max-height: 1078px;
@extend %flex;
.row {
height: 100%;
}
.graphic-side {
background: linear-gradient(0deg, #ff1d465d, #ff1d467e),
url('../../../images/rameelo/rameelo_cover_photo.png');
background-position: center;
padding: 20px;
@extend %flex;
flex-direction: column;
justify-content: space-between;
.logo {
color: $white;
margin: 20px 20px;
font-size: 30px;
}
.motto {
font-size: 140px;
color: $white;
}
}
.info-side {
background-color: white;
display: flex;
flex-direction: column;
.nav {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 10px;
span {
color: $secondary-text;
margin: 20px 40px;
font-size: 20px;
}
}
.welcome {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 30px;
padding: 15px;
border-right: 1px solid red;
position: relative;
.title {
font-size: 70px;
.red-text {
color: red;
}
}
.subtitle {
color: $secondary-text;
@extend %font-inter;
}
.learn-more {
margin-top: 20px;
color: red;
font-size: 14px;
text-decoration: underline;
@extend %font-inter;
font-weight: 600;
}
}
.scroll-widget {
margin: 0 16px 10px 0;
display: flex;
flex-direction: column;
align-items: flex-end;
color: red;
.scroll-content {
display: flex;
flex-direction: column;
align-items: center;
font {
font-size: 12px;
}
i {
font-size: 30px;
}
}
}
}
}
.quadrants-section {
background-color: red;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
padding: 60px 140px;
.quadrant {
height: 250px;
flex: 1;
border-right: 1px solid white;
margin: 0px;
padding: 20px 60px;
display: flex;
flex-direction: column;
justify-content: space-between;
.quadrant-header {
display: flex;
flex-direction: column;
align-items: flex-start;
.title {
color: $white;
font-size: 38px;
}
.subtitle {
@extend %font-inter;
color: $white;
font-size: 13px;
margin-top: 5px;
}
}
.quadrant-footer {
color: gold;
font-size: 14px;
text-decoration: underline;
@extend %font-inter;
}
}
:last-child {
border: none !important;
}
}
src/images/rameelo/rameelo_cover_photo.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

src/styles/_fonts.scss
+11 -3
View File
@@ -1,7 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
body {
font-family: 'Fira Sans', sans-serif;
font-family: 'Bebas Neue', cursive;
}
h1 {
@@ -9,5 +10,12 @@ h1 {
}
h2 {
color: $white;
font-size: 30px;
}
%font-bebas {
font-family: 'Bebas Neue', cursive;
}
%font-inter {
font-family: 'Inter', sans-serif;
}
src/styles/_main.scss
+31 -7
View File
@@ -4,18 +4,42 @@
display: flex !important;
}
body {
margin: 0;
}
.flex-column {
display: flex !important;
flex-direction: column;
}
.flex-align-center {
align-items: center;
}
.wrapper {
max-width: 1140px;
margin: 20px auto;
margin: 0px auto;
}
.card {
@extend %flex;
background-color: white;
border-radius: 25px;
border-radius: 5.460000038146973px;
margin: 10px;
.card-header {
@extend %flex;
padding: 10px;
}
padding: 5px;
box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
}
button {
background-color: $primary-color;
color: $white;
padding: 8.449999809265137px 13px;
border-radius: 5.460000038146973px;
border: none;
text-align: center;
font-size: 13px;
box-sizing: border-box;
box-shadow: none;
cursor: pointer;
}