Project Counter Section Using HTML, CSS & JS

 
You might have observed above displayed section which termed as Project Counter Section present an overview of particular web/blog’s work to the one who visit their website/blog. Really this section makes the website more beautiful and attractive. It contains the data in number, like project you have done, clients satisfied by your work, bonus etc. 
 
◘ What information does Project Counter Section contains ?

   It’s just like a card which is important and helpful in navigation for better results. It contains the following details:-

        • Project done 

        • Number of Client satisfaction

          Number of Awards winning

          Number of Sells

         • Number of Products

         • Bonus, etc and many as per needs.

◘ What’s profit of it on adding on website/ blog ?

    In the series of developing a full stack website/blog it also play an important role which it help users for better navigation and exploring an overview like what importance does this website have in nowadays only by seeing project counter section data. It also help in traffic increasement.

◘ How can we make Project Counter Section more informative ? 

    You can designed a more informative and attractive Project Counter Section in the following ways:-

           Have purposeful niche.

          Be clear to the data what you’re going to display.

         • Try to show demanded data which can reflect to the users and many more. 

<!DOCTYPE html>
<!-- Created By DealwithCodes - https://dealwithcodes.blogspot.com/ -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
</head>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.section{
  background: url("images/bg-1.jpg") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.wrapper{
  padding: 20px 50px;
}
.wrapper .title{
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 10px;
}
.wrapper p{
  text-align: justify;
  padding-bottom: 20px;
}
.counter-up{
  background-color: red;
  min-height: 50vh;
  background-size: cover;
  background-attachment: fixed;
  padding: 0 50px;
  position: relative;
  display: flex;
  align-items: center;
}
.counter-up::before{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0,0.8);
}
.counter-up .content{
  z-index: 1;
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.counter-up .content .box{
  border: 1px dashed rgba(255,255,255,0.6);
  width: calc(25% - 30px);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
  padding: 20px;
}
.content .box .icon{
  font-size: 48px;
  color: #e6e6e6;
}
.content .box .counter{
  font-size: 50px;
  font-weight: 500;
  color: #f2f2f2;
  font-family: sans-serif;
}
.content .box .text{
  font-weight: 400;
  color: #ccc;
}
@media screen and (max-width: 1036px) {
  .counter-up{
    padding: 50px 50px 0 50px;
  }
  .counter-up .content .box{
    width: calc(50% - 30px);
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 580px) {
  .counter-up .content .box{
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  .wrapper{
    padding: 20px;
  }
  .counter-up{
    padding: 30px 20px 0 20px;
  }
}
</style>
<body>
  <div class="counter-up">
    <div class="content">
      <div class="box">
        <div class="icon"><i class="fas fa-history"></i></div>
        <div class="counter">454</div>
        <div class="text">Runtime Hours</div>
      </div>

      <div class="box">
        <div class="icon"><i class="fas fa-gift"></i></div>
        <div class="counter">500</div>
        <div class="text">Projects</div>
      </div>

      <div class="box">
        <div class="icon"><i class="fas fa-users"></i></div>
        <div class="counter">400</div>
        <div class="text">Clients</div>
      </div>

      <div class="box">
        <div class="icon"><i class="fas fa-award"></i></div>
        <div class="counter">100</div>
        <div class="text">Awards</div>
      </div>
    </div>
  </div>
  <script>
  $(document).ready(function(){
    $('.counter').counterUp({
      delay: 10,
      time: 1200
    });
  });
  </script>
</body>
</html>

 

 
(Screenshots of demo code at different wide aspect ratio)

 

   

Now learn how to implement this code into your blogger.

◘ How to add it on blogger ?

      • Firstly get the code from above link button

      • Open the Blogger Dashboard

      • Get into the Layout section 

      • Choose a place where you want to implement it 

      • Add  a Gadgets (HTML,JS Script)

      • Paste the code into it 

      • Save it and enjoy .

◘ Creating coding structure

All codes were modified as per needs, but if you want to change it then you will have the basics knowledge of Html, Css, Js

For users, who don’t know much about coding they can simply use the code as it is or can contact us for editing code as they want.

Thanks for being here, stay connect with us.

Leave a Comment