Responsive Flat Pricing Card List Design – Using HTML & CSS

Responsive Flat Pricing Card List Design – Using HTML & CSS

Hello readers, today in this blog I’m going to create a Responsive Pricing Table using HTML & CSS Simply, pricing tables are the flat card designs of a particular product with products of different value and offer for the buyers. Pricing table can be a various product like mobile phones, television, hosting, and others. Basically, it is use maximum in the e-commerce website.

As you can see on the given image of this design [Responsive Pricing Tables], on the webpage. There are three cards of the price list with different colors, offers, and prices. Actually, this is the pricing table of the hosting.

In detail in the top cards, there is the price of this product, the bottom of the price some major information for each value, the bottom of the information there are all offers which is given to users in different price segments. These all cards are responsive and also I have added some hover effects on the button.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Flat Pricing Card List Design - Using HTML & CSS</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
</head>
<body>

  <section class="main-container">
    <div class="card-container">
      <div class="pricing-card card-01">
        <div class="pricing">
          <div class="price">
            <sup>$</sup>
            <span>12</span>
          </div>
          <p>/month</p>
          <span class="type">Basic</span>
        </div>
        <div class="card-body">
          <div class="top-shape"></div>
          <div class="card-content">
            <ul>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
              <li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
              <li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
            </ul>
            <button class="buy-btn">Buy Now</button>
          </div>
        </div>
        <div class="ribbon"></div>
      </div>
      <div class="pricing-card card-02">
        <div class="pricing">
          <div class="price">
            <sup>$</sup>
            <span>20</span>
          </div>
          <p>/month</p>
          <span class="type">Pro</span>
        </div>
        <div class="card-body">
          <div class="top-shape"></div>
          <div class="card-content">
            <ul>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
              <li class="disabled">Lorem Ipsum Dolor. <i class="uil uil-times-circle"></i></li>
            </ul>
            <button class="buy-btn">Buy Now</button>
          </div>
        </div>
        <div class="ribbon"></div>
      </div>
      <div class="pricing-card card-03">
        <div class="pricing">
          <div class="price">
            <sup>$</sup>
            <span>25</span>
          </div>
          <p>/month</p>
          <span class="type">Premium</span>
        </div>
        <div class="card-body">
          <div class="top-shape"></div>
          <div class="card-content">
            <ul>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
              <li class="active">Lorem Ipsum Dolor. <i class="uil uil-check-circle"></i></li>
            </ul>
            <button class="buy-btn">Buy Now</button>
          </div>
        </div>
        <div class="ribbon"></div>
      </div>
    </div>
  </section>

</body>
</html>
  • ┬áThe code is a responsive flat pricing card list design.
  • ┬áThe code is made up of HTML and CSS.
  • ┬áThe first thing the code does is to set the viewport width to device-width, which means that it will be as wide as possible on any screen size.
  • ┬áThis makes sure that all users can see everything without having to scroll horizontally or vertically.
  • ┬áNext, it sets the initial scale of 1.0 so that when you resize your browser window, everything stays at 100% zoom level and doesn’t change its size relative to other elements in the page (elements are scaled proportionally).
  • ┬áThen it includes a meta tag with name=”viewport” and content=”width=device-width, initial-scale=1.0″.
  • ┬áThis tells browsers what kind of viewport they should use for this website’s layout: one where width equals device-width and height equals initial-scale*100%.
  • ┬áIt also includes a link tag with rel=”stylesheet” href=”https://unicons.iconscout.com/release/v4.0.0/css/line.”
  • ┬áLine is an icon font designed by IconScout Inc., which has been used in this project because icons are easier for people who don’t know how to
  • ┬áThe code is a basic HTML document with a CSS file and an icon font.
  • The 4th item has an active class, which means it will be highlighted when you hover over it.
  • ┬áThe second item has a disabled class, meaning it won’t be highlighted when you hover over it but still visible on screen.
  • The 5th item doesn’t have any classes applied to it because there’s no need to highlight anything about that particular card.
  • Then comes the text describing what type of plan they are: Pro or Premium (again depending on what type of plan you’re buying).

HTML Output

html output of Responsive Flat Pricing Card List Design - Using HTML & CSS

50+ Frontend Project Code 

CSS

/*============ Google fonts ============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root{
  /*===== Colors =====*/
  --card-01-color-01: #ffb200;
  --card-01-color-02: #ff9700;
  --card-02-color-01: #96c110;
  --card-02-color-02: #80ad0a;
  --card-03-color-01: #64b2f2;
  --card-03-color-02: #489ed9;
  --card-body-bg-color: #fff;
  --text-disabled-color: #b2b2b2;
  --icon-disabled-color: #ff0404;
  --body-bg-color: #e5f6ff;

  /*===== Fonts =====*/
  --poppins-font: 'Poppins', sans-serif;
  --bebas-font: 'Bebas Neue', cursive;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: var(--body-bg-color);
}

