<!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://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse">
<div class="sidebar-sticky">
<h3 class="sidebar-heading text-white text-center py-4">Dashboard</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Logout</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<input type="text" class="form-control" placeholder="Search...">
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://codezillaye.com/img/Content/avatar/avatar1.png" class="rounded-circle" width="30" alt="User">
<span>codezillaye</span>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5 class="card-title">Widget 1</h5>
<p class="card-text">Content for widget 1</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5 class="card-title">Widget 2</h5>
<p class="card-text">Content for widget 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5 class="card-title">Widget 3</h5>
<p class="card-text">Content for widget 3</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<div class="card-body">
<h5 class="card-title">Widget 4</h5>
<p class="card-text">Content for widget 4</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Random Image">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Random text for card 1.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="https://picsum.photos/300/200?random=1" class="card-img-top" alt="Random Image">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Random text for card 2.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="https://picsum.photos/300/200?random=2" class="card-img-top" alt="Random Image">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Random text for card 3.</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<img src="https://picsum.photos/300/200?random=3" class="card-img-top" alt="Random Image">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<p class="card-text">Random text for card 4.</p>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
body {
font-family: 'Arial', sans-serif;
}
#sidebar {
min-height: 100vh;
}
.sidebar-heading {
font-size: 24px;
}
.nav-link {
font-size: 16px;
padding: 10px 15px;
}
.nav-link:hover {
background-color: #1abc9c;
}
.card {
border-radius: 10px;
}
.card-title {
font-size: 18px;
font-weight: bold;
}
.card-text {
color: #7f8c8d;
}
.dropdown-menu {
min-width: 200px;
}
.dropdown-menu a {
color: #333;
}
.dropdown-menu a:hover {
background-color: #1abc9c;
color: white;
}