Card by andrew-demchenk0

1.card {
2  --main-color: #dedede;
3  --sub-color: #ccc;
4  --bg-color: #323232;
5  --accent-color: #BC8D66;
6  position: relative;
7  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
8  width: 270px;
9  padding: 25px;
10  border-radius: 25px;
11  display: flex;
12  flex-direction: column;
13  gap: 5px;
14  background-color: var(--bg-color);
15  transition: all 0.2s;
16  cursor: pointer;
17  box-shadow: 0px 0px 5px -1.5px #000;
18}
19
20.card::before {
21  content: '';
22  width: 99%;
23  height: 99%;
24  background: var(--sub-color);
25  position: absolute;
26  z-index: -1;
27  top: 1px;
28  left: 1px;
29  border-radius: 25px;
30  transition: all 0.3s;
31}
32
33.card__wrapper {
34  display: flex;
35  flex-direction: row;
36  justify-content: space-between;
37  align-items: center;
38}
39
40.card__img {
41  width: 100%;
42}
43
44.card__title {
45  color: var(--main-color);
46  font-weight: 900;
47  font-size: 25px;
48}
49
50.card__subtitle {
51  color: var(--sub-color);
52  font-weight: 600;
53  font-size: 20px;
54}
55
56.card__icon {
57  width: 40px;
58  height: 40px;
59  transform: rotate(-45deg);
60  transition: all 0.3s;
61}
62
63.card__icon svg {
64  width: 100%;
65  height: 100%;
66}
67
68.card__icon g {
69  fill: var(--main-color);
70}
71
72.card__icon circle, polyline, line {
73  stroke: var(--main-color);
74}
75
76.card:hover .card__icon {
77  transform: rotate(0);
78}
79
80.card:hover .card__icon circle, .card:hover .card__icon polyline, .card:hover .card__icon line {
81  stroke: var(--accent-color);
82}
83
84.card:hover .card__icon g {
85  fill: var(--accent-color);
86}
87
88.card:hover {
89  box-shadow: 0px 0px 20px -5px #000;
90}
91
92.card:hover::before {
93  transform: rotate(10deg);
94  box-shadow: 0px 0px 20px -5px #000;
95}
96
97/* remove svg from class ="card__img" and last styles below css code before use */
98.st1 {
99  fill: #fff
100}
101
102.st2 {
103  fill: none;
104  stroke: #242c88;
105  stroke-width: 2;
106  stroke-linecap: round;
107  stroke-linejoin: round;
108  stroke-miterlimit: 10
109}
110
111.st7 {
112  fill: #589fff
113}
114
115.st9 {
116  fill: #bc8d66
117}
118
119.st15,.st16 {
120  opacity: .4;
121  fill: #242c88
122}
123
124.st16 {
125  opacity: .2
126}
127
128.st18 {
129  fill: #ffc408
130}
131
132.st53 {
133  fill: none;
134  stroke: #242c88;
135  stroke-width: 1.848;
136  stroke-linecap: round;
137  stroke-linejoin: round;
138  stroke-miterlimit: 10
139}