Tuesday, July 23, 2024
Latest:

M-SoftTech is a coding blogs related to HTML CSS JavaScript

M-SoftTech is a coding blogs related to HTML CSS JavaScript

Dashboard UI 

How to Make E-Product Admin Dashboard Design

M-SoftTech 0 Comments

Hello viewer, Today article I will teach you how to create an E-Product admin dashboard design using of html css JavaScript. Before I have also uploaded many article related to admin dashboard. But this different to other admin dashboard. If you regularly read my article you have also know i have operate a YouTube channel also. If you don’t know about my YouTube channel please check out my channel. I have uploaded daily bases video on my YouTube channel. Those video are related to my article also. If you have face any problem in article to understand this code. Then you also watch my video tutorial I will mention link in below.

I have also use external fonts file you can see on code. You can easily change font-family according your need and choice.

How To Make Website Using HTML & CSS Step By Step | Modern Web Design Tutorial

So let’s start our project. First of all you need a code editor. You can use whatever you want. I have use sublime code editor. Then you can create folder that’s name is E-Product Admin Dashboard. Then you create two another folder inside of Product Admin Dashboard. First one is image folder. Image folder stored all images file. Which are used in this projects. And second one is CSS folder. CSS folder contain all CSS file. Which are used in this projects. Then you create a html document inside of your main folder. And copy the below code and paste your html document.

How to Make a Grid System Using HTML & CSS Only

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Admin Dashboard</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<section>
	<div class="sidebar">
		<h1 class="logo">M-SoftTech</h1>

		<ul class="nav">
			<li><a href="#"><i class="fa fa-windows"></i> Dashboard</a></li>
			<li class="active"><a href="#"><i class="fa fa-shopping-bag"></i> Order</a></li>
			<li><a href="#"><i class="fa fa-pie-chart"></i> Statistic</a></li>
			<li><a href="#"><i class="fa fa-cube"></i> Product</a></li>
			<li><a href="#"><i class="fa fa-database"></i> Stock</a></li>
			<li><a href="#"><i class="fa fa-tag"></i> Offer</a></li>

		</ul>

			<ul class="social">
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
				<li><a href="#">Google</a></li>
			</ul>
		

	</div>
	<div class="main">
		
		<div class="head-section">
			<div class="col-6">
				<h2>Order</h2>
				<p>30 orders found</p>
			</div>

			<div class="col-6" style="text-align: right;">
				<i class="fa fa-bell-o hicon"></i>
				<input type="text" class="search">
				<i class="fa fa-search hicon sicon"></i>

				<img src="image/user.png" class="user">

				<div class="profile-div">
					<p><i class="fa fa-user"></i>   Profile</p>
					<p><i class="fa fa-cog"></i>   Settings</p>
					<p><i class="fa fa-power-off"></i>   Log Out</p>
				</div>

		<div class="notification-div">
			<p>Success!Your registration is now complete!</p>
			<p>Here's some information you may find useful!</p>			
		</div>

			</div>

			<div class="clearfix"></div>
		</div>

		<br><br>
		<div class="content">
			<p>All orders</p><br><br>


			<table>
  
  <thead>
    <tr>
      <th scope="col" width="50px">ID</th>
      <th scope="col" width="100px">Name</th>
      <th scope="col" width="290px">Address</th>
      <th scope="col">Date</th>
      <th scope="col">Price</th>
      <th scope="col">Status</th>
      <th scope="col" width="70px">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="pe"></span>Pending</td>
      <td data-label="Period"><i class="fa fa-gear ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>

    <tr class="active-tr">
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="de"></span>Dispatch</td>
      <td data-label="Period"><i class="fa fa-gear  ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>
   <tr>
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="pe"></span>Pending</td>
      <td data-label="Period"><i class="fa fa-gear ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>

    <tr>
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="pe"></span>Pending</td>
      <td data-label="Period"><i class="fa fa-gear ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>
    <tr>
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="de"></span>Dispatch</td>
      <td data-label="Period"><i class="fa fa-gear ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>

    <tr>
      <td data-label="Account">#3412</td>
      <td data-label="Due Date"><img src="image/user.png" class="tab-img">Manoj</td>
      <td data-label="Amount">Lorem ispum dummy text industry.</td>
      <td data-label="Period">03/01/2022</td>
      <td data-label="Due Date">$64.00</td>
      <td data-label="Amount" style="position: relative;"><span class="pe"></span>Pending</td>
      <td data-label="Period"><i class="fa fa-gear ticon"></i>
        
      	<i class="fa fa-angle-down ticon"></i></td>
    </tr>
  </tbody>
</table>
		</div>



	</div>
</section>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $(".user").click(function(){
    $(".profile-div").toggle(1000);
  });
  $(".hicon:nth-child(1)").click(function(){
    $(".notification-div").toggle(1000);
  });
  $(".sicon").click(function(){
    $(".search").toggle(1000);
  });
});
</script>

<script type="text/javascript">
	$('li').click(function(){
    $('li').removeClass("active");
    $(this).addClass("active");
});



	
</script>
</body>
</html>

copy the CSS code in below and paste your CSS document.

