Feature tab
Features tab
Module position: home-2
Module class suffix: Not used
If you want to create your feature tab like this you have to create a custom and publish the custom module like below
Step-1:
Step-2:
Step-3:
Step-4:
Add the following code in your custom module
<div class="h-block-2 white h-block">
<div class="h-block-content">
<div class="features-content">
<h2>Happy Clients. Happy You.</h2>
<p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
</div>
<div class="features-tab">
<ul class="nav nav-pills">
<li class="active">
<a data-toggle="tab" href="#feature-button-1">
<img src="images/themeparrot/tab_images/template.png" alt="template_icon" class="img-responsive" />
<h4>Template modeling</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</a>
</li>
<li>
<a data-toggle="tab" href="#feature-button-2">
<img src="images/themeparrot/tab_images/shopping.png" alt="product_icon" class="img-responsive" />
<h4>Product Modeling</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</a>
</li>
<li>
<a data-toggle="tab" href="#feature-button-3">
<img src="images/themeparrot/tab_images/support_icons.png" alt="support_icon" class="img-responsive" />
<h4>Support service</h4>
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</a>
</li>
</ul>
</div>
<div class="features-tab-content">
<div class="tab-content">
<div class="tab-pane fade active in" id="feature-button-1"><img alt="sell just about anything" class="img-responsive" src="images/themeparrot/tab_images/template_image.png" />
</div>
<div class="tab-pane fade in" id="feature-button-2"><img alt="sell stuff with us" class="img-responsive" src="images/themeparrot/tab_images/shopping_image.png" />
</div>
<div class="tab-pane fade in" id="feature-button-3"><img alt="cut it out" class="img-responsive" src="images/themeparrot/tab_images/support_image.png" />
</div>
</div>
</div>
<span class="bg-span corner-top-left-bg"></span>
<span class="bg-span corner-top-right-bg"></span>
</div>
</div>
Last updated