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

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

This article provides a sample HTML structure for the Homepage Hero Divider section included in the standard Brilliant Directories website theme.

The example demonstrates the default layout, including the responsive column structure, Font Awesome icons, headings, descriptive text, and call-to-action buttons used in the Hero Divider.

The following HTML snippet represents the default markup for the Homepage Hero Divider.

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