How to create cards design using HTML & CSS (2021)


Hello friends, to day I wanna to show how to make cards using by only on html and CSS.


So lets get start.

how to create cards design using html and css


first of all create (index.html) file on your computer or mobile. And below you can see this html code, so copy this code paste on (index.html) and save this file. 

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="style.css">
</head>
  <div class="pricing-table">
    <div class="pricing-card">
      <h3 class="pricing-card-header">Personal</h3>
      <div class="price"><sup>$</sup>15<span>/MO</span></div>
      <ul>
        <li><strong>3</strong> Websites</li>
        <li><strong>20 GB</strong> SSD</li>
        <li><strong>1</strong> Domain Name</li>
        <li><strong>5</strong> Email</li>
        <li><strong>1x</strong> CPU & RAM</li>
      </ul>
      <a href="#" class="order-btn">Order Now</a>
    </div>

    <div class="pricing-card">
      <h3 class="pricing-card-header">Professional</h3>
      <div class="price"><sup>$</sup>30<span>/MO</span></div>
      <ul>
        <li><strong>10</strong> Websites</li>
        <li><strong>50 GB</strong> SSD</li>
        <li><strong>1</strong> Domain Name</li>
        <li><strong>20</strong> Email</li>
        <li><strong>1.5x</strong> CPU & RAM</li>
      </ul>
      <a href="#" class="order-btn">Order Now</a>
    </div>

    <div class="pricing-card">
      <h3 class="pricing-card-header">Premium</h3>
      <div class="price"><sup>$</sup>50<span>/MO</span></div>
      <ul>
        <li><strong>30</strong> Websites</li>
        <li><strong>150 GB</strong> SSD</li>
        <li><strong>1</strong> Domain Name</li>
        <li><strong>40</strong> Email</li>
        <li><strong>2x</strong> CPU & RAM</li>
      </ul>
      <a href="#" class="order-btn">Order Now</a>
    </div>

    <div class="pricing-card">
      <h3 class="pricing-card-header">Ultimate</h3>
      <div class="price"><sup>$</sup>80<span>/MO</span></div>
      <ul>
        <li><strong>100</strong> Websites</li>
        <li><strong>500 GB</strong> SSD</li>
        <li><strong>1</strong> Domain Name</li>
        <li><strong>100</strong> Email</li>
        <li><strong>4x</strong> CPU & RAM</li>
      </ul>
      <a href="#" class="order-btn">Order Now</a>
    </div>
  </div>
</body>
</html>








2nd step, Create a Style.css file on same folder where have index.html file.
And copy below code and paste it style.css file and save this file. And final step Run this (index.html)
file on your Browser.



*{
  margin0;
  padding0;
  box-sizingborder-box;
  font-family"Open Sans",sans-serif;
  text-decorationnone;
  list-stylenone;
}

body{
  background-color#30336b;
  min-height100vh;
  displayflex;
  align-itemscenter;
}

.pricing-table{
  displayflex;
  flex-wrapwrap;
  justify-contentspace-around;
  width: min(1600px100%);
  marginauto;
}

.pricing-card{
  flex1;
  max-width360px;
  background-color#fff;
  margin20px 10px;
  text-aligncenter;
  cursorpointer;
  overflowhidden;
  color#2d2d2d;
  transition.3s linear;
}

.pricing-card-header{
  background-color#0fbcf9;
  displayinline-block;
  color#fff;
  padding12px 30px;
  border-radius0 0 20px 20px;
  font-size16px;
  text-transformuppercase;
  font-weight600;
  transition.4s linear;
}

.pricing-card:hover .pricing-card-header{
  box-shadow0 0 0 26em #0fbcf9;
}

.price{
  font-size70px;
  color#0fbcf9;
  margin40px 0;
  transition.2s linear;
}

.price sup.price span{
  font-size22px;
  font-weight700;
}

.pricing-card:hover ,.pricing-card:hover .price{
  color#fff;
}

.pricing-card li{
  font-size16px;
  padding10px 0;
  text-transformuppercase;
}

.order-btn{
  displayinline-block;
  margin-bottom40px;
  margin-top80px;
  border2px solid #0fbcf9;
  color#0fbcf9;
  padding18px 40px;
  border-radius8px;
  text-transformuppercase;
  font-weight500;
  transition.3s linear;
}

.order-btn:hover{
  background-color#0fbcf9;
  color#fff;
}

@media screen and (max-width:1100px){
  .pricing-card{
    flex50%;
  }
}

Hope you like this post. so please comment below and say, how is that.

Thank you