<!DOCTYPE html>
<html>
<head>
<title>Responsive Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Dashboard</h1>
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="container">
<aside>
<nav>
<ul>
<li><a href="#">Dashboard</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</aside>
<main>
<h2>Dashboard Overview</h2>
<div class="cards">
<div class="card">
<h3>Total Users</h3>
<p>1,234</p>
</div>
<div class="card">
<h3>Total Revenue</h3>
<p>$123,456</p>
</div>
<div class="card">
<h3>Total Orders</h3>
<p>567</p>
</div>
</div>
</main>
</div>
<script src="script.js"></script>
</body>
</html>
/* Set default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
aside {
width: 100%;
margin-bottom: 20px;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav li {
margin: 10px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
width: 100%;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
width: calc(33.3% - 20px);
margin-bottom: 20px;
padding: 20px;
}
.card h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.card p {
font-size: 24px;
font-weight: bold;
color: #333;
}
/* Add responsive design */
@media (max-width: 768px) {
aside {
width: 100%;
}
nav li {
margin: 10px 20px;
}
.card {
width: calc(50% - 20px);
}
.hamburger {
display: block;
}
মন্তব্যসমূহ
একটি মন্তব্য পোস্ট করুন