This demo for the admin panel dahsboard deisgn. this count box design is for admin panel dashboad. you can display total record from one modual. this count card use for display total product,total user, total like, total follower, total customer etc.., and also call digit or number box. usign this box or card design you can give you admin panel dashboard quick Shortcuts link.

We allows to free snippets of admin panel dashboard design , you can download full code of admin panel dashboard theme layout. Here in this post i will give you example of bootstrap dashboard widgets snippet and you will get simple code of html, css and jquery. In count widgets design snippet i give you three tab with html, css and js, you can easily get code of admin panel quick Shortcuts 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 href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> </head> <body> <div class="main-section"> <div class="dashbord email-content"> <div class="title-section"> <p>SENT EMAILS</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </div> <div class="text-section"> <h1>200</h1> <span>+7% email list penetration</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="dashbord download-content"> <div class="title-section"> <p>CLOUD DOWNLOAD</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-download" aria-hidden="true"></i> </div> <div class="text-section"> <h1>8.25 <small>k</small></h1> <span>12% have started download</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="dashbord product-content"> <div class="title-section"> <p>SALES FROM YOUR CREDIT-CARD</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-credit-card" aria-hidden="true"></i> </div> <div class="text-section"> <h1>360 <small>$</small></h1> <span>$ 272 credit in your account</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="dashbord email-content"> <div class="title-section"> <p>SENT EMAILS</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-envelope-o" aria-hidden="true"></i> </div> <div class="text-section"> <h1>200</h1> <span>+7% email list penetration</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="dashbord download-content"> <div class="title-section"> <p>CLOUD DOWNLOAD</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-download" aria-hidden="true"></i> </div> <div class="text-section"> <h1>8.25 <small>k</small></h1> <span>12% have started download</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> <div class="dashbord product-content"> <div class="title-section"> <p>SALES FROM YOUR CREDIT-CARD</p> </div> <div class="icon-text-section"> <div class="icon-section"> <i class="fa fa-credit-card" aria-hidden="true"></i> </div> <div class="text-section"> <h1>360 <small>$</small></h1> <span>$ 272 credit in your account</span> </div> <div style="clear:both;"></div> </div> <div class="detail-section"> <a href="#"> <p>View Detail</p> <i class="fa fa-arrow-right" aria-hidden="true"></i> </a> </div> </div> </div> </body> </html>
body{ background:#000000; font-family: 'Lato', sans-serif; } .main-section{ width:80%; margin:0 auto; } .dashbord{ margin-top:30px; margin-right: 10px; display: inline-block; width:30%; color:#fff; border-radius: 3px; } .title-section{ border-radius: 5px 5px 0px 0px; text-align: center; background-color:#7CD6F8; padding:7px 0px; } .title-section p{ margin:0px; font-size:13px; } .icon-text-section{ background-color:#5BCCF6; padding:5px 10px; } .icon-section{ font-size:50px; float:left; width:20%; color:#8BDBF8; } .text-section{ width:80%; float:right; text-align: right; } .text-section h1{ margin:0px; font-size:25px; } .detail-section{ background-color: #52B8DE; cursor: pointer; border-radius: 0px 0px 5px 5px; } .detail-section a{ color:#fff; } .detail-section a p{ display: inline-block; margin: 0px; font-size: 12px; padding:10px; } .detail-section a i{ float:right; padding: 10px 5px 0px 0px; } .dashbord .detail-section:hover{ background-color:#5a5a5a; } .download-content .title-section{ background-color:#B0DA7A; } .download-content .icon-text-section{ background-color: #9CD159; } .download-content .detail-section{ background-color: #8DBC50; } .download-content .icon-section{ color:#B9DE8A; } .product-content .title-section{ background-color:#FF7979; } .product-content .icon-text-section{ background-color:#FF5757; } .product-content .icon-section{ color:#FF8989; } .product-content .detail-section{ background-color:#E64F4F; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





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...

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 co...

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. th...

Read More

Random Post