Responsive Price Table using HTML and CSS

Responsive Price Table using html and css

Make two files one is for HTML code and the other one is for CSS code.

Copy and paste HTML code in index.html file

HTML Code:

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Table</title>
   /*link your css file*/
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="col">
        <ul class="price">
          <li class="header">Lite</li>
          <li class="backclr">$ 2.49 / mo</li>
          <li>1 Website</li>
          <li>10GB SSD Storage</li>
          <li>~10000 Visits Monthly</li>
          <li>100GB Bandwidth</li>
          <li class="backclr"><a href="#" class="button">Get Started</a></li>
        </ul>
      </div>
      <div class="col">
        <ul class="price">
          <li class="header">Pro</li>
          <li class="backclr">$ 3.49 / mo</li>
          <li>100 Website</li>
          <li>100GB SSD Storage</li>
          <li>~25000 Visits Monthly</li>
          <li>Unlimited Bandwidth</li>
          <li class="backclr"><a href="#" class="button">Get Started</a></li>
        </ul>
      </div>
      <div class="col">
        <ul class="price">
          <li class="header">Standard</li>
          <li class="backclr">$ 4.49 / mo</li>
          <li>50 Website</li>
          <li>20GB SSD Storage</li>
          <li>~20000 Visits Monthly</li>
          <li>Unlimited Bandwidth</li>
          <li class="backclr"><a href="#" class="button">Get Started</a></li>
        </ul>
      </div>
</body>
</html>

Copy and paste below code in main.css file.

See also  How to Detect Pressed Key in HTML CSS & JS

CSS Code:

<!-- code by CodeitHub ( https://CodeitHub.com ) -->
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
  }
  
  .col {
    float:left;
    width: 33.3%;
    padding: 8px;
  }
  
  .price {
    list-style-type: none;
    border: 1px solid rgb(24, 16, 46);
    margin: 0;
    padding: 0;
    transition: 0.3s;
  }
  
  .price:hover {
    box-shadow: 0 8px 12px 0 rgba(143, 103, 238, 0.2)
  }
  
  .price .header {
    background-color: rgb(75, 35, 126);
    color: white;
    font-size: 25px;
  }
  
  .price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
  }
  
  .price .backclr {
    background-color: rgb(236, 226, 234);
    font-size: 20px;
  }
  
  .button {
    background-color: #dd3769;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
    border-radius: 24px;
  }
  
  @media only screen and (max-width: 600px) {
    .col {
      width: 100%;
    }
}

OUTPUT:

Leave a Reply

Your email address will not be published. Required fields are marked *