Card by alexruix

1.card {
2 width: 190px;
3 height: 254px;
4 padding: .8em;
5 background: #f5f5f5;
6 position: relative;
7 overflow: visible;
8 box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
9}
10
11.card-img {
12 background-color: #ffcaa6;
13 height: 40%;
14 width: 100%;
15 border-radius: .5rem;
16 transition: .3s ease;
17}
18
19.card-info {
20 padding-top: 10%;
21}
22
23svg {
24 width: 20px;
25 height: 20px;
26}
27
28.card-footer {
29 width: 100%;
30 display: flex;
31 justify-content: space-between;
32 align-items: center;
33 padding-top: 10px;
34 border-top: 1px solid #ddd;
35}
36
37/*Text*/
38.text-title {
39 font-weight: 900;
40 font-size: 1.2em;
41 line-height: 1.5;
42}
43
44.text-body {
45 font-size: .9em;
46 padding-bottom: 10px;
47}
48
49/*Button*/
50.card-button {
51 border: 1px solid #252525;
52 display: flex;
53 padding: .3em;
54 cursor: pointer;
55 border-radius: 50px;
56 transition: .3s ease-in-out;
57}
58
59/*Hover*/
60.card-img:hover {
61 transform: translateY(-25%);
62 box-shadow: rgba(226, 196, 63, 0.25) 0px 13px 47px -5px, rgba(180, 71, 71, 0.3) 0px 8px 16px -8px;
63}
64
65.card-button:hover {
66 border: 1px solid #ffcaa6;
67 background-color: #ffcaa6;
68}
69