.main-container{
  position: relative;
  max-width: 900px;
  min-height: 100vh;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container{
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 40px;
  margin: 50px 0;
}

.pricing-card{
  position: relative;
}

.card-body{
  position: relative;
  width: 100%;
  background: var(--card-body-bg-color);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 5px 25px rgb(0 0 0 / 20%);
  margin-top: 60px;
}

.card-body .top-shape{
  clip-path: polygon(0 0, 100% 0%, 100% 50%, 50% 75%, 0 50%);
  height: 200px;
}

.card-01 .card-body .top-shape{
  background: var(--card-01-color-01);
}

.card-02 .card-body .top-shape{
  background: var(--card-02-color-01);
}

.card-03 .card-body .top-shape{
  background: var(--card-03-color-01);
}

.card-body .top-shape:before{
  content: '';
  position: absolute;
  clip-path: polygon(0 0, 100% 0%, 100% 25%, 50% 50%, 0 25%);
  width: 100%;
  height: 200px;
}

.card-01 .card-body .top-shape:before{
  background: var(--card-01-color-02);
}

.card-02 .card-body .top-shape:before{
  background: var(--card-02-color-02);
}

.card-03 .card-body .top-shape:before{
  background: var(--card-03-color-02);
}

.pricing{
  z-index: 999;
  font-family: var(--bebas-font);
  text-align: center;
  position: absolute;
  width: 100%;
}

.price{
  display: flex;
  justify-content: center;
  margin-bottom: 3px;
}

.price span{
  font-size: 9em;
  line-height: 100px;
}

.price sup{
  font-size: 2em;
  transform: translateY(-15px);
}

.pricing p{
  font-family: var(--poppins-font);
  font-weight: 500;
  margin-bottom: 10px;
}

.pricing .type{
  text-transform: uppercase;
  font-size: 2.5em;
}

.card-body .card-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(-30px);
}

.card-body .card-content ul{
  width: 100%;
  font-family: var(--poppins-font);
  text-align: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.card-body .card-content ul li{
  list-style: none;
  font-size: 0.95em;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 35px;
  white-space: nowrap;
}

.card-body .card-content ul li i{
  font-size: 1.9em;
  margin-left: 15px;
}

.card-01 .card-body .card-content ul .active i{
  color: var(--card-01-color-01);
}

.card-02 .card-body .card-content ul .active i{
  color: var(--card-02-color-01);
}

.card-03 .card-body .card-content ul .active i{
  color: var(--card-03-color-01);
}

.card-body .card-content ul .disabled{
  color: var(--text-disabled-color);
}

.card-body .card-content ul .disabled i{
  color: var(--icon-disabled-color);
}

.card-content .buy-btn{
  font-family: var(--bebas-font);
  border: none;
  outline: none;
  padding: 0 28px;
  border-radius: 15px;
  text-transform: uppercase;
  font-size: 1.9em;
  cursor: pointer;
  margin-bottom: 40px;
}

.card-01 .card-content .buy-btn{
  background: linear-gradient(var(--card-01-color-01) 50%, var(--card-01-color-02) 50%);
}

.card-02 .card-content .buy-btn{
  background: linear-gradient(var(--card-02-color-01) 50%, var(--card-02-color-02) 50%);
}

.card-03 .card-content .buy-btn{
  background: linear-gradient(var(--card-03-color-01) 50%, var(--card-03-color-02) 50%);
}

.card-01 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-01-color-02) 50%, var(--card-01-color-01) 50%);
}

.card-02 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-02-color-02) 50%, var(--card-02-color-01) 50%);
}

.card-03 .card-content .buy-btn:hover{
  background: linear-gradient(var(--card-03-color-02) 50%, var(--card-03-color-01) 50%);
}

.ribbon{
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.ribbon:before{
  content: 'Limited Time';
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--poppins-font);
  font-size: 0.8em;
  font-weight: 600;
  position: absolute;
  width: 150%;
  height: 30px;
  transform: rotate(45deg) translateY(15px);
}

.card-01 .ribbon:before{
  background: var(--card-01-color-01);
}

.card-02 .ribbon:before{
  background: var(--card-02-color-01);
}

.card-03 .ribbon:before{
  background: var(--card-03-color-01);
}

.ribbon:after{
  z-index: -1;
  content: '';
  position: absolute;
  width: 150%;
  height: 30px;
  transform: rotate(225deg) translateY(15px);
}

.card-01 .ribbon:after{
  background: var(--card-01-color-02);
}

.card-02 .ribbon:after{
  background: var(--card-02-color-02);
}

.card-03 .ribbon:after{
  background: var(--card-03-color-02);
}

@media screen and (max-width: 845px){
  .main-container{
    max-width: 680px;
  }  

  .pricing-card{
    margin: 20px 0;
  }
}

@media screen and (max-width: 575px){
  .main-container{
    max-width: 350px;
  }
}

You Might Like This:

  • The code starts with a body tag, which sets the background color of the page to be var(–body-bg-color).
  • ┬áThe next line is an empty div that will be used as a container for all other content.
  • ┬áThe following lines set up some basic styles for the container.
  • ┬áIt has a max width of 900px and min height of 100vh (100% viewport height), it’s positioned relative to its parent, and it has margin on both sides so that there is space between each item in the list.
  • ┬áThis code also uses display: flex; because this is going to be a flexible layout where items can flow around one another.
  • ┬áFinally, this code aligns all items in center by using justify-content: center;
  • ┬áThe code attempts to make the container on which the content will be displayed, as large as possible.
  • ┬áThe code above aligns the content in center and sets a width of 900px for it.
  • ┬áThe first card has a width of 100% and the second one is 230px wide.
  • ┬áThere are gaps between each card, which are 40px wide in this case.
  • ┬áThe third card has a height of 200px because it’s the top shape on that particular row.
  • ┬áThe .card-01 class sets the background color to var(–card-01-color-01) and .card-02 does the same for var(–card-02-color-01).
  • ┬áThe code is a CSS grid layout that has been applied to the card-container.
  • ┬áThe grid-template-columns property is used to define the number of columns in the grid, and the gap property defines how much space should be between each column.
  • ┬áThe .card-body element has a background color defined with var() notation, which allows for different colors on each card.
  • ┬áThe clip-path property is used to create a shape that can be seen on top of all cards; this shape will appear as a rectangle when viewed from above.
  • ┬áThe code is a CSS rule that sets the background color of the top shape to be different for each card.
  • ┬áThe first two cards have a blue background, and the last three cards have a green background.
  • ┬áThe code will create a triangle shape with the bottom point at the center of the card.
  • ┬áThe clip-path property is used to define the polygonal shape that will be applied to the card’s top-shape property.
  • ┬áThe code starts with a z-index of 999. This is because the pricing table will be placed on top of everything else in the document.
  • ┬áThe font-family property is set to var(–bebas-font).
  • ┬áThis means that all text within this element will use the same font as specified by –bebas-font, which is Bebas Neue.
  • ┬áThe code then sets up a simple pricing table with three columns and two rows.
  • ┬áEach row has an image for each price point (a dollar sign) and each column has a span tag that contains text about what it represents (e.g., “1 Dollar”).
  • ┬áFinally, there are two spans at the bottom of each row: one for displaying prices in dollars and another for displaying prices in cents.
  • ┬áThe code attempts to create a pricing table with the price of each item in a different font.
  • The code starts with a div that is set to display: flex;.
  • ┬áThis will allow the content of this card to be flexible and stretch out across the width of the browser window.
  • ┬áNext, it sets justify-content: center; so that all items in this card are centered horizontally.
  • ┬áIt then aligns all items in this card by setting them to align-items: center; and finally transforms each item by setting transform: translateY(-30px); so that they move down 30 pixels from their original position on screen.
  • ┬áThe code starts with a div that is set to display: flex; which allows for flexibility in how much space there is between cards as well as allowing for more than one card per line when using multiple lines of text.
  • ┬áNext, it sets justify-content: center so that everything within this container has equal spacing vertically and horizontally while also centering everything within its container (the .card-body).
  • ┬áThen, it aligns all items in this container by setting them to align-items: center which centers them horizontally but does not affect their vertical positioning at all because they were already centered before alignment was applied.
  • ┬áFinally, transform each item by setting transform: translateY(-30px) so they move down 30 pixels from
  • ┬áThe code is meant to create a card with a title, body and content.
  • ┬áThe card will have the following layout: The code is meant to create a card with a title, body and content.
  • ┬áThe card will have the following layout: flex-direction: column; transform: translateY(-30px);
  • ┬áThe first ribbon is for the card with the number 01, the second ribbon is for the card with number 02, and finally, the third ribbon is for card 03.
  • ┬áThe code starts by declaring a variable called “ribbon” which will be used to create each of these ribbons.
  • ┬áNext it declares an empty div element called “card-01 .ribbon:before”.
  • ┬áThis div element has two properties: background and transform.
  • ┬áIt also has a width of 150% and height of 30px.
  • ┬áThe background property sets up this div as being transparent so you can see through it while still having some color behind it (var(–card-01-color-02)).
  • ┬áThe transform property rotates this div 45 degrees on its x axis then translates 15 pixels down on its y axis (rotate(-45deg) translateY(15px)).
  • ┬áFinally, there’s an after pseudo selector which sets up this div as being invisible when another element comes in front of it (z-index:-1; content: ”; position: absolute; width: 150%; height: 30px; transform: rotate(225deg) translateY(15px)).
  • ┬áThe code is to show the difference between a card that has been purchased and one that has not.
  • ┬áThe code above shows how the ribbon changes colors depending on whether or not the card has been purchased.

Final Output

Responsive Flat Pricing Card List Design - Using HTML & CSS

Hope you like this project, If simplicity is your go then this set of 3 pricing tables can quite come in handy in your design projects. Basic to Premium formats for pricing plans is available in this CSS template and we can see a fluid flip animation while doing that. This template is responsive and will be a asset to your collection.

If you enjoyed this article, share it with your friends and colleagues! If you need any more project-related frontend. Visit our homepage and you get 100+ projects­čĺŁ.

If you have any queries please do not hesitate to contact us

written by ÔÇô ninja_webtech

Share on:

Leave a Comment