1.card {
2  position: relative;
3  padding: 10px;
4  font: 500 15px / 15px Almohtarif;
5  vertical-align: baseline;
6  box-sizing: border-box;
7  background: #fff;
8  border-radius: 8px;
9  width: 200px;
10  height: 250px;
11  z-index: 1;
12  transition: all 500ms ease-in-out;
13}
14
15.card::after {
16  content: '2022';
17  width: 200px;
18  height: 35%;
19  background-color: blue;
20  position: absolute;
21  z-index: -1;
22  left: 0;
23  top: 0;
24  display: flex;
25  font-size: 30px;
26  align-items: center;
27  justify-content: center;
28  text-align: center;
29  color: #fff;
30}
31
32.card::before {
33  content: 'france';
34  color: #fff;
35  text-transform: uppercase;
36  width: 200px;
37  height: 35%;
38  background-color: red;
39  position: absolute;
40  z-index: -1;
41  right: 0;
42  bottom: 0;
43  text-align: center;
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  font-size: 30px;
48}
49
50.card:hover {
51  transform: scale(1.1);
52}
53
54.card svg {
55  width: 100px;
56  align-items: center;
57  display: flex;
58  justify-content: center;
59  margin-left: auto;
60  margin-right: auto;
61}
62