dashboard cards & panels components dedicated to building User friendly Admin Dashboard projects. But all admin panel dashboards are made of cards or panel.
Depending on the type of dashboard Like as Operational, Strategic or Analytical each card or panel might contain user profile info, display notifications, some Imp quick links or a navigation menu design element, useful key data, big graphs as well as data tables.
dashboard cards – The 6 Best HTML/CSS dashboard cards for Admins & Users
Full Source code for Pure HTML CSS card layout. Here you can simple copy and paste your main index.html file to this bellow source code.
big charts – PROJECT FILE STRUCTURE
- Added Include External Js Libs – index.html
- Added Body Part – index.html
- Add CSS Code- index.html
Step 1: Added Include External Js Libs
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Admin panel dashboard card design usign html and css - www.pakainfo.com</title>
<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=Raleway:100,200,400,500,600" rel="stylesheet" type="text/css">
</head>
Step 2: Added Body Part
index.html
<body> <div class="main-part"> <div class="cpanel"> <div class="icon-part"> <i class="fa fa-users" aria-hidden="true"></i><br> <small>Members</small> <p>985</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> <div class="cpanel cpanel-green"> <div class="icon-part"> <i class="fa fa-money" aria-hidden="true"></i><br> <small>Account</small> <p>$ 452</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> <div class="cpanel cpanel-orange"> <div class="icon-part"> <i class="fa fa-bell" aria-hidden="true"></i><br> <small>Alert</small> <p>11 New</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> <div class="cpanel cpanel-blue"> <div class="icon-part"> <i class="fa fa-tasks" aria-hidden="true"></i><br> <small>Task</small> <p>85</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> <div class="cpanel cpanel-red"> <div class="icon-part"> <i class="fa fa-shopping-cart" aria-hidden="true"></i><br> <small>Cart</small> <p>$ 45</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> <div class="cpanel cpanel-skyblue"> <div class="icon-part"> <i class="fa fa-comments" aria-hidden="true"></i><br> <small>Mentions</small> <p>104</p> </div> <div class="card-content-part"> <a href="#">More Details </a> </div> </div> </div> </body>
Step 3: Add CSS Code
index.html
<style type="text/css">
body{
background:#eee;
font-family: 'Raleway', sans-serif;
}
.main-part{
width:80%;
margin:0 auto;
text-align: center;
padding: 0px 5px;
}
.cpanel{
width:32%;
display: inline-block;
background-color:#34495E;
color:#fff;
margin-top: 50px;
}
.icon-part i{
font-size: 30px;
padding:10px;
border:1px solid #fff;
border-radius:50%;
margin-top:-25px;
margin-bottom: 10px;
background-color:#34495E;
}
.icon-part p{
margin:0px;
font-size: 20px;
padding-bottom: 10px;
}
.card-content-part{
background-color: #2F4254;
padding: 5px 0px;
}
.cpanel .card-content-part:hover{
background-color: #5a5a5a;
cursor: pointer;
}
.card-content-part a{
color:#fff;
text-decoration: none;
}
.cpanel-green .icon-part,.cpanel-green .icon-part i{
background-color: #16A085;
}
.cpanel-green .card-content-part{
background-color: #149077;
}
.cpanel-orange .icon-part,.cpanel-orange .icon-part i{
background-color: #F39C12;
}
.cpanel-orange .card-content-part{
background-color: #DA8C10;
}
.cpanel-blue .icon-part,.cpanel-blue .icon-part i{
background-color: #2980B9;
}
.cpanel-blue .card-content-part{
background-color:#2573A6;
}
.cpanel-red .icon-part,.cpanel-red .icon-part i{
background-color:#E74C3C;
}
.cpanel-red .card-content-part{
background-color:#CF4436;
}
.cpanel-skyblue .icon-part,.cpanel-skyblue .icon-part i{
background-color:#8E44AD;
}
.cpanel-skyblue .card-content-part{
background-color:#803D9B;
}
</style>
Don’t Miss : php: complete login and registration system with php & mysql download
I hope you get an idea about Admin Dashboard Cards – HTML & CSS.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.