Card by marwam112010

1.pack-container {
2  position: relative;
3  display: flex;
4  max-width: 350px;
5  flex-direction: column;
6  border-radius: 12px;
7  background-color: #212121;
8  border: 1px solid #fff;
9  padding: 1.6rem;
10  color: #fff;
11  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
12}
13
14.header {
15  position: relative;
16  margin: 0;
17  margin-bottom: 2rem;
18  overflow: hidden;
19  border-radius: 0;
20  border-bottom: 1px solid #fff;
21  background: transparent;
22  padding-bottom: 1rem;
23  text-align: center;
24}
25
26.title {
27  display: block;
28  font-family: sans-serif;
29  font-size: 0.875rem;
30  line-height: 1.25rem;
31  text-transform: uppercase;
32  color: #fff
33}
34
35.price-container {
36  margin-top: 10px;
37  display: flex;
38  justify-content: center;
39  align-items: flex-start;
40  gap: 4px;
41  font-family: sans-serif;
42  font-size: 4.5rem;
43  line-height: 1;
44}
45
46.price-container span:first-child {
47  margin-top: 10px;
48  font-size: 2.25rem;
49  line-height: 2.5rem;
50}
51
52.price-container span:last-child {
53  align-self: flex-end;
54  font-size: 2.25rem;
55  line-height: 2.5rem;
56}
57
58.lists {
59  display: flex;
60  flex-direction: column;
61  gap: 8px;
62}
63
64.list {
65  display: flex;
66  align-items: center;
67  gap: 10px;
68}
69
70.list span {
71  border-radius: 50%;
72  border: 1px solid rgba(255, 255, 255, 0.24);
73  background-color: rgba(255, 255, 255, 0.185);
74  height: 30px;
75  width: 30px;
76  display: flex;
77  align-items: center;
78  justify-content: center;
79}
80
81.list span svg {
82  height: 12px;
83  width: 12px;
84}
85
86.list p {
87  display: block;
88  font-family: sans-serif;
89}
90
91.button-container {
92  margin-top: 20px;
93  padding: 0;
94}
95
96.button-container button {
97  display: block;
98  width: 100%;
99  background-color: #fff;
100  padding: 10px 20px;
101  text-transform: uppercase;
102  color: #000;
103  outline: 0;
104  border: 0;
105  border-radius: 10px;
106}