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

এই মডিউলে ব্যানার ডিজাইনের কাজটি করে ফেলি।

এর জন্য [https://github.com/ratin17/Hospital-management-Frontend](https://github.com/ratin17/Hospital-management-Frontend) গিটহাব রেপোসিটরি থেকে Images ফোল্ডার টি সংগ্রহ করে রুট ডিরেকটরিতে রাখি-

<figure><img src="https://3753355949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZjZRCk5NYynvfinzJmZE%2Fuploads%2FE6NOLrjo8mDwrGXOQqP5%2Fimage.png?alt=media&#x26;token=7d9463dc-3036-4bb1-8672-47f0ead96e94" alt=""><figcaption></figcaption></figure>

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

<mark style="color:green;">**Code:: 17.2.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>

        <!-- Navbar -->

      <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>

      <!-- Banner -->

      <div class="banner-container">
        <h3>I am Mehrab Rabbi Ratin</h3>
        <div class="banner">
          <div class="banner-left">
            <h1>
              Providing Quality
              <br />
              Healthcare
            </h1>
            <p class="w-50 m-auto">
                Healthcare facilities send reminders to patients ahead of their appointments, reducing the number of cancellations and absentees. Potential delays are notified ahead of time, allowing patients to show up later and thus prevent their having to wait too long.
            </p>
          </div>
          <div class="banner-img">
            <img class="bn-img" src="./Images/doc.png" alt="" />
          </div>
        </div>
      </div>


    </header>


    <!-- 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.2.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;
}

.banner-container{
    width: 1200px;
    margin: auto;
    padding: 30px;

}
.banner{
    height: 450px;
    margin: auto;
    display: flex;
    text-align: center;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(cyan,rgb(33, 137, 137));
    box-shadow: 4px 4px 8px gray;
    border-radius:10px;
    /* padding: 30px; */
}
.bn-img{
    width: 325px;
    margin-top:-50px;
}
```
{% endcode %}

এখন, ব্রাউজারে নিচের মত আউটপুট দেখা যাবে-&#x20;

<figure><img src="https://3753355949-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZjZRCk5NYynvfinzJmZE%2Fuploads%2FSyoWhsgPBc7neVpfZjKU%2Fimage.png?alt=media&#x26;token=297b458b-9362-46c2-a94a-3a953ab1da5e" alt=""><figcaption></figcaption></figure>

