Card by Yaya12085

1.card {
2  --gray: rgba(229, 231, 235, 1);
3  width: 350px;
4  height: 13rem;
5  display: flex;
6  grid-gap: 1.25rem;
7  gap: 1.25rem;
8  border-radius: 1rem;
9  background-color: rgba(255, 255, 255, 1);
10  padding: 1.5rem;
11}
12
13.card-1 {
14  width: 40%;
15  border-radius: 0.75rem;
16  background-color: var(--gray);
17  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
18}
19
20.right {
21  display: flex;
22  flex: 1 1 0%;
23  flex-direction: column;
24  grid-gap: 1.25rem;
25  gap: 1.25rem;
26}
27
28.card-2 {
29  height: 3.5rem;
30  width: 100%;
31  border-radius: 1rem;
32  background-color: var(--gray);
33  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
34}
35
36.card-3 {
37  height: 0.75rem;
38  width: 100%;
39  border-radius: 1rem;
40  background-color: var(--gray);
41  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
42}
43
44.bottom {
45  margin-top: auto;
46  display: flex;
47  grid-gap: 0.75rem;
48  gap: 0.75rem;
49}
50
51.card-4 {
52  height: 2rem;
53  width: 33%;
54  border-radius: 9999px;
55  background-color: var(--gray);
56  animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) alternate-reverse infinite;
57}
58
59@keyframes pulse {
60  to {
61    opacity: .2;
62  }
63}