Card by arafatrahat94

1.cardCollection {
2  width: 100%;
3  max-width: 290px;
4  height: 80px;
5  background: #353535;
6  border-radius: 20px;
7  display: flex;
8  align-items: center;
9  justify-content: left;
10
11  transition: 0.5s ease-in-out;
12}
13
14.cardCollection:hover {
15  cursor: pointer;
16  transform: scale(1.05);
17}
18
19.cardCollectionimg {
20  width: 50px;
21  height: 50px;
22  margin-left: 10px;
23  border-radius: 10px;
24  background: linear-gradient(#d7cfcf, #9198e5);
25}
26
27.cardCollection:hover > .cardCollectionimg {
28  transition: 0.5s ease-in-out;
29  background: linear-gradient(#9198e5, #712020);
30}
31
32.cardCollectiontextBox {
33  width: calc(100% - 90px);
34  margin-left: 10px;
35  color: white;
36  font-family: "Poppins" sans-serif;
37}
38
39.cardCollectiontextContent {
40  display: flex;
41  align-items: center;
42  justify-content: space-between;
43}
44
45.span {
46  font-size: 10px;
47}
48
49.cardCollectionh1 {
50  font-size: 16px;
51  font-weight: bold;
52}
53
54.cardCollectionp {
55  font-size: 12px;
56  font-weight: lighter;
57}
58.cardCollectioncheckbox-container {
59  display: inline-block;
60  position: relative;
61  padding-left: 35px;
62  margin-bottom: 12px;
63  cursor: pointer;
64  font-size: 16px;
65  user-select: none;
66}
67
68.cardCollectioncustom-checkbox {
69  position: absolute;
70  opacity: 0;
71  cursor: pointer;
72  height: 0;
73  width: 0;
74}
75
76.cardCollectioncheckmark {
77  position: absolute;
78  top: 0;
79  left: 0;
80  height: 25px;
81  width: 25px;
82  background-color: #eee;
83  border-radius: 4px;
84  transition: background-color 0.3s;
85  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
86}
87
88.cardCollectioncheckmark:after {
89  content: "";
90  position: absolute;
91  display: none;
92  left: 9px;
93  top: 5px;
94  width: 5px;
95  height: 10px;
96  border: solid white;
97  border-width: 0 3px 3px 0;
98  transform: rotate(45deg);
99}
100
101.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark {
102  background-color: #2196f3;
103  box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3);
104}
105
106.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark:after {
107  display: block;
108}
109
110@keyframes checkAnim {
111  0% {
112    height: 0;
113  }
114
115  100% {
116    height: 10px;
117  }
118}
119
120.cardCollectioncustom-checkbox:checked ~ .cardCollectioncheckmark:after {
121  animation: checkAnim 0.2s forwards;
122}
123