Responsive Admin Dashboard Page HTML and CSS

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

responsive admin dashboard page html and css

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;
    }
}


Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad