# Grid Content #6

{% tabs %}
{% tab title="Preview" %}

<figure><img src="https://1467436830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzE3nwrT9Zh3l0SGFdHp9%2Fuploads%2Fh3aOPw6YeRozo7ycUkMw%2Fgrid-content-5-moodle-theme.png?alt=media&#x26;token=9f992791-cb50-4537-a0b9-54f46bb6d567" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="HTML Code" %}
{% code lineNumbers="true" %}

```html
<!-- Start - Block - Grid Content #6 -->
<div class="row align-items-lg-center">
    <div class="rui-img-rounded--lg col-sm-12 col-lg-6 mb-4 mb-lg-0">
        <img src="https://roseathemes.com/space/1/draftfile.php/5/user/draft/910155598/600x-600.jpg" alt="Moodle Theme - Unsplash" width="100%" class="w-100 img-fluid atto_image_button_text-bottom">
    </div>
    <div class="col-sm-12 col-lg offset-lg-1">
        <div class="pt-lg-4 pt-0">
            <h2 class="mb-xl-4">Custom Work</h2>
            <p class="pb-3 mb-3 mb-xl-4">Do you need theme customization? Help with some Moodle issues? Or maybe you can design and build a theme from scratch?</p>
            <div class="row row-cols-2 pb-2 pb-xl-0 mb-4 mb-xl-5">
                <div class="col">
                    <div class="rui-rounded-icon my-3" style="color: #000; background: #feedba;">
                        <svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
                            <path d="M16 16.472V20a2 2 0 01-2 2h-4a2 2 0 01-2-2v-3.528M8 7.528V4a2 2 0 012-2h4a2 2 0 012 2v3.528" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M18 12a6 6 0 10-12 0 6 6 0 0012 0z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M14 12h-2v-2" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <h3 class="h5 mb-2">Customization, Design</h3>
                    <p>30$/hour</p>
                </div>
                <div class="col">
                    <div class="rui-rounded-icon my-3" style="color: #000; background: #bdc4f4;">
                        <svg width="32px" height="32px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="currentColor">
                            <path d="M11 13.6V21H3.6a.6.6 0 01-.6-.6V13h7.4a.6.6 0 01.6.6zM11 21h3M3 13v-3M6 3H3.6a.6.6 0 00-.6.6V6M14 3h-4M21 10v4M18 3h2.4a.6.6 0 01.6.6V6M18 21h2.4a.6.6 0 00.6-.6V18M11 10h3v3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </div>
                    <h3 class="h5 mb-2">Custom Moodle Theme</h3>
                    <p>The price starts from $6000.</p>
                </div>
            </div>
            <a class="btn btn-primary" href="#">Buy Monocolor today</a>
        </div>
    </div>
</div>
<!-- End - Block - Grid Content #6 -->
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% content-ref url="../how-to-add-more-item-to-blocks" %}
[how-to-add-more-item-to-blocks](https://rosea.gitbook.io/moon-iomad-moodle-theme/theme-settings/front-page-blocks/how-to-add-more-item-to-blocks)
{% endcontent-ref %}