Card by bociKond

1.one-div {
2  --white: rgb(200,200,200);
3  --black: rgb(50,50,50);
4  --clr: #7BF1A8;
5  --clr1: #b4facf;
6  --clr2: #3E363F;
7  background-color: var(--clr2);
8  width: 190px;
9  height: 190px;
10  border-radius: 50%;
11  position: relative;
12  transition: all 300ms;
13  animation: shadow 1.5s infinite linear;
14}
15
16.one-div:hover {
17  background-color: var(--clr);
18  box-shadow: 0 0 100px var(--clr);
19  border-radius: 1rem;
20  border: 10px solid var(--clr1);
21}
22
23.one-div:hover::before {
24  border-radius: 1rem;
25  color: var(--clr2);
26  font-weight: 900;
27  clip-path: polygon(0% 0%, 100.1% 0%, 91% 50%, 100.1% 100.3%, 0% 100.3%);
28}
29
30.one-div:hover::after {
31  animation-play-state: running;
32}
33
34.one-div::before {
35  content: '14:30pm';
36  display: flex;
37  flex-direction: column;
38  align-items: center;
39  justify-content: center;
40  position: absolute;
41  background-color: transparent;
42  width: 250px;
43  height: 250px;
44  border-radius: 50%;
45  top: 50%;
46  left: 50%;
47  transform: translate(-50%,-50%);
48  z-index: 1;
49  border: 10px solid var(--clr2);
50  font-size: 2rem;
51  color: var(--clr);
52  transition: all 300ms;
53}
54
55.one-div::after {
56  content: '';
57  position: absolute;
58  background-image: repeating-linear-gradient(0deg, var(--black), var(--black) 4px, transparent 4px, transparent);
59  background-size: 16px 16px;
60  background-position: center;
61  background-color: var(--white);
62  width: 140px;
63  height: 450px;
64  border-radius: 2rem;
65  top: 50%;
66  left: 50%;
67  transform: translate(-50%,-50%);
68  z-index: -2;
69  border-left: 10px solid var(--clr2);
70  border-right: 10px solid var(--clr2);
71  transition: all 300ms;
72  animation: height 1.5s infinite linear;
73  animation-play-state: paused;
74}
75
76@keyframes height {
77  from {
78    height: 450px;
79  }
80
81  50% {
82    height: 400px;
83  }
84
85  to {
86    height: 450px;
87  }
88}
89
90@keyframes shadow {
91  from {
92    box-shadow: 0 0 100px var(--clr);
93  }
94
95  50% {
96    box-shadow: 0 0 100px 50px var(--clr);
97  }
98
99  to {
100    box-shadow: 0 0 100px var(--clr);
101  }
102}