Membuat SEARCH BAR pada Website Copany Profile dengan Bootstrap 5 #4

Setelah kita membuat desain section layanan kami sekarang kita akan membuat desain Serach Bar, langkah pertama silahkan tambahkan section search lalu tambahkan code berikut :

      <!-- SEARCH SECTION -->
      <section id="search">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2>
              Temukan Rumah Impian
            </h2>
            <p>
              Sekarang anda tidak perlu ribet dalam mencari model rumah impianmu.
            </p>
          </div>
        </div>
      </div>
      </section>

Setelah itu tambahkan code css berikut :

/* SEACRH */
#search {
  background-image: url(../asset/img/bg-search-bar.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

#search h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: 0em;
  text-align: center;
}

#search p {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: center;
}

Selanjutnya kita akan mebuat kerang dari Navs and tabs

<div class="col-8 mx-auto">

</div>

lalu didalamnya kita tambahkan fitur navs and tabs yang ada pada bootstrap 5 seperti berikut :

        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="jual-tab" data-bs-toggle="tab" data-bs-target="#jual" type="button" role="tab" aria-controls="jual" aria-selected="true">Jual</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="sewa-tab" data-bs-toggle="tab" data-bs-target="#sewa" type="button" role="tab" aria-controls="sewa" aria-selected="false">Sewa</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="property-tab" data-bs-toggle="tab" data-bs-target="#property" type="button" role="tab" aria-controls="property" aria-selected="false">Property Baru</button>
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="jual" role="tabpanel" aria-labelledby="jual-tab">Jual</div>
          <div class="tab-pane fade" id="sewa" role="tabpanel" aria-labelledby="sewa-tab">Sewa</div>
          <div class="tab-pane fade" id="property" role="tabpanel" aria-labelledby="property-tab">Property Baru</div>
        </div>

Harus diperhatikan, jangan lupa untuk memperhatikan id dari masing-masing targetnya jangan sampai berbeda.

Selanjutnya kita akan membuat isi dari navs & tabs nya, seperti berikut :

        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="jual" role="tabpanel" aria-labelledby="jual-tab">
            <div class="input-group mb-3">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>

              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">

              <button class="btn btn-outline-secondary" type="button">CARI</button>
            </div>
          </div>


          <div class="tab-pane fade" id="sewa" role="tabpanel" aria-labelledby="sewa-tab">
            <div class="input-group mb-3">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>

              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">

              <button class="btn btn-outline-secondary" type="button">CARI</button>
            </div>
          </div>


          <div class="tab-pane fade" id="property" role="tabpanel" aria-labelledby="property-tab">
            <div class="input-group mb-3">
              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>

              <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">Separated link</a></li>
              </ul>
              <input type="text" class="form-control" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">

              <button class="btn btn-outline-secondary" type="button">CARI</button>
            </div>
          </div>
        </div>

Atur sesuai dengan desain yang ada pada figma, sehingga hasilnya seperti ini

Berikut adalah file css dan section search secara lengkap

      <!-- SEARCH SECTION -->
      <section id="search">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2>
              Temukan Rumah Impian
            </h2>
            <p>
              Sekarang anda tidak perlu ribet dalam mencari model rumah impianmu.
            </p>
          </div>
        </div>

        <div class="col-10 mx-auto">
          <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
              <button class="nav-link active" id="jual-tab" data-bs-toggle="tab" data-bs-target="#jual" type="button" role="tab" aria-controls="jual" aria-selected="true">Jual</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="sewa-tab" data-bs-toggle="tab" data-bs-target="#sewa" type="button" role="tab" aria-controls="sewa" aria-selected="false">Sewa</button>
            </li>
            <li class="nav-item" role="presentation">
              <button class="nav-link" id="property-tab" data-bs-toggle="tab" data-bs-target="#property" type="button" role="tab" aria-controls="property" aria-selected="false">Property Baru</button>
            </li>
          </ul>
          <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="jual" role="tabpanel" aria-labelledby="jual-tab">
              <div class="input-group input-cari mb-3">
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
  
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
                <input type="text" class="form-control input-cari2" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">
  
                <button class="button-primary type="button">CARI</button>
              </div>
            </div>
  
  
            <div class="tab-pane fade" id="sewa" role="tabpanel" aria-labelledby="sewa-tab">
              <div class="input-group input-cari mb-3">
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
  
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
                <input type="text" class="form-control input-cari2" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">
  
                <button class="button-primary type="button">CARI</button>
              </div>
            </div>
  
  
            <div class="tab-pane fade" id="property" role="tabpanel" aria-labelledby="property-tab">
              <div class="input-group input-cari mb-3">
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/1.png" alt=""> Tipe Rumah</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
  
                <button class="button-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="asset/img/icon search/3.png" alt=""> Range Harga</button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                  <li><hr class="dropdown-divider"></li>
                  <li><a class="dropdown-item" href="#">Separated link</a></li>
                </ul>
                <input type="text" class="form-control input-cari2" aria-label="Text input with dropdown button" placeholder="cari berdasarkan property ...">
  
                <button class="button-primary type="button">CARI</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      </section>

/* SEACRH */
#search {
  background-image: url(../asset/img/bg-search-bar.png);
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

#search h2 {
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 68px;
  letter-spacing: 0em;
  text-align: center;
  margin-top: 60px;
}

#search p {
  font-size: 22px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: center;
  margin-bottom: 50px;
}

.input-cari {
  height: 60px;
}

.input-cari:focus {
  border: none;
}

.input-cari .button-secondary {
  width: 200px;
  height: 60px;
  color: #0d5b83;
  font-weight: normal;
  border: none;
  border-radius: 0 0 0 10px;
}

.input-cari .button-primary {
  height: 60px;
  background-color: #0d5b83;
  color: #fff;
  font-weight: normal;
  font-size: 25px;
}

.nav-tabs {
  border: none;
}

.nav-tabs .nav-link.active {
  color: #0d5b83;
}

.nav-tabs .nav-link {
  color: #000;
  border: none;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.1);
}