1/*Container*/
2
3.bannerContainer {
4  position: relative;
5  box-sizing: border-box;
6  padding: 0;
7  margin: 0;
8  width: fit-content;
9  height: fit-content;
10  display: flex;
11  justify-content: center;
12  align-items: center;
13}
14
15/*Banner */
16
17.bannerContainer .banner {
18  background-color: #e7e5df;
19  height: 70px;
20  width: 250px;
21  border-radius: 10px;
22  position: relative;
23  overflow-y: hidden;
24}
25
26/*Loaders */
27
28.bannerContainer .banner .loader {
29  height: 100%;
30  width: 100%;
31  border-radius: 10px;
32  position: absolute;
33}
34
35.bannerContainer .banner .loader1 {
36  background-color: #393e41;
37  animation: loader 0.5s linear 0s;
38}
39
40.bannerContainer .banner .loader2 {
41  background-color: #44bba4;
42  animation: loader 0.5s linear 0.2s;
43}
44
45.bannerContainer .banner .loader3 {
46  background-color: #e7bb41;
47  animation: loader 0.5s linear 0.3s;
48}
49
50/*Main card*/
51
52.bannerContainer .banner .mainCard {
53  width: 100%;
54  background-color: #e7e5df;
55  display: flex;
56  justify-content: space-around;
57  align-items: center;
58  color: #393e41;
59  font-weight: bolder;
60  animation: loader 0.5s linear 0.4s;
61  border-radius: 10px;
62}
63
64.bannerContainer .banner span {
65  font-size: 29px;
66  font-weight: 900;
67  transform: translateY(-120px);
68  animation: appear 0.1s ease-in 0.9s forwards;
69}
70
71.bannerContainer .banner svg {
72  width: 30px;
73  transform: translateY(-100px);
74  animation: appear 0.1s ease-in 0.9s forwards;
75}
76
77.bannerContainer .banner .mainCard:hover > .secondCard {
78  height: 100%;
79  color: #e7e5df;
80}
81
82/* Second card */
83
84.bannerContainer .banner .secondCard {
85  background-color: #393e41;
86  display: flex;
87  justify-content: space-around;
88  align-items: center;
89  color: transparent;
90  height: 0px;
91  transition: all 0.3s ease-in-out;
92  cursor: pointer;
93}
94
95/* Animations */
96
97@keyframes loader {
98  from {
99    width: 0%;
100  }
101
102  to {
103    width: 100%;
104  }
105}
106
107@keyframes appear {
108  from {
109    transform: translateY(-100px);
110  }
111
112  to {
113    transform: translateY(0px);
114  }
115}
116