Card by joe-watson-sbf

1.flip-card {
2  background-color: transparent;
3  width: 190px;
4  height: 254px;
5  perspective: 1000px;
6  font-family: sans-serif;
7}
8
9.title {
10  font-size: 1.5em;
11  font-weight: 900;
12  text-align: center;
13  margin: 0;
14}
15
16.flip-card-inner {
17  position: relative;
18  width: 100%;
19  height: 100%;
20  text-align: center;
21  transition: transform 0.8s;
22  transform-style: preserve-3d;
23}
24
25.flip-card:hover .flip-card-inner {
26  transform: rotateY(180deg);
27}
28
29.flip-card-front, .flip-card-back {
30  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
31  position: absolute;
32  display: flex;
33  flex-direction: column;
34  justify-content: center;
35  width: 100%;
36  height: 100%;
37  -webkit-backface-visibility: hidden;
38  backface-visibility: hidden;
39  border: 1px solid coral;
40  border-radius: 1rem;
41}
42
43.flip-card-front {
44  background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
45     rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
46  color: coral;
47}
48
49.flip-card-back {
50  background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
51     bisque 40%, rgb(255, 185, 160) 78%);
52  color: white;
53  transform: rotateY(180deg);
54}