<section class="intro">

  <div class="bg-image h-100" style="

      background-image: url(https://mdbootstrap.com/img/Photos/new-templates/search-box/img6.jpg);

    ">

    <div class="mask d-flex align-items-center h-100" style="background-color: rgba(0,0,0,.43);">

      <div class="container">

        <div class="row">

          <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">

            <div class="card mb-2">

              <div class="card-body p-2">

                <div class="input-group input-group-lg">

                  <input type="text" class="form-control form-control-lg rounded" placeholder="Type Keywords"

                    aria-label="Type Keywords" aria-describedby="basic-addon2" />

                  <span class="input-group-text border-0" id="basic-addon2"><i class="fas fa-search"></i></span>

                </div>

              </div>

            </div>

            <div class="card bg-black">

              <div class="card-body p-4">

                <h6 class="text-white mt-3 mb-4">Advanced search</h6>

                <div class="row">

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">

                        Accessories

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

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

                      </ul>

                    </div>

                  </div>

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink1" data-mdb-toggle="dropdown" aria-expanded="false">

                        Color

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">

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

                      </ul>

                    </div>

                  </div>

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink2" data-mdb-toggle="dropdown" aria-expanded="false">

                        Size

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">

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

                      </ul>

                    </div>

                  </div>

                </div>

                <div class="row">

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink3" data-mdb-toggle="dropdown" aria-expanded="false">

                        Sale

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink3">

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

                      </ul>

                    </div>

                  </div>

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink4" data-mdb-toggle="dropdown" aria-expanded="false">

                        Time

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink4">

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

                      </ul>

                    </div>

                  </div>

                  <div class="col-md-4 mb-3">

                    <div class="dropdown">

                      <a class="btn btn-outline-light btn-lg btn-block dropdown-toggle" href="#" role="button"

                        id="dropdownMenuLink5" data-mdb-toggle="dropdown" aria-expanded="false">

                        Type

                      </a>

                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">

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

                      </ul>

                    </div>

                  </div>

                </div>

                <div class="d-flex justify-content-between align-items-center mt-4">

                  <p class="text-white mb-0"><span class="text-warning">108 </span>results</p>

                  <div>

                    <button type="button" class="btn btn-link text-white" data-mdb-ripple-color="dark">

                      Reset

                    </button>

                    <button type="button" class="btn btn-warning">Search</button>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>

html,

body,

.intro {

  height: 100%;

}

​

.form-control {

  border-color: transparent;

}

​

.input-group>.form-control:focus {

  border-color: transparent;

  box-shadow: inset 0 0 0 1px transparent;

}

.btn-link:hover {

  background-color: rgba(255,255,255,.35);

}

.btn-link:active, .btn-link.active {

  background-color: rgba(255,255,255,.35);

}

.btn-link:focus, .btn-link.focus {

  background-color: rgba(255,255,255,.35);

}

.btn-link:active:focus, .btn-link.active:focus {

  background-color: rgba(255,255,255,.35);

}

​