How to create an Admin Dashboard with HTML and CSS

Hello Reader, in this article you will learn how to create an Admin Dashboard using HTML and CSS. Earlier in this website I have shared a lot of HTML and CSS designs. This article will show you how to create your own dashboard with HTML and CSS. Admin dashboard is an important tool for any website and it helps the admin to keep a track of all the data from the website.

A dashboard is a user interface that displays relevant information in an easy to understand format. It helps you get a quick overview of your key metrics. Dashboard is a tool that provides information on the performance of an organization, program, or project. Dashboards are interactive and can be used to monitor and track various aspects of the organization.

Below is the video tutorials. watch and practices

This section will provide you with an introduction of how to create a basic admin dashboard in HTML and CSS. In this article, you will be creating an admin dashboard for your website. You can use it to manage posts, configure widgets and pages, and more.

Admin dashboard is the first page that a visitor sees. It should be designed in such a way that it provides the user with all the information they need and want to know about the site.

Some of the things you should include in your admin dashboard are:

A list of recent posts or articles published on your site
A list of recently updated pages or posts
The latest comments from visitors
A list of popular pages and posts on your site

The Admin dashboard is a simple, user-friendly interface that allows you to create and manage content on your site. Dashboards are usually interactive, allowing users to drill down from high-level information to more specific data.

The admin dashboard is the main interface of your website where you can create and manage all of your content. This includes pages, posts, images, galleries, videos, and more. You can also edit or delete the content you have created in the past. It’s a user interface that provides an overview of the performance of a business. An admin dashboard can also be used as a tool for monitoring and reporting on the performance of an organization, in terms of its ability to achieve its goals and objectives.

HTML and CSS are two different languages for coding. HTML is the language for content, like text and pictures, while CSS is the language for style, like fonts and colors.

First, we need to create the HTML file that will contain the content for our dashboard. We can use a simple text editor like notepad or sublime text. Then, we need to create the CSS file that will contain styles for our html file.

The HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two languages that are used together to create web pages. HTML provides the basic structure of a web page, while CSS gives it its style.

Source Code

If you like this Admin Dashboard Design, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create two files. One of them is HTML, and the other is CSS after creating these files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Admin Dashboard | By Code Info</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Font Awesome Cdn Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
</head>
<body>
  <header class="header">
    <div class="logo">
      <a href="#">EasyPay</a>
      <div class="search_box">
        <input type="text" placeholder="Search EasyPay">
        <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
      </div>
    </div>

    <div class="header-icons">
      <i class="fas fa-bell"></i>
      <div class="account">
        <img src="./pic/img.jpg" alt="">
        <h4>Jhon Viek</h4>
      </div>
    </div>
  </header>
  <div class="container">
    <nav>
      <div class="side_navbar">
        <span>Main Menu</span>
        <a href="#" class="active">Dashboard</a>
        <a href="#">Profile</a>
        <a href="#">History</a>
        <a href="#">Application</a>
        <a href="#">My Account</a>
        <a href="#">Documnets</a>

        <div class="links">
          <span>Quick Link</span>
          <a href="#">Paypal</a>
          <a href="#">EasyPay</a>
          <a href="#">SadaPay</a>
        </div>
      </div>
    </nav>

    <div class="main-body">
      <h2>Dashboard</h2>
      <div class="promo_card">
        <h1>Welcome to EasyPay</h1>
        <span>Lorem ipsum dolor sit amet.</span>
        <button>Learn More</button>
      </div>

      <div class="history_lists">
        <div class="list1">
          <div class="row">
            <h4>History</h4>
            <a href="#">See all</a>
          </div>
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Dates</th>
                <th>Name</th>
                <th>Type</th>
                <th>Ammount</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>2, Aug, 2022</td>
                <td>Sam Tonny</td>
                <td>Premimum</td>
                <td>$2000.00</td>
              </tr>
              <tr>
                <td>2</td>
                <td>29, July, 2022</td>
                
                <td>Code Info</td>
                <td>Silver</td>
                <td>$5,000.00</td>
              </tr>
              <tr>
                <td>3</td>
                <td>15, July, 2022</td>
              
                <td>Jhon David</td>
                <td>Startup</td>
                <td>$3000.00</td>
              </tr>
              <tr>
                <td>4</td>
                <td>5, July, 2022</td>
                <td>Salina Gomiz</td>
                <td>Premimum</td>
                <td>$7000.00</td>
              </tr>
              <tr>
                <td>5</td>
                <td>29, June, 2022</td>
                <td>Gomiz</td>
                <td>Gold</td>
                <td>$4000.00</td>
              </tr>
              <tr>
                <td>6</td>
                <td>28, June, 2022</td>
                <td>Elyana Jhon</td>
                <td>Premimum</td>
                <td>$2000.00</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="list2">
          <div class="row">
            <h4>Documnets</h4>
            <a href="#">Upload</a>
          </div>
          <table>
            <thead>
              <tr>
                <th>#</th>
                <th>Title</th>
                <th>Type</th>
                <th>Uplaoded</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>CNIC</td>
                <td>PDF</td>
                <td>20</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Passport</td>
                <td>PDF</td>
                <td>12</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Licence</td>
                <td>PDF</td>
                <td>9</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Pic</td>
                <td>Jpg</td>
                <td>22</td>
              </tr> 
              <tr>
                <td>5</td>
                <td>CNIC</td>
                <td>Jpg</td>
                <td>22</td>
              </tr> 
              <tr>
                <td>6</td>
                <td>Docx</td>
                <td>Word</td>
                <td>22</td>
              </tr> 
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="sidebar">
      <h4>Account Balance</h4>
      
      <div class="balance">
        <i class="fas fa-dollar icon"></i>
        <div class="info">
          <h5>Dollar</h5>
          <span><i class="fas fa-dollar"></i>25,000.00</span>
        </div>
      </div>
      
      <div class="balance">
        <i class="fa-solid fa-rupee-sign icon"></i>
        <div class="info">
          <h5>PKR</h5>
          <span><i class="fa-solid fa-rupee-sign"></i>300,000.00</span>
        </div>
      </div>

      <div class="balance">
        <i class="fas fa-euro icon"></i>
        <div class="info">
          <h5>Euro</h5>
          <span><i class="fas fa-euro"></i>25,000.00</span>
        </div>
      </div>

      <div class="balance">
        <i class="fa-solid fa-indian-rupee-sign icon"></i>
        <div class="info">
          <h5>INR</h5>
          <span><i class="fa-solid fa-indian-rupee-sign"></i>220,000.00</span>
        </div>
      </div>

      <div class="balance">
        <i class="fa-solid fa-sterling-sign icon"></i>
        <div class="info">
          <h5>Pound</h5>
          <span><i class="fa-solid fa-sterling-sign"></i>30,000.00</span>
        </div>
      </div>

    </div>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

