Why should choose us?
Last updated
Last updated
Module position: home-2
Module suffix: Not used
Module title: products tabs
Follow the below code to achive the above
<!-- 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>
