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