Hero blocks

Use Boomerang's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

The time for action is now.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Learn more

Example


<section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url('path_to_your_image');">
    <!-- Mask overlay -->
    <div class="mask mask-dark--style-2"></div>

    <!-- Container -->
    <div class="container text-center">
        <div class="row">
            <div class="col-md-12">
                <div class="fluid-paragraph paragraph-md">
                    <h2 class="heading heading-1 strong-400 c-white">
                        The time for action is now.
                    </h2>
                    <p class="lead c-white mt-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
                    </p>

                    <div class="btn-container mt-5">
                        <a href="#" class="btn btn-styled btn-lg btn-base-5">Learn more</a>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

The time for action is now. It's never too late to do something.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Contact us

Example


<section class="slice bg-base-1">
    <div class="container text-center">
        <div class="row">
            <div class="col-md-12">
                <div class="fluid-paragraph paragraph-md">
                    <h2 class="heading heading-2 strong-400 c-white">
                        The time for action is now. It's never too late to do something.
                    </h2>
                    <h3 class="heading heading-5 c-white mt-4 strong-300">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
                    </h3>

                    <div class="btn-container mt-5">
                        <a href="#" class="btn btn-styled btn-lg btn-base-5">Contact us</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Trusted by over 6500+ clients

Take up one idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone - This is the way to success.

Example


<section class="slice sct-color-1">
    <div class="container">
        <div class="row cols-md-space cols-sm-space cols-xs-space align-items-center">
            <div class="col-lg-6">
                <div class="block block-image-holder z-depth-3">
                    <div class="block-image">
                        <img src="<?php echo $rp; ?>assets/images/prv/other/img-3-1000x900.jpg" class="img-fluid img-center">

                        <a href="https://www.youtube.com/watch?v=hdw1uKiTI5c" data-fancybox>
                            <span class="play-video">
                                <i class="fa fa-play"></i>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-6">
                <div class="col-wrapper--spaced">
                    <h3 class="heading heading-2 strong-400">
                        Trusted by over 6500+ clients
                    </h3>
                    <div class="c-gray-light mt-4">
                        Take up one idea. Let the brain, muscles, nerves, every part of your body, be full of that idea, and just leave every other idea alone - This is the way to success.
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

This is the title.

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna.

Action button

Example


<section class="slice-lg has-bg-cover bg-size-cover" style="background-image: url('path_to_your_image');">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-8 ml-lg-auto">
                <div class="px-5 py-5 bg-white z-depth-1-bottom">
                    <h2 class="heading heading-2 strong-400 c-gray-dark">
                        This is the title.
                    </h2>
                    <div class="">
                        <p class="c-light-gray mt-4">
                            Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna.
                        </p>
                        <div class="btn-container mt-5">
                            <a href="#" class="btn btn-styled btn-base-1">Action button</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Thinking to start a new project

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna.
Purchase Boomerang

Example


<section class="slice sct-color-1">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="text-center">
                    <h2 class="heading heading-2 strong-400 c-gray-dark">
                        Thinking to start a new project
                    </h2>
                    <div class="fluid-paragraph fluid-paragraph-sm c-gray-light strong-300 mt-4">
                        Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna.

                        <div class="btn-container mt-5">
                            <a href="#" class="btn btn-styled btn-base-1">Purchase Boomerang</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Register

Become a model

Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet in justo a felis faucibus.

Discover more Create account

Example


<section class="slice pb-0 sct-color-">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-5 hidden-lg-down">
                <img src="path_to_your_image" class="img-fluid">
            </div>

            <div class="col-lg-7 mb-5">
                <div class="section-title section-title--style-1">
                    <h4 class="heading heading-5 strong-400 c-gray-light">Register</h4>
                    <h3 class="section-title-inner heading-2 strong-400 text-normal">
                        Become a model
                    </h3>
                </div>

                <p>
                    Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. Quisque ut nulla at nunc vehicula lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet in justo a felis faucibus.
                </p>

                <div class="btn-container mt-4">
                    <a href="#" class="btn btn-styled btn-sm btn-base-1">
                        Discover more
                    </a>
                    <a href="#" class="btn btn-styled btn-sm btn-base-4">
                        Create account
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

Make it simple, but significant.

Don Draper

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.

Example


<section class="slice sct-color-1 mt-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <img src="path_to_your_image" class="img-fluid img-center">
            </div>

            <div class="col-lg-6">
                <div class="px-5 py-5 text-center text-lg-left">
                    <h3 class="heading heading-3 strong-500">
                        Make it simple, but significant.
                    </h3>
                    <footer class="blockquote-footer">
                        <cite title="Source Title">Don Draper</cite>
                    </footer>
                    <p class="mt-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

The only journey is the one within.

Rainer Maria Rilke

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.

Example


