good progress on the video section
This commit is contained in:
talksik
@@ -1,20 +1,21 @@
|
||||
asset-manifest.json,1599414594462,bed79950607a7d7824a7184f5fabd9389e60a1e4127ad743c86b4869cc8d1b02
|
||||
favicon.ico,1599414588545,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
index.html,1599414594462,d354bddf305dfb4996f274b74c0e1fa88e5f6a0c0b5f59bed0a74bd1e0d0a929
|
||||
manifest.json,1599414588549,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
precache-manifest.84e8a07edeceaf9f94fb9f02fdac09ef.js,1599414594462,d93ed9e5485b554357e0cf8eced31d13f5a12ab83cee3175a823f573c018a225
|
||||
robots.txt,1599414588549,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
logo192.png,1599414588547,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
service-worker.js,1599414594462,9c3e09bf5049ef341ba11cb0542e3a2c1d52906991fa97bfde582c277b138fe0
|
||||
static/js/2.2b242bd2.chunk.js.LICENSE.txt,1599414594464,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd
|
||||
logo512.png,1599414588548,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/css/main.9367d51f.chunk.css,1599414594464,64dab1897d3ef3e094ec64100fdf5b103aeeab688cbcd5eae6c93acde862477b
|
||||
static/js/main.a5b91c04.chunk.js,1599414594465,9c9f6576a382928a68bd59435dd6aa9c2007cb23c0a5bd9dbf1a3c19799fa2b3
|
||||
static/css/main.9367d51f.chunk.css.map,1599414594465,b5dd03e8b289bf39e040c068d4bc6b1b15ef3e583cdb153eafdbb78011f819ad
|
||||
static/js/runtime-main.fa53fba5.js,1599414594464,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/runtime-main.fa53fba5.js.map,1599414594464,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/js/main.a5b91c04.chunk.js.map,1599414594465,4d1363aa543224fd3d3a9b2fe4cc72a243966f67f3f477b3149bdd1a965e65bc
|
||||
static/js/2.2b242bd2.chunk.js,1599414594463,c6143a983ca92c75ec6731366c918e32adf59e7e0466ffc11f62252c1ecb39a6
|
||||
static/media/host_bg_2x.8a86e3a6.png,1599414594465,1689bee07f1c51bd50315c71085a3c507c84c53f55f6e92bb63e16009cffa1e1
|
||||
static/js/2.2b242bd2.chunk.js.map,1599414594465,c971de723d8d665df7e22ae5d2ed7fc8779e25bd8a2072751d8f7dd3f49a165b
|
||||
static/media/rameelo_cover_photo.298525d7.png,1599414594463,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
|
||||
asset-manifest.json,1599416798116,3644e9cdc1f4f6ea1aebafb601d626ed6b4502c914be9b9fc42158f61d859a68
|
||||
precache-manifest.b15b375b262fbaaeb56751e4759c81b9.js,1599416798114,ccfe358f6c0b7b1d1a4563b5fca7871ee87a8c2b9faae4ff8c037882475ee4e3
|
||||
index.html,1599416798114,f2d0470c9f8e0a4e7f8ad32d3e1a8d80ae914726d3ddd23269bcb6e0032c3199
|
||||
robots.txt,1599416789860,391d14b3c2f8c9143a27a28c7399585142228d4d1bdbe2c87ac946de411fa9a2
|
||||
favicon.ico,1599416789855,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
|
||||
service-worker.js,1599416798114,bb8b40b8d4ce0e8b9daa1569fc7ee9a6dced014a2a0de9ae79442d5d92b29405
|
||||
logo192.png,1599416789856,caff018b7f1e8fd481eb1c50d75b0ef236bcd5078b1d15c8bb348453fee30293
|
||||
manifest.json,1599416789859,341d52628782f8ac9290bbfc43298afccb47b7cbfcee146ae30cf0f46bc30900
|
||||
logo512.png,1599416789857,191fc21360b4ccfb1cda11a1efb97f489ed22672ca83f4064316802bbfdd750e
|
||||
static/js/2.0c4f093c.chunk.js.LICENSE.txt,1599416798117,a3e8b1ff4d8b8e727a88d96ba484b3cc1f4b6645be9f62f8445f35cb50e920cd
|
||||
static/css/main.7db4c47d.chunk.css,1599416798116,49fef501735bc8d6e919d66cdb27f9c0fdd9ffca8c4938d9260b483649676d65
|
||||
static/js/runtime-main.fa53fba5.js,1599416798116,b9289f9a9022bc228976645ecd66e888587d9f995a502b741e475361470248f9
|
||||
static/js/main.4d5d3f4e.chunk.js,1599416798116,66a3f165ce65248a372d8fad3ff3f42d38ebf26093967780cba0d32c8e1ab409
|
||||
static/js/runtime-main.fa53fba5.js.map,1599416798117,e98d47efe293730d8b3fdf7596cd1083175dffaeb1d5e4c3e07b2a92a5ecb5d8
|
||||
static/css/main.7db4c47d.chunk.css.map,1599416798116,37ecdb96aa5a658d0e5b33544abdf5921ff5201f4910c47f74ea8fa0ef4fff38
|
||||
static/js/main.4d5d3f4e.chunk.js.map,1599416798116,a211a205443dfc89cf997b5f0d203b873286795712c33d11cf6cf48982243db7
|
||||
static/media/loader.60877ab0.gif,1599416798116,8dec9f2b7cad916a9f9d3a4f084ff0054d909144c0f2866d9c98626c4d920159
|
||||
static/js/2.0c4f093c.chunk.js,1599416798116,8d2420562a98510b838c4ceeb37aff37468c9b919590513ecec58a210093f7db
|
||||
static/media/host_bg_2x.8a86e3a6.png,1599416798115,1689bee07f1c51bd50315c71085a3c507c84c53f55f6e92bb63e16009cffa1e1
|
||||
static/js/2.0c4f093c.chunk.js.map,1599416798117,9e285dab2cc42d97529df24773de81c80a3c7fd81374ec517295752251f30142
|
||||
static/media/rameelo_cover_photo.298525d7.png,1599416798118,584a99ed276e0ed86db78cca3f84462b4d2bba931a7cb7ff335265526dfedbbc
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
"node-sass": "^4.14.1",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-player": "2.6.1",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "3.4.3",
|
||||
"react-slick": "^0.27.10"
|
||||
|
||||
@@ -6,6 +6,9 @@ import './landing.scss';
|
||||
// Slick
|
||||
import Slider from 'react-slick';
|
||||
|
||||
// Video Player
|
||||
import ReactPlayer from 'react-player';
|
||||
|
||||
// Loader component
|
||||
import Loader from '../../loader';
|
||||
|
||||
@@ -13,7 +16,7 @@ export default class Landing extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isLoading: true,
|
||||
isLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -36,7 +39,7 @@ export default class Landing extends React.Component {
|
||||
}
|
||||
|
||||
function LandingContent(props) {
|
||||
var sliderSettings = {
|
||||
var eventSliderSettings = {
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 4,
|
||||
@@ -59,6 +62,29 @@ function LandingContent(props) {
|
||||
],
|
||||
};
|
||||
|
||||
var videoSliderSettings = {
|
||||
infinite: true,
|
||||
speed: 300,
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 3,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 600,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`rameelo-wrapper ${props.hide ? 'cf-hide' : ''}`}>
|
||||
<div className="top-section">
|
||||
@@ -169,9 +195,9 @@ function LandingContent(props) {
|
||||
|
||||
<div className="events-section">
|
||||
<div class="events-inner-container">
|
||||
<span>Upcoming Events</span>
|
||||
<span className="section-title">Upcoming Events</span>
|
||||
<div class="carousel-container">
|
||||
<Slider {...sliderSettings}>
|
||||
<Slider {...eventSliderSettings}>
|
||||
<div className="event-card">
|
||||
<span className="event-card-graphic">
|
||||
<span className="date-graphic">
|
||||
@@ -267,6 +293,49 @@ function LandingContent(props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="highlights-section">
|
||||
<span className="section-title">Event Highlights</span>
|
||||
<div className="main-video-container">
|
||||
{/* Check out for further functionality of this package:
|
||||
https://www.npmjs.com/package/react-player */}
|
||||
<ReactPlayer
|
||||
controls={true}
|
||||
url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
|
||||
/>
|
||||
</div>
|
||||
<div className="bottom-video-content">
|
||||
<span className="join-card">
|
||||
<span className="card-title">Join the Fun</span>
|
||||
<span className="card-desc">
|
||||
Interested in attending an event? Sign up now to purchase tickets!
|
||||
</span>
|
||||
<span className="card-action">Sign Up Now</span>
|
||||
</span>
|
||||
<span className="video-slider-container">
|
||||
<Slider {...videoSliderSettings}>
|
||||
<span className="video-slide">
|
||||
<ReactPlayer
|
||||
controls={true}
|
||||
url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
|
||||
/>
|
||||
</span>
|
||||
<span className="video-slide">
|
||||
<ReactPlayer
|
||||
controls={true}
|
||||
url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
|
||||
/>
|
||||
</span>
|
||||
<span className="video-slide">
|
||||
<ReactPlayer
|
||||
controls={true}
|
||||
url="https://www.youtube.com/watch?v=gOPEpsGJyCs"
|
||||
/>
|
||||
</span>
|
||||
</Slider>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="host-section">
|
||||
<div className="overlapping-title">HOST</div>
|
||||
<div className="main-card">
|
||||
|
||||
@@ -1,5 +1,23 @@
|
||||
@import '../../../styles/index';
|
||||
|
||||
// Slick Slider Styles
|
||||
.slick-list {
|
||||
padding: 1em 0 !important;
|
||||
}
|
||||
|
||||
button.slick-arrow::before {
|
||||
color: $red !important;
|
||||
// height: 40px !important;
|
||||
// width: 40px !important;
|
||||
box-shadow: 5px 5px 30px #0000001c;
|
||||
}
|
||||
|
||||
/* the slides */
|
||||
.slick-slide {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
// content
|
||||
.rameelo-wrapper {
|
||||
max-width: 1920px !important;
|
||||
margin: 0 auto;
|
||||
@@ -197,27 +215,12 @@
|
||||
}
|
||||
|
||||
.events-inner-container {
|
||||
span {
|
||||
span.section-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
.slick-list {
|
||||
padding: 2em 0 !important;
|
||||
}
|
||||
|
||||
button.slick-arrow::before {
|
||||
color: $red !important;
|
||||
// height: 40px !important;
|
||||
// width: 40px !important;
|
||||
box-shadow: 5px 5px 30px #0000001c;
|
||||
}
|
||||
|
||||
/* the slides */
|
||||
.slick-slide {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
padding-top: 2rem;
|
||||
ul {
|
||||
background: #f4f4f4 0% 0% no-repeat padding-box !important;
|
||||
}
|
||||
@@ -249,8 +252,9 @@
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
|
||||
span {
|
||||
font-size: 0.5em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -281,6 +285,100 @@
|
||||
}
|
||||
}
|
||||
|
||||
.highlights-section {
|
||||
padding: 2em;
|
||||
background-color: $white;
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
padding: 4em 7em;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: left;
|
||||
font: normal normal normal 38px/74px Bebas Neue;
|
||||
letter-spacing: 0px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.main-video-container {
|
||||
div {
|
||||
width: auto !important;
|
||||
|
||||
@media only screen and (min-width: 320px) {
|
||||
height: 200px !important;
|
||||
}
|
||||
@media only screen and (min-width: 481px) {
|
||||
height: 400px !important;
|
||||
}
|
||||
@media only screen and (min-width: 769px) {
|
||||
height: 600px !important;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1201px) {
|
||||
height: 900px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-video-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 1.5rem 0;
|
||||
|
||||
.join-card {
|
||||
width: 391px;
|
||||
height: 246px;
|
||||
background-color: $red;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 2em;
|
||||
|
||||
box-shadow: 5px 6px 10px #0000005a;
|
||||
|
||||
.card-title {
|
||||
text-align: left;
|
||||
font: normal normal normal 38px/39px Bebas Neue;
|
||||
letter-spacing: 0px;
|
||||
color: #f4f4f4;
|
||||
opacity: 1;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
text-align: left;
|
||||
font: normal normal normal 18px/25px Inter;
|
||||
letter-spacing: 0px;
|
||||
color: #f4f4f4;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
text-align: left;
|
||||
font: normal normal 600 15px/19px Inter;
|
||||
letter-spacing: 0.3px;
|
||||
color: $gold;
|
||||
opacity: 1;
|
||||
justify-self: flex-end;
|
||||
margin-top: 4em;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.video-slider-container {
|
||||
padding: 0 1.5em;
|
||||
|
||||
.video-slide {
|
||||
div {
|
||||
width: 320px !important;
|
||||
height: 220px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.host-section {
|
||||
padding: 1em;
|
||||
background-color: $white;
|
||||
|
||||
Reference in New Issue
Block a user