Create a Stunning Dashboard with HTML and CSS

A well-designed financial dashboard is essential for tracking and managing transactions, insights, and payments efficiently. The FinFlow Dashboard is a sleek and modern user interface that provides a complete financial overview. In this guide, we will explore how you can create a professional-looking Stunning Dashboard using HTML and CSS. Whether you're a beginner or an experienced web developer, this tutorial will help you understand the key components of a well-structured finance management dashboard. checkout the Fast Food Dashboard with HTML, CSS and JavaScript

What is the FinFlow Dashboard?

The FinFlow Dashboard is a finance management interface designed to provide users with an overview of their transactions, account details, and financial insights. It features a sidebar navigation menu, transaction cards, charts, and interactive elements that make financial tracking easier.

By following this guide, you will learn the essential components of building a similar dashboard with HTML and CSS for styling.

Key Features of the Stunning Dashboard

1. Sidebar Navigation Menu

A well-organized sidebar allows users to easily navigate between different sections like Home, Account, Payments, Preferences, Inbox, Insights, and Help Center.

2. Financial Overview Section

The main dashboard area provides an overview of transactions, total balance, recent payments, and external transfers. This helps users quickly analyze their financial activities.

3. Interactive Transaction Cards

Cards displaying financial data, such as digital payments and external transfers, make the interface visually appealing and easy to understand.

4. Smart Money Management Promo Card

A promotional section provides users with tips and features related to secure and efficient financial transactions.

5. Recent Expenses & Connections

Users can track their recent transactions, including expenses and money transfers between contacts.

6. Monthly Savings and Budget Tracking

A visually appealing graph showcases monthly savings, allowing users to track their progress toward financial goals.

Why Create a Financial Dashboard?

Financial dashboards are essential for organizing and tracking personal or business finances. Here’s why you should consider building one:

Easy Financial Tracking: Get a clear overview of your income and expenses.
Improved Decision Making: Helps users make informed financial decisions.
User Engagement: An interactive and visually appealing UI keeps users engaged.
Customizable: You can modify it according to your financial needs.

Enhancing User Experience with Modern UI/UX

To make the Stunning Dashboard stand out, ensure that you follow best UI/UX practices:

Use aesthetic color schemes that match finance-based applications.
Ensure responsive design for mobile and desktop compatibility.
Implement hover effects and smooth animations for an interactive feel.
Optimize performance by using lightweight assets and efficient CSS and JS.

Source Code

