solid work for rameelo
This commit is contained in:
talksik
@@ -31,6 +31,12 @@
|
|||||||
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap-grid.min.css"
|
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>
|
<title>React App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -4,10 +4,11 @@ import React from 'react';
|
|||||||
import './home.scss';
|
import './home.scss';
|
||||||
|
|
||||||
// Routing
|
// Routing
|
||||||
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';
|
import { BrowserRouter, Switch, Route, NavLink, Link } from 'react-router-dom';
|
||||||
|
|
||||||
// Routed Components
|
// Routed Components
|
||||||
import Dashboard from '../dashboard';
|
import Dashboard from '../dashboard';
|
||||||
|
import RameeloLanding from '../rameelo/landing';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
@@ -29,6 +30,10 @@ export default function Home() {
|
|||||||
</Route>{' '}
|
</Route>{' '}
|
||||||
*/}
|
*/}
|
||||||
|
|
||||||
|
<Route path="/rameelo">
|
||||||
|
<RameeloLanding />
|
||||||
|
</Route>
|
||||||
|
|
||||||
{/* If none of the previous routes render anything,
|
{/* If none of the previous routes render anything,
|
||||||
this route acts as a fallback.
|
this route acts as a fallback.
|
||||||
|
|
||||||
@@ -78,8 +83,22 @@ class ComponentSelection extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pages">
|
<div class="pages">
|
||||||
<div class="card">
|
<div class="card rameelo-card">
|
||||||
<div class="card-header">Rameelo</div>
|
<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>
|
||||||
<div class="card"></div>
|
<div class="card"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@
|
|||||||
.nav {
|
.nav {
|
||||||
@extend %flex;
|
@extend %flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
@extend %flex;
|
@extend %flex;
|
||||||
@@ -37,6 +38,29 @@ div .pages {
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
height: 200px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
export { default } from './landing';
|
||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 3.1 MiB |
+11
-3
@@ -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 {
|
body {
|
||||||
font-family: 'Fira Sans', sans-serif;
|
font-family: 'Bebas Neue', cursive;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
@@ -9,5 +10,12 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
color: $white;
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
%font-bebas {
|
||||||
|
font-family: 'Bebas Neue', cursive;
|
||||||
|
}
|
||||||
|
%font-inter {
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
}
|
}
|
||||||
|
|||||||
+30
-6
@@ -4,18 +4,42 @@
|
|||||||
display: flex !important;
|
display: flex !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-column {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-align-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
max-width: 1140px;
|
max-width: 1140px;
|
||||||
margin: 20px auto;
|
margin: 0px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
|
@extend %flex;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 25px;
|
border-radius: 5.460000038146973px;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
|
padding: 5px;
|
||||||
|
box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
.card-header {
|
button {
|
||||||
@extend %flex;
|
background-color: $primary-color;
|
||||||
padding: 10px;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user