1.card {
2  color: #1b1b1b;
3  width: 190px;
4  height: 254px;
5  position: relative;
6  outline: 6px solid #f5f5f5;
7  border-radius: 8px;
8  line-height: 150%;
9  padding: 16px;
10  background: #ff930f;
11  background-blend-mode: multiply;
12  background: linear-gradient(to top, #ff930f, #ffcc33);
13  transition: background-color 1s ease-in-out;
14  overflow: hidden;
15}
16
17.card-front {
18  bottom: 16px;
19  left: 0;
20  position: absolute;
21  width: 100%;
22  text-align: center;
23  transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
24}
25
26.card-back {
27  transform: translateX(120%);
28  transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
29}
30
31
32/*Text*/
33.title {
34  font-size: 1.3rem;
35  font-weight: bold;
36}
37/*Text divider*/
38.title::after {
39  content: "";
40  display: block;
41  width: 50%;
42  border-radius: 50%;
43  height: 2px;
44  margin: 2px auto;
45  background-color: #1b1b1b;
46}
47
48
49/*Hover*/
50.card:hover {
51  background-color: #1b1b1b25;
52}
53
54.card:hover .card-front {
55  transform: translateX(-100%);
56}
57
58.card:hover .card-back {
59  transform: translateX(0);
60}
61
62
63