Card by abrahamcalsin

Made by

@abrahamcalsin

Theme:

Light

#card

#e8e8e8

2.6K views

CSSAdd prefixes

1.plan-card {
2  background: #fff;
3  width: 15rem;
4  padding-left: 2rem;
5  padding-right: 2rem;
6  padding-top: 10px;
7  padding-bottom: 20px;
8  border-radius: 10px;
9  border-bottom: 4px solid #000446;
10  box-shadow: 0 6px 30px rgba(207, 212, 222, 0.3);
11  font-family: "Poppins", sans-serif;
12}
13
14.plan-card h2 {
15  margin-bottom: 15px;
16  font-size: 27px;
17  font-weight: 600;
18}
19
20.plan-card h2 span {
21  display: block;
22  margin-top: -4px;
23  color: #4d4d4d;
24  font-size: 12px;
25  font-weight: 400;
26}
27
28.etiquet-price {
29  position: relative;
30  background: #fdbd4a;
31  width: 14.46rem;
32  margin-left: -0.65rem;
33  padding: .2rem 1.2rem;
34  border-radius: 5px 0 0 5px;
35}
36
37.etiquet-price p {
38  margin: 0;
39  padding-top: .4rem;
40  display: flex;
41  font-size: 1.9rem;
42  font-weight: 500;
43}
44
45.etiquet-price p:before {
46  content: "$";
47  margin-right: 5px;
48  font-size: 15px;
49  font-weight: 300;
50}
51
52.etiquet-price p:after {
53  content: "/ handle";
54  margin-left: 5px;
55  font-size: 15px;
56  font-weight: 300;
57}
58
59.etiquet-price div {
60  position: absolute;
61  bottom: -23px;
62  right: 0px;
63  width: 0;
64  height: 0;
65  border-top: 13px solid #c58102;
66  border-bottom: 10px solid transparent;
67  border-right: 13px solid transparent;
68  z-index: -6;
69}
70
71.benefits-list {
72  margin-top: 16px;
73}
74
75.benefits-list ul {
76  padding: 0;
77  font-size: 14px;
78}
79
80.benefits-list ul li {
81  color: #4d4d4d;
82  list-style: none;
83  margin-bottom: .2rem;
84  display: flex;
85  align-items: center;
86  gap: .5rem;
87}
88
89.benefits-list ul li svg {
90  width: .9rem;
91  fill: currentColor;
92}
93
94.benefits-list ul li span {
95  font-weight: 300;
96}
97
98.button-get-plan {
99  display: flex;
100  justify-content: center;
101  margin-top: 1.2rem;
102}
103
104.button-get-plan a {
105  display: flex;
106  justify-content: center;
107  align-items: center;
108  background: #000446;
109  color: #fff;
110  padding: 10px 15px;
111  border-radius: 5px;
112  text-decoration: none;
113  font-size: .8rem;
114  letter-spacing: .05rem;
115  font-weight: 500;
116  transition: all 0.3s ease;
117}
118
119.button-get-plan a:hover {
120  transform: translateY(-3%);
121  box-shadow: 0 3px 10px rgba(207, 212, 222, 0.9);
122}
123
124.button-get-plan .svg-rocket {
125  margin-right: 10px;
126  width: .9rem;
127  fill: currentColor;
128}

.plan-card {
  background: #fff;
  width: 15rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  border-bottom: 4px solid #000446;
  box-shadow: 0 6px 30px rgba(207, 212, 222, 0.3);
  font-family: "Poppins", sans-serif;
}

.plan-card h2 {
  margin-bottom: 15px;
  font-size: 27px;
  font-weight: 600;
}

.plan-card h2 span {
  display: block;
  margin-top: -4px;
  color: #4d4d4d;
  font-size: 12px;
  font-weight: 400;
}

.etiquet-price {
  position: relative;
  background: #fdbd4a;
  width: 14.46rem;
  margin-left: -0.65rem;
  padding: .2rem 1.2rem;
  border-radius: 5px 0 0 5px;
}

.etiquet-price p {
  margin: 0;
  padding-top: .4rem;
  display: flex;
  font-size: 1.9rem;
  font-weight: 500;
}

.etiquet-price p:before {
  content: "$";
  margin-right: 5px;
  font-size: 15px;
  font-weight: 300;
}

.etiquet-price p:after {
  content: "/ handle";
  margin-left: 5px;
  font-size: 15px;
  font-weight: 300;
}

