Homepage Hero Divider Code - HTML Snippet of Homepage Hero Divider Code with Icons

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000096171-homepage-hero-divider-code-html-snippet-of-homepage-hero-divider-code-with-icons

This is sample HTML code of the Homepage Hero Divider Code with Icons, including common classes and elements. 


<!-- Start: Main hero divider container -->
<div class="content-container homepage_steps">

<!-- Start: Main responsive container -->
<div class="container">

<!-- Start: Search Members Column -->
<div class="col-sm-12 col-md-4 text-center sm-bmargin homepage_step_1">

<!-- Icon indicating search functionality -->
<p>
<i class="fa fa-search"></i>
</p>

<!-- Title for the search members section -->
<h2 class="bold sm-nomargin h3">
Search Members
</h2>

<!-- Description text for search members -->
<p class="sm-bmargin">
Browse To Find Members
</p>

<!-- Action button to initiate search -->
<a class="btn btn-success xs-center-block" href="/search_results">
Search Members
</a>

<!-- Utility: Clear floats -->
<div class="clearfix"></div>
</div>

<!-- Utility: Responsive layout adjustment for mid-size screens -->
<div class="clearfix hidden-lg hidden-md"></div>

<!-- Start: Review Members Column -->
<div class="col-sm-12 col-md-4 text-center sm-bmargin sm-tmargin homepage_step_2">

<!-- Icon indicating review functionality -->
<p class="sm-tmargin">
<i class="fa fa-star"></i>
</p>

<!-- Title for the review members section -->
<h2 class="bold sm-nomargin h3">
Review Members
</h2>

<!-- Description text for review members -->
<p class="sm-bmargin">
Compare Members You Find
</p>

<!-- Action button to initiate review -->
<a class="btn btn-success xs-center-block" href="/search_results">
Review Members
</a>

<!-- Utility: Clear floats -->
<div class="clearfix"></div>
</div>

<!-- Utility: Responsive layout adjustment for mid-size screens -->
<div class="clearfix hidden-lg hidden-md"></div>

<!-- Start: Contact Members Column -->
<div class="col-sm-12 col-md-4 text-center sm-bmargin sm-tmargin homepage_step_2">

<!-- Icon indicating contact functionality -->
<p class="sm-tmargin">
<i class="fa fa-comments"></i>
</p>

<!-- Title for the contact members section -->
<h2 class="bold sm-nomargin h3">
Contact Members
</h2>

<!-- Description text for contact members -->
<p>
Connect with Members You Like
</p>

<!-- Action button to initiate contact -->
<a class="btn btn-success xs-center-block" href="/search_results">
Contact Members
</a>

<!-- Utility: Clear floats -->
<div class="clearfix"></div>
</div>
</div>
<!-- End: Main responsive container -->
</div>
<!-- End: Main hero divider container -->