Notification texts go here Contact Us Buy Now!

Welcome To Tajamal Tech

Hi Dear :Read my guides in which I've shared my knowledge and experiences. I will keep updating my website with great information for all of you.

  See More Tutorials Here →
Home
Posts

BUY & SELL Style

Estimated read time: 12 min
Post box code paste 
<!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>
❇ < / b:skin> Paste code CSS
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;
  }
}

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.