এই মডিউলে আমরা হসপিটাল ম্যানেজমেন্ট প্রজেক্টের ফ্রন্ট-এন্ডের জন্য কোড লেখা শুরু করব। মূলত, এই মডিউলে ন্যাভবার ডিজাইন করার জন্য কোড লিখব।
এর জন্য রুট ডিরেকটরিতে index.html, app.js, style.css নামের ৩ টি ফাইলে ক্রিয়েট করে ফেলি-
<!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" />
<title>Hospital</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="..."
/>
<link
href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/css/swiffy-slider.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav class="d-flex justify-content-around align-items-center p-4">
<div class="logo-container d-flex align-items-center gap-2">
<img src="./Images/stethoscope 1.png" alt="" />
<h3>SmartCare</h3>
</div>
<div class="menu-container d-flex gap-3">
<li class="menu"><a href="index.html"></a></li>
<li class="menu">Services</li>
<li class="menu">Contact us</li>
<li class="menu"><a target="_blank" href="login.html">Login</a></li>
</div>
</nav>
<!-- add script file -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
<script src="./app.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js"
integrity="..."
></script>
<script
src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.6.0/dist/js/swiffy-slider.min.js"
crossorigin="anonymous"
defer
></script>
</body>
</html>
body{
/* width: 1200px; */
/* border: 1px solid gray; */
margin: auto;
background-color: rgb(241, 234, 234);
}
li{
list-style: none;
}
nav{
background-color:aqua;
}
.menu{
font-size: 20px;
}
.menu:hover{
color: white;
cursor: pointer;
}
এখন, index.html ফাইলটিতে রাইট বাটন ক্লিক করে Open With Live Server অপশনে ক্লিক করলে ফাইলটি ব্রাউজারে রান হবে এবং নিচের মত আউটপুট দেখা যাবে-