Step 1: Setting Up the HTML Structure
Step 2: Adding Styling with CSS

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FinFlow Dashboard</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="logo">
        <svg width="100" height="40" viewBox="0 0 100 40">
          <path d="M12,15 L30,15 L24,27 L12,27 Z" fill="#4270F4" />
          <text x="38" y="27" fill="#262A39" font-size="20" font-weight="bold">
            FinFlow
          </text>
        </svg>
      </div>

      <div class="nav-menu">
        <a href="#" class="nav-item active">
          <i class="fas fa-home"></i>
          <span>Home</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-user-circle"></i>
          <span>Account</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-wallet"></i>
          <span>Payments</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-sliders-h"></i>
          <span>Preferences</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-comment-dots"></i>
          <span>Inbox</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-chart-line"></i>
          <span>Insights</span>
        </a>
        <a href="#" class="nav-item">
          <i class="fas fa-life-ring"></i>
          <span>Help Center</span>
        </a>
      </div>

      <div class="premium-box">
        <h3>Upgrade to Elite Plan</h3>
        <button class="premium-btn">Try Free</button>
      </div>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <!-- Header -->
      <div class="header">
        <div class="welcome-section">
          <p class="greeting">Good afternoon, Alex,</p>
          <h1 class="welcome-title">Your Financial Overview</h1>
        </div>

        <div class="header-right">
          <div class="notification-bell">
            <i class="fas fa-bell"></i>
            <div class="notification-indicator"></div>
          </div>

          <div class="user-profile">
            <img
              src="https://i.pravatar.cc/100?img=8"
              alt="Alex Morgan"
              class="profile-pic"
            />
          </div>

          <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="Find transactions..." />
          </div>
        </div>
      </div>

      <!-- Dashboard Container -->
      <div class="dashboard-container">
        <!-- Main Dashboard Content -->
        <div class="dashboard-main">
          <!-- Transfer Cards -->
          <div class="transfer-cards">
            <div class="transfer-card">
              <div class="card-icon">
                <i class="fas fa-credit-card"></i>
              </div>
              <p class="card-title">Digital Payments</p>
              <h2 class="card-amount">$1,875</h2>
            </div>

            <div class="transfer-card">
              <div class="card-icon">
                <i class="fas fa-exchange-alt"></i>
              </div>
              <p class="card-title">External Transfers</p>
              <h2 class="card-amount">$263</h2>
            </div>

            <div class="transfer-card">
              <div class="card-icon">
                <i class="fas fa-university"></i>
              </div>
              <p class="card-title">Domestic Transfers</p>
              <h2 class="card-amount">$394</h2>
            </div>
          </div>

          <!-- Promo Card -->
          <div class="promo-card">
            <div class="promo-info">
              <h2 class="promo-title">Smart money management</h2>
              <p class="promo-desc">
                Experience global transactions with zero hidden charges. Secure,
                transfer and manage your finances with confidence.
              </p>
              <button class="promo-btn">Explore Features</button>
            </div>

            <div class="credit-card">
              <div class="card-overlay"></div>
              <div class="card-brand">
                <div class="card-type">Platinum Edge</div>
                <div class="card-logo">
                  <div class="card-logo-circle"></div>
                  <div class="card-logo-circle"></div>
                </div>
              </div>

              <div class="card-number">4832 7691 2450 8115</div>

              <div class="card-details">
                <div class="card-holder">
                  <div class="card-holder-label">CARD HOLDER</div>
                  <div class="card-holder-name">Alexander Morgan</div>
                </div>
                <div class="card-expiry">
                  <div class="card-expiry-label">EXPIRES</div>
                  <div class="card-expiry-date">09/27</div>
                </div>
              </div>
            </div>
          </div>

          <!-- Transaction & Transfer Sections -->
          <div class="transaction-section">
            <div class="transaction-card">
              <h3 class="section-title">Recent Expenses</h3>

              <div class="transaction-item">
                <div class="transaction-icon">
                  <i class="fas fa-hamburger"></i>
                </div>
                <div class="transaction-content">
                  <div class="transaction-title">Dining Out</div>
                  <div class="transaction-time">
                    <i class="far fa-clock"></i> Today, 14:45
                  </div>
                </div>
                <div class="transaction-amount negative">-$78</div>
              </div>

              <div class="transaction-item">
                <div class="transaction-icon">
                  <i class="fas fa-tshirt"></i>
                </div>
                <div class="transaction-content">
                  <div class="transaction-title">Retail Purchase</div>
                  <div class="transaction-time">
                    <i class="far fa-clock"></i> Yesterday, 16:08
                  </div>
                </div>
                <div class="transaction-amount negative">-$125</div>
              </div>
            </div>

            <div class="transaction-card">
              <h3 class="section-title">Your Connections</h3>

              <div class="transaction-item">
                <div class="transaction-icon">
                  <img
                    src="https://i.pravatar.cc/100?img=12"
                    alt="Lisa Johnson"
                  />
                </div>
                <div class="transaction-content">
                  <div class="transaction-title">Lisa Johnson</div>
                  <div class="transaction-time">
                    <i class="far fa-clock"></i> Today, 09:35
                  </div>
                </div>
                <div class="transaction-amount positive">+$85</div>
              </div>

              <div class="transaction-item">
                <div class="transaction-icon">
                  <img
                    src="https://i.pravatar.cc/100?img=11"
                    alt="Michael Torres"
                  />
                </div>
                <div class="transaction-content">
                  <div class="transaction-title">Michael Torres</div>
                  <div class="transaction-time">
                    <i class="far fa-clock"></i> Monday, 17:45
                  </div>
                </div>
                <div class="transaction-amount negative">-$42</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Dashboard Sidebar -->
        <div class="dashboard-sidebar">
          <div class="savings-card">
            <h3 class="savings-title">Monthly Savings</h3>
            <div class="savings-amount">$467.5</div>

            <div class="time-filter">
              <button class="time-option">Daily</button>
              <button class="time-option">Weekly</button>
              <button class="time-option active">Monthly</button>
              <button class="time-option">Annual</button>
            </div>

            <div class="chart-container">
              <svg
                class="chart"
                viewBox="0 0 300 100"
                preserveAspectRatio="none"
              >
                <defs>
                  <linearGradient
                    id="gradientFill"
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%"
                  >
                    <stop offset="0%" stop-color="#4270F4" stop-opacity="0.7" />
                    <stop
                      offset="100%"
                      stop-color="#4270F4"
                      stop-opacity="0.1"
                    />
                  </linearGradient>
                </defs>
                <path
                  class="chart-line-path"
                  d="M0,80 C20,70 40,30 60,60 C80,90 100,40 120,30 C140,20 160,50 180,20 C200,30 220,60 240,80 C260,60 280,40 300,60"
                ></path>
                <path
                  class="chart-area"
                  d="M0,80 C20,70 40,30 60,60 C80,90 100,40 120,30 C140,20 160,50 180,20 C200,30 220,60 240,80 C260,60 280,40 300,60 L300,100 L0,100 Z"
                ></path>
                <circle
                  cx="180"
                  cy="20"
                  r="6"
                  fill="#4270F4"
                  stroke="#ffffff"
                  stroke-width="3"
                />
              </svg>
            </div>

            <div class="timeline">
              <div class="month">Oct</div>
              <div class="month">Nov</div>
              <div class="month active">Dec</div>
              <div class="month">Jan</div>
              <div class="month">Feb</div>
              <div class="month">Mar</div>
            </div>
          </div>

          <div class="plan-card">
            <div class="plan-info">
              <div class="plan-title">Budget Goal Q1 2025</div>
              <div class="plan-status">On Track</div>
            </div>

            <div class="plan-progress">
              <div class="plan-percentage">68%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

