Card by AmIt-DasIT

1.card {
2  width: 310px;
3  height: 330px;
4  display: flex;
5  flex-flow: column;
6  justify-content: space-around;
7  align-items: center;
8  border-radius: 15px;
9  padding: 5px;
10  color: white;
11  z-index: 1030;
12  transition: 0.4s;
13  overflow: hidden;
14  position: relative;
15  animation: shadow 3s linear infinite;
16}
17
18.card::before {
19  content: "";
20  position: absolute;
21  top: -27%;
22  width: 550px;
23  height: 550px;
24  z-index: -1;
25  background-image: conic-gradient(transparent, transparent, transparent, crimson);
26  animation: rotate 3s linear infinite;
27  /* animation-delay: 1.5s; */
28}
29
30.card::after {
31  content: "";
32  position: absolute;
33  bottom: -30%;
34  width: 550px;
35  height: 550px;
36  transform: rotate(180deg);
37  background-image: conic-gradient(transparent, transparent, transparent, yellow);
38  z-index: -1;
39  animation: rotate1 3s linear infinite;
40}
41
42@keyframes rotate {
43  0% {
44    transform: rotate(0deg);
45  }
46
47  100% {
48    transform: rotate(360deg);
49  }
50}
51
52@keyframes rotate1 {
53  0% {
54    transform: rotate(180deg);
55  }
56
57  0% {
58    transform: rotate(-180deg);
59  }
60}
61
62@keyframes shadow {
63  0% {
64    box-shadow: 6px 6px 15px rgba(255, 194, 80, 0.25),
65  -6px -6px 20px rgba(255, 0, 0, 0.25);
66  }
67
68  50% {
69    box-shadow: -6px -6px 15px rgba(255, 194, 80, 0.25),
70  6px 6px 20px rgba(255, 0, 0, 0.25);
71  }
72
73  100% {
74    box-shadow: 6px 6px 15px rgba(255, 194, 80, 0.25),
75  -6px -6px 20px rgba(255, 0, 0, 0.25);
76  }
77}
78
79.card .heading {
80  font-size: 18px;
81  font-weight: 800;
82  background-size: 300% 300%;
83  background-image: linear-gradient(to right, #d52643, yellow, yellowgreen);
84  background-clip: text;
85  -webkit-background-clip: text;
86  color: transparent;
87  z-index: 1000;
88  animation: AnimateBG 4s ease infinite;
89}
90
91@keyframes AnimateBG {
92  0% {
93    background-position: 0% 50%;
94  }
95
96  50% {
97    background-position: 100% 50%;
98  }
99
100  100% {
101    background-position: 0% 50%;
102  }
103}
104
105.card .content {
106  display: flex;
107  width: 301px;
108  height: 322px;
109  border-radius: 15px;
110  position: absolute;
111  justify-content: center;
112  align-items: center;
113  background-color: rgb(28, 28, 28);
114  gap: 20px;
115}
116
117.card .content .item {
118  display: flex;
119  align-items: center;
120  gap: 5px;
121  width: 80px;
122  height: 30px;
123  cursor: pointer;
124  border-radius: 10px;
125  font-weight: 600;
126  transition: 1s;
127}
128
129.card .content .item:hover svg path {
130  stroke: #26d526
131}
132
133.card .content .item:hover svg {
134  animation: anima 2s;
135}
136
137@keyframes anima {
138  0% {
139    opacity: 0;
140  }
141
142  100% {
143    opacity: 1;
144  }
145}
146
147.card .content .item--post:hover svg {
148  animation: launch 2s;
149}
150
151@keyframes launch {
152  0% {
153    transform: translateX(0px);
154  }
155
156  10% {
157    transform: translateY(20px);
158  }
159
160  75% {
161    transform: translateY(-250px) rotate(10deg) translateX(20px);
162    opacity: 0;
163  }
164
165  80% {
166    transform: translateY(5px);
167    opacity: 0;
168  }
169
170  100% {
171    transform: translateY(0px);
172    opacity: 1;
173  }
174}
175
176.card button {
177  padding: 10px 30px;
178  border-radius: 20px;
179  font-size: 15px;
180  z-index: 1000;
181  border: none;
182  font-weight: 600;
183  background: linear-gradient(to right, #26d526, yellow);
184  cursor: pointer;
185}
186
187.card button:hover {
188  background: linear-gradient(to right, #4bff4b, rgb(255, 255, 86));
189}