This admin panel dashboard card design created by pure css. in this count box you can display modual card. you can see in this card you can display modual count and name. this design also you can display in counter box. you can easily implement in your project.

We allows to free snippets of admin panel count html , you can download full code of dashboard count by html and css layout. Here in this post i will give you example of bootstrap simple dashboard snippet and you will get simple code of html, css and jquery. In new admin panel dashboard design snippet i give you three tab with html, css and js, you can easily get code of display total product count in html,css layout.


<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css"> </head> <body> <div class="main-section"> <div class="dashbord"> <div class="icon-section"> <i class="fa fa-users" aria-hidden="true"></i><br> <small>Users</small> <p>256</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> <div class="dashbord dashbord-green"> <div class="icon-section"> <i class="fa fa-money" aria-hidden="true"></i><br> <small>Account</small> <p>$ 256</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> <div class="dashbord dashbord-orange"> <div class="icon-section"> <i class="fa fa-bell" aria-hidden="true"></i><br> <small>Alert</small> <p>9 New</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> <div class="dashbord dashbord-blue"> <div class="icon-section"> <i class="fa fa-tasks" aria-hidden="true"></i><br> <small>Task</small> <p>8</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> <div class="dashbord dashbord-red"> <div class="icon-section"> <i class="fa fa-shopping-cart" aria-hidden="true"></i><br> <small>Cart</small> <p>$ 24</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> <div class="dashbord dashbord-skyblue"> <div class="icon-section"> <i class="fa fa-comments" aria-hidden="true"></i><br> <small>Mentions</small> <p>96</p> </div> <div class="detail-section"> <a href="#">More Info </a> </div> </div> </div> </body> </html>
body{ background:#000000; font-family: 'Raleway', sans-serif; } .main-section{ width:80%; margin:0 auto; text-align: center; padding: 0px 5px; } .dashbord{ width:32%; display: inline-block; background-color:#34495E; color:#fff; margin-top: 50px; } .icon-section i{ font-size: 30px; padding:10px; border:1px solid #fff; border-radius:50%; margin-top:-25px; margin-bottom: 10px; background-color:#34495E; } .icon-section p{ margin:0px; font-size: 20px; padding-bottom: 10px; } .detail-section{ background-color: #2F4254; padding: 5px 0px; } .dashbord .detail-section:hover{ background-color: #5a5a5a; cursor: pointer; } .detail-section a{ color:#fff; text-decoration: none; } .dashbord-green .icon-section,.dashbord-green .icon-section i{ background-color: #16A085; } .dashbord-green .detail-section{ background-color: #149077; } .dashbord-orange .icon-section,.dashbord-orange .icon-section i{ background-color: #F39C12; } .dashbord-orange .detail-section{ background-color: #DA8C10; } .dashbord-blue .icon-section,.dashbord-blue .icon-section i{ background-color: #2980B9; } .dashbord-blue .detail-section{ background-color:#2573A6; } .dashbord-red .icon-section,.dashbord-red .icon-section i{ background-color:#E74C3C; } .dashbord-red .detail-section{ background-color:#CF4436; } .dashbord-skyblue .icon-section,.dashbord-skyblue .icon-section i{ background-color:#8E44AD; } .dashbord-skyblue .detail-section{ background-color:#803D9B; }




Random Post




Related Post

How to create custom loading image or div using css ?

How to create custom loading image or div using css ?

Simple loading div and you can easaly implement in your project. in this loading you can also change loading image color. this image not load on server. you...

Read More
Custom good looking checkbox and radio button design usign bootstrap

Custom good looking checkbox and radio button design usign b...

checkbox and radio button with onclick custom effect. and also you can change color and effect. and you can easaly implement in your project. you can get cod...

Read More
Custom process div and image usign html,css and bootstrap

Custom process div and image usign html,css and bootstrap

Bootstrap loading image and div. this loader working usign only html and css. this loading image is responsive. and you can also change image color and animatio...

Read More