<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Responsive InfoFusion Dashboard</title>
<style>
/* 1. Global Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
background-color: #0d1425; /* Dark theme background */
font-family: ‘Inter’, -apple-system, sans-serif;
color: #ffffff;
display: flex;
justify-content: center;
padding: 20px;
min-height: 100vh;
}

/* 2. Main Grid Layout (Responsive) */
.dashboard-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Desktop: 2 Columns */
gap: 20px;
width: 100%;
max-width: 1100px;
align-content: start;
}

/* Responsive Breakpoint for Mobile/Tablets */
@media (max-width: 768px) {
.dashboard-wrapper {
grid-template-columns: 1fr; /* Mobile: 1 Column */
}
}

/* 3. Card Base Styles */
.card {
background-color: #1a2333;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.white-card {
background-color: #ffffff;
color: #1a2333;
}

/* 4. Top Left: Stats Section */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}

.stat-item {
background: #ffffff;
color: #334155;
padding: 15px;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.stat-item span { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; }
.stat-item h2 { font-size: 20px; margin: 4px 0; color: #0f172a; }
.stat-item .growth { font-size: 11px; color: #10b981; font-weight: bold; }

/* 5. Top Right: Promo Section */
.promo-content h1 { font-size: 26px; line-height: 1.2; margin-bottom: 12px; }
.promo-content p { font-size: 14px; color: #94a3b8; margin-bottom: 24px; line-height: 1.5; }

.btn-connect {
background-color: #4ade80;
color: #064e3b;
padding: 12px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
display: inline-block;
width: fit-content;
transition: opacity 0.2s;
}

/* 6. Charts Simulation */
.chart-title { font-size: 14px; font-weight: 700; margin-bottom: 20px; color: #475569; }

/* Bar Chart */
.bars-container {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 120px;
padding-top: 10px;
}
.bar { width: 12%; border-radius: 4px; transition: height 0.3s; }

/* Donut Chart */
.donut-flex {
display: flex;
align-items: center;
gap: 20px;
}
.donut-graphic {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(#4ade80 0% 45%, #60a5fa 45% 75%, #e2e8f0 75% 100%);
flex-shrink: 0;
}
.legend-list { font-size: 13px; width: 100%; }
.legend-item { display: flex; justify-content: space-between; margin-bottom: 6px; border-bottom: 1px solid #f1f5f9; padding-bottom: 2px; }

</style>
</head>
<body>

<div class=”dashboard-wrapper”>

<!– Row 1 Left: Stats –>
<div class=”stats-grid”>
<div class=”stat-item”>
<span>Visits</span>
<h2>7,245</h2>
<div class=”growth”>â–² 12.5%</div>
</div>
<div class=”stat-item”>
<span>Users</span>
<h2>3,310</h2>
<div class=”growth”>â–² 8.2%</div>
</div>
<div class=”stat-item”>
<span>Clicks</span>
<h2>5,671</h2>
<div class=”growth”>â–² 5.1%</div>
</div>
<div class=”stat-item”>
<span>Sales</span>
<h2>156</h2>
<div class=”growth”>â–² 2.3%</div>
</div>
</div>

<!– Row 1 Right: Promo Card –>
<div class=”card”>
<div class=”promo-content”>
<h1>Stay organized and connected</h1>
<p>Use this space to add more details about your data, a custom message, or to talk about important news.</p>
<a href=”#” class=”btn-connect”>Connect account</a>
</div>
</div>

<!– Row 2 Left: Bar Chart –>
<div class=”card white-card”>
<div class=”chart-title”>Traffic by device</div>
<div class=”bars-container”>
<div class=”bar” style=”height: 45%; background: #93c5fd;”></div>
<div class=”bar” style=”height: 75%; background: #86efac;”></div>
<div class=”bar” style=”height: 55%; background: #1e293b;”></div>
<div class=”bar” style=”height: 95%; background: #60a5fa;”></div>
<div class=”bar” style=”height: 40%; background: #cbd5e1;”></div>
<div class=”bar” style=”height: 65%; background: #4ade80;”></div>
</div>
</div>

<!– Row 2 Right: Donut Chart –>
<div class=”card white-card”>
<div class=”chart-title”>Traffic by location</div>
<div class=”donut-flex”>
<div class=”donut-graphic”></div>
<div class=”legend-list”>
<div class=”legend-item”><span>United States</span> <strong>40.2%</strong></div>
<div class=”legend-item”><span>Canada</span> <strong>22.5%</strong></div>
<div class=”legend-item”><span>Mexico</span> <strong>18.3%</strong></div>
<div class=”legend-item”><span>Other</span> <strong>19.0%</strong></div>
</div>
</div>
</div>

</div>

</body>
</html>