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