<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="services-sec">
<div class="vertical-tab-menu">
<nav>
<div class="nav nav-tabs" id="myTab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">
<span><img src="assets/images/p_3.jpeg" alt="">
</span>
Kitchen
</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false" tabindex="-1">
<span><img src="assets/images/p_4.jpeg" alt="">
</span>
Bathroom
</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false" tabindex="-1">
<span><img src="assets/images/p_5.jpeg" alt="">
</span>
Basement
</a>
<a class="nav-item nav-link" id="nav-menu-tab" data-bs-toggle="tab" href="#nav-menu" role="tab" aria-controls="nav-menu" aria-selected="false" tabindex="-1">
<span><img src="assets/images/p_6.jpeg" alt="">
</span>
Interior
</a>
<a class="nav-item nav-link" id="nav-menu2-tab" data-bs-toggle="tab" href="#nav-menu2" role="tab" aria-controls="nav-menu2" aria-selected="false" tabindex="-1">
<span><img src="assets/images/p_7.jpeg" alt="">
</span>
Exteriors
</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="service-outer service_img_1">
<div class="row align-items-center h-100 justify-content-end">
<div class="col-md-5">
<div class="ser_text">
<span>Our Services</span>
<h2>Kitchen Remodeling</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="common-btn white-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="service-outer service_img_2">
<div class="row align-items-center h-100 justify-content-end">
<div class="col-md-5">
<div class="ser_text">
<span>Our Services</span>
<h2>Bathroom Remodeling</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="common-btn white-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="service-outer service_img_3">
<div class="row align-items-center h-100 justify-content-end">
<div class="col-md-5">
<div class="ser_text">
<span>Our Services</span>
<h2>Basement Remodeling</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="common-btn white-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-menu" role="tabpanel" aria-labelledby="nav-menu-tab">
<div class="service-outer service_img_4">
<div class="row align-items-center h-100 justify-content-end">
<div class="col-md-5">
<div class="ser_text">
<span>Our Services</span>
<h2>Interior Remodeling</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="common-btn white-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-menu2" role="tabpanel" aria-labelledby="nav-menu2-tab">
<div class="service-outer service_img_5">
<div class="row align-items-center h-100 justify-content-end">
<div class="col-md-5">
<div class="ser_text">
<span>Our Services</span>
<h2>Exteriors Remodeling</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the industry's standard dummy text</p>
<a href="#" class="common-btn white-btn">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
