Card by Nayzerftn

1.card {
2  height: 350px;
3  width: 300px;
4  overflow: hidden;
5  border: none;
6  border-radius: 10px;
7  background-image: linear-gradient(to bottom right,darkblue, 180px,purple);
8  filter: blur(0.4px);
9  box-shadow: -10px 10px 15px black;
10  display: flex;
11  align-items: center;
12  flex-direction: column;
13  transition: all 1s linear;
14  animation: fly 4s linear infinite alternate;
15}
16
17.card::before {
18  content: '';
19  position: absolute;
20  height: 100%;
21  width: 800px;
22  top: 0;
23  z-index: -1;
24  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
25  animation: rotate 5s linear infinite;
26  transition: all 0.2s linear;
27}
28
29.card::after {
30  content: '';
31  position: absolute;
32  inset: 6px;
33  z-index: -1;
34  border-radius: 10px;
35  background-image: linear-gradient(to bottom right,darkblue, 180px,purple);
36}
37
38@keyframes rotate {
39  from {
40    transform: rotate(0deg);
41  }
42
43  to {
44    transform: rotate(360deg);
45  }
46}
47
48@keyframes fly {
49  0% {
50  }
51
52  50% {
53    transform: translateY(-10px);
54  }
55
56  100% {
57    transform: translateY(10px);
58  }
59}
60
61.heading {
62  margin-top: 30px;
63  font-size: 20px;
64  font-family: Arial, Helvetica, sans-serif;
65  font-weight: bold;
66  user-select: none;
67  display: flex;
68  align-items: center;
69  justify-content: center;
70}
71
72.content {
73  height: 150px;
74  width: auto;
75  font-size: 20px;
76  font-family: monospace;
77  font-weight: bold;
78  letter-spacing: 1px;
79  margin-top: 40px;
80  display: flex;
81  align-items: center;
82  justify-content: center;
83  flex-direction: column;
84}
85
86.item {
87  border-radius: 10px;
88  height: 100px;
89  width: 100px;
90  margin-top: 15px;
91  cursor: pointer;
92  user-select: none;
93  display: flex;
94  align-items: center;
95  justify-content: center;
96  flex-direction: column;
97}
98
99.item--create:hover {
100  transition: all 0.3s linear;
101  transform: translateY(-10px);
102  background-color: rgb(48, 48, 48);
103}
104
105.item--inspire:hover {
106  transition: all 0.3s linear;
107  transform: translateY(-10px);
108  background-color: grey;
109}
110
111.item--post:hover {
112  transition: all 0.3s linear;
113  transform: translateY(-10px);
114  background-color: purple;
115}
116
117.item svg {
118  fill: #ffffff;
119  height: 26px;
120  margin-bottom: 10px;
121  width: 40px;
122  display: flex;
123  align-items: center;
124  justify-content: center;
125}
126
127.item .item--create {
128  border: 1px solid white;
129}
130
131.item--create svg {
132  animation: spin 2s linear infinite;
133}
134
135.item--post svg {
136  animation: flying 2s linear infinite alternate;
137}
138
139.item--inspire svg {
140  animation: flash 2s linear infinite;
141}
142
143@keyframes flash {
144  0% {
145    opacity: 1;
146  }
147
148  50% {
149    opacity: 0;
150  }
151
152  100% {
153    opacity: 1;
154  }
155}
156
157@keyframes flying {
158  0% {
159    transform: translateY(0px);
160  }
161
162  50% {
163    transform: translateY(-2px);
164  }
165
166  100% {
167    transform: translateY(2px);
168  }
169}
170
171@keyframes spin {
172  from {
173  }
174
175  to {
176    transform: rotate(360deg);
177  }
178}
179
180button {
181  height: 40px;
182  width: auto;
183  background: transparent;
184  border: 2px solid white;
185  border-radius: 5px;
186  font-size: 15px;
187  font-family: Arial, Helvetica, sans-serif;
188  font-weight: bold;
189  text-transform: uppercase;
190  padding: 10px 10px;
191  margin-top: 55px;
192  position: relative;
193  overflow: hidden;
194  z-index: 1;
195  transition: all 0.5s ease;
196  color: white;
197  cursor: pointer;
198  letter-spacing: 1px;
199}
200
201button:hover {
202  filter: blur(1px);
203  transform: scale(1.1);
204}
205
206