How to Make a Admin Dashboard Design using HTML CSS
Hello viewer, in this article I will teach you how to create a creative admin dashboard UI design using html and CSS. first you know that why we are using admin dashboard. Admin dashboard is a data structure represent our website performance for backend. admin dashboards provide user interface design. help of admin panel you can see your website grow up. and see increase and decrease your sales. overall admin dashboard is providing user interface to connect to your website. so, in this article I will make a simple and unique admin dashboard design.
How to make a navbar menu using html css
so, let’s start our project first you create a main folder then you create two another folder inside your main folder one is image folder they contain all images which have used in this project. and second one is CSS folder. they contain all CSS file which have used in this project. and then you create a html document and copy the below code and paste your html document.
Glassmorphism Icon Hover Effects
HTML Code
<!Doctype HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
<p class="logo">M-SoftTech <span class="menu">☰</span></p>
<p class="logo1"> <span class="menu1">☰</span></p>
<a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i> Dashboard</a>
<a href="#"class="icon-a"><i class="fa fa-pie-chart icons"></i> Charts</a>
<a href="#"class="icon-a"><i class="fa fa-list icons"></i> Projects</a>
<a href="#"class="icon-a"><i class="fa fa-shopping-bag icons"></i> Orders</a>
<a href="#"class="icon-a"><i class="fa fa-tasks icons"></i> Inventory</a>
<a href="#"class="icon-a"><i class="fa fa-user icons"></i> Accounts</a>
<a href="#"class="icon-a"><i class="fa fa-list-alt icons"></i> Tasks</a>
<a href="#"class="icon-a"><i class="fa fa-bell icons"></i> Notification</a>
<a href="#"class="icon-a"><i class="fa fa-circle icons"></i> Icons</a>
</div>
<div id="main">
<div class="head">
<div class="col-div-6">
<p class="nav"> Dashboard</p>
</div>
<div class="col-div-6">
<i class="fa fa-search search-icon"></i>
<i class="fa fa-bell noti-icon"></i>
<div class="notification-div">
<p class="noti-head">Notification <span>2</span></p>
<hr class="hr" />
<p>Your Order is Placed
<span>Lorem Ipsum is simply dummy </span>
</p>
<p>Your Order is Placed
<span>Lorem Ipsum is simply dummy </span>
</p>
<p>Your Order is Placed
<span>Lorem Ipsum is simply dummy </span>
</p>
</div>
<div class="profile">
<img src="images/user.png" class="pro-img" />
<p>Manoj Adhikari <i class="fa fa-ellipsis-v dots" aria-hidden="true"></i></p>
<div class="profile-div">
<p><i class="fa fa-user"></i> Profile</p>
<p><i class="fa fa-cogs"></i> Settings</p>
<p><i class="fa fa-power-off"></i> Log Out</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<br/>
<div class="col-div-4-1">
<div class="box">
<p class="head-1">Sales</p>
<p class="number">67343</p>
<p class="percent"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> 5.674% <span>Since Last Months</span></p>
<i class="fa fa-line-chart box-icon"></i>
</div>
</div>
<div class="col-div-4-1">
<div class="box">
<p class="head-1">purchases</p>
<p class="number">2343</p>
<p class="percent" style="color:red!important"><i class="fa fa-long-arrow-down" aria-hidden="true"></i> 5.64% <span>Since Last Months</span></p>
<i class="fa fa-circle-o-notch box-icon"></i>
</div>
</div>
<div class="col-div-4-1">
<div class="box">
<p class="head-1">orders</p>
<p class="number">35343</p>
<p class="percent"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> 5.674% <span>Since Last Months</span></p>
<i class="fa fa-shopping-bag box-icon"></i>
</div>
</div>
<div class="clearfix"></div>
<br/>
<div class="col-div-4-1">
<div class="box-1">
<div class="content-box-1">
<p class="head-1">Overview</p>
<br/>
<div class="m-box active">
<p>Member Profit<br/><span class="no-1">Last Months</span></p>
<span class="no">+2343</span>
</div>
<div class="m-box">
<p>Member Profit<br/><span class="no-1">Last Months</span></p>
<span class="no">+2343</span>
</div>
<div class="m-box">
<p>Member Profit<br/><span class="no-1">Last Months</span></p>
<span class="no">+2343</span>
</div>
</div>
</div>
</div>
<div class="col-div-4-1">
<div class="box-1">
<div class="content-box-1">
<p class="head-1">Total Sale <span>View All</span></p>
<div class="circle-wrap">
<div class="circle">
<div class="mask full">
<div class="fill"></div>
</div>
<div class="mask half">
<div class="fill"></div>
</div>
<div class="inside-circle"> 70% </div>
</div>
</div>
</div>
</div>
</div>
<div class="col-div-4-1">
<div class="box-1">
<div class="content-box-1">
<p class="head-1">Acitivity <span>View All</span></p>
<br/>
<p class="act-p"><i class="fa fa-circle" ></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p class="act-p"><i class="fa fa-circle" style="color:red!important;"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p class="act-p"><i class="fa fa-circle" style="color:green!important;"></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
<p class="act-p"><i class="fa fa-circle" ></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
</div>
</div>
<div class="clearfix"></div>
<br/>
<div class="col-div-12">
<div class="box-8">
<div class="content-box">
<p>Top Selling Projects <span>Sell All</span></p>
<br/>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
</table>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(".menu").click(function(){
$("#mySidenav").css('width','70px');
$("#main").css('margin-left','70px');
$(".logo").css('display', 'none');
$(".logo1").css('display','block');
$(".logo span").css('visibility', 'visible');
$(".logo span").css('margin-left', '-10px');
$(".icon-a").css('visibility', 'hidden');
$(".icon-a").css('height', '25px');
$(".icons").css('visibility', 'visible');
$(".icons").css('margin-left', '-8px');
$(".menu1").css('display','block');
$(".menu").css('display','none');
});
$(".menu1").click(function(){
$("#mySidenav").css('width','300px');
$("#main").css('margin-left','300px');
$(".logo").css('visibility', 'visible');
$(".logo").css('display','block');
$(".icon-a").css('visibility', 'visible');
$(".icons").css('visibility', 'visible');
$(".menu").css('display','block');
$(".menu1").css('display','none');
});
</script>
<script>
$(document).ready(function(){
$(".profile p").click(function(){
$(".profile-div").toggle();
});
$(".noti-icon").click(function(){
$(".notification-div").toggle();
});
});
</script>
</body>
</html>
Here is CSS code please copy the CSS code in below and paste your CSS documents.
CSS Code
body{
margin:0px;
padding: 0px;
background-color:#efeff5;
font-family: system-ui;
}
.clearfix{
clear: both;
}
.logo{
margin: 0px;
margin-left: 28px;
font-weight: bold;
color: white;
margin-bottom: 30px;
}
.sidenav {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #5643ff;
overflow: hidden;
padding-top: 30px;
transition: ease-in-out 0.3s;
}
.menu{
float: right;
margin-right: 20px;
cursor: pointer;
}
.logo1{
margin: 0px;
margin-left: 20px;
font-weight: bold;
color: white;
margin-bottom: 50px;
display: none;
cursor: pointer;
}
.menu1{
float: left;
display: none;
}
.sidenav a {
padding: 15px 8px 15px 32px;
text-decoration: none;
font-size: 20px;
color: #d8d8d8;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
background-color:#2c1ed6;
}
.sidenav{
top: 0;
right: 25px;
font-size: 30px;
}
#main {
padding: 16px;
margin-left: 300px;
}
.head{
padding: 0px 6px;
border-bottom: 1px solid #d6d6d8b8;
padding-bottom: 10px;
}
.col-div-6{
width: 50%;
float: left;
}
.profile{
display: inline-block;
float: right;
width: 200px;
}
.pro-img{
float: left;
width: 40px;
margin-top: 8px;
margin-left: 20px;
}
.profile p{
color: #6c7293;
font-weight: 500;
margin-left: 35px;
margin-top: 10px;
font-size: 13.5px;
background-color: white;
padding: 10px;
border-radius: 25px;
padding-left: 35px;
cursor: pointer;
}
.dots{
margin-left: 10px;
}
.profile-div{
background-color: white;
width: 140px;
border: 1px solid #ddd;
padding: 10px 0px;
right: 2%;
border-radius: 5px;
position: absolute;
z-index: 9;
display: none;
}
.profile-div:after{
content: '';
position: absolute;
height: 10px;
width: 10px;
background-color: white;
top: -6px;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
transform: rotate(45deg);
right: 10%;
}
.profile-div p{
margin: 0px;
padding: 10px 20px;
}
.profile-div p:hover{
margin: 0px;
padding: 10px 20px;
background-color: #5643ff;
border-radius: 0px;
color: white;
}
.notification-div{
background-color: white;
width: 240px;
border: 1px solid #ddd;
padding: 10px 0px;
right: 16%;
border-radius: 5px;
top: 12%;
position: absolute;
z-index: 9;
display: none;
}
.notification-div:after{
content: '';
position: absolute;
height: 10px;
width: 10px;
background-color: white;
top: -6px;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
transform: rotate(45deg);
right: 10%;
}
.noti-head{
display: block;
margin: 0px;
color: #6c7293;
}
.noti-head:hover{
background-color: white!important;
color: #6c7293!important;
}
.noti-head span{
position: absolute;
right: 8%;
top: 10%;
background-color: #5643ff;
padding: 1px 5px;
color: white;
border-radius: 20px;
}
.hr{
margin: 0px;
border: none;
background-color: #ddd;
height: 1px;
}
.notification-div p{
margin: 0px;
padding: 10px 20px;
color: #6c7293;
}
.notification-div p span{
font-size: 11px;
display: block;
}
.notification-div p:hover{
margin: 0px;
padding: 10px 20px;
background-color: #5643ff;
border-radius: 0px;
color: white;
}
.search-icon{
position: absolute;
right: 22%;
top: 25px;
background-color: white;
padding: 13px;
border-radius: 21px;
color: #6c7293;
cursor: pointer;
}
.noti-icon{
position: absolute;
right: 17%;
top: 25px;
background-color: #5643ff;
padding: 13px;
border-radius: 21px;
color: #fff;
cursor: pointer;
}
.noti-icon:after{
content: '';
height: 5px;
width: 5px;
border-radius: 5px;
top: 5px;
left: 20px;
position: absolute;
background-color: red;
}
.col-div-4-1{
width: 33.3%;
float: left;
}
.box{
width: 88%;
height: 130px;
background-color: #ffffff;
margin-left: 10px;
padding:10px;
box-shadow: 2px 5px 10px #ddd;
position: relative;
}
.box p{
color: #6c7293;
font-weight: 500;
padding-left: 10px;
}
.number{
font-size: 35px;
margin-bottom: 0px;
margin-top: 20px;
}
.percent{
margin: 0px;
font-size: 14px;
color: #37bf37!important;
}
.percent span{
font-size: 12px;
color: #9398b1;
padding-left: 3px;
}
.head-1{
font-size: 18px!important;
margin: 10px 0px;
color: #6c7293;
}
.head-1 span{
float: right;
background-color: #5643ff;
color: white;
padding: 3px 10px;
font-size: 15px;
}
.box-icon{
font-size: 20px!important;
margin-top: 35px!important;
color: #5643ff;
padding-right: 10px;
background-color: #efeff5;
padding: 15px;
border-radius: 25px;
position: absolute;
right: 16px;
top: -18px;
}
.box-1{
width: 88%;
height: 282px;
background-color: #ffffff;
margin-left: 10px;
padding:10px;
box-shadow: 2px 5px 10px #ddd;
position: relative;
}
.m-box{
color: #6c7293;
position: relative;
padding: 0px 12px;
}
.active{
background-color: #5646ff;
color: white;
box-shadow: 4px 3px 7px 3px #3226ad54;
}
.active .no-1{
color: #ddd!important;
}
.m-box p{
display: inline-block;
margin: 10px 0px;
}
.no{
position: absolute!important;
top: 21px;
right: 15px;
font-weight: 500;
}
.no-1{
font-size: 12px;
color: #9398b1;
}
.act-p{
font-size: 13px;
color: #6c7293;
}
.act-p .fa{
color: orange!important;
}
.content-box-1{
padding: 0px 10px;
}
.col-div-12{
width: 100%;
}
.col-div-4{
width: 30%;
float: left;
}
.content-box{
padding: 20px;
}
.content-box p{
margin: 0px;
font-size: 20px;
color:#6c7293;
}
.content-box p span{
float: right;
background-color: #5643ff;
color: white;
padding: 3px 10px;
font-size: 15px;
}
.box-8{
width: 97.8%;
background-color: #fff;
height: 330px;
}
.nav{
font-size: 30px;
cursor: pointer;
color: #6c7293;
margin: 11px 0px;
}
.box-8{
margin-left: 10px;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
color: #6c88be;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 10px;
}
tr:nth-child(even) {
background-color: #5643ff29;
color: #6c7293!important;
}
.circle-wrap {
margin: 50px auto;
width: 150px;
height: 150px;
background: #e6e2e7;
border-radius: 50%;
}
.circle-wrap .circle .mask,
.circle-wrap .circle .fill {
width: 150px;
height: 150px;
position: absolute;
border-radius: 50%;
}
.circle-wrap .circle .mask {
clip: rect(0px, 150px, 150px, 75px);
}
.circle-wrap .circle .mask .fill {
clip: rect(0px, 75px, 150px, 0px);
background-color: #5646ff;
}
.circle-wrap .circle .mask.full,
.circle-wrap .circle .fill {
animation: fill ease-in-out 3s;
transform: rotate(126deg);
}
@keyframes fill {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(126deg);
}
}
.circle-wrap .inside-circle {
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
line-height: 130px;
text-align: center;
margin-top: 10px;
margin-left: 10px;
position: absolute;
z-index: 100;
font-weight: 700;
font-size: 2em;
color: #6c7293;
}if you have any problem to understand this code then you also watch video tutorials