/* import google fonts */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); *{ margin: 0; padding: 0; border: none; outline: none; text-decoration: none; box-sizing: border-box; font-family: "Poppins", sans-serif; } body{ background: rgb(219, 219, 219); } .header{ display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 20px; background: #fff; } .logo{ display: flex; align-items: center; } .logo a{ color: #000; font-size: 18px; font-weight: 600; margin: 2rem 8rem 2rem 2rem; } .search_box{ display: flex; align-items: center; } .search_box input{ padding: 9px; width: 250px; background: rgb(228, 228, 228); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .search_box i{ padding: 0.66rem; cursor: pointer; color: #fff; background: #000; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .header-icons{ display: flex; align-items: center; } .header-icons i{ margin-right: 2rem; cursor: pointer; } .header-icons .account{ width: 130px; display: flex; align-items: center; justify-content: space-between; } .header-icons .account img{ width: 35px; height: 35px; cursor: pointer; border-radius: 50%; } .container{ margin-top: 10px; display: flex; justify-content: space-between; } /* Side menubar section */ nav{ background: #fff; } .side_navbar{ padding: 1px; display: flex; flex-direction: column; } .side_navbar span{ color: gray; margin: 1rem 3rem; font-size: 12px; } .side_navbar a{ width: 100%; padding: 0.8rem 3rem; font-weight: 500; font-size: 15px; color: rgb(100, 100, 100); } .links{ margin-top: 5rem; display: flex; flex-direction: column; } .links a{ font-size: 13px; } .side_navbar a:hover{ background: rgb(235, 235, 235); } .side_navbar .active{ border-left: 2px solid rgb(100, 100, 100); } /* Main Body Section */ .main-body{ width: 70%; padding: 1rem; } .promo_card{ width: 100%; color: #fff; margin-top: 10px; border-radius: 8px; padding: 0.5rem 1rem 1rem 3rem; background: rgb(37, 37, 37); } .promo_card h1, .promo_card span, button{ margin: 10px; } .promo_card button{ display: block; padding: 6px 12px; border-radius: 5px; cursor: pointer; } .history_lists{ display: flex; align-items: center; justify-content: space-between; } .row{ display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; } table{ background: #fff; padding: 1rem; text-align: left; border-radius: 10px; } table td, th{ padding: 0.2rem 0.8rem; } table th{ font-size: 15px; } table td{ font-size: 13px; color: rgb(100, 100, 100); } /* Sidebar Section */ .sidebar{ width: 15%; padding: 2rem 1rem; background: #fff; } .sidebar h4{ margin-bottom: 1.5rem; } .sidebar .balance{ display: flex; align-items: center; margin-bottom: 1rem; } .balance .icon{ color: #fff; font-size: 20px; border-radius: 6px; margin-right: 1rem; padding: 1rem; background: rgb(37, 37, 37); } .balance .info h5{ font-size: 16px; } .balance .info span{ font-size: 14px; color: rgb(100, 100, 100); } .balance .info i{ margin-right: 2px; }

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.

Source Code

HTML CODE:

CSS CODE:

Post a Comment

Post a Comment

About Us

Contact Form