Pricing Card Desing Using HTML and CSS

Hi, coders I am back with another fantastic project in this project I created a Pricing Card Using only pure HTML and CSS.

I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project. You can download these code files and use them for free.

Pricing Card Design

There are many other designs available online but this is a very simple and very easy-to-create this type of design using HTML and CSS.

In this pricing card, I add only three plans you can add more as you want the best part of this is responsive.

About This Project

This project was created by the codingpakistan team to help students learn coding and programming in a simple way. If you want to join our team please follow us on Instagram.

Created by	Coding Pakistan
Languages	HTML and CSS
Source Code	Available Below
Preview	Take Preview

Video

How to Create Pricing Cards Using HTML and CSS

There are some steps to create this type of Pricing Card using HTML, and CSS, which are given below.

The first step is to create one folder.
Open this folder in Vs Code Editor and create two files in HTML and CSS,

Make sure the HTML file extension is (.html) and the CSS file extension is (.css).
After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
The last step is copying and pasting the given code into your files.

Pricing Card Design – Source Code

HTML FILE

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Card 2</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="background"></div>
    <article class="card">
      <h2>Free</h2>
      <var><abbr>$</abbr>0<small>/MO</small></var>
      <ul>
        <li>
          <img src="check.svg" />
          <p>10 user requests</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>3 design accounts</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>24/7 support</p>
        </li>
      </ul>
      <button>Choose Plan</button>
    </article>
    <article class="card primary">
      <h2>Elite</h2>
      <var><abbr>$</abbr>99<small>/MO</small></var>
      <ul>
        <li>
          <img src="check.svg" />
          <p>10 user requests</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>3 design accounts</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>Email support</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>100 deployments</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>24/7 support</p>
        </li>
      </ul>
      <button class="primary">Choose Plan</button>
    </article>
    <article class="card">
      <h2>Pro</h2>
      <var><abbr>$</abbr>49<small>/MO</small></var>
      <ul>
        <li>
          <img src="check.svg" />
          <p>10 user requests</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>3 design accounts</p>
        </li>
        <li>
          <img src="check.svg" />
          <p>Email support</p>
        </li>
      </ul>
      <button>Choose Plan</button>
    </article>
  </body>
</html>

CSS FILE

* {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding: 60px 0;
    margin: 0;
    color: #36393f;
    background: #ecf4ff;
    background-size: 16px 16px;
    font-family: "Euclid Circular A", "Poppins";
  }
  
  .background {
    position: fixed;
    z-index: -1;
    top: -100px;
    left: -100px;
    right: -100px;
    height: 60vh;
    rotate: -4deg;
    background: #0f71ff;
  }
  
  .card {
    display: grid;
    place-items: center;
    gap: 10px;
    order: 2;
    width: 75%;
    margin: 0 auto;
    border-radius: 6px;
    padding: 50px;
    background: #ffffff;
    font-size: 125%;
  }
  
  .card.primary {
    order: 1;
  }
  
  .card.primary var {
    font-size: 60px;
  }
  
  @media (width >= 660px) {
    .card {
      width: 60vw;
    }
  }
  
  @media (width >= 960px) {
    body {
      padding: 0;
      flex-direction: row;
    }
  
    body,
    html {
      height: 100%;
    }
  
    .card {
      width: 300px;
      max-width: 300px;
      margin: 0;
      font-size: 100%;
    }
  
    .card.primary {
      order: 2;
    }
  }
  
  p,
  h2 {
    margin: 0;
  }
  
  .card var {
    color: #0f71ff;
    font-weight: 400;
    font-size: 50px;
    font-style: normal;
    margin-bottom: 10px;
  }
  
  .card var small {
    font-size: 16px;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
  }
  
  ul li {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
  }
  
  ul li img {
    width: 16px;
  }
  
  .card button {
    display: grid;
    place-items: center;
    min-width: 200px;
    padding: 14px 0;
    border-radius: 6px;
    border: 2px solid #0f71ff;
    background: transparent;
    color: #0f71ff;
    font-size: inherit;
    font-family: inherit;
  }
  
  .card button.primary {
    background: #0f71ff;
    color: #f7f7f7;
  }

Pricing Card Design Using HTML and CSS – Part 01