css

:root {
  --primary-color: #4270f4;
  --primary-light: #edf0fb;
  --primary-dark: #0f2a65;
  --secondary-color: #3b3f5c;
  --gray-light: #f5f7ff;
  --gray-medium: #e6e9f4;
  --gray-dark: #828795;
  --danger: #f36c6c;
  --success: #2dbf78;
  --white: #ffffff;
  --text-primary: #262a39;
  --text-secondary: #6c7380;
  --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  --sidebar-width: 280px;
  --header-height: 80px;
  --border-radius: 18px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
}

body {
  background-color: var(--gray-light);
  color: var(--text-primary);
  display: flex;
  min-height: 100vh;
}

/* Sidebar Styles */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--white);
  border-right: 1px solid var(--gray-medium);
  padding: 35px 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  box-shadow: 5px 0 20px rgba(0, 0, 0, 0.03);
}

.logo {
  padding: 0 30px 35px;
}

.logo svg {
  height: 40px;
  width: auto;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 0 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  border-radius: 12px;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background-color: var(--primary-light);
  color: var(--primary-color);
  transform: translateX(5px);
}

.nav-item.active {
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-weight: 600;
  border-left: 3px solid var(--primary-color);
}

.nav-item i {
  margin-right: 15px;
  font-size: 18px;
  width: 24px;
  text-align: center;
}

/* Premium account box */
.premium-box {
  background: linear-gradient(135deg, #6a85f1, #4270f4);
  margin: 25px;
  border-radius: var(--border-radius);
  padding: 25px;
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(66, 112, 244, 0.2);
  transition: transform 0.3s ease;
}

.premium-box:hover {
  transform: translateY(-5px);
}

.premium-box::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  bottom: -100px;
  right: -100px;
}

.premium-box::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  top: -50px;
  left: -50px;
}

.premium-box h3 {
  font-size: 20px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.premium-btn {
  background-color: var(--white);
  color: var(--primary-color);
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.premium-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Main Content Styles */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  padding: 40px;
  max-width: 1800px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.greeting {
  color: var(--text-secondary);
  font-size: 16px;
  margin-bottom: 10px;
}

.welcome-title {
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.notification-bell {
  background: var(--white);
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  position: relative;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.notification-bell:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  color: var(--primary-color);
}

.notification-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  background-color: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--white);
}

.user-profile {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.user-profile::after {
  content: "";
  position: absolute;
  width: 52px;
  height: 52px;
  border: 2px solid var(--gray-medium);
  border-radius: 50%;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.profile-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--white);
  transition: transform 0.3s ease;
}

.user-profile:hover .profile-pic {
  transform: scale(1.05);
}

.search-bar {
  background: var(--white);
  border-radius: 50px;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  width: 300px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.search-bar:focus-within {
  box-shadow: 0 5px 15px rgba(66, 112, 244, 0.15);
  transform: translateY(-2px);
}

.search-bar input {
  border: none;
  outline: none;
  width: 100%;
  margin-left: 15px;
  font-size: 15px;
  color: var(--text-primary);
}

.search-bar input::placeholder {
  color: var(--gray-dark);
}

.search-bar i {
  color: var(--gray-dark);
  font-size: 16px;
}

/* Content Layout */
.dashboard-container {
  display: grid;
  grid-template-columns: 3fr 1.2fr;
  gap: 30px;
}

.dashboard-main {
  display: grid;
  gap: 30px;
}

/* Transfer Cards */
.transfer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 30px;
}

.transfer-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.transfer-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.transfer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 0;
  background: var(--primary-color);
  transition: height 0.3s ease;
}

.transfer-card:hover::before {
  height: 100%;
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  font-size: 20px;
  transition: all 0.3s ease;
}

