Hey, developer today I am going to share a Responsive Admin Dashboard Page using HTML and CSS. To implement the given code you have to first create a index.html file then you have to copy the HTML code given below.
After this create a new style.css file and then copy the CSS code given below and paste it into the style.css file. And after that save index.html file and run it into your browser.
Preview
HTML Code
index.html
<!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">
<title> Responsive Admin Dashboard </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navigation">
<div class="logo">
<h2> Geeks Help </h2>
</div>
<div class="search">
<input type="text" name="search" id="search" placeholder="search here">
</div>
<div class="users">
<i class="fa-solid fa-bell"></i>
<i class="fa-solid fa-user"></i>
</div>
</div>
<section class="container">
<div class="sidebar">
<a href=""><li><span><i class="fa-solid fa-gauge"></i></span><a href="">Dashboard</a></li></a>
<a href=""><li><span><i class="fa-solid fa-graduation-cap"></i></span><a href="">Dashboard</a></li></a>
<a href=""><li><span><i class="fa-solid fa-chalkboard-user"></i></span><a href="">Teachers</a></li></a>
<a href=""><li><span><i class="fa-solid fa-people-group"></i></span><a href="">Employees</a></li></a>
<a href=""><li><span><i class="fa-solid fa-chart-line"></i></span><a href="">Analytics</a></li></a>
<a href=""><li><span><i class="fa-sharp fa-solid fa-money-check-dollar"></i></span><a href="">Earnings</a></li></a>
<a href=""><li><span><i class="fa-solid fa-gear"></i></span><a href="">Settings</a></li></a>
<a href=""><li><span><i class="fa-solid fa-question"></i></span><a href="">Help</a></li></a>
</div>
<div class="main">
<div class="main-top">
<div class="item">
<div class="content">
<h2 class="number">1224</h2>
<p class="category">Students</p>
</div>
<div class="icon">
<i class="fa-solid fa-graduation-cap"></i>
</div>
</div>
<div class="item">
<div class="content">
<h2 class="number">42</h2>
<p class="category">Teachers</p>
</div>
<div class="icon">
<i class="fa-solid fa-chalkboard-user"></i>
</div>
</div>
<div class="item">
<div class="content">
<h2 class="number">67</h2>
<p class="category">Employees</p>
</div>
<div class="icon">
<i class="fa-solid fa-people-group"></i>
</div>
</div>
<div class="item">
<div class="content">
<h2 class="number">$100</h2>
<p class="category">Earnings</p>
</div>
<div class="icon">
<i class="fa-solid fa-dollar-sign"></i>
</div>
</div>
</div>
<div class="main-bottom">
<div class="headings">
<h5> Recent Classes </h5>
<button class="viewBtn">View All </button>
</div>
<div class="bottom-content">
<table>
<tr>
<td>Teacher</td>
<td>Period</td>
<td>Time</td>
<td>Status</td>
</tr>
<tr>
<td>Manoj</td>
<td>4</td>
<td>4 hours</td>
<td> <span class="done"> Done </span> </td>
</tr>
<tr>
<td>Vijay</td>
<td>2</td>
<td>2 hours</td>
<td> <span class="pending">Pending </span></td>
</tr>
<tr>
<td>Naresh</td>
<td>1</td>
<td>1 hours</td>
<td> <span class="pending">Pending </span></td>
</tr>
<tr>
<td>Manphool</td>
<td>3</td>
<td>3 hours</td>
<td> <span class="done">Done </span></td>
</tr>
</table>
</div>
</div>
</div>
</section>
<!-- Responsive Admin Dashboard Design by Raju Webdev -->
</body>
</html>
CSS Code
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: rgb(235, 199, 236);
background: radial-gradient(circle, rgba(235, 199, 236, 1) 0%, rgba(255, 146, 252, 1) 50%, rgba(182, 24, 255, 1) 82%, rgba(204, 7, 237, 1) 100%);
}
.navigation {
position: relative;
display: grid;
padding: 15px 10px;
height: 70px;
grid-template-columns: 2fr 2fr 2fr;
align-items: center;
justify-content: space-between;
background: rgb(235, 199, 236);
background: radial-gradient(circle, rgba(235, 199, 236, 1) 0%, rgba(255, 146, 252, 1) 50%, rgba(182, 24, 255, 1) 82%, rgba(204, 7, 237, 1) 100%);
}
.logo h2 {
color: #fff;
font-family: 'Ubuntu', sans-serif;
cursor: pointer;
}
.search {
display: grid;
align-items: center;
}
.search input {
font-family: 'Ubuntu', sans-serif;
padding: 10px 20px;
outline: none;
border: none;
border-radius: 20px;
background-color: rgb(231, 236, 240);
}
.users {
display: grid;
grid-template-columns: 30px 30px;
align-items: center;
justify-content: center;
}
.users i {
font-size: 20px;
display: flex;
cursor: pointer;
justify-content: center;
align-items: center;
}
.users .fa-bell {
color: #fff;
height: 25px;
width: 25px;
transform: rotate(15deg);
}
.users .fa-user {
color: #e65b00;
background-color: rgb(222, 232, 222);
height: 35px;
width: 35px;
border-radius: 50%;
}
.sidebar {
width: 200px;
background: radial-gradient(circle, rgba(235, 199, 236, 1) 0%, rgba(255, 146, 252, 1) 50%, rgba(182, 24, 255, 1) 82%, rgba(204, 7, 237, 1) 100%);
height: auto;
padding: 15px 0;
display: inline-block;
transition: all 0.2s;
height: calc(100vh - 70px);
}
.sidebar li {
padding: 7px 0;
cursor: pointer;
list-style: none;
padding-left: 25px;
}
.sidebar i {
text-align: center;
width: 20px;
margin-right: 15px;
color: #fff;
}
.sidebar li a {
color: #fff;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
.sidebar li:hover a,
.sidebar li:hover,
.sidebar li:hover i {
color: #e65b00;
background-color: #fff;
}
.main {
display: inline-block;
width: calc(100% - 200px);
position: relative;
box-shadow: inset 5px 5px 15px rgb(0, 0, 0, 0.3);
}
.container {
display: flex;
}
.main {
padding: 30px 10px;
}
.main-top {
width: 100%;
height: 100px;
margin-bottom: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px
}
.item {
background-color: #fff;
cursor: pointer;
margin: 1px;
border-radius: 10px;
transition: all 0.3s linear;
box-shadow: 0 5px 15px 2px rgb(0, 0, 0, 0.3);
display: flex;
justify-content: space-around;
align-items: center;
}
.item:hover {
background: rgb(235, 199, 236);
background: radial-gradient(circle, rgba(235, 199, 236, 1) 0%, rgba(255, 146, 252, 1) 100%, rgba(182, 24, 255, 1) 82%, rgba(204, 7, 237, 1) 100%);
}
.item:hover .number,
.item:hover .icon i,
.item:hover .category {
color: #fff;
}
.number {
color: #e65b00;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
.category {
font-family: 'Poppins', sans-serif;
font-size: 14px;
}
.item .icon i {
font-size: 40px;
color: #e65b00;
}
.main-bottom {
border-radius: 20px;
box-shadow: 0 5px 15px 2px rgb(0, 0, 0, 0.3);
width: 100%;
padding: 20px 10px;
}
.headings {
display: flex;
width: 100%;
justify-content: space-between;
padding-bottom: 12px;
border-bottom: 2px solid #dd5c06e0;
}
.headings h5 {
font-family: 'Poppins';
font-size: 18px;
font-weight: 600;
}
.viewBtn {
background-color: #e65b00;
border: 1px solid #e65b00;
padding: 5px 10px;
border-radius: 6px;
font-size: 12px;
font-family: 'Poppins';
color: #fff;
outline: none;
transition: all 0.1s linear;
cursor: pointer;
}
.viewBtn:hover {
background: radial-gradient(circle, rgba(235, 199, 236, 1) 0%, rgba(255, 146, 252, 1) 0%, rgba(182, 24, 255, 1) 82%, rgba(204, 7, 237, 1) 100%);
border: 1px solid;
}
table {
width: 96%;
margin: 0 auto;
border-spacing: 0;
}
tr:first-child {
font-weight: bold;
}
td {
padding: 10px;
border-bottom: 1px solid rgb(175, 162, 162);
font-family: 'Poppins';
font-size: 14px;
}
.pending {
padding: 5px;
border-radius: 4px;
background-color: rgb(237, 250, 121);
}
.done {
padding: 5px;
border-radius: 4px;
background-color: rgb(121, 250, 121);
}
@media (width <=800px) {
.main-top {
display: flex;
flex-direction: column;
height: auto;
}
}
@media (width <=600px) {
.navigation {
height: auto;
}
.sidebar {
width: 60px;
height: auto;
}
.sidebar li {
font-size: 20px;
margin-bottom: 15px;
text-align: center;
padding: 10px 20px;
}
.sidebar li a {
display: none;
}
.main {
width: 100%;
}
}
@media (width <=450px) {
.headings h5 {
font-size: 15px;
}
td {
font-size: 12px;
padding: 7px 5px;
}
.done,
.pending {
padding: 2px;
}
}
