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