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

 Link: https://support.brilliantdirectories.com/support/solutions/articles/12000096171

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