CSS Responsive Pricing Table

CSS Responsive Pricing Table. If you want to sell you the product and stuff online you have to put the selling list and price. If you want to sell more stuff to the customer you have to put clearly your scheme to the customer. The better way is to make the pricing table on your website. In this tutorial, I am going to make an attractive pricing table using HTML and CSS. I hope this tutorial makes the improvement in your career. You can modify this source code with your text editor. 

 

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Responsive Pricing Table</title>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
  <div class="box">
    <div class="title">
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
      <h2>Basic</h2>
    </div>
    <div class="price">
      <h4><sup>$</sup>10</h4>
    </div>
    <div class="option">
      <ul>
        <li><i class="fa fa-check" aria-hidden="true"></i>10 Gb Space</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>3 Domain Names</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>20 Emails</li>
        <li><i class="fa fa-times" aria-hidden="true"></i>Live Support</li>
      </ul>
    </div>
    <a href="#" class="btn">Order Now</a>
  </div>
  <div class="box">
    <div class="title">
      <i class="fa fa-plane" aria-hidden="true"></i>
      <h2>Standard</h2>
    </div>
    <div class="price">
      <h4><sup>$</sup>49</h4>
    </div>
    <div class="option">
      <ul>
        <li><i class="fa fa-check" aria-hidden="true"></i>50 Gb Space</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>5 Domain Names</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>Unlimited Emails</li>
        <li><i class="fa fa-times" aria-hidden="true"></i>Live Support</li>
      </ul>
    </div>
    <a href="#" class="btn">Order Now</a>
  </div>
  <div class="box">
    <div class="title">
      <i class="fa fa-rocket" aria-hidden="true"></i>
      <h2>Premium</h2>
    </div>
    <div class="price">
      <h4><sup>$</sup>99</h4>
    </div>
    <div class="option">
      <ul>
        <li><i class="fa fa-check" aria-hidden="true"></i>Unlimited Space</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>30 Domain Names</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>Unlimited Emails</li>
        <li><i class="fa fa-check" aria-hidden="true"></i>Live Support</li>
      </ul>
    </div>
    <a href="#" class="btn">Order Now</a>
  </div>
</div>
</body>
</html>

CSS

body {
  background: url(img-1.jpg);
  background-size: cover;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  font-family: sans-serif;
  
}

.container {
  margin: auto 0;
  padding: 40px 0;
  display: grid;
  grid-template-columns: repeat(1, 340px);
  grid-auto-rows: 560px;
  grid-gap: 80px;
  align-items: stretch;
}

.box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
  background: linear-gradient(90deg, #ff00ff, #262626);
  border-radius: 50px 50px 150px 150px;
  border: 3px solid #ffc98e;
  box-shadow: 0 0 0 6px #323232, 0 0 0 10px #ffc98e, 0 0 0 20px #323232, 0 10px 150px rgba(0, 0, 0, 1);
  transition: 0.5s;
}


.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.box .title .fa {
  margin-top: 20px;
  font-size: 80px;
  color: #ffc98e;
}

.box .title h2 {
  color: #fff;
  margin: 20px 0 0;
  padding: 0;
}

.box .price h4 {
  font-size: 60px;
  color: #ffc98e;
  margin: 10px 0;
  padding: 0;
}

.box .option ul {
  margin: 20px 0;
  padding: 0;
  list-style: none;
}

.box .option ul li {
  color: #fff;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 20px;
  font-weight: bold;
}

.box .option ul li:last-child {
  border-bottom: none;
}

.box .btn {
  display: inline-block;
  background: #ffc98e;
  color: #262626;
  font-weight: bold;
  padding: 10px 30px;
  margin-top: 20px;
  text-decoration: none;
  border-radius: 10px;
}

@media (min-width: 840px) and (max-width: 1259px) {
  .container {
    grid-template-columns: repeat(2, 340px);
  }
}

@media (min-width: 1260px) {
  .container {
    grid-template-columns: repeat(3, 340px);
  }
}

@media (min-width: 840px) {
  .box:hover {
    transform: scale(1.1);
  }
}

Leave a Comment