> For the complete documentation index, see [llms.txt](https://jdocs.themeparrot.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jdocs.themeparrot.com/joomla-templates/runway/layout-customization/home-styles/home-style-4/home-4-what-we-offer-module.md).

# Home 4 What we offer Module

### 30. Home 4 What we offer Module

> Module position: tp-features
>
> Module class suffix: tp-feature

![](/files/6U2Iu23Q9grCB0dKPPwY)

If you want your module this way, **Go to backend: Extensions --> Module Manager --> New --> Select type as Custom html** with the settings below:

#### Step-1:

Create a new module type as "**Custom html**"

#### Step-2:

Add the following html code in your custom html module

```html
<div class="t3-sl">
    <div class="tp-title-center text-center">
        <h3 class="module-title "><span class="title-left">What we </span>
<span class="title-right"> Offer</span>
        </h3>
        <p class="title-dec-gray tp-sub-text">If you want to take it to the next level,
 you came to the right place.</p>
    </div>
    <div class="container">
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-umbrella"></em>
                <div class="content">
                    <h3>High Quality</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl
 non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-anchor"></em>
                <div class="content">
                    <h3>Modern Design</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl
 non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-open-box"></em>
                <div class="content">
                    <h3>Google Fonts</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl 
non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-language"></em>
                <div class="content">
                    <h3>100% Translatable</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl 
non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-layers"></em>
                <div class="content">
                    <h3>Premium Slider</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl
 non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="services-box-2"><em class="icon-picons-support-2"></em>
                <div class="content">
                    <h3>Awesome Support</h3>
                    <p>Duis nec aliquet massa, sed dapibus mauris. Nulla vehicula nisl
 non enim sodales fermentum.</p>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Step-3:

Navigate to "Options" tab, Set YES to Prepare content and add your background image

#### Step-4:

Once the module is created successfully SAVE & CLOSE the settings.