CSS Code

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
:root{
	--blue:#0046fd;
	--white:#fff;
	--black:#000;
	--lightblue:#b3bbd1;
	--gray:#e5e5e5;
}
*{margin: 0px;  padding: 0px; font-family: 'Montserrat', sans-serif;}
body{height: 100vh;}
.sidebar{
	width: 20%;
	float: left;
	background: var(--blue);
	height: 100vh;
	position: relative;
}
.main{width: 75%;float: left;height: 90vh; padding: 30px;}
.logo{text-align: center;color: var(--white); margin-top: 50px; font-weight: 800;
margin-bottom: 50px;}
.nav{margin-left: 40px;}
.nav li{list-style: none; padding: 16px 19px;}
.nav li i{ margin-right: 10px;}
.nav li a{color: var(--white); text-decoration: none; font-weight: 600;}
.active{
	background:var(--white);
	border-radius: 27px;
	position: relative;
}
.nav > .active::before, .nav > .active::after {
     content: "";
     position: absolute;
}
.nav > li{
    border-radius: 60px 0 0 60px;
        width: 92%;
    margin-left: -15px;
}
.nav > .active::before {
    top: -80px;
    right: 0px;
    height: 80px;
    width: 62px;
    border-bottom-right-radius: 80px;
    box-shadow: 0 40px 0 0 var(--white);
    transform: rotateZ(360deg);
}
.nav > .active::after {
    top: 51px;
    right: 0px;
    height: 80px;
    width: 62px;
    border-top-right-radius: 80px;
    box-shadow: 0 -40px 0 0 var(--white);
    transform: rotateZ(360deg);
    
}
.active a{color: var(--blue)!important;}
.social{position: absolute;bottom: 10px; left: 20px;}
.social li{
	list-style: none;
	float: left;
	padding: 10px;
}
.social li a{font-size: 14px; color: var(--white);}
.clearfix{clear: both;}
.col-6{width: 50%; float: left;}
.hicon{margin-right: 20px; font-size: 22px!important;position: relative;}
.hicon:nth-child(1):after{
	content: '';
	position:absolute;
	width: 7px;
	height: 7px;
	background: red;
	border-radius: 10px;
	left: 13px;
    top: 7px;
    transform: scale(0.5);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
	cursor: pointer;

}

@keyframes pulse-red {
	0% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 25px rgba(255, 82, 82, 0);
	}
	
	100% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(255, 82, 82, 0);
	}
}
.user{
	background:var(--lightblue);
    padding: 5px;
    width: 30px;
    margin-bottom: -11px;
    border-radius: 5px;
    cursor: pointer;
}
.profile-div{
  background-color: var(--gray);
  width: 140px;
  border: 1px solid #ddd;
  padding: 10px 0px;
  right: 2%;
  border-radius: 5px;
  position: absolute;
  z-index: 9;
  display: none;
  top: 84px;
  text-align: left;
}
.profile-div:after{
  content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: var(--gray);
    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: var(--blue);
    border-radius: 0px;
    color: var(--white);
}
.notification-div{
  background-color: var(--gray);
  width: 246px;
  border: 1px solid #ddd;
  padding: 10px 0px;
  right: 9.4%;
  border-radius: 5px;
  position: absolute;
  z-index: 9;
  display: none;
  top: 84px;
  text-align: left;
}
.notification-div:after{
  content: '';
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: var(--gray);
    top: -6px;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    transform: rotate(45deg);
    right: 10%;
}
.notification-div p{margin: 0px;padding: 10px 20px;}
.notification-div p:hover{
  margin: 0px;
    padding: 10px 20px;
    background-color: var(--blue);
    border-radius: 0px;
    color: var(--white); 
}
.search{ padding: 5px; display: none; outline: none; border:none;
	border-bottom: 1px solid black;
}
table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  border-spacing: 0 15px;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd!important;
  padding: .35em;
  margin-bottom: 10px;
}

table th,
table td {
  padding: 1.5em;
  text-align: left;

}

table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tab-img{
	display: inline-block;
    width: 30px;
    vertical-align: middle;
    border: 1px solid #000;
    border-radius: 18px;
    margin-right: 8px;
}
.ticon{
	padding: 5px;
	background: var(--gray);
	border-radius: 4px;
	width: 15px;
	height: 15px;
	text-align: center;
}
.pe{
	content: '';
	position:absolute;
	width: 7px;
	height: 7px;
	background: red;
	border-radius: 10px;
	left: 10px;
    top: 37px;
    transform: scale(0.5);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-red 2s infinite;
	cursor: pointer;
}
.de{
	content: '';
	position:absolute;
	width: 7px;
	height: 7px;
	background: green;
	border-radius: 10px;
	left: 10px;
    top: 37px;
    transform: scale(0.5);
	box-shadow: 0 0 0 0 rgba(255, 82, 82, 1);
	animation: pulse-green 2s infinite;
	cursor: pointer;
}
@keyframes pulse-green {
	0% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(82, 255, 82, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 25px rgba(82, 255, 82, 0);
	}
	
	100% {
		transform: scale(0.85);
		box-shadow: 0 0 0 0 rgba(82, 255, 82, 0);
	}
}
.active-tr{
	background: var(--blue);
	color: var(--white);
}
.active-tr .ticon{
	background: #e5e5e54f;
}

If you have face any problem to understand this code. Then you also watch video tutorial that’s link in below.

You May Also Like

How to make a dashboard Design Using html CSS

M-SoftTech 0

How To Make Admin Dashboard in HTML and CSS

M-SoftTech 0

How to make a admin Dashboard design using html & css

M-SoftTech 0

Leave a Reply

Your email address will not be published. Required fields are marked *