.jpg)
Admin panel using only HTML and CSS. No need for JavaScript.
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
HTML CODES
<!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.0">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<title>Admin panel</title>
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li>
<a href="#">
<i class="fas fa-clinic-medical"></i>
<div class="title">Brand Name</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-th-large"></i>
<div class="title">Dashboard</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-stethoscope"></i>
<div class="title">Appointments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-md"></i>
<div class="title">Doctors</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-puzzle-piece"></i>
<div class="title">Departments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-hand-holding-usd"></i>
<div class="title">Payments</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<div class="title">Settings</div>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-question"></i>
<div class="title">Help</div>
</a>
</li>
</ul>
</div>
<div class="main">
<div class="top-bar">
<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="doctor1.png" alt="">
</div>
</div>
<div class="cards">
<div class="card">
<div class="card-content">
<div class="number">67</div>
<div class="card-name">Appointments</div>
</div>
<div class="icon-box">
<i class="fas fa-briefcase-medical"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">105</div>
<div class="card-name">New Patients</div>
</div>
<div class="icon-box">
<i class="fas fa-wheelchair"></i>
</div>
</div>
<div class="card">
<div class="card-content">
<div class="number">8</div>
<div class="card-name">Operations</div>
</div>
<div class="icon-box">
<i class="fas fa-bed"></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="tables">
<div class="last-appointments">
<div class="heading">
<h2>Last Appointments</h2>
<a href="#" class="btn">View All</a>
</div>
<table class="appointments">
<thead>
<td>Name</td>
<td>Doctor</td>
<td>Condition</td>
<td>Actions</td>
</thead>
<tbody>
<tr>
<td>Liam Smith Doe</td>
<td>Dr. Benjamin</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Emma</td>
<td>Dr. Noah</td>
<td>depression</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Olivia Smith </td>
<td>Dr. Liam</td>
<td>arthritis</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Isabella Doe</td>
<td>Dr. Noah</td>
<td>flu</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Sophia Smith </td>
<td>Dr. Olivia</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
<tr>
<td>Liam Smith Doe</td>
<td>Dr. Benjamin</td>
<td>fracture</td>
<td>
<i class="far fa-eye"></i>
<i class="far fa-edit"></i>
<i class="far fa-trash-alt"></i>
</td>
</tr>
</tbody>
</table>
</div>
<div class="doctor-visiting">
<div class="heading">
<h2>Doctor Visiting</h2>
<a href="#" class="btn">View All</a>
</div>
<table class="visiting">
<thead>
<td>Photo</td>
<td>Name</td>
<td>Visit time</td>
<td>Detail</td>
</thead>
<tbody>
<tr>
<td>
<div class="img-box-small">
<img src="doctor1.png" alt="">
</div>
</td>
<td>Benjamin</td>
<td>14:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor3.jpg" alt="">
</div>
</td>
<td>Liam</td>
<td>15:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor2.png" alt="">
</div>
</td>
<td>Noah</td>
<td>16:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
<tr>
<td>
<div class="img-box-small">
<img src="doctor4.png" alt="">
</div>
</td>
<td>Sophia</td>
<td>17:00</td>
<td><i class="far fa-eye"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODES
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
overflow-x: hidden;
}
.container {
position: relative;
width: 100%;
}
.sidebar {
position: fixed;
width: 300px;
height: 100%;
background: linear-gradient(45deg, #47cebe, #ef4a82);
overflow-x: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 2;
}
.sidebar ul li {
width: 100%;
list-style: none;
}
.sidebar ul li:hover {
background: #444;
}
.sidebar ul li:first-child {
line-height: 60px;
margin-bottom: 20px;
font-weight: 600;
border-bottom: 1px solid #fff;
}
.sidebar ul li:first-child:hover {
background: none;
}
.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;
}
.sidebar .title {
padding: 0 10px;
font-size: 20px;
}
.main {
position: absolute;
width: calc(100% - 300px);
min-height: 100vh;
left: 300px;
background: #f5f5f5;
}
.top-bar {
position: fixed;
height: 60px;
width: calc(100% - 300px);
background: #fff;
display: grid;
grid-template-columns: 10fr 0.4fr 1fr;
grid-gap: 5px;
align-items: center;
color: #444;
padding: 0 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
}
.top-bar .search {
position: relative;
max-width: 400px;
}
.search input {
width: 100%;
min-width: 128px;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 10px;
cursor: pointer;
}
.user {
position: relative;
width: 50px;
height: 50px;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.cards {
margin-top: 60px;
width: 100%;
padding: 35px 20px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 20px;
}
.cards .card {
background: linear-gradient(45deg, #47cebe, #ef4a82);
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.number {
font-size: 35px;
font-weight: 500;
color: #fff;
}
.card-name {
color: #444;
font-weight: 600;
}
.icon-box i {
font-size: 45px;
color: #444;
}
.tables {
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
align-items: self-start;
padding: 0 20px 20px 20px;
}
.img-box-small {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.last-appointments,
.doctor-visiting {
min-height: 350px;
background: #fff;
padding: 20px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.heading {
display: flex;
align-items: center;
justify-content: space-between;
color: #444;
}
.btn {
padding: 5px 10px;
background: linear-gradient(45deg, #47cebe, #ef4a82);
color: #fff;
text-decoration: none;
text-align: center;
}
table {
margin-top: 10px;
width: 100%;
border-collapse: collapse;
}
thead td {
font-weight: 600;
color: #333;
}
table tr {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
tbody tr:hover {
background: #444;
color: #fff;
}
table tbody tr:last-child {
border-bottom: none;
}
td {
padding: 9px 5px;
}
td i {
padding: 7px;
color: #fff;
border-radius: 50px;
}
.last-appointments table tbody td:last-child {
white-space: nowrap;
}
.fa-eye {
background: #32bea6;
}
.fa-edit {
background: #63b4f4;
}
.fa-trash-alt {
background: #ed5564;
}
@media(max-width:1090px) {
.sidebar {
width: 60px;
}
.main {
width: calc(100% - 60px);
left: 60px;
}
.top-bar {
width: calc(100% - 60px);
}
}
@media(max-width:860px) {
.cards {
grid-template-columns: repeat(2, 1fr);
}
.tables {
grid-template-columns: 1fr;
}
}
@media(max-width:530px) {
.cards {
grid-template-columns: 1fr;
}
.last-appointments td:nth-child(3) {
display: none;
}
}
@media(max-width:420px) {
.last-appointments,
.doctor-visiting {
font-size: 70%;
padding: 10px;
min-height: 200px;
}
.cards,
.tables {
padding: 10px;
}
.search input {
padding: 0 10px;
}
.user {
width: 40px;
height: 40px;
}
}
Don't forget to Subscribe to our Youtube Channel for more.
.jpg)
.jpg&description=Responsive Admin Dashboard using HTML and CSS | No JavaScript){kind=link}
0 Comments