# ১৭-২ : ন্যাভবার ডিজাইন

এই মডিউলে আমরা হসপিটাল ম্যানেজমেন্ট প্রজেক্টের ফ্রন্ট-এন্ডের জন্য কোড লেখা শুরু করব। মূলত, এই মডিউলে ন্যাভবার ডিজাইন করার জন্য কোড লিখব।



এর জন্য রুট ডিরেকটরিতে index.html, app.js, style.css নামের ৩ টি ফাইলে ক্রিয়েট করে ফেলি-

<figure><img src="https://3753355949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZjZRCk5NYynvfinzJmZE%2Fuploads%2Faj567xzRHHsAK1xzxFLV%2Fimage.png?alt=media&#x26;token=01504b5b-e9d3-48ca-8151-c220064cca87" alt=""><figcaption></figcaption></figure>

index.html ফাইলটি নিচের মত করে লিখে ফেলি-

<mark style="color:green;">**Code:: 17.1.1**</mark>\
<mark style="color:red;">index.html</mark>

{% code lineNumbers="true" %}
```html
<!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>
```
{% endcode %}

style.css ফাইলটি নিচের মত করে লিখে ফেলি-

<mark style="color:green;">**Code:: 17.1.2**</mark>\
<mark style="color:red;">style.css</mark>

{% code lineNumbers="true" %}
```css
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;
}
```
{% endcode %}

এখন, index.html ফাইলটিতে রাইট বাটন ক্লিক করে Open With Live Server অপশনে ক্লিক করলে ফাইলটি ব্রাউজারে রান হবে এবং নিচের মত আউটপুট দেখা যাবে-

<figure><img src="https://3753355949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZjZRCk5NYynvfinzJmZE%2Fuploads%2FkAFFOoTgMhZGSPR08OzX%2Fimage.png?alt=media&#x26;token=30cfa311-3a8b-4101-a7ad-24c9997f4e95" alt=""><figcaption></figcaption></figure>

সুতরাং, আমাদের ন্যাভবারটি তৈরি হয়ে গেছে !

