Search and Filter Hero Section

By Rafi

filter search forms image hero flexbox

How do I use This?

Search and filter section commonly used on travel, food, and entertainment websites.

HTML

<header class="hero-search-filter">
  <div class="hero-search-filter-content">
    <img class="hero-search-filter-logo" src="https://placehold.it/160x80" alt="" />
    <form class="hero-search-filter-form" action="">
      <label for="findtext">Find</label>
      <input id="findtext" class="hero-search-filter-form-find" type="text" />
      <div class="divider">&nbsp;</div>
      <label for="findlocate">Near</label>
      <input id="findlocate" class="hero-search-filter-form-near" type="text" />
      <button class="button"><i class="fa fa-search"></i></button>
    </form>
    <ul class="hero-search-filter-menu menu align-center">
      <li><a href="#"><i class="fa fa-cutlery" aria-hidden="true"></i> Restaurants</a></li>
      <li><a href="#"><i class="fa fa-glass" aria-hidden="true"></i> Nightlife</a></li>
      <li><a href="#"><i class="fa fa-wrench" aria-hidden="true"></i> Home Services</a></li>
      <li><a href="#"><i class="fa fa-cutlery" aria-hidden="true"></i> Delivery</a></li>
    </ul>
  </div>
</header>

$hero-search-filter-height: 300px;

.hero-search-filter {
  background: url('https://images.pexels.com/photos/115095/pexels-photo-115095.jpeg?w=940&h=650&auto=compress&cs=tinysrgb') center center no-repeat;
  height: $hero-search-filter-height;
  background-size: cover;
  display: flex;
  align-items: center;
}

.hero-search-filter-logo {
  margin-bottom: 2rem;
}

.hero-search-filter-content {
  display: flex;
  width: 100%;
  height: $hero-search-filter-height;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-search-filter-menu {
  flex-wrap: wrap;

  @include breakpoint(small only) {
    li {
      flex-basis: 50%;

      a {
        justify-content: center;
      }
    }
  }
}

.hero-search-filter-menu a {
  color: $white;
  font-weight: bold;

  .fa {
    font-size: 1.125rem;
    font-weight: normal;
    text-decoration: none;
  }

  &:hover {
    text-decoration: underline;
  }
}

.hero-search-filter-form {
  display: flex;
  width: 90%;
  background: $white;
  padding: 0.25rem;
  border-radius: 5px;
  align-items: center;

  .divider {
    background-color: $medium-gray;
    width: 1px;
  }

  label {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
    color: $dark-gray;
    font-weight: bold;
  }

  input,
  .button {
    margin-bottom: 0;
  }

  @include breakpoint(small only) {
    width: 95%;
  }
}

.hero-search-filter-form-find,
.hero-search-filter-form-near {
  border: 0;
  box-shadow: none;

  &:focus {
    border: 0;
    box-shadow: none;
  }
}

.hero-search-filter {
  background: url("https://images.pexels.com/photos/115095/pexels-photo-115095.jpeg?w=940&h=650&auto=compress&cs=tinysrgb") center center no-repeat;
  height: 300px;
  background-size: cover;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero-search-filter-logo {
  margin-bottom: 2rem;
}

.hero-search-filter-content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 300px;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.hero-search-filter-menu {
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

@media screen and (max-width: 39.9375em) {
  .hero-search-filter-menu li {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
  }
  .hero-search-filter-menu li a {
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.hero-search-filter-menu a {
  color: #fefefe;
  font-weight: bold;
}

.hero-search-filter-menu a .fa {
  font-size: 1.125rem;
  font-weight: normal;
  text-decoration: none;
}

.hero-search-filter-menu a:hover {
  text-decoration: underline;
}

.hero-search-filter-form {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 90%;
  background: #fefefe;
  padding: 0.25rem;
  border-radius: 5px;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero-search-filter-form .divider {
  background-color: #cacaca;
  width: 1px;
}

.hero-search-filter-form label {
  margin-right: 0.75rem;
  margin-left: 0.75rem;
  color: #8a8a8a;
  font-weight: bold;
}

.hero-search-filter-form input,
.hero-search-filter-form .button {
  margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {
  .hero-search-filter-form {
    width: 95%;
  }
}

.hero-search-filter-form-find,
.hero-search-filter-form-near {
  border: 0;
  box-shadow: none;
}

.hero-search-filter-form-find:focus,
.hero-search-filter-form-near:focus {
  border: 0;
  box-shadow: none;
}

Search and Filter Hero Section

By Rafi

Input Number Incrementer

Expandable Searchbar

Translucent Form Overlay

Search and Filter Hero Section

By Rafi

Similar Building Blocks

Input Number Incrementer

Expandable Searchbar

Translucent Form Overlay