How To Create a Responsive Pricing Table HTML
Learn how to make Pricing Table using HTML and CSS. Add a Pricing Table on your website using HTML and CSS. Easy way to learn HTML for beginners. You will easily make this Pricing Table by following my Youtube video tutorial. I also provide you HTML, CSS, and Js Code which helps you to understand this Tutorial.
How to make Responsive Pricing Table using HTML and CSS
- 00:00 - 01:00 min : Intro
- 01:00 - 20.00 min: Create Responsive Pricing Table Using HTML abd CSS
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
<html> <head> <meta charset="utf-8"> <meta content="IE-edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, intial-scale=1.0" name="viewport"> <title>Side Login and Registration Form Bar</title> <!--style-----> <style> body{ font-family:poppins; } </style> </head> <body> </body> </html>
Responsive Pricing Table HTML
You can easily make a Pricing Table by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make a Pricing Table with CSS on our Website. So I recommended you watch the Video Tutorial that how can I make this Only using HTML and CSS. This Pricing Table Section is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Reviews Section video tutorial on how I make this Website. you can use this on your website without any copyright.
➤Pricing Table HTML Code have given below.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, intial-scale=1.0"> <title>Pricing Table HTML</title> <!--Stylesheet-----------------------------------> <link rel="stylesheet" href="css/style.css"/> <!--Fav-icon-------------------------------------> <link rel="shortcut icon" href="images/fav-icon.png"/> <!--fontAwesome----------------------------------> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> <!--poppins-font-family--------------------------> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </head> <body> <!--Pricing-Table----------------------------------> <section id="pricing-table"> <!--price-box-container----------------> <div class="price-box-container"> <!--box-1-------> <div class="price-box"> <!--top-section--------> <div class="box-top-section"> <!--plan-name---> <div class="plan-name"> <strong>Starter</strong> <span>Small Office/Home Office</span> </div> <!--img---------> <div class="plan-img"> <img alt="" src="images/starter.svg"> </div> <!--price-section------> <div class="price-section"> <!---price-annually-----> <strong class="price"> <span>$</span> <strong>16</strong> <span>/mo</span> </strong> </div> <!---per-month---------------> <span class="per-month">or <strong>$19</strong> month-to-month</span> </div> <!--features-section---> <div class="box-features-section"> <!--features-box-1---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>60-day chat history</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-2---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic widget customization</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Customization is limited to changing the theme and colors of the chat widget.</p> </div> </div> <!--features-box-3---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Ticketing system</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Built-in ticketing system that will allow you to create, manage, and track tougher cases. You can also use it to handle emails and messages left when your LiveChat is offline.</p> </div> </div> <!--features-box-4---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Data security</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Secure 256-bit SSL encryption for website visitors and agents connecting to your LiveChat.</p> </div> </div> <!--chose-plan-btn-------------------> <a href="#" class="chose-plan-btn">Chose Plan <i class="fas fa-chevron-right"></i> </a> </div> </div> <!--box-2-----------------------------------------> <div class="price-box"> <!--top-section--------> <div class="box-top-section"> <!--plan-name---> <div class="plan-name"> <strong>Team</strong> <span>Small Office/Home Office</span> </div> <!--img---------> <div class="plan-img"> <img alt="" src="images/team.svg"> </div> <!--price-section------> <div class="price-section"> <!---price-annually-----> <strong class="price"> <span>$</span> <strong>33</strong> <span>/mo</span> </strong> </div> <!---per-month---------------> <span class="per-month">or <strong>$19</strong> month-to-month</span> </div> <!--features-section---> <div class="box-features-section"> <!--features-box-1---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>60-day chat history</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Full customization, including changing the theme, colors, visibility.</p> </div> </div> <!--features-box-2---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic widget customization</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Built-in ticketing system that will allow you to create, manage, and track tougher cases. You can also use it to handle emails and messages left when your LiveChat is offline.</p> </div> </div> <!--features-box-3---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Ticketing system</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Secure 256-bit SSL encryption for website visitors and agents connecting to your LiveChat.</p> </div> </div> <!--features-box-4---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Data security</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Chat and ticket reports plus a daily recap of your account activity.</p> </div> </div> <!--features-box-5---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic reporting</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can divide your LiveChat by department. This way, you can route chats to the right agents.</p> </div> </div> <!--features-box-6---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Agent groups</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can put LiveChat on multiple websites. Each implementation can be customized separately.</p> </div> </div> <!--features-box-7---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Multiple brandings</span> <!--box-show-when-hover----> <div class="feature-details"> <p>All your chats will be stored in the archives.</p> </div> </div> <!--chose-plan-btn-------------------> <a href="#" class="chose-plan-btn">Chose Plan <i class="fas fa-chevron-right"></i></a> </div> </div> <!--box-3-------> <div class="price-box popular"> <!--top-section--------> <div class="box-top-section"> <!--top-bar--> <div class="top-bar"> <span>Popular</span> </div> <!--plan-name---> <div class="plan-name"> <strong>Business</strong> <span>Small Office/Home Office</span> </div> <!--img---------> <div class="plan-img"> <img alt="" src="images/business.svg"> </div> <!--price-section------> <div class="price-section"> <!---price-annually-----> <strong class="price"> <span>$</span> <strong>50</strong> <span>/mo</span> </strong> </div> <!---per-month---------------> <span class="per-month">or <strong>$50</strong> month-to-month</span> </div> <!--features-section---> <div class="box-features-section"> <!--features-box-1---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>60-day chat history</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Full customization, including changing the theme, colors, visibility.</p> </div> </div> <!--features-box-2---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic widget customization</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Built-in ticketing system that will allow you to create, manage, and track tougher cases. You can also use it to handle emails and messages left when your LiveChat is offline.</p> </div> </div> <!--features-box-3---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Ticketing system</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Secure 256-bit SSL encryption for website visitors and agents connecting to your LiveChat.</p> </div> </div> <!--features-box-4---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Data security</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Chat and ticket reports plus a daily recap of your account activity.</p> </div> </div> <!--features-box-5---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic reporting</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can divide your LiveChat by department. This way, you can route chats to the right agents.</p> </div> </div> <!--features-box-6---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Agent groups</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can put LiveChat on multiple websites. Each implementation can be customized separately.</p> </div> </div> <!--features-box-7---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Multiple brandings</span> <!--box-show-when-hover----> <div class="feature-details"> <p>All your chats will be stored in the archives.</p> </div> </div> <!--features-box-8---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Staffing prediction</span> <!--box-show-when-hover----> <div class="feature-details"> <p>A report that will tell you how many agents you will need to cover your changing chat volume.</p> </div> </div> <!--features-box-9---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Work scheduler</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Configure the working hours for your agents to ensure smooth transitions between shifts.</p> </div> </div> <!--chose-plan-btn-------------------> <a href="#" class="chose-plan-btn">Chose Plan <i class="fas fa-chevron-right"></i></a> </div> </div> <!--box-4-------> <div class="price-box"> <!--top-section--------> <div class="box-top-section"> <!--plan-name---> <div class="plan-name"> <strong>Enterprise</strong> <span>Small Office/Home Office</span> </div> <!--img---------> <div class="plan-img"> <img alt="" src="images/enterprise.svg"> </div> <!--price-section------> <div class="price-section"> <!---price-annually-----> <strong class="price"> <span>$</span> <strong>80</strong> <span>/mo</span> </strong> </div> <!---per-month---------------> <span class="per-month">or <strong>$19</strong> month-to-month</span> </div> <!--features-section---> <div class="box-features-section"> <!--features-box-1---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>60-day chat history</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Full customization, including changing the theme, colors.</p> </div> </div> <!--features-box-2---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic widget customization</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Built-in ticketing system that will allow you to create, manage, and track tougher cases. You can also use it to handle emails and messages left when your LiveChat is offline.</p> </div> </div> <!--features-box-3---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Ticketing system</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Secure 256-bit SSL encryption for website visitors and agents connecting to your LiveChat.</p> </div> </div> <!--features-box-4---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Data security</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Chat and ticket reports plus a daily recap of your account activity.</p> </div> </div> <!--features-box-5---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Basic reporting</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can divide your LiveChat by department. This way, you can route chats to the right agents.</p> </div> </div> <!--features-box-6---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Agent groups</span> <!--box-show-when-hover----> <div class="feature-details"> <p>You can put LiveChat on multiple websites. Each implementation can be customized separately.</p> </div> </div> <!--features-box-7---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Multiple brandings</span> <!--box-show-when-hover----> <div class="feature-details"> <p>All your chats will be stored in the archives.</p> </div> </div> <!--features-box-8---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Staffing prediction</span> <!--box-show-when-hover----> <div class="feature-details"> <p>A report that will tell you how many agents you will need to cover your changing chat volume.</p> </div> </div> <!--features-box-9---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Work scheduler</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Configure the working hours for your agents to ensure smooth transitions between shifts.</p> </div> </div> <!--features-box-10---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Dedicated acc. manager</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-11---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Product training</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-12---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Software engineer support​</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-13---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Security assistance</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-14---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>HIPAA Compliance</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--features-box-15---> <div class="features-box"> <!--icon----> <i class="fas fa-check"></i> <span>Single Sign-On (SSO)</span> <!--box-show-when-hover----> <div class="feature-details"> <p>Your chats will be lo stored in the archives for 60 days.</p> </div> </div> <!--chose-plan-btn-------------------> <a href="#" class="chose-plan-btn">Chose Plan <i class="fas fa-chevron-right"></i></a> </div> </div> </div> </section> </body> </html>
➤Pricing Table CSS Code is have given below.
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
a{
text-decoration: none;
}
::selection{
background-color: #fed000;
color: #242424;
}
#pricing-table{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
min-height: 100vh;
}
.price-box-container{
display: flex;
justify-content: center;
margin-top: 30px;
flex-wrap: wrap;
}
.price-box{
margin: 10px;
width: 265px;
border-radius: 5px;
height: auto;
}
.box-top-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
width: 100%;
border: 1px solid #ebebeb;
border-bottom: none;
position: relative;
}
.plan-name{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px 5px;
}
.plan-name strong{
color:#19181e;
font-size: 1.5rem;
margin: 5px 0px;
}
.plan-name span{
color: #2b2a31;
font-size: 0.8rem;
}
.plan-img{
width:160px;
height:117px;
}
.plan-img img{
width:100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.price-section{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 5px;
}
.price strong{
font-size: 4rem;
color: #19181e;
}
.price span{
font-size: 0.8rem;
padding: 0px;
margin: 0px;
color: #292929;
font-weight: 500;
}
.per-month{
font-size: 0.8rem;
color: #2b2a31;
}
.box-features-section{
border-top: 1px solid #c9c9c9;
padding: 20px 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
border: 1px solid #ebebeb;
border-top: 1px solid #c7c7c7;
}
.features-box{
width: 100%;
display: flex;
border-radius: 20px;
padding: 10px 20px;
cursor: pointer;
position: relative;
}
.features-box i{
color: #462ebd;
margin-right: 7px;
font-size: 0.9rem;
}
.features-box span{
color: #242424;
font-size: 0.8rem;
}
.features-box:hover{
background-color: #f6f6f7;
transition: all ease 0.3s;
}
.feature-details{
position: absolute;
bottom:45px;
left: 50%;
transform: translateX(-50%);
width:100%;
height: auto;
padding: 10px;
background-color: #242424;
color: #ebebeb;
border-radius: 8px;
font-size: 0.8rem;
text-align: center;
box-shadow: 2px 2px 30px rgba(0,0,0,0.10);
display: none;
animation: fade 0.2s;
}
.feature-details:after{
content: '';
width:0px;
height: 0px;
border-bottom: 5px solid transparent;
border-left: 7px solid transparent;
border-top: 7px solid #242424;
border-right: 5px solid transparent;
position: absolute;
left: 50%;
top: 100%;
}
.features-box:hover .feature-details{
display:block;
}
.chose-plan-btn{
margin-top: 20px;
font-size: 0.9rem;
color: #252236;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chose-plan-btn:hover{
color: #462ebd;
border-bottom: 1px solid #462ebd;
transition: all ease 0.2s;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.top-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -20px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
border-radius: 20px;
padding: 10px 25px;
color: #ffffff;
background-color: #2c2c2c;
box-shadow: 2px 2px 30px rgba(0,0,0,0.15);
}
.popular .box-top-section{
background-color: #fed000;
}
.price-box:hover .box-top-section,
.price-box:hover .box-features-section{
box-shadow: 2px 2px 30px rgba(0,0,0,0.09);
transition: all ease 0.2s;
}
@media(max-width:1160px){
.price-box-container{
width:800px
}
.price-box{
flex-grow: 1;
}
}
@media(max-width:810px){
.price-box-container{
width: 100%;
}
}
@media(max-width:570px){
.price-box{
width:100%;
margin: 20px 10px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
}
}
Test
ReplyDeleteNonetheless, it is advised that you choose simple video games that do not require plenty of strategies. 바카라사이트 This will give you you with|provides you with} a sound basis firstly of your playing experience. After mastering your expertise, transferring to the next level of on-line on line casino video games is okay.
ReplyDelete