.jpg)
Here in this tutorial, you will learn how to create a Responsive AdminPanel in HTML and CSS step by step from start to end.
This tutorial is best suitable for Rapid web development. No complex parts are there in this tutorial and it is mobile friendly.
I designed it with the very basics of HTML and CSS.
I hope you will enjoy it.
Complete source codes and images at the end 🠋🠋🠋
You may also like
Check the video tutorial
Don't forget to Subscribe to our Youtube Channel for more.
Recommended Videos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
<title>Admin panel</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Brand.</h2>
</div>
<div class="search">
<input type="text" name="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.png" alt="">
</div>
</div>
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div>Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-graduate"></i>
<div>Students</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chalkboard-teacher"></i>
<div>Teachers</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-users"></i>
<div>Employees</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-chart-bar"></i>
<div>Analytics</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div>Earnings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div>Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div>Help</div>
</a>
</li>
</ul>
</div>
<div class="main">
<div class="cards">
<div class="card">
<div class="card-content">
<div class="number">1217</div>
<div class="card-name">Students</div>
</div>
<div class="icon-box">
<i class="fas fa-user-graduate"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">42</div>
<div class="card-name">Teachers</div>
</div>
<div class="icon-box">
<i class="fas fa-chalkboard-teacher"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">68</div>
<div class="card-name">Employees</div>
</div>
<div class="icon-box">
<i class="fas fa-users"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">$4500</div>
<div class="card-name">Earnings</div>
</div>
<div class="icon-box">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="charts">
<div class="chart">
<h2>Earnings (past 12 months)</h2>
<div>
<canvas id="lineChart"></canvas>
</div>
</div>
<div class="chart doughnut-chart">
<h2>Employees</h2>
<div>
<canvas id="doughnut"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script>
<script src="chart1.js"></script>
<script src="chart2.js"></script>
</body>
</html>
CSS CODES
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar {
position: fixed;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
padding: 0 20px;
height: 60px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.logo h2 {
color: #299B63;
}
.search {
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
min-width: 128px;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.fa-bell {
justify-self: right;
}
.user {
position: relative;
width: 50px;
height: 50px;
justify-self: right;
}
/* sidebar */
.sidebar {
position: fixed;
top: 60px;
width: 260px;
height: calc(100% - 60px);
background: #299B63;
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
.sidebar ul {
margin-top: 20px;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li:hover {
background: #fff;
}
.sidebar ul li:hover a {
color: #299B63;
}
.sidebar ul li a {
width: 100%;
text-decoration: none;
color: #fff;
height: 60px;
display: flex;
align-items: center;
}
.sidebar ul li a i {
min-width: 60px;
font-size: 24px;
text-align: center;
}
/* main */
.main {
position: absolute;
top: 60px;
width: calc(100% - 260px);
min-height: calc(100vh - 60px);
left: 260px;
background: #f5f5f5;
}
.cards {
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.cards .card {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
}
.number {
font-size: 35px;
font-weight: 500;
color: #299B63;
}
.card-name {
color: #888;
font-weight: 600;
}
.icon-box i {
font-size: 45px;
color: #299b63;
}
/* charts */
.charts {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
width: 100%;
padding: 20px;
padding-top: 0;
}
.chart {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 7px 25px rgba(0, 0, 0, 0.08);
width: 100%;
}
.chart h2 {
margin-bottom: 5px;
font-size: 20px;
color: #666;
text-align: center
}
@media (max-width:1115px) {
.sidebar {
width: 60px;
}
.main {
width: calc(100% - 60px);
left: 60px;
}
}
@media (max-width:880px) {
/* .topbar {
grid-template-columns: 1.6fr 6fr 0.4fr 1fr;
} */
.fa-bell {
justify-self: left;
}
.cards {
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.charts {
grid-template-columns: 1fr;
}
.doughnut-chart {
padding: 50px;
}
#doughnut {
padding: 50px;
}
}
@media (max-width:500px) {
.topbar {
grid-template-columns: 1fr 5fr 0.4fr 1fr;
}
.logo h2 {
font-size: 20px;
}
.search {
width: 80%;
}
.search input {
padding: 0 20px;
}
.fa-bell {
margin-right: 5px;
}
.cards {
grid-template-columns: 1fr;
}
.doughnut-chart {
padding: 10px;
}
#doughnut {
padding: 0px;
}
.user {
width: 40px;
height: 40px;
}
}
Chart1.js
var ctx = document.getElementById('lineChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Earnings in $',
data: [2050, 1900, 2100, 2800, 1800, 2000, 2500, 2600, 2450, 1950, 2300, 2900],
backgroundColor: [
'rgba(85,85,85, 1)'
],
borderColor: 'rgb(41, 155, 99)',
borderWidth: 1
}]
},
options: {
responsive: true
}
});
Chart2.js
var ctx2 = document.getElementById('doughnut').getContext('2d');
var myChart2 = new Chart(ctx2, {
type: 'doughnut',
data: {
labels: ['Academic', 'Non-Academic', 'Administration', 'Others'],
datasets: [{
label: 'Employees',
data: [42, 12, 8, 6],
backgroundColor: [
'rgba(41, 155, 99, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(120, 46, 139,1)'
],
borderColor: [
'rgba(41, 155, 99, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(120, 46, 139,1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
Don't forget to Subscribe to our Youtube Channel for more.
.jpg)
.jpg&description=Responsive Admin panel Using HTML, CSS, Chart.js){kind=link}
0 Comments