finishing the overlapping info cards
This commit is contained in:
talksik
@@ -1,19 +1,19 @@
|
||||
asset-manifest.json,1599264567988,67d42dfbf94c68c48750a81ec73daaeb0130d6df329bad6afc222cbc0aedc648
|
||||
favicon.ico,1599264562456,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
index.html,1599264567988,4b54157c0511c67cdb815147ce337acce9943c9f5490c625b9aa86284505c2b7
|
||||
manifest.json,1599264562459,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
logo192.png,1599264562457,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
precache-manifest.d67c964ef17d11e2815a2ffc38b72c05.js,1599264567988,75b411ba4378639882d1322cb20c0ac233501a71aa8f5f273c416e4c6af90c2c
|
||||
robots.txt,1599264562459,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
service-worker.js,1599264567988,b941b101d32cf1423cda06f49c0df7da166af46bf3db915b96073525a822c137
|
||||
logo512.png,1599264562458,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/css/main.3b506d81.chunk.css,1599264567989,14b2b645caed6e3c4157e607069de037547ca6c0f4214c6d81270b6b6d5c7fa9
|
||||
static/js/2.cccf8d68.chunk.js.LICENSE.txt,1599264567990,939252c822144d73596651aefa66be9e6a80d502374ef41a485d24f58127feac
|
||||
static/css/main.3b506d81.chunk.css.map,1599264567989,aa72b92143c13d94e32fa480ff298b393655527661dc56d7e854f582e111f111
|
||||
static/js/main.db85f575.chunk.js,1599264567990,85a6eec4a6356c9aadc9bd6bdcbffa4af76c41da533d0cfa71bd126b635a9d18
|
||||
static/js/runtime-main.fa53fba5.js,1599264567990,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/runtime-main.fa53fba5.js.map,1599264567989,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/js/main.db85f575.chunk.js.map,1599264567990,4dbdc23ba7ea4eb25b8e514537a1033b4952bb41b069d905973a6c5c9f44807d
|
||||
static/js/2.cccf8d68.chunk.js,1599264567989,f0800681209a1f179f96d32ec06228eb4ee2aa3b88463cb892bbc96320f8907d
|
||||
static/js/2.cccf8d68.chunk.js.map,1599264567990,1bcf64b78f83f08fe14bb1064533b0d9482d7c4d88c195579d95637512555e8d
|
||||
static/media/rameelo_cover_photo.298525d7.png,1599264567989,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
|
||||
asset-manifest.json,1599357182615,bbf783668dd914ff3873a3b5d1bd6d99a7686b94316f64cc4fd0c23cd76e3f7b
|
||||
index.html,1599357182614,184f7707bca500b5e83d1355501bf43195f270b45c93c1d5ab3c53b9d4ca6163
|
||||
precache-manifest.f537d4c5b93bf7c9c6b523329f6ed425.js,1599357182614,e63df71ead8c86f1639f36c1897da3c0fefb6f291f8535ebd91d83cdd8f4d107
|
||||
favicon.ico,1599357174133,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
service-worker.js,1599357182614,cfce6516ea35c6884469c16e79efe944279a159f5747ba791064dffce093330f
|
||||
logo192.png,1599357174133,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
manifest.json,1599357174135,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
robots.txt,1599357174135,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
static/js/2.2b242bd2.chunk.js.LICENSE.txt,1599357182617,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd
|
||||
logo512.png,1599357174134,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/css/main.89027b07.chunk.css,1599357182617,87eb1c6f7a2d7c59f55e88be01b32aadb79a6335e49e875a21a43b9f04e8191a
|
||||
static/js/runtime-main.fa53fba5.js,1599357182617,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/main.44f30f04.chunk.js,1599357182618,6ebe9217a5174fb18826ac3a23c3f570a05a907c7a19e806ca9853e6d44576e8
|
||||
static/css/main.89027b07.chunk.css.map,1599357182619,eb142b956afdf8397e467d7f5554c1374a678ffb8e8275fe10ff91e5586646dc
|
||||
static/js/runtime-main.fa53fba5.js.map,1599357182619,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/js/main.44f30f04.chunk.js.map,1599357182619,6cb7a24c1758d99967addb22e693dfcbb93bc53fd20baec315d8a23e3e5407d0
|
||||
static/js/2.2b242bd2.chunk.js,1599357182618,c6143a983ca92c75ec6731366c918e32adf59e7e0466ffc11f62252c1ecb39a6
|
||||
static/js/2.2b242bd2.chunk.js.map,1599357182618,c971de723d8d665df7e22ae5d2ed7fc8779e25bd8a2072751d8f7dd3f49a165b
|
||||
static/media/rameelo_cover_photo.298525d7.png,1599357182616,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
|
||||
|
||||
@@ -238,6 +238,49 @@ export default class Landing extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="host-section">
|
||||
<div className="overlapping-title">HOST</div>
|
||||
<div className="main-card">
|
||||
<div className="info-container">
|
||||
<span className="title">Navratri Events</span>
|
||||
<span className="description">
|
||||
On the next phase of the platform development, we will be
|
||||
building a gateway for Raas/Garba event hosts to promote their
|
||||
events, sell tickets, and manage event logistics! Event
|
||||
attendees seeking to attend Navratri events will be able to
|
||||
browse events, purchase tickets, and view promotion videos from
|
||||
those events!
|
||||
</span>
|
||||
<span className="actions">
|
||||
<button className="main-action">SIGN UP EVENT</button>
|
||||
<button className="secondary-action">CREATE ACCOUNT</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="compete-section">
|
||||
<div className="overlapping-title">Compete</div>
|
||||
<div className="main-card">
|
||||
<div className="info-container">
|
||||
<span className="title">Collegiate</span>
|
||||
<span className="description">
|
||||
For the first platform steps, we will be building a gateway for
|
||||
the collegiate Raas/Garba teams and competitions. Teams will be
|
||||
able to list their roster, share information about themselves,
|
||||
demonstrate achievements they have, exhibit their dance videos,
|
||||
and more. Competitions will be empowered to promote thier
|
||||
events, enable easy competition team lists, showcase their
|
||||
boards, exhibit videos, and present winners!
|
||||
</span>
|
||||
<span className="actions">
|
||||
<button className="main-action">SIGN UP TEAM</button>
|
||||
<button className="secondary-action">CREATE ACCOUNT</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -144,7 +144,7 @@
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
.col {
|
||||
border-right: 1px solid white !important;
|
||||
border-right: 1px solid #ffcb5a !important;
|
||||
}
|
||||
|
||||
:last-child {
|
||||
@@ -206,8 +206,11 @@
|
||||
padding: 2em 0 !important;
|
||||
}
|
||||
|
||||
.slick-arrow::before {
|
||||
color: black !important;
|
||||
button.slick-arrow::before {
|
||||
color: $red !important;
|
||||
// height: 40px !important;
|
||||
// width: 40px !important;
|
||||
box-shadow: 5px 5px 30px #0000001c;
|
||||
}
|
||||
|
||||
/* the slides */
|
||||
@@ -260,9 +263,7 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.event-name {
|
||||
font-size: 0.5em;
|
||||
@extend %font-inter;
|
||||
font-weight: 500;
|
||||
font: normal normal 600 18px/20px Inter;
|
||||
}
|
||||
|
||||
.event-location {
|
||||
@@ -279,3 +280,249 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.host-section {
|
||||
padding: 1em;
|
||||
background-color: $white;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 4em;
|
||||
}
|
||||
|
||||
.overlapping-title {
|
||||
font: normal normal bold 176px/211px Bebas Neue;
|
||||
text-align: left;
|
||||
color: $red;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
z-index: 1;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
top: -4rem;
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
|
||||
background: white 0% 0% no-repeat padding-box;
|
||||
box-shadow: 5px 10px 30px #00000038;
|
||||
|
||||
@media screen and (min-width: 1366px) {
|
||||
background: transparent url('../../../images/rameelo/host_bg_2x.png') 100%
|
||||
0% no-repeat padding-box;
|
||||
background-size: contain;
|
||||
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.info-container {
|
||||
max-width: 853px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
padding: 1rem 2rem;
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
padding: 2em 5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
font: normal normal bold 78px/152px Bebas Neue;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: left;
|
||||
font: normal normal normal 18px/27px Inter;
|
||||
letter-spacing: 0px;
|
||||
color: #6f6f6f;
|
||||
opacity: 1;
|
||||
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 2em;
|
||||
|
||||
button {
|
||||
border-radius: none !important;
|
||||
margin: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-action {
|
||||
width: 193px;
|
||||
height: 62px;
|
||||
/* UI Properties */
|
||||
background: #ff1d46 0% 0% no-repeat padding-box;
|
||||
box-shadow: 5px 6px 30px #00000040;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
|
||||
text-align: center;
|
||||
font: normal normal 600 15px/19px Inter;
|
||||
letter-spacing: 0.3px;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
width: 193px;
|
||||
height: 62px;
|
||||
/* UI Properties */
|
||||
border: 1px solid $red;
|
||||
opacity: 1;
|
||||
|
||||
text-align: center;
|
||||
font: normal normal 600 15px/19px Inter;
|
||||
letter-spacing: 0.3px;
|
||||
color: $red;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compete-section {
|
||||
padding: 1em;
|
||||
background-color: $white;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 4em;
|
||||
}
|
||||
|
||||
.overlapping-title {
|
||||
font: normal normal bold 176px/211px Bebas Neue;
|
||||
text-align: left;
|
||||
color: $gold;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
z-index: 1;
|
||||
opacity: 0.45;
|
||||
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.main-card {
|
||||
top: -4rem;
|
||||
z-index: 100;
|
||||
opacity: 1;
|
||||
|
||||
background: white 0% 0% no-repeat padding-box;
|
||||
box-shadow: 5px 10px 30px #00000038;
|
||||
|
||||
@media screen and (min-width: 1366px) {
|
||||
background: transparent url('../../../images/rameelo/host_bg_2x.png') 0%
|
||||
0% no-repeat padding-box;
|
||||
background-size: contain;
|
||||
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
|
||||
::before {
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
}
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.info-container {
|
||||
max-width: 853px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
padding: 1rem 2rem;
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
padding: 2em 5em;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: left;
|
||||
font: normal normal bold 78px/152px Bebas Neue;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.description {
|
||||
text-align: left;
|
||||
font: normal normal normal 18px/27px Inter;
|
||||
letter-spacing: 0px;
|
||||
color: #6f6f6f;
|
||||
opacity: 1;
|
||||
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-bottom: 2em;
|
||||
|
||||
button {
|
||||
border-radius: none !important;
|
||||
margin: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-action {
|
||||
width: 193px;
|
||||
height: 62px;
|
||||
/* UI Properties */
|
||||
background: $gold 0% 0% no-repeat padding-box;
|
||||
box-shadow: 5px 6px 30px #00000040;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
|
||||
text-align: center;
|
||||
font: normal normal 600 15px/19px Inter;
|
||||
letter-spacing: 0.3px;
|
||||
color: #ffffff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
width: 193px;
|
||||
height: 62px;
|
||||
/* UI Properties */
|
||||
border: 1px solid $gold;
|
||||
opacity: 1;
|
||||
|
||||
text-align: center;
|
||||
font: normal normal 600 15px/19px Inter;
|
||||
letter-spacing: 0.3px;
|
||||
color: $gold;
|
||||
background-color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
Executable
BIN
Binary file not shown.
|
After Width: | Height: | Size: 315 KiB |
@@ -31,7 +31,7 @@ body {
|
||||
box-shadow: 0px 0px 30px 0px rgba(82, 63, 105, 0.05);
|
||||
}
|
||||
|
||||
button {
|
||||
.cf-button {
|
||||
background-color: $primary-color;
|
||||
color: $white;
|
||||
padding: 8.449999809265137px 13px;
|
||||
|
||||
Reference in New Issue
Block a user