<section class="slice sct-color-2 border-top mt-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="px-5 py-5 text-center text-lg-left">
                    <h3 class="heading heading-3 strong-500">
                        The only journey is the one within.
                    </h3>
                    <footer class="blockquote-footer">
                        <cite title="Source Title">Rainer Maria Rilke</cite>
                    </footer>
                    <p class="mt-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.
                    </p>
                </div>
            </div>

            <div class="col-lg-6">
                <img src="path_to_your_image" class="img-fluid img-center">
            </div>
        </div>
    </div>
</section>

If you spend an hour now, you can save five later.

Example


<section class="slice bg-base-1 mt-5">
    <div class="sct-inner container">
        <div class="cta-wrapper">
            <div class="container">
                <div class="text-center">
                    <h1 class="heading heading-2 text-normal strong-400">
                        If you spend an hour now, you can save five later.
                    </h1>
                </div>
            </div>
        </div>
    </div>
</section>

Complete features at your hand

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.

Our services Meet the team

Example


<section class="slice sct-color-1 mt-5">
    <div class="container text-center">
        <div class="row">
            <div class="col-md-12">
                <h2 class="heading heading-2 strong-400 c-gray-dark">
                    Complete features at your hand
                </h2>
                <div class="fluid-paragraph paragraph-md">
                    <p class="c-gray-dark mt-4">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quisque adipiscing lobortis aptent cras et justo.
                    </p>

                    <div class="btn-container mt-5">
                        <a href="#" class="btn btn-styled btn-lg btn-base-4">Our services</a>
                        <a href="#" class="btn btn-styled btn-lg btn-base-1">Meet the team</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Want to take your project to the next level?

We put all the experience and know-how in Boomerang so we can offer you the best product we have ever built.

Purchase Boomerang

Example


<section class="background-image-holder mt-5">
    <div class="slice holder-item has-bg-cover bg-size-cover" style="background-image: url('path_to_your_image'); background-position: bottom center;">
        <span class="mask mask-dark--style-2"></span>
        <div class="container d-flex align-items-center no-padding">
            <div class="col">
                <div class="row cols-xs-space cols-sm-space cols-md-space align-items-center py-5 text-center text-md-left">
                    <div class="col-md-7 col-lg-6">
                        <h2 class="heading heading-responsive heading-1 strong-400 c-white">
                            Want to take your project to the next level?
                        </h2>
                        <p class="lead mt-4 c-white">
                            We put all the experience and know-how in Boomerang so we can offer you the best product we have ever built.
                        </p>

                        <a href="#" class="btn btn-styled btn-base-4 btn-circle mt-4">Purchase Boomerang</a>
                    </div>

                    <div class="col-md-5 col-lg-6">
                        <div class="block block-image-holder z-depth-3">
                            <div class="block-image">
                                <img src="path_to_your_image" class="img-fluid img-center">

                                <a href="https://www.youtube.com/watch?v=hdw1uKiTI5c" data-fancybox>
                                    <span class="play-video">
                                        <i class="fa fa-play"></i>
                                    </span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

A modern and beautiful theme

Viam sumi mo id erit objectioni mo de necessario crediderim imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo extat neque arcte re ad etiam ego infiniti reperero mutuatur formalem.

Clients

Successful projects

Awards

Great ideas

Example


<section class="slice sct-color-1">
    <div class="container no-padding">
        <div class="row row-no-padding">
            <div class="col-md-12">
                <div class="section-title section-title--style-1 text-center">
                    <h3 class="section-title-inner heading-2 strong-300 text-normal">
                        <span>A modern and beautiful theme</span>
                    </h3>
                    <span class="section-title-delimiter clearfix d-none"></span>
                </div>

                <span class="clearfix"></span>

                <div class="text-center">
                    <div class="fluid-paragraph fluid-paragraph-sm c-gray-light strong-300">
                        Viam sumi mo id erit objectioni mo de necessario crediderim imo terra vox alios aut lor quasi. Vim quaero aut videri pendam plures duo extat neque arcte re ad etiam ego infiniti reperero mutuatur formalem.
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-md-3 col-sm-6">
                <div class="milestone-counter text-center">
                    <div class="milestone-count c-base-1 strong-400" data-from="0" data-to="5518" data-speed="3000" data-refresh-interval="100"></div>
                    <h4 class="milestone-info heading-6 c-gray-light text-normal">Clients</h4>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="milestone-counter text-center">
                    <div class="milestone-count c-base-1 strong-400" data-from="0" data-to="154" data-speed="5000" data-refresh-interval="50"></div>
                    <h4 class="milestone-info heading-6 c-gray-light text-normal">Successful projects</h4>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="milestone-counter text-center">
                    <div class="milestone-count c-base-1 strong-400" data-from="0" data-to="33" data-speed="5000" data-refresh-interval="80"></div>
                    <h4 class="milestone-info heading-6 c-gray-light text-normal">Awards</h4>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="milestone-counter text-center">
                    <div class="milestone-count c-base-1 strong-400" data-from="0" data-to="1230" data-speed="5000" data-refresh-interval="80"></div>
                    <h4 class="milestone-info heading-6 c-gray-light text-normal">Great ideas</h4>
                </div>
            </div>
        </div>
    </div>
</section>