Help center

HTML:

          
            <!-- Hero Section -->
            <div class="gradient-half-primary-v1">
              <div class="bg-img-hero" style="background-image: url(../../assets/img/bg/bg2.png);">
                <div class="container space-2 space-4-top--lg space-3-bottom--lg">
                  <div class="w-md-75 mx-md-auto">
                    <!-- Title -->
                    <div class="row align-items-sm-center mb-4">
                      <div class="col-sm-6 mb-3 mb-sm-0">
                        <h1 class="text-white mb-0">Help center</h1>
                      </div>

                      <div class="col-sm-6 text-sm-right mb-3 mb-sm-0">
                        <a class="d-block text-white" href="#" target="_blank">
                          Community Forum
                          <span class="fa fa-external-link-alt ml-2"></span>
                        </a>
                      </div>
                    </div>
                    <!-- End Title -->
                  </div>

                  <div class="w-md-75 mx-md-auto">
                    <!-- Input -->
                    <div class="js-focus-state input-group input-group-lg form form--lg mb-3">
                      <input type="email" class="form-control form__input" name="email" required
                             placeholder="Search for answers"
                             aria-label="Search for answers">
                      <span class="input-group-append form__append">
                        <button type="submit" class="btn btn-dark px-5">
                          <span class="fa fa-search"></span>
                        </button>
                      </span>
                    </div>
                    <!-- End Input -->

                    <!-- Checkbox -->
                    <div class="d-sm-flex">
                      <div class="custom-control custom-checkbox d-flex align-items-center text-white mb-2 mb-sm-0 mr-sm-3">
                        <input type="checkbox" class="custom-control-input" id="recentCheckbox">
                        <label class="custom-control-label" for="recentCheckbox">
                          Recent
                        </label>
                      </div>

                      <div class="custom-control custom-checkbox d-flex align-items-center text-white mb-2 mb-sm-0 mx-sm-3">
                        <input type="checkbox" class="custom-control-input" id="relatedCheckbox">
                        <label class="custom-control-label" for="relatedCheckbox">
                          Related
                        </label>
                      </div>

                      <div class="custom-control custom-checkbox d-flex align-items-center text-white mb-2 mb-sm-0 mx-sm-3">
                        <input type="checkbox" class="custom-control-input" id="popularCheckbox">
                        <label class="custom-control-label" for="popularCheckbox">
                          Popular
                        </label>
                      </div>

                      <div class="custom-control custom-checkbox d-flex align-items-center text-white mb-2 mb-sm-0 ml-sm-3">
                        <input type="checkbox" class="custom-control-input" id="mostCommonCheckbox">
                        <label class="custom-control-label" for="mostCommonCheckbox">
                          Most common
                        </label>
                      </div>
                    </div>
                    <!-- End Checkbox -->
                  </div>
                </div>
              </div>
            </div>
            <!-- End Hero Section -->