Home How To's Responsive Pricing table Using Only HTML & CSS

Responsive Pricing table Using Only HTML & CSS

158
0

Here is a tutorial on how to create Responsive Pricing table Using Only HTML & CSS

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800&display=swap"
      rel="stylesheet"
    />
    <title>Responsive Pricing table Using Only HTML & CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2 class="heading-primary">our Pricing</h2>
    <div class="plan-section">
      <div class="plan basic">
        <h2 class="plan-heading">Basic</h2>
        <h3 class="plan-price"><span class="dollar">$</span>99</h3>
        <ul class="plan-features">
          <li class="plan-item">100 GB Storage</li>
          <li class="plan-item">2 Users Allowed</li>
          <li class="plan-item">Send up to 3GB</li>
          <li class="plan-item">Support</li>
        </ul>
        <a href="#" class="btn buy-now">Buy Now</a>
      </div>

      <div class="plan pro">
        <h2 class="plan-heading">Professional</h2>
        <h3 class="plan-price"><span class="dollar">$</span>199</h3>
        <ul class="plan-features">
          <li class="plan-item">300 GB Storage</li>
          <li class="plan-item">3 Users Allowed</li>
          <li class="plan-item">Send up to 6 GB</li>
          <li class="plan-item">Support</li>
        </ul>
        <a href="#" class="btn btn-blue">Buy Now</a>
      </div>

      <div class="plan master">
        <h2 class="plan-heading">Master</h2>
        <h3 class="plan-price"><span class="dollar">$</span>299</h3>
        <ul class="plan-features">
          <li class="plan-item">600 GB Storage</li>
          <li class="plan-item">9 Users Allowed</li>
          <li class="plan-item">Send up to 9GB</li>
          <li class="plan-item">Master Support</li>
        </ul>
        <a href="#" class="btn buy-now">Buy Now</a>
      </div>
    </div>
  </body>
</html>

CSS

/* #6d708d
 #494c5f 
 
   #b3b5c6
   #f6f6fe
     #696fdd
     
 */
*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body{
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
  color:#494c5f  ;
  /* background-color:#6d708d ; */
}

.heading-primary{
  font-size: 2rem;
  text-align: center;
  margin: 50px 0;
}

.plan-section{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

.plan-section .plan{
  width: 300px;
  height: 370px;
  text-align: center;
  padding: 30px 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 0.6rem 1.6rem #b3b5c6;

}

.plan-section .plan .plan-price{
  font-size: 4rem;
}

.plan-section .plan .dollar{
  font-size: 2rem;
  font-weight: 400;
  vertical-align: middle;

}

.plan-section .plan .plan-features .plan-item{
  padding: 15px 0;
  border-bottom: 1px solid  #b3b5c6;
}

.plan-section .plan .btn{
  display: block;
  background-color: #696fdd;
  padding: 10px;
  margin-top: 20px;
  color: #f6f6fe;
  border-radius: 5px;
}

.plan-section .plan .btn:hover{
background-color: #f6f6fe;
color: #494c5f;
border: 1px solid #696fdd;
font-weight: 900;
}

.plan-section .plan .btn-blue{
  background-color: #f6f6fe;
  color: #696fdd;
}

.plan-section .plan .btn-blue:hover{
  background-color: #696fdd;
  color: #f6f6fe;
  border: 1px solid #f6f6fe;
}




.plan-section .basic{
  background-color: #f6f6f6;
}

.plan-section .pro{
  background-color: #696fdd;
  color: #f6f6fe;
  height: 400px;
}

.plan-section .master{
  background-color: #f6f6f6;
}

Demo Here

(Visited 68 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here