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);
}
