1.card {
2  display: flex;
3  align-items: center;
4  justify-content: space-between;
5  flex-direction: column;
6  width: 280px;
7  height: 350px;
8  padding: 30px;
9  border-radius: 18px;
10  position: relative;
11  box-sizing: border-box;
12  background: linear-gradient(90deg, #0a76b5 0%, #3bf8a0 100%);
13  animation: gradient 8s ease-in-out infinite;
14  background-size: 500% 500%;
15  transition: all 0.5s;
16  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
17}
18
19.heading {
20  font-size: 25px;
21  font-weight: bold;
22  color: rgb(15, 17, 36);
23  margin-top: 20px;
24  text-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
25  ;
26}
27
28.heading span {
29  color: #ffffffeb;
30  text-shadow: 0px 0px 16px #CECECE;
31}
32
33.content {
34  display: flex;
35  justify-content: space-between;
36  list-style: none;
37  background-color: #17181c;
38  border-radius: 1em;
39  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
40  transform-origin: 50% 133%;
41  text-shadow: 0px 0px 16px #CECECE;
42}
43
44.content:hover {
45  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
46}
47
48.item {
49  display: flex;
50  flex-direction: column;
51  justify-content: center;
52  align-items: center;
53  text-align: center;
54  width: 5rem;
55  height: 4rem;
56  text-decoration: none;
57  transition: transform 0.2s ease-in-out;
58  color: #ffffff;
59  text-shadow: 0px 0px 16px #CECECE;
60}
61
62.item:hover {
63  color: dodgerblue;
64  transform: translateY(-10px);
65}
66
67.item:focus {
68  outline: transparent;
69}
70
71.item item--create svg {
72  display: block;
73  margin: 0 auto;
74  overflow: visible;
75  width: 1.5em;
76  height: 1.5em;
77  transition: transform 0.3s cubic-bezier(0.7,0,0.3,1);
78}
79
80.item span {
81  display: block;
82  font-size: 10px;
83  line-height: 1.25;
84  text-align: center;
85  transition: opacity 0.3s;
86}
87
88.item--create svg {
89  animation: spin 2s linear infinite;
90}
91
92.item--post svg {
93  animation: upDown 2s ease-in-out infinite alternate;
94}
95
96.item--inspire svg {
97  animation: flash 1.2s linear infinite;
98}
99
100@keyframes spin {
101  100% {
102    transform: rotate(360deg);
103  }
104}
105
106@keyframes upDown {
107  0% {
108    transform: translateY(1.8px);
109  }
110
111  100% {
112    transform: translateY(-1.8px);
113  }
114}
115
116@keyframes flash {
117  0% {
118    opacity: 1;
119  }
120
121  50% {
122    opacity: 0;
123  }
124
125  100% {
126    opacity: 1;
127  }
128}
129
130.content span:hover {
131  color: dodgerblue;
132  text-shadow: 0px 0px 16px #CECECE;
133}
134
135.item:focus span {
136  opacity: 0;
137}
138
139button {
140  padding: 15px;
141  font-size: 12px;
142  text-transform: uppercase;
143  text-shadow: 0px 0px 16px #CECECE;
144  letter-spacing: 2.5px;
145  font-weight: 500;
146  color: #fff;
147  background-color: rgb(12, 17, 80);
148  border: none;
149  border-radius: 25px;
150  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
151  transition: all 0.3s ease 0s;
152  cursor: pointer;
153  outline: none;
154}
155
156button:hover {
157  background-color: #251ab6;
158  box-shadow: 0px 15px 20px rgba(32, 64, 194, 0.4);
159  color: #fff;
160  transform: translateY(-7px);
161}
162
163button:active {
164  transform: translateY(-1px);
165}