# Why should choose us?

### 2. Why Should Choose us?

> Module position: home-2
>
> Module suffix: Not used
>
> Module title: products tabs

![](/files/ieMKm0BxLmTpKLioZ9Kz)

![](/files/yT5FQ6xiPx0xdgDr8vlY)

![](/files/2v1R6kpkgNz9D4cfvXdi)

![](/files/IGeFmCn5OFSFN25dqE3q)

![](/files/UgAbzS0cNqOcBZgtGfdF)

Follow the below code to achive the above

```html
<!-- Products tabs
================================================== -->
<div id="products" class="h-block-2 black h-block">
<div class="h-block-content">
<div class="features-content">
<h1>Why Should Choose us?</h1>
<div class="row">
<div class="col-sm-4">
<div class="product-item">
<div class="item-class"><i class="fa fa-diamond "></i></div>
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, ea duo natum nullam, mel meis pertinax ea,ea duo natum nullam, libris propriae no.</p>
</div>
</div>
<div class="col-sm-4">
<div class="product-item">
<div class="item-class"><i class="fa fa-desktop "></i></div>
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet, ea duo natum nullam, mel meis pertinax ea,ea duo natum nullam, libris propriae no.</p>
</div>
</div>
<div class="col-sm-4">
<div class="product-item">
<div class="item-class"><i class="fa fa-street-view "></i></div>
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet, ea duo natum nullam, mel meis pertinax ea,ea duo natum nullam, libris propriae no.</p>
</div>
</div>
</div>
</div>
<div class="brand-logo-button"><a href="#">Learn more <i class="fa fa-long-arrow-right"></i></a></div>
<div class="row">
<div class="product-list-tab">
<ul class="nav nav-pills">
<li class="active"><a href="#product-button-1" data-toggle="tab">Design</a></li>
<li><a href="#product-button-2" data-toggle="tab">Develop</a></li>
</ul>
</div>
</div>
<div class="our-product-detail">
<div class="product-list-tab-content">
<div class="tab-content">
<div id="product-button-1" class="tab-pane fade active in">
<div class="row">
<div class="col-sm-9">
<div class="features-tab-content">
<div class="tab-content">
<div id="feature-button1" class="tab-pane fade active in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_01.png" alt="product logo 01" class="img-responsive" /></div>
<h3>Email builder</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button2" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_02.png" alt="product logo 02" class="img-responsive" /></div>
<h3>Gallery</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button3" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_03.png" alt="product logo 03" class="img-responsive" /></div>
<h3>Rules for discount</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button4" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_01.png" alt="product logo 01" class="img-responsive" /></div>
<h3>Subscription</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
<a href="#" class="hp-btn">Read more</a></div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="features-tab">
<ul class="nav nav-pills">
<li class="active"><a href="#feature-button1"><i class="fa fa-envelope "></i><br /> Email builder<span class="product-dis">Ferri dicant te his</span> </a></li>
<li><a href="#feature-button2"><i class="fa fa-picture-o "></i><br /> Gallery<span class="product-dis">Vis ea latine integre</span> </a></li>
<li><a href="#feature-button3"><i class="fa fa-star-half-o "></i><br /> Rules for discount<span class="product-dis">Clita suscipit conceptam vel</span> </a></li>
<li><a href="#feature-button4"><i class="fa fa-repeat "></i> <br />Subscription <span class="product-dis">Falli aeque molestiae vel ne</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="product-button-2" class="tab-pane fade in">
<div class="row">
<div class="col-sm-9">
<div class="features-tab-content">
<div class="tab-content">
<div id="feature-button-1" class="tab-pane fade active in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_02.png" alt="product logo 02" class="img-responsive" /></div>
<h3>Extension</h3>
<p>Quo regione feugiat at, id molestie sententiae nam, qui id vocibus postulant. Ex quas solet has. Et cetero eligendi usu. Cu primis vulputate voluptaria nam.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button-2" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_03.png" alt="product logo 03" class="img-responsive" /></div>
<h3>Membership</h3>
<p>Qui eu omittam voluptatibus, ea vis falli eirmod. Ipsum lucilius repudiare est ea. In pri patrioque mnesarchum incorrupte.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button-3" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_01.png" alt="product logo 01" class="img-responsive" /></div>
<h3>Meta Data</h3>
<p>Te sit integre detraxit scripserit, quo ne euismod pertinax gloriatur, dico dicta eum at. In per mazim audire. Id ius iusto possit principes.</p>
<a href="#" class="hp-btn">Read more</a></div>
<div id="feature-button-4" class="tab-pane fade in">
<div class="image-block"><img src="images/themeparrot/features/product_logo_02.png" alt="product logo 02" class="img-responsive" /></div>
<h3>Documentation tool</h3>
<p>Cu iisque latine cum, et quo euismod sensibus, adhuc augue option ei eum. Vix cu regione feugait percipitur, at duo civibus hendrerit persequeris.</p>
<a href="#" class="hp-btn">Read more</a></div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="features-tab">
<ul class="nav nav-pills">
<li class="active"><a href="#feature-button-1"><i class="fa fa-plus "></i><br />Extension<span class="product-dis">Ferri dicant te his</span></a></li>
<li><a href="#feature-button-2"><i class="fa fa-user-plus "></i><br /> Membership <span class="product-dis">Vis ea latine integre</span></a></li>
<li><a href="#feature-button-3"> <i class="fa fa-repeat "></i><br /> Meta Data <span class="product-dis">Clita suscipit conceptam vel</span> </a></li>
<li><a href="#feature-button-4"> <i class="fa fa-book "></i><br /> Documentation tool<span class="product-dis">Falli aeque molestiae vel ne</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jdocs.themeparrot.com/joomla-templates/milestone/layout-customization/home-page/why-should-choose-us.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.