Card by vinodjangid07

1.cardContainer {
2  width: fit-content;
3  position: relative;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7}
8
9.card {
10  position: relative;
11  width: 220px;
12  height: 250px;
13  display: flex;
14  flex-direction: column;
15  align-items: center;
16  justify-content: space-between;
17  padding: 20px 10px;
18  border-radius: 10px;
19  backdrop-filter: blur(30px);
20  background-color: rgba(65, 65, 65, 0.308);
21  border: 1px solid rgba(255, 255, 255, 0.089);
22  cursor: pointer;
23}
24
25.city {
26  font-weight: 700;
27  font-size: 0.9em;
28  letter-spacing: 1.2px;
29  color: white;
30}
31
32.weather {
33  font-weight: 500;
34  font-size: 0.7em;
35  letter-spacing: 1.2px;
36  color: rgb(197, 197, 197);
37}
38
39.temp {
40  font-size: 1.8em;
41  color: white;
42}
43
44.minmaxContainer {
45  width: 100%;
46  display: flex;
47  align-items: center;
48  justify-content: space-between;
49}
50
51.min,
52.max {
53  width: 50%;
54  display: flex;
55  flex-direction: column;
56  align-items: flex-end;
57  justify-content: center;
58  padding: 0px 20px;
59  gap: 4px;
60}
61
62.max {
63  align-items: flex-start;
64  border-left: 2px solid white;
65}
66
67.maxHeading,
68.minHeading {
69  font-size: 0.7em;
70  font-weight: 600;
71  color: white;
72}
73
74.maxTemp,
75.minTemp {
76  font-size: 0.6em;
77  font-weight: 500;
78  color: rgb(197, 197, 197);
79}
80
81.cardContainer::before {
82  width: 100px;
83  height: 100px;
84  content: "";
85  position: absolute;
86  background-color: rgb(144, 161, 255);
87  z-index: -1;
88  border-radius: 50%;
89  left: 100px;
90  top: 50px;
91  transition: all 1s;
92}
93
94.cardContainer:hover::before {
95  transform: translate(-50px, 50px);
96}
97