Card by zanina-yassine

1.card {
2  width: 350px;
3  height: 235px;
4  position: relative;
5  padding: 25px;
6  background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF;
7  box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
8  border-radius: 23px;
9  transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);
10  cursor: pointer;
11}
12
13.card:hover {
14  transform: scale(1.05);
15}
16
17.container {
18  width: 250px;
19  height: 250px;
20  position: absolute;
21  right: -35px;
22  top: -50px;
23  display: flex;
24  align-items: center;
25  justify-content: center;
26  transform: scale(0.7);
27}
28
29.cloud {
30  width: 250px;
31}
32
33.front {
34  padding-top: 45px;
35  margin-left: 25px;
36  display: inline;
37  position: absolute;
38  z-index: 11;
39  animation: clouds 8s infinite;
40  animation-timing-function: ease-in-out;
41}
42
43.back {
44  margin-top: -30px;
45  margin-left: 150px;
46  z-index: 12;
47  animation: clouds 12s infinite;
48  animation-timing-function: ease-in-out;
49}
50
51.right-front {
52  width: 45px;
53  height: 45px;
54  border-radius: 50% 50% 50% 0%;
55  background-color: #4c9beb;
56  display: inline-block;
57  margin-left: -25px;
58  z-index: 5;
59}
60
61.left-front {
62  width: 65px;
63  height: 65px;
64  border-radius: 50% 50% 0% 50%;
65  background-color: #4c9beb;
66  display: inline-block;
67  z-index: 5;
68}
69
70.right-back {
71  width: 50px;
72  height: 50px;
73  border-radius: 50% 50% 50% 0%;
74  background-color: #4c9beb;
75  display: inline-block;
76  margin-left: -20px;
77  z-index: 5;
78}
79
80.left-back {
81  width: 30px;
82  height: 30px;
83  border-radius: 50% 50% 0% 50%;
84  background-color: #4c9beb;
85  display: inline-block;
86  z-index: 5;
87}
88
89.sun {
90  width: 120px;
91  height: 120px;
92  background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);
93  background: linear-gradient(to right, #fcbb04, #fffc00);
94  border-radius: 60px;
95  display: inline;
96  position: absolute;
97}
98
99.sunshine {
100  animation: sunshines 2s infinite;
101}
102
103@keyframes sunshines {
104  0% {
105    transform: scale(1);
106    opacity: 0.6;
107  }
108
109  100% {
110    transform: scale(1.4);
111    opacity: 0;
112  }
113}
114
115@keyframes clouds {
116  0% {
117    transform: translateX(15px);
118  }
119
120  50% {
121    transform: translateX(0px);
122  }
123
124  100% {
125    transform: translateX(15px);
126  }
127}
128
129.card-header {
130  display: flex;
131  flex-direction: column;
132  gap: 10px;
133}
134
135.card-header span:first-child {
136  word-break: break-all;
137  font-weight: 800;
138  font-size: 15px;
139  line-height: 135%;
140  color: rgba(87, 77, 51, 0.66);
141}
142
143.card-header span:last-child {
144  font-weight: 700;
145  font-size: 15px;
146  line-height: 135%;
147  color: rgba(87, 77, 51, 0.33);
148}
149
150.temp {
151  position: absolute;
152  left: 25px;
153  bottom: 12px;
154  font-weight: 700;
155  font-size: 64px;
156  line-height: 77px;
157  color: rgba(87, 77, 51, 1);
158}
159
160.temp-scale {
161  width: 80px;
162  height: 36px;
163  position: absolute;
164  right: 25px;
165  bottom: 25px;
166  display: flex;
167  align-items: center;
168  justify-content: center;
169  background: rgba(0, 0, 0, 0.06);
170  border-radius: 9px;
171}
172
173.temp-scale span {
174  font-weight: 700;
175  font-size: 13px;
176  line-height: 134.49%;
177  color: rgba(87, 77, 51, 0.66);
178}