Are you looking to display your product or service plans in a clear and attractive way? A well-designed CSS Subscription Pricing Table is essential for this. This tutorial will guide you through creating a responsive and engaging pricing table. It helps users easily compare different subscription tiers. You can highlight features and costs effectively.
This simple yet effective code will help you implement a professional pricing section. It will enhance your website’s user experience.
Create the HTML Structure
First, you need to set up the basic layout. This HTML code defines three distinct pricing boxes. Each box represents a different subscription plan: Basic, Standard, and Business. It includes a title, an icon, pricing details, a list of features, and a call-to-action button.
<section>
<div class="content">
<div class="basic box">
<h2 class="title">Basic</h2>
<div class="view">
<div class="icon">
<img src="https://i.postimg.cc/2jcfMcf4/hot-air-balloon.png" alt="hot-air-balloon">
</div>
<div class="cost">
<p class="amount">$09</p>
<p class="detail">per student per month</p>
</div>
</div>
<div class="description">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Harum, beatae laudantium.</li>
<li>Odit, fugit saepe.</li>
<li>Harum, veniam suscipit!</li>
<li>A, aut veritatis!</li>
<li>Aliquid, quasi repellat!</li>
</ul>
</div>
<div class="button">
<button type="submit" >START FREE 7 DAYS TRIAL</button>
</div>
</div>
<div class="standard box">
<h2 class="title">Standard</h2>
<div class="view">
<div class="icon">
<img src="https://i.postimg.cc/DzrTN72Z/airplane.png" alt="airplane">
</div>
<div class="cost">
<p class="amount">$99</p>
<p class="detail">per student per year</p>
</div>
</div>
<div class="description">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Harum, beatae laudantium.</li>
<li>Odit, fugit saepe.</li>
<li>Harum, veniam suscipit!</li>
<li>A, aut veritatis!</li>
<li>Aliquid, quasi repellat!</li>
</ul>
</div>
<div class="button">
<button type="submit" >START FREE 7 DAYS TRIAL</button>
</div>
</div>
<div class="business box">
<h2 class="title">Business</h2>
<div class="view">
<div class="icon">
<img src="https://i.postimg.cc/wvFd6FRY/startup.png" alt="startup">
</div>
<div class="cost">
<p class="amount">$199</p>
<p class="detail">per team per year</p>
</div>
</div>
<div class="description">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Harum, beatae laudantium.</li>
<li>Odit, fugit saepe.</li>
<li>Harum, veniam suscipit!</li>
<li>A, aut veritatis!</li>
<li>Aliquid, quasi repellat!</li>
</ul>
</div>
<div class="button">
<button type="submit" >START FREE 7 DAYS TRIAL</button>
</div>
</div>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
Style with CSS
Next, apply styling to make your pricing table visually appealing. This CSS code handles the layout, colors, fonts, and responsiveness. It ensures the table looks great on various screen sizes. Each pricing tier gets a unique color for its title. This helps with visual distinction.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
*{
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
:root{
--pinkish-red: #C35A74;
--medium-blue: #307BAA;
--greenish-blue: #53BAB5;
--bright-orange: #FF7445;
--white-smoke: #F5F5F4;
--white: #FFF;
--dark-gray: #7D7C7C;
--black: #000;
}
section{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--white-smoke);
}
.content{
display: flex;
justify-content: space-between;
width: 1200px;
margin: 100px;
}
.box{
display: flex;
flex-direction: column;
height: 586px;
width: 300px;
border-radius: 20px;
margin-left: 10px;
margin-right: 10px;
background: var(--white);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 20%);
}
.title{
width: 100%;
padding: 10px 0;
font-size: 1.2em;
font-weight: lighter;
text-align: center;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: var(--white-smoke);
}
.basic .title{
background: var(--pinkish-red);
}
.standard .title{
background: var(--medium-blue);
}
.business .title{
background: var(--greenish-blue);
}
.view{
display: block;
width: 100%;
padding: 30px 0 20px;
background: var(--white-smoke);
}
.icon{
display: flex;
justify-content: center;
}
.icon img{
width: 100px;
}
.cost{
display: flex;
justify-content:center;
flex-direction: row;
margin-top: 10px;
}
.amount{
font-size: 2.8em;
font-weight: bolder;
}
.detail{
margin: auto 0 auto 5px;
width: 70px;
font-size: 0.7em;
font-weight: bold;
line-height: 15px;
color: #7D7C7C;
}
.description{
margin: 30px auto;
font-size: 0.8em;
color: #7D7C7C;
}
ul{
list-style: none;
}
li{
margin-top: 10px;
}
li::before{
content: "";
background-image: url("https://i.postimg.cc/ht7g996V/check.png");
background-position: center;
background-size: cover;
opacity: 0.5;
display: inline-block;
width: 10px;
height: 10px;
margin-right: 10px;
}
.button{
margin: 0 auto 30px;
}
button{
height: 40px;
width: 250px;
font-size: 0.7em;
font-weight: bold;
letter-spacing: 0.5px;
color: #7D7C7C;
border: 2px solid var(--dark-gray);
border-radius: 50px;
background: transparent;
}
button:hover{
color: var(--white-smoke);
transition: 0.5s;
border: none;
background: var(--bright-orange);
}
/* Responsiveness:Start */
@media screen and (max-width:970px) {
.content{
display: flex;
align-items: center;
flex-direction: column;
margin: 50px auto;
}
.standard, .business{
margin-top: 25px;
}
}
/* Responsiveness:End */
You have successfully created a functional and stylish CSS Subscription Pricing Table. This table is ready for your website.