.transfer-card:hover .card-icon {
  transform: scale(1.1);
  background-color: var(--primary-color);
  color: var(--white);
}

.card-title {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.card-amount {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(45deg, #262a39, #4270f4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dashboard Sidebar */
.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Saved This Month Card */
.savings-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 30px;
  box-shadow: var(--card-shadow);
  height: auto;
  flex-grow: 0;
}

.savings-title {
  font-size: 17px;
  color: var(--text-secondary);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.savings-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--primary-color);
  border-radius: 50%;
  margin-right: 10px;
}

.savings-amount {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 25px;
  background: linear-gradient(45deg, var(--primary-color), #6a85f1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}

.savings-amount::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 40px;
  background: linear-gradient(45deg, var(--primary-color), #6a85f1);
  bottom: 0;
  left: 5px;
  border-radius: 3px;
}

.time-filter {
  display: flex;
  margin-bottom: 25px;
  background-color: var(--gray-light);
  border-radius: 30px;
  padding: 5px;
}

.time-option {
  padding: 8px 18px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.time-option:hover {
  color: var(--primary-color);
}

.time-option.active {
  background-color: var(--primary-color);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 5px 10px rgba(66, 112, 244, 0.3);
}

.chart-container {
  height: 200px;
  position: relative;
  margin: 0 -15px;
}

.chart {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-line-path {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 5px 5px rgba(66, 112, 244, 0.2));
}

.chart-area {
  fill: url(#gradientFill);
  opacity: 0.25;
}

.timeline {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding: 0 10px;
}

.month {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 15px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.month:hover {
  color: var(--primary-color);
  background-color: var(--primary-light);
}

.month.active {
  color: var(--primary-color);
  font-weight: 600;
  position: relative;
  background-color: var(--primary-light);
}

.month.active::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  border-radius: 50%;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid var(--white);
  box-shadow: 0 0 10px rgba(66, 112, 244, 0.5);
}

/* Promo Card */
.promo-card {
  background: linear-gradient(135deg, var(--primary-light), #dbe4ff);
  border-radius: var(--border-radius);
  padding: 35px;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: var(--card-shadow);
}

.promo-card::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  border-radius: 50%;
  top: -150px;
  right: -150px;
}

.promo-info {
  max-width: 50%;
  z-index: 1;
}

.promo-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(90deg, var(--text-primary), var(--primary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-desc {
  color: var(--text-secondary);
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 1.6;
}

.promo-btn {
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 30px;
  padding: 14px 30px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 15px rgba(66, 112, 244, 0.3);
  transition: all 0.3s ease;
}

.promo-btn:hover {
  background-color: #3265e6;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(66, 112, 244, 0.4);
}

.credit-card {
  background: linear-gradient(135deg, #6889ff, #4270f4);
  width: 320px;
  height: 200px;
  border-radius: 20px;
  padding: 25px;
  color: var(--white);
  position: relative;
  box-shadow: 0 15px 30px rgba(66, 112, 244, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
  transform: rotate(5deg);
}

.credit-card:hover {
  transform: rotate(5deg) translateY(-10px);
  box-shadow: 0 20px 40px rgba(66, 112, 244, 0.4);
}

.card-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-type {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.card-logo {
  display: flex;
  gap: 5px;
}

.card-logo-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.card-logo-circle:nth-child(2) {
  opacity: 0.7;
  transform: translateX(-8px);
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDMwMHYxODBIMHoiIGZpbGw9Im5vbmUiLz48Y2lyY2xlIGN4PSIyNTAiIGN5PSIxNTAiIHI9IjgwIiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9Ii4xIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSIzMCIgcj0iMzAiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iLjEiLz48L3N2Zz4=");
  opacity: 0.15;
  mix-blend-mode: soft-light;
  border-radius: 20px;
}

.card-number {
  font-size: 22px;
  letter-spacing: 3px;
  font-weight: 500;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.card-details {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.card-holder {
  font-size: 12px;
}

.card-holder-label {
  opacity: 0.7;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.card-holder-name {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

.card-expiry {
  font-size: 12px;
  text-align: right;
}

.card-expiry-label {
  opacity: 0.7;
  font-size: 10px;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.card-expiry-date {
  font-size: 16px;
  font-weight: 500;
}

/* Transaction Section */
.transaction-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.transaction-card,
.plan-card {
  background-color: var(--white);
  border-radius: var(--border-radius);
  padding: 25px;
  box-shadow: var(--card-shadow);
}

.plan-card {
  background: linear-gradient(135deg, #13296a, #16378e);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  padding: 30px;
  height: 100%;
}

.plan-card::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  top: -200px;
  right: -200px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.section-title::after {
  content: "";
  position: absolute;
  height: 3px;
  width: 40%;
  background-color: var(--primary-color);
  bottom: -8px;
  left: 0;
  border-radius: 3px;
}

.transaction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gray-medium);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

.transaction-item:hover {
  transform: translateX(5px);
}

.transaction-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.transaction-icon {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-medium);
  color: var(--text-secondary);
  font-size: 18px;
  transition: all 0.3s ease;
}

.transaction-item:hover .transaction-icon {
  transform: scale(1.1);
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.transaction-icon img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}

.transaction-content {
  flex: 1;
  margin-left: 15px;
}

.transaction-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 5px;
}

.transaction-time {
  color: var(--text-secondary);
  font-size: 13px;
  display: flex;
  align-items: center;
}

.transaction-time i {
  margin-right: 5px;
  font-size: 12px;
}

.transaction-amount {
  font-weight: 600;
  font-size: 17px;
  transition: all 0.2s ease;
}

.transaction-item:hover .transaction-amount {
  transform: scale(1.1);
}

.transaction-amount.negative {
  color: var(--danger);
}

.transaction-amount.positive {
  color: var(--success);
}

/* Plan Card */
.plan-info {
  padding: 25px 0;
  position: relative;
  z-index: 1;
}

.plan-title {
  font-size: 16px;
  opacity: 0.8;
  margin-bottom: 10px;
}

.plan-status {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.plan-progress {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  margin-right: 30px;
}

.plan-progress::before {
  content: "";
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  background: var(--primary-dark);
}

.plan-progress::after {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  70% {
    transform: scale(1);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

.plan-percentage {
  position: relative;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Responsive Design */
@media (max-width: 1400px) {
  .dashboard-container {
    grid-template-columns: 1fr;
  }

  .savings-card {
    grid-column: span 3;
  }

  .dashboard-sidebar {
    grid-template-columns: repeat(2, 1fr);
  }

  .credit-card {
    width: 280px;
    height: 170px;
  }
}

@media (max-width: 1200px) {
  .main-content {
    padding: 30px;
  }

  .transfer-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .transaction-section {
    grid-template-columns: 1fr;
  }

  .plan-card {
    grid-column: span 1;
  }

  .promo-card {
    flex-direction: column;
    gap: 30px;
  }

  .promo-info {
    max-width: 100%;
  }

  .credit-card {
    width: 100%;
    transform: rotate(0);
  }

  .credit-card:hover {
    transform: translateY(-10px) rotate(0);
  }
}

@media (max-width: 992px) {
  .sidebar {
    width: 80px;
    padding: 25px 0;
  }

  .logo {
    padding: 0 15px 25px;
    display: flex;
    justify-content: center;
  }

  .logo svg text {
    display: none;
  }

  .nav-item span,
  .premium-box h3 {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 15px;
  }

  .nav-item i {
    margin-right: 0;
    font-size: 20px;
  }

  .premium-box {
    padding: 20px 15px;
    margin: 15px;
  }

  .premium-btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .main-content {
    margin-left: 80px;
  }
}

@media (max-width: 768px) {
  .main-content {
    padding: 20px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-right {
    width: 100%;
    margin-top: 25px;
    justify-content: space-between;
  }

  .search-bar {
    width: 50%;
  }

  .transfer-cards,
  .dashboard-sidebar {
    grid-template-columns: 1fr;
  }

  .savings-card {
    height: auto;
  }

  .welcome-title {
    font-size: 24px;
  }

  .savings-amount {
    font-size: 32px;
  }

  .transaction-section {
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .search-bar {
    width: 100%;
    margin-top: 15px;
  }

  .header-right {
    flex-wrap: wrap;
    gap: 15px;
  }

  .time-filter {
    overflow-x: auto;
    padding: 5px;
  }

  .time-option {
    padding: 8px 12px;
    white-space: nowrap;
  }

  .promo-title {
    font-size: 22px;
  }

  .promo-desc {
    font-size: 14px;
  }

  .promo-btn {
    padding: 12px 20px;
  }
}

Conclusion

Creating a stunning Dashboard using HTML and CSS is a great way to improve your web development skills. This dashboard provides a sleek, modern, and interactive experience for users managing their finances. With essential components like a sidebar menu, transaction cards, interactive elements, and financial insights, you can build an impressive finance management system that enhances usability and efficiency.

Start designing your own financial dashboard today and take your UI/UX skills to the next level!

CodingVox

Web Developer and Content Creator

FinFlow DashboardHTML CSS JS DashboardFinance UI DesignBuild a Dashboard