In the
<div class="bg-primary"></div>body {
margin: 0;
padding: 0;
}
img {
width: 336px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/css/style.css" />
<!-- bootstrap -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e5548554b561a170b131a48">[email protected]</a>/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f7469746a773b362a323b69">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<!-- font aweseome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="/img/favicon.png" />
<title><%= title %></title>
</head>
<body>
<section style="background-color: #f9f9f9">
<div class="container-fluid">
<div class="row">
<!-- Navbar -->
<!-- ! -->
<div
class="navbar col-2 d-flex vh-100 flex-column"
style="background-color: #ffff"
>
<div class="container">
<a href="" class="navbar-brand mt-3 mb-4">
<img src="/img/no-bg.png" alt="" class="img-fluid" />
</a>
<div class="navbar-nav">
<a
class="nav-link my-2 text-secondary-emphasis"
aria-current="page"
href="#"
>
<i class="fa-solid fa-house"></i> Home</a
>
<a class="nav-link my-2 text-secondary-emphasis" href="#"
><i class="fa-solid fa-wallet"></i> Balance</a
>
<a class="nav-link my-2 text-secondary-emphasis" href="#"
><i class="fa-solid fa-arrow-right-arrow-left"></i> Transaction</a
>
<a class="nav-link my-2 text-secondary" href="#"
><i class="fa-solid fa-gear"></i> Settings</a
>
<a class="nav-link my-2 text-secondary" href="#"
><i class="fa-solid fa-circle-info"></i> About Us</a
>
</div>
</div>
</div>
<!-- End of Navbar -->
<!-- ! -->
<div class="col-10 vh-100">
<div class="col-12 d-flex justify-content-end py-2 align-items-center">
<img
src="/img/default.png"
alt="profile pic"
class="rounded-5"
style="height: 35px; width: 35px"
/>
<h6 class="px-2" style="margin: 0">Fahchouch Mohammed</h6>
</div>
<h2 class="my-3">Dashboard</h2>
<!-- Cards -->
<div class="row g-1">
<!-- First card -->
<div class="col-3 card text-bg-primary p-3 rounded-4 mx-4">
...
</div>
<!-- Second Card -->
...
</div>
<!-- Third card -->
...
</div>
</div>
<!-- End Cards -->
<div class="bg-primary"></div>
</div>
</div>
</div>
</body>
</html>