Light

🔥 Build Beautiful Pricing Plan Tables With HTML And CSS 💖

In this post , we will look at how we can easily create a beautiful ❤️ pricing plan tables with HTML and CSS. For this tutorial , you must have basic knowledge of HTML and CSS properties.

✨ Writing HTML

Our HTML code will be only few lines for the markup.The code is

Copied To Clipboard !
1<section class="pricing-plan">
2            <div class="pricing-plan__header">
3                <h1 class="pricing-plan__title">
4                    starter plan
5                </h1>
6                <h2 class="pricing-plan__summary">
7                    Serious learning, best for students and self learners
8                </h2>
9            </div>
10            <div class="pricing-plan__description">
11                <ul class="pricing-plan__list">
12                    <li class="pricing-plan__feature">
13                        Everything included in free
14                    </li>
15                    <li class="pricing-plan__feature">
16                        Access to all interactive courses
17                    </li>
18                    <li class="pricing-plan__feature">
19                        Access to all hands-on practice projects
20                    </li>
21                    <li class="pricing-plan__feature">
22                        Unlimited practice lab time
23                    </li>
24                    <li class="pricing-plan__feature">
25                        Full access to learning paths
26                    </li>
27                </ul>
28            </div>
29            <div class="pricing-plan__actions">
30                <p class="pricing-plan__cost">$75</p>
31                <p class="pricing-plan__text">
32                    per month
33                </p>
34                <a href="#" class="pricing-plan__button">
35                    Buy
36                </a>
37                <p class="pricing-plan__text">Minimum spend $750 over 12 months</p>
38            </div>
39        </section>

Here we have 3 main parts in this HTML markup
1.div with class of pricing-plan__header which contains main title and short summary of the pricing plan.
2.div with class of pricing-plan__description which contains the list of all the features of pricing plan.
3. div with class of pricing-plan__actions which contains cost and button to buy the pricing plan.

🤩 Lets Style Our Pricing Plan Table With CSS

Below is the CSS styling for the above HTML markup.

Copied To Clipboard !
1.pricing-plan {
2	width: 300px;
3	border-radius: 25px;
4	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
5	overflow: hidden;
6	font-family: sans-serif;
7	font-size: 16px;
8	line-height: 1.5;
9	color: #555555;
10	margin: 15px;
11}
12
13.pricing-plan__header {
14	padding: 25px;
15	background: #666699;
16	color: white;
17}
18
19.pricing-plan__title,
20.pricing-plan__summary {
21	margin: 0;
22	text-align: center;
23	text-transform: capitalize;
24}
25
26.pricing-plan__title {
27	font-size: 1.5rem;
28	font-weight: 400;
29}
30
31.pricing-plan__summary {
32	font-size: 1rem;
33	font-weight: 300;
34}
35
36.pricing-plan__description {
37	padding: 25px;
38}
39
40.pricing-plan__list {
41	padding: 0;
42	margin: 0;
43}
44
45.pricing-plan__feature {
46	list-style: none;
47	margin: 0;
48	padding-left: 25px;
49	position: relative;
50	font-size: 0.95rem;
51}
52
53.pricing-plan__feature:not(:last-child) {
54	margin-bottom: 0.5rem;
55}
56
57.pricing-plan__feature::before {
58	content: '\2714';
59	position: absolute;
60	left: 0;
61	color: #666699;
62}
63
64.pricing-plan__actions {
65	padding: 25px;
66	border-top: 1px solid #eeeeee;
67	display: flex;
68	flex-direction: column;
69}
70
71.pricing-plan__button {
72	display: inline-block;
73	margin: 15px auto;
74	padding: 8px 20px;
75	text-decoration: none;
76	color: #666699;
77	background: white;
78	border-radius: 5px;
79	border: 1px solid #666699;
80	text-transform: uppercase;
81	letter-spacing: 0.02rem;
82	font-weight: bold;
83	transition: all 300ms linear;
84}
85
86.pricing-plan__button:hover {
87	background: #666699;
88	color: white;
89}
90
91.pricing-plan__cost {
92	margin: 0;
93	text-align: center;
94	font-size: 2rem;
95	color: #000000;
96}
97
98.pricing-plan__text {
99	font-size: 0.9rem;
100	text-align: center;
101	margin: 0 0 10px 0;
102}
103

Now this will give us the following result. first-demo.png

We can also modify this pricing plan table by using some modifier classes. We will just add following simple classes to our CSS file and then add them to our div in HTML.

Copied To Clipboard !
1.pricing-plan__header--blue {
2	background-color: #7f53ac;
3	background: linear-gradient(315deg, #7f53ac 0%, #647dee 74%);
4}
5
6.pricing-plan__header--orange {
7	background-color: #a40606;
8	background: linear-gradient(315deg, #a40606 0%, #d98324 74%);
9}
10
11.pricing-plan--recommended {
12	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.2);
13}
14.pricing-plan__special-text {
15	padding: 10px;
16	text-align: center;
17	font-weight: bolder;
18	background: #ffc857;
19	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2) inset;
20}
21
22.pricing-plan__header--special {
23	background-color: #ffc857;
24	background: linear-gradient(316deg, #ffc857 0%, #3e2f5b 74%);
25}
26

And modify the HTML as below.

Copied To Clipboard !
1<section class="pricing-plan">
2    <div class="pricing-plan__header pricing-plan__header--orange">
3        ...........
4    </div>
5    <div class="pricing-plan__description">
6        ...........
7    </div>
8    <div class="pricing-plan__actions">
9        ...........
10    </div>
11</section>
12<section class="pricing-plan pricing-plan--recommended">
13    <div class="pricing-plan__special-text">
14        Recommended
15    </div>
16    <div class="pricing-plan__header pricing-plan__header--special">
17        ...........
18    </div>
19    <div class="pricing-plan__description">
20        ...........
21    </div>
22    <div class="pricing-plan__actions">
23        ...........
24    </div>
25</section>
26<section class="pricing-plan">
27    <div class="pricing-plan__header pricing-plan__header--blue">
28        ...........
29    </div>
30    <div class="pricing-plan__description">
31        ...........
32    </div>
33    <div class="pricing-plan__actions">
34        ...........
35    </div>
36</section>

Then we will get the result like below. pricing-plan-tables.png

That is it for this article. And we have created three cool CSS and HTML Pricing Plan Tables. Hope this will help you 😇. Thank you for reading.