How to Design Statistics Card in Html and CSS | Statistics Cards Using HTML & CSS

In this tutorial, How to design Statistics Card in Html and CSS.

How to Design Statistics Card in Html and CSS | How to Create Statistics Cards Using HTML and CSS

How to create Statistics Card using Html and CSS. I've tried to create a simple UI card design with an attractive mode similar to other websites on the web.

Let's Design Statistics using HTML & CSS.

Let's Write HTML:

                            
                                <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <title>Statistics Pages Using HTML & CSS</title>
</head>
<body>

  <div class="main">

    <div class="header">
      <h2>Overview</h2>
      <h3>$34750.00</h3>
      <p><span class="fas fa-arrow-up rate"> +4.2% </span> for last month</p>
    </div>

    <div class="content">
      <div class="loader first">Views<span>95%</span></div>
      <div class="loader second">Share<span>40%</span></div>
      <div class="loader third">Comments<span>62%</span></div>
    </div>

    <div class="footer">
      <span>0'''''''</span>
      <span>20'''''''</span>
      <span>40'''''''</span>
      <span>60'''''''</span>
      <span>80'''''''</span>
      <span>100</span>
    </div>
  </div>

</body>

</html>

Let's CSS:

                            
                                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

  * {
    margin: 0;
    padding: 0;
    font-family: 'poppins', sans-serif;
    box-sizing: border-box;
  }

  body {
    display: flex;
    background-color: #ebebeb;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
  }

  .main {
    position: relative;
    width: 400px;
    height: 400px;
    padding: 20px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 20px 23px 5px rgba(0, 0, 0, 0.4);
  }

  .header {
    position: relative;
    line-height: 3em
  }

  .header span {
    color: green;
    font-weight: bold;
  }

  .content .loader {
    color: #ebebeb;
    font-size: 15px;
    padding: 8px 12px;
    margin-top: 10px;
    font-weight: bold;
    border-radius: 10px;
    animation: play 2s;
  }

  @keyframes play {
    0% {
      width: 0;
      opacity: 0;
    }

    30% {
      opacity: 0;
    }

    100% {
      transition: 2s ease-in;
      width: calc(100/10);
      opacity: 1;
    }
  }

  .content .first {
    height: 40px;
    width: 90%;
    background-color: darkcyan;
  }

  .content .second {
    height: 40px;
    width: 40%;
    background-color: orange;
  }

  .content .third {
    height: 40px;
    width: 60%;
    background-color: brown;
  }

  .loader span {
    color: #ebebeb;
    display: block;
    float: right;
    font-weight: bold
  }

  .footer {
    padding: 20px 0;
  }

  .footer span {
    letter-spacing: .19em;
  }

Download Code Files