# ১৭-৬ : ডক্টরস পেজ - স্ট্যাটিক

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

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

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

    <main>

        <!-- Services -->

        <div class="service-container text-center">
            <h1 class="title">Services we provide</h1>
            <p>
                Healthcare facilities send reminders to patients ahead of their appointments, reducing the number of cancellations and absentees.
            </p>
            <div
              class="swiffy-slider slider-item-show2 slider-item-reveal slider-nav-outside slider-nav-round slider-nav-visible slider-indicators-outside slider-indicators-round slider-indicators-dark slider-nav-animation slider-nav-animation-fadein slider-item-first-visible"
            >
              <ul id="service-container" class="slider-container py-4"></ul>
    
              <button
                type="button"
                class="slider-nav"
                aria-label="Go left"
              ></button>
              <button
                type="button"
                class="slider-nav slider-nav-next"
                aria-label="Go left"
              ></button>
    
              <div class="slider-indicators">
                <button class="active" aria-label="Go to slide"></button>
                <button aria-label="Go to slide"></button>
                <button aria-label="Go to slide"></button>
                <button aria-label="Go to slide"></button>
                <button aria-label="Go to slide" class=""></button>
              </div>
            </div>
          </div>


          <!-- Doctors -->

          <div class="doctors-container row d-flex justify-content-center">
            <div class="col-md-4 text-center d-flex gap-3 justify-content-center">
              <div class="dropdown">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenuButton2"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  designation
                </button>
                <ul
                  id="drop-deg"
                  class="dropdown-menu dropdown-menu-dark"
                  aria-labelledby="dropdownMenuButton2"
                ></ul>
              </div>
              <div class="dropdown">
                <button
                  class="btn btn-secondary dropdown-toggle"
                  type="button"
                  id="dropdownMenuButton2"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                >
                  specialization
                </button>
                <ul
                  id="drop-spe"
                  class="dropdown-menu dropdown-menu-dark"
                  aria-labelledby="dropdownMenuButton2"
                ></ul>
              </div>
            </div>
            <div class="col-md-8">
              <input id="search" type="text" placeholder="search..." />
              <button onclick="handleSearch()">Search</button>
              <div id="doctors" class="doctors mt-5"></div>
              <div id="nodata" class="nodata">
                <img src="./Images/nodata.png" alt="" />
              </div>
              <div id="spinner" class="loading text-center">
                <h4>loading....</h4>
              </div>
            </div>
          </div>
    
    



    </main>


    <!-- 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.4.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;
}
.service-container{
    width: 1200px;
    margin: auto;
    margin-top: 50px;
    
}
.title{
    font-size: 44px;
    color: aqua;
    text-align: center;

}
.doctors-container{

    margin-top: 50px;
    padding: 30px;
}
.doc-card{
    width: 300px;

    height: 360px;
    box-shadow: 4px 4px 8px gray;
    border-radius: 10px;
    text-align:center;
    padding: 15px;
}
.doc-img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
}
```
{% endcode %}

.
