Skip to content

Commit c9935de

Browse files
chrisbagaschrisbagas
committed
Fixed css Cards
1 parent ab3eb32 commit c9935de

File tree

4 files changed

+78
-163
lines changed

4 files changed

+78
-163
lines changed

‎src/components/CardItems/CardItems.css‎

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,7 @@
1-
.cards {
2-
padding: 4rem;
3-
background: #fff;
4-
}
5-
6-
h1 {
7-
text-align: center;
8-
}
9-
10-
.cards__container {
11-
display: flex;
12-
flex-flow: column;
13-
align-items: center;
14-
max-width: 1120px;
15-
width: 90%;
16-
margin: 0 auto;
17-
}
18-
19-
.cards__wrapper {
20-
position: relative;
21-
margin: 50px 0 45px;
22-
}
23-
24-
.cards__items {
25-
margin-bottom: 100px;
26-
margin-top: 100px;
27-
}
28-
291
.cards__item {
30-
display: flex;
31-
flex: 1;
2+
position: relative;
3+
width: 100%;
4+
height: 100%;
325
margin: 0 1rem;
336
border-radius: 10px;
347
}
@@ -135,12 +108,6 @@ h1 {
135108
}
136109
}
137110

138-
@media only screen and (min-width: 1280px) {
139-
.cards__items {
140-
display: flex;
141-
}
142-
}
143-
144111
@media only screen and (max-width: 1280px) {
145112
.cards__item {
146113
margin-bottom: 2rem;

‎src/components/CardItems/CardItems.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import './CardItems.css'
44

55
function CardItems(props) {
66
return (
7-
<li className='cards__item'>
8-
<Link className='cards__item__link' to={props.path}>
7+
<div className='cards__item'>
8+
<div className='cards__item__link'>
99
<figure className='cards__item__pic-wrap' data-category={props.label}>
1010
<img
1111
className='cards__item__img'
@@ -24,8 +24,8 @@ function CardItems(props) {
2424
<hr className='break__line'></hr>
2525
<p className="cards__item__division">{props.division}</p>
2626
</div>
27-
</Link>
28-
</li>
27+
</div>
28+
</div>
2929
)
3030
}
3131

‎src/components/Cards/Cards.css‎

Lines changed: 11 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -17,132 +17,24 @@ margin: 0 auto;
1717
}
1818

1919
.cards__wrapper {
20-
position: relative;
2120
margin: 50px 0 45px;
2221
}
2322

2423
.cards__items {
25-
margin-bottom: 100px;
26-
margin-top: 100px;
24+
display: grid;
25+
grid-template-columns: 1fr 1fr 1fr;
26+
gap: 2rem;
27+
place-self: center;
28+
margin-bottom: 100px;
29+
margin-top: 100px;
2730
}
2831

29-
.cards__item {
30-
display: flex;
31-
flex: 1;
32-
margin: 0 1rem;
33-
border-radius: 10px;
34-
}
35-
36-
.cards__item__link {
37-
display: flex;
38-
flex-flow: column;
39-
width: 100%;
40-
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
41-
-webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
42-
filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
43-
border-radius: 10px;
44-
overflow: hidden;
45-
text-decoration: none;
46-
}
47-
48-
.cards__item__pic-wrap {
49-
position: relative;
50-
width: 100%;
51-
padding-top: 67%;
52-
overflow: hidden;
53-
}
54-
55-
.fade-img {
56-
animation-name: fade-img;
57-
animation-duration: 2s;
58-
}
5932

60-
.cards__item__pic-wrap::after {
61-
content: attr(data-category);
62-
position: absolute;
63-
bottom: 0;
64-
margin-left: 10px;
65-
padding: 6px 8px;
66-
max-width: calc((100%) - 60px);
67-
font-size: 12px;
68-
font-weight: 700;
69-
color: #fff;
70-
background-color: #1f98f4;
71-
box-sizing: border-box;
33+
@media screen and (max-width: 1280px) {
34+
.cards__items {
35+
grid-template-columns: 1fr;
36+
gap: 1rem;
37+
}
7238
}
7339

74-
.cards__item__img {
75-
position: absolute;
76-
top: 0;
77-
right: 0;
78-
bottom: 0;
79-
left: 0;
80-
display: block;
81-
width: 100%;
82-
max-width: 100%;
83-
height: 100%;
84-
max-height: 100%;
85-
object-fit: cover;
86-
transition: all 0.2s linear;
87-
}
8840

89-
.cards__item__img:hover {
90-
transform: scale(1.1);
91-
}
92-
93-
.cards__item__info {
94-
width: 400px;
95-
padding: 20px 50px 30px 20px;
96-
}
97-
98-
.cards__item__text {
99-
color: #252e48;
100-
font-size: 18px;
101-
line-height: 24px;
102-
}
103-
104-
.cards__item__info__data{
105-
padding-top: 10px;
106-
}
107-
108-
.cards__item__text__data{
109-
font-weight: 400;
110-
}
111-
112-
.break__line{
113-
size: 150px;
114-
margin-left: 50px;
115-
margin-top: 10px;
116-
}
117-
118-
.main__break__line{
119-
position: relative;
120-
top: 20px;
121-
border: none;
122-
height: 24px;
123-
background: rgb(228, 228, 228);
124-
margin-bottom: 100px;
125-
}
126-
127-
.cards__item__division{
128-
margin-left: 160px;
129-
margin-top: 10px;
130-
}
131-
132-
@media only screen and (min-width: 1200px) {
133-
.content__blog__container {
134-
width: 84%;
135-
}
136-
}
137-
138-
@media only screen and (min-width: 1280px) {
139-
.cards__items {
140-
display: flex;
141-
}
142-
}
143-
144-
@media only screen and (max-width: 1280px) {
145-
.cards__item {
146-
margin-bottom: 2rem;
147-
}
148-
}

‎src/components/Cards/Cards.js‎

Lines changed: 60 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import './Cards.css'
23
import CardItems from 'components/CardItems/CardItems'
34
import SectionHeader from 'components/SectionHeader/SectionHeader'
45

@@ -8,7 +9,7 @@ function Cards() {
89
<div className='cards__container'>
910
<div className='cards__wrapper'>
1011
<SectionHeader color="#CFE7E7" isGallerypage={true}>Upcoming Events</SectionHeader>
11-
<ul className='cards__items'>
12+
<div className='cards__items'>
1213
<CardItems
1314
src='../gallery/kut-2019/1.jpg'
1415
text='kut 2019'
@@ -42,12 +43,45 @@ function Cards() {
4243
link='bit.ly/daftar'
4344
division='PSDM'
4445
/>
45-
</ul>
46+
<CardItems
47+
src='../gallery/kut-2019/1.jpg'
48+
text='kut 2019'
49+
label='kut'
50+
path='/event'
51+
tanggal='Friday, July 1'
52+
jam='13.00'
53+
lokasi='Discord'
54+
link='bit.ly/daftar'
55+
division='PSDM'
56+
/>
57+
<CardItems
58+
src='../gallery/kut-2019/1.jpg'
59+
text='kut 2019'
60+
label='kut'
61+
path='/event'
62+
tanggal='Friday, July 1'
63+
jam='13.00'
64+
lokasi='Discord'
65+
link='bit.ly/daftar'
66+
division='PSDM'
67+
/>
68+
<CardItems
69+
src='../gallery/kut-2019/1.jpg'
70+
text='kut 2019'
71+
label='kut'
72+
path='/event'
73+
tanggal='Friday, July 1'
74+
jam='13.00'
75+
lokasi='Discord'
76+
link='bit.ly/daftar'
77+
division='PSDM'
78+
/>
79+
</div>
4680

4781
<hr className='main__break__line'></hr>
4882

4983
<SectionHeader color="#CFE7E7" isGallerypage={true}>Previous Events</SectionHeader>
50-
<ul className='cards__items'>
84+
<div className='cards__items'>
5185
<CardItems
5286
src='../gallery/kut-2019/1.jpg'
5387
text='kut 2019'
@@ -81,7 +115,29 @@ function Cards() {
81115
link='bit.ly/daftar'
82116
division='PSDM'
83117
/>
84-
</ul>
118+
<CardItems
119+
src='../gallery/kut-2019/1.jpg'
120+
text='kut 2019'
121+
label='kut'
122+
path='/event'
123+
tanggal='Friday, July 1'
124+
jam='13.00'
125+
lokasi='Discord'
126+
link='bit.ly/daftar'
127+
division='PSDM'
128+
/>
129+
<CardItems
130+
src='../gallery/kut-2019/1.jpg'
131+
text='kut 2019'
132+
label='kut'
133+
path='/event'
134+
tanggal='Friday, July 1'
135+
jam='13.00'
136+
lokasi='Discord'
137+
link='bit.ly/daftar'
138+
division='PSDM'
139+
/>
140+
</div>
85141
</div>
86142
</div>
87143
</div>

0 commit comments

Comments
 (0)