Project Gallery
Explore Modern Responsive Dashboard in detail
1
/1
100%
Project Overview
Modern Responsive Dashboard
Project Description
Built with HTML, CSS, JavaScript, and Bootstrap 5, this modern dashboard features a clean design, smooth transitions, and full responsiveness across all devices.Each section includes a title, description, and image, making it perfect for presenting projects, services, products, or portfolio items in an interactive and visually appealing way.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="dashboard-container">
<!-- Sidebar -->
<aside class="sidebar">
<div class="logo">
<div class="logo-icon">
<i class="fas fa-chart-line"></i>
</div>
<div class="logo-text">DashBoard Pro</div>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="fas fa-home"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-chart-bar"></i>
<span>Analytics</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-users"></i>
<span>Users</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-shopping-cart"></i>
<span>Orders</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-cog"></i>
<span>Settings</span>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-question-circle"></i>
<span>Support</span>
</a>
</li>
</ul>
</aside>
<!-- Main Content -->
<main class="main-content">
<!-- Header -->
<header class="header">
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" placeholder="Search dashboard...">
</div>
<div class="user-profile">
<div class="user-avatar">JD</div>
<div>
<div class="user-name">John Doe</div>
<div class="user-role">Administrator</div>
</div>
</div>
</header>
<!-- Stats Grid -->
<div class="stats-grid">
<div class="stat-card fade-in">
<div class="stat-icon" style="background: linear-gradient(45deg, #4361ee, #3a0ca3);">
<i class="fas fa-users"></i>
</div>
<div class="stat-content">
<div class="stat-value">2,856</div>
<div class="stat-label">Total Users</div>
<div class="stat-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>12% increase</span>
</div>
</div>
</div>
<div class="stat-card fade-in" style="animation-delay: 0.1s;">
<div class="stat-icon" style="background: linear-gradient(45deg, #7209b7, #560bad);">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="stat-content">
<div class="stat-value">$48.9K</div>
<div class="stat-label">Total Revenue</div>
<div class="stat-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>8% increase</span>
</div>
</div>
</div>
<div class="stat-card fade-in" style="animation-delay: 0.2s;">
<div class="stat-icon" style="background: linear-gradient(45deg, #f72585, #b5179e);">
<i class="fas fa-chart-line"></i>
</div>
<div class="stat-content">
<div class="stat-value">1,243</div>
<div class="stat-label">New Orders</div>
<div class="stat-trend trend-down">
<i class="fas fa-arrow-down"></i>
<span>3% decrease</span>
</div>
</div>
</div>
<div class="stat-card fade-in" style="animation-delay: 0.3s;">
<div class="stat-icon" style="background: linear-gradient(45deg, #4cc9f0, #4895ef);">
<i class="fas fa-eye"></i>
</div>
<div class="stat-content">
<div class="stat-value">45.2K</div>
<div class="stat-label">Page Views</div>
<div class="stat-trend trend-up">
<i class="fas fa-arrow-up"></i>
<span>15% increase</span>
</div>
</div>
</div>
</div>
<!-- Charts Section -->
<div class="charts-section">
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">Revenue Overview</h3>
<select class="chart-filter">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
<option>Last 90 Days</option>
</select>
</div>
<div class="chart-container">
<div class="chart-placeholder">
<!--<img src="https://placehold.co/800x400" alt="Revenue growth chart showing steady upward trend with monthly peaks and seasonal variations in blue gradient colors" onerror="this.style.display='none'" />-->
<div class="fallback-text">Revenue Chart Loading...</div>
</div>
</div>
</div>
<div class="chart-card">
<div class="chart-header">
<h3 class="chart-title">User Distribution</h3>
</div>
<div class="chart-container">
<div class="chart-placeholder">
<!--<img src="https://placehold.co/400x400" alt="Pie chart showing user distribution across different regions with vibrant color coding and percentage labels" onerror="this.style.display='none'" />-->
<div class="fallback-text">User Distribution Chart Loading...</div>
</div>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="activity-section">
<div class="section-header">
<h3 class="section-title">Recent Activity</h3>
<a href="#" class="view-all">View All</a>
</div>
<ul class="activity-list">
<li class="activity-item">
<div class="activity-icon" style="background: #4361ee;">
<i class="fas fa-user-plus"></i>
</div>
<div class="activity-content">
<div class="activity-title">New user registered</div>
<div class="activity-time">2 minutes ago</div>
</div>
</li>
<li class="activity-item">
<div class="activity-icon" style="background: #7209b7;">
<i class="fas fa-shopping-cart"></i>
</div>
<div class="activity-content">
<div class="activity-title">New order placed</div>
<div class="activity-time">15 minutes ago</div>
</div>
</li>
<li class="activity-item">
<div class="activity-icon" style="background: #4cc9f0;">
<i class="fas fa-chart-line"></i>
</div>
<div class="activity-content">
<div class="activity-title">Revenue milestone reached</div>
<div class="activity-time">1 hour ago</div>
</div>
</li>
<li class="activity-item">
<div class="activity-icon" style="background: #f72585;">
<i class="fas fa-bell"></i>
</div>
<div class="activity-content">
<div class="activity-title">System update completed</div>
<div class="activity-time">3 hours ago</div>
</div>
</li>
</ul>
</div>
<!-- Quick Actions -->
<div class="quick-actions">
<button class="action-btn pulse">
<div class="action-icon">
<i class="fas fa-plus"></i>
</div>
<div class="action-label">Add New User</div>
</button>
<button class="action-btn">
<div class="action-icon">
<i class="fas fa-download"></i>
</div>
<div class="action-label">Export Data</div>
</button>
<button class="action-btn">
<div class="action-icon">
<i class="fas fa-cog"></i>
</div>
<div class="action-label">Settings</div>
</button>
<button class="action-btn">
<div class="action-icon">
<i class="fas fa-chart-pie"></i>
</div>
<div class="action-label">Reports</div>
</button>
</div>
</main>
</div>
</body>
</html>CSS
<style>
:root {
--primary-color: #4361ee;
--secondary-color: #3a0ca3;
--accent-color: #7209b7;
--success-color: #4cc9f0;
--warning-color: #f72585;
--dark-color: #1e1e2e;
--light-color: #f8f9fa;
--gray-color: #6c757d;
--border-radius: 12px;
--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f5f7ff;
color: #333;
line-height: 1.6;
}
.dashboard-container {
display: grid;
grid-template-columns: 280px 1fr;
min-height: 100vh;
}
/* Sidebar Styles */
.sidebar {
position: fixed;
height: 100vh;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 2rem 1.5rem;
position: fixed;
width: 280px;
height: 100vh;
overflow-y: auto;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 2.5rem;
}
.logo-icon {
font-size: 2rem;
background: rgba(255, 255, 255, 0.2);
padding: 10px;
border-radius: 10px;
}
.logo-text {
font-size: 1.5rem;
font-weight: 700;
}
.nav-menu {
list-style: none;
}
.nav-item {
margin-bottom: 0.5rem;
}
.nav-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
border-radius: var(--border-radius);
transition: var(--transition);
}
.nav-link:hover,
.nav-link.active {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateX(5px);
}
.nav-link i {
width: 20px;
text-align: center;
}
/* Main Content Styles */
.main-content {
grid-column: 2;
padding: 2rem;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding: 1rem 0;
}
.search-bar {
display: flex;
align-items: center;
background: white;
padding: 0.75rem 1rem;
border-radius: 25px;
box-shadow: var(--box-shadow);
width: 300px;
}
.search-bar input {
border: none;
outline: none;
padding: 0.5rem;
width: 100%;
font-size: 0.9rem;
}
.user-profile {
display: flex;
align-items: center;
gap: 12px;
}
.user-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 1.1rem;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex;
align-items: center;
gap: 1rem;
}
.stat-icon {
width: 60px;
height: 60px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
}
.stat-content {
flex: 1;
}
.stat-value {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.stat-label {
color: var(--gray-color);
font-size: 0.9rem;
}
.stat-trend {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
margin-top: 0.5rem;
}
.trend-up {
color: #10b981;
}
.trend-down {
color: #ef4444;
}
/* Charts Section */
.charts-section {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.chart-card {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
}
.chart-header {
display: flex;
justify-content: between;
align-items: center;
margin-bottom: 1.5rem;
}
.chart-title {
font-size: 1.2rem;
font-weight: 600;
}
.chart-container {
height: 300px;
position: relative;
}
.chart-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(45deg, #f8f9fa, #e9ecef);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray-color);
font-size: 0.9rem;
}
/* Recent Activity */
.activity-section {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin-bottom: 2rem;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.section-title {
font-size: 1.2rem;
font-weight: 600;
}
.view-all {
color: var(--primary-color);
text-decoration: none;
font-size: 0.9rem;
}
.activity-list {
list-style: none;
}
.activity-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid #eee;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.activity-content {
flex: 1;
}
.activity-title {
font-weight: 500;
margin-bottom: 0.25rem;
}
.activity-time {
color: var(--gray-color);
font-size: 0.85rem;
}
/* Quick Actions */
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.action-btn {
background: white;
padding: 1.5rem;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
text-align: center;
cursor: pointer;
transition: var(--transition);
border: none;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
.action-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
color: var(--primary-color);
}
.action-label {
font-weight: 500;
}
/* Responsive Design */
@media (max-width: 1024px) {
.dashboard-container {
grid-template-columns: 1fr;
}
.sidebar {
position: relative;
width: 100%;
height: auto;
}
.main-content {
grid-column: 1;
}
.charts-section {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.search-bar {
width: 100%;
}
.stats-grid {
grid-template-columns: 1fr;
}
.quick-actions {
grid-template-columns: 1fr;
}
}
/* Animation and Effects */
.fade-in {
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
</style>JavaScript
<script>
// Simple JavaScript for interactive elements
document.addEventListener('DOMContentLoaded', function() {
// Navigation active state
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
navLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
});
});
// Quick actions animation
const actionButtons = document.querySelectorAll('.action-btn');
actionButtons.forEach(button => {
button.addEventListener('mouseenter', function() {
this.style.transform = 'translateY(-2px)';
this.style.boxShadow = '0 6px 25px rgba(0, 0, 0, 0.15)';
});
button.addEventListener('mouseleave', function() {
this.style.transform = 'translateY(0)';
this.style.boxShadow = 'var(--box-shadow)';
});
});
// Simulate data loading
setTimeout(() => {
const chartPlaceholders = document.querySelectorAll('.chart-placeholder .fallback-text');
chartPlaceholders.forEach(text => {
text.textContent = 'Interactive charts would load here';
});
}, 2000);
// Search functionality
const searchInput = document.querySelector('.search-bar input');
searchInput.addEventListener('focus', function() {
this.parentElement.style.boxShadow = '0 6px 25px rgba(67, 97, 238, 0.3)';
});
searchInput.addEventListener('blur', function() {
this.parentElement.style.boxShadow = 'var(--box-shadow)';
});
});
</script>