Card by Thomasfadi

1.logo svg {
2  height: 48px;
3  width: 54px;
4}
5
6::selection {
7  background-color: rgba(0, 0, 0, 0);
8}
9
10.container {
11  position: absolute;
12  left: 50%;
13  top: 50%;
14  transform: translate(-50%, -50%);
15}
16
17.card {
18  background: radial-gradient(circle, white 0%, #d5d5d5 100%);
19  width: 300px;
20  height: 200px;
21  border-radius: 20px;
22  position: relative;
23  box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.55);
24}
25
26.card .remove,
27.card .logo {
28  position: absolute;
29  display: inline-block;
30  cursor: pointer;
31}
32
33.card .remove {
34  top: 30px;
35  right: 30px;
36  opacity: 0.9;
37  color: black;
38}
39
40.card .remove:hover {
41  color: #f06b5d;
42}
43
44.card .logo {
45  top: 20px;
46  left: 30px;
47  font-size: 3em;
48  opacity: 1;
49}
50
51.card .number,
52.card .owner {
53  display: block;
54  position: absolute;
55  left: 30px;
56  cursor: default;
57  color: black;
58  opacity: 0.9;
59  transition: color 0.7s ease-out;
60}
61
62.card .number {
63  bottom: 60px;
64  letter-spacing: 4px;
65}
66
67.card .owner {
68  bottom: 30px;
69  letter-spacing: 1px;
70}
71.wave-group {
72  position: relative;
73}
74
75.wave-group .input {
76  font-size: 16px;
77  padding: 10px 10px 10px 5px;
78  display: block;
79  width: 200px;
80  border: none;
81  border-bottom: 1px solid #515151;
82  background: transparent;
83}
84
85.wave-group .input:focus {
86  outline: none;
87}
88
89.wave-group .label {
90  color: #999;
91  font-size: 18px;
92  font-weight: normal;
93  position: absolute;
94  pointer-events: none;
95  left: 5px;
96  top: 10px;
97  display: flex;
98}
99
100.wave-group .label-char {
101  transition: 0.2s ease all;
102  transition-delay: calc(var(--index) * 0.05s);
103}
104
105.wave-group .input:focus ~ label .label-char,
106.wave-group .input:valid ~ label .label-char {
107  transform: translateY(-20px);
108  font-size: 14px;
109  color: #6e7fc1;
110}
111
112.wave-group .bar {
113  position: relative;
114  display: block;
115  width: 200px;
116}
117
118.wave-group .bar:before,
119.wave-group .bar:after {
120  content: "";
121  height: 2px;
122  width: 0;
123  bottom: 1px;
124  position: absolute;
125  background: #0727a6;
126  transition: 0.2s ease all;
127  -moz-transition: 0.2s ease all;
128  -webkit-transition: 0.2s ease all;
129}
130
131.wave-group .bar:before {
132  left: 50%;
133}
134
135.wave-group .bar:after {
136  right: 50%;
137}
138
139.wave-group .input:focus ~ .bar:before,
140.wave-group .input:focus ~ .bar:after {
141  width: 50%;
142}
143