.etiquet-price div {
  position: absolute;
  bottom: -23px;
  right: 0px;
  width: 0;
  height: 0;
  border-top: 13px solid #c58102;
  border-bottom: 10px solid transparent;
  border-right: 13px solid transparent;
  z-index: -6;
}

.benefits-list {
  margin-top: 16px;
}

.benefits-list ul {
  padding: 0;
  font-size: 14px;
}

.benefits-list ul li {
  color: #4d4d4d;
  list-style: none;
  margin-bottom: .2rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.benefits-list ul li svg {
  width: .9rem;
  fill: currentColor;
}

.benefits-list ul li span {
  font-weight: 300;
}

.button-get-plan {
  display: flex;
  justify-content: center;
  margin-top: 1.2rem;
}

.button-get-plan a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000446;
  color: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .05rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.button-get-plan a:hover {
  transform: translateY(-3%);
  box-shadow: 0 3px 10px rgba(207, 212, 222, 0.9);
}

.button-get-plan .svg-rocket {
  margin-right: 10px;
  width: .9rem;
  fill: currentColor;
}

HTML

1<div class="plan-card">
2    <h2>Business<span>For business services</span></h2>
3    <div class="etiquet-price">
4        <p>254.99</p>
5        <div></div>
6    </div>
7    <div class="benefits-list">
8        <ul>
9            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
10                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
11                </svg><span>Analysis</span></li>
12            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
13                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
14                </svg><span>Consulting</span></li>
15            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
16                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
17                </svg><span>Facilitate</span></li>
18        </ul>
19    </div>
20    <div class="button-get-plan">
21        <a href="#">
22            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-rocket">
23                <path d="M156.6 384.9L125.7 353.1C117.2 345.5 114.2 333.1 117.1 321.8C120.1 312.9 124.1 301.3 129.8 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H200C202.4 124 204.8 120.3 207.2 116.7C289.1-4.07 411.1-8.142 483.9 5.275C495.6 7.414 504.6 16.43 506.7 28.06C520.1 100.9 516.1 222.9 395.3 304.8C391.8 307.2 387.1 309.6 384 311.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V380.8C209.9 385.6 197.6 389.7 188.3 392.7C177.1 396.3 164.9 393.2 156.6 384.9V384.9zM384 167.1C406.1 167.1 424 150.1 424 127.1C424 105.9 406.1 87.1 384 87.1C361.9 87.1 344 105.9 344 127.1C344 150.1 361.9 167.1 384 167.1z"></path>
24            </svg>
25            <span>START PROJECT</span>
26        </a>
27    </div>
28</div>

<div class="plan-card">
    <h2>Business<span>For business services</span></h2>
    <div class="etiquet-price">
        <p>254.99</p>
        <div></div>
    </div>
    <div class="benefits-list">
        <ul>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Analysis</span></li>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Consulting</span></li>
            <li><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M243.8 339.8C232.9 350.7 215.1 350.7 204.2 339.8L140.2 275.8C129.3 264.9 129.3 247.1 140.2 236.2C151.1 225.3 168.9 225.3 179.8 236.2L224 280.4L332.2 172.2C343.1 161.3 360.9 161.3 371.8 172.2C382.7 183.1 382.7 200.9 371.8 211.8L243.8 339.8zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z"></path>
                </svg><span>Facilitate</span></li>
        </ul>
    </div>
    <div class="button-get-plan">
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-rocket">
                <path d="M156.6 384.9L125.7 353.1C117.2 345.5 114.2 333.1 117.1 321.8C120.1 312.9 124.1 301.3 129.8 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H200C202.4 124 204.8 120.3 207.2 116.7C289.1-4.07 411.1-8.142 483.9 5.275C495.6 7.414 504.6 16.43 506.7 28.06C520.1 100.9 516.1 222.9 395.3 304.8C391.8 307.2 387.1 309.6 384 311.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V380.8C209.9 385.6 197.6 389.7 188.3 392.7C177.1 396.3 164.9 393.2 156.6 384.9V384.9zM384 167.1C406.1 167.1 424 150.1 424 127.1C424 105.9 406.1 87.1 384 87.1C361.9 87.1 344 105.9 344 127.1C344 150.1 361.9 167.1 384 167.1z"></path>
            </svg>
            <span>START PROJECT</span>
        </a>
    </div>
</div>