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

finished all of the content of each event card

Browse Source
This commit is contained in:
talksik
2020-09-05 18:40:17 -07:00
parent 4cb1611237
commit 691165e0bf
3 changed files with 116 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.firebase/hosting.YnVpbGQ.cache
-1
View File
@@ -1,4 +1,3 @@
service-worker.js,1599243724293,60ad1128a91766033102a4a8d5510cc5cb0c9ba6df2bbbfa52006b72f0962662
asset-manifest.json,1599264567988,67d42dfbf94c68c48750a81ec73daaeb0130d6df329bad6afc222cbc0aedc648
favicon.ico,1599264562456,a08fa4488c3ecef62d9effd03b3a989929bdcbecf5e905941f9034a15bd3dba3
index.html,1599264567988,4b54157c0511c67cdb815147ce337acce9943c9f5490c625b9aa86284505c2b7
src/components/rameelo/landing/landing.js
+80 -10
View File
@@ -9,7 +9,6 @@ import Slider from 'react-slick';
export default class Landing extends React.Component {
render() {
var sliderSettings = {
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
@@ -156,23 +155,94 @@ export default class Landing extends React.Component {
<div class="carousel-container">
<Slider {...sliderSettings}>
<div className="event-card">
<span className="event-card-graphic"></span>
<span className="event-card-info"></span>
<span className="event-card-graphic">
<span className="date-graphic">
<span>OCT</span>
<span>19</span>
</span>
</span>
<span className="event-card-info">
<span className="event-name">
Garba with Attitude Competition
</span>
<span className="event-location">
<i className="fas fa-location-arrow"></i>
United Center @ Chicag, IL
</span>
</span>
</div>
<div className="event-card">
<h3>2</h3>
<span className="event-card-graphic">
<span className="date-graphic">
<span>OCT</span>
<span>19</span>
</span>
</span>
<span className="event-card-info">
<span className="event-name">
Garba with Attitude Competition
</span>
<span className="event-location">
<i className="fas fa-location-arrow"></i>
United Center @ Chicag, IL
</span>
</span>
</div>
<div className="event-card">
<h3>3</h3>
<span className="event-card-graphic">
<span className="date-graphic">
<span>OCT</span>
<span>19</span>
</span>
</span>
<span className="event-card-info">
<span className="event-name">
Garba with Attitude Competition
</span>
<span className="event-location">
<i className="fas fa-location-arrow"></i>
United Center @ Chicag, IL
</span>
</span>
</div>
<div className="event-card">
<h3>4</h3>
<span className="event-card-graphic">
<span className="date-graphic">
<span>OCT</span>
<span>19</span>
</span>
</span>
<span className="event-card-info">
<span className="event-name">
Garba with Attitude Competition
</span>
<span className="event-location">
<i className="fas fa-location-arrow"></i>
United Center @ Chicag, IL
</span>
</span>
</div>
<div className="event-card">
<h3>5</h3>
</div>
<div className="event-card">
<h3>6</h3>
<span className="event-card-graphic">
<span className="date-graphic">
<span>OCT</span>
<span>19</span>
</span>
</span>
<span className="event-card-info">
<span className="event-name">
Garba with Attitude Competition
</span>
<span className="event-location">
<i className="fas fa-location-arrow"></i>
United Center @ Chicag, IL
</span>
</span>
</div>
</Slider>
</div>
src/components/rameelo/landing/landing.scss
+36 -4
View File
@@ -197,7 +197,9 @@
}
.carousel-container {
margin: 1em 0;
.slick-list {
padding: 2em 0 !important;
}
.slick-arrow::before {
color: black !important;
@@ -222,21 +224,51 @@
padding: 1rem;
display: flex;
display: flex !important;
flex-direction: row;
.event-card-graphic {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
.date-graphic {
color: $white;
background-color: $red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 35px;
width: 35px;
span {
font-size: 0.5em;
}
}
}
.event-card-info {
display: flex;
padding: 0em 0.5em;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.event-name {
font-size: 0.5em;
@extend %font-inter;
font-weight: 500;
}
.event-location {
i {
margin-right: 5px;
}
color: $secondary-text;
@extend %font-inter;
font-size: 0.4em;
}
}
}
}