Tabs
Horizontal Tab Style 1
- Design and Planting
- Lawn and Garden Care
- Stone and Hard Scaping
- Spring and Fall Cleanup
- Lawn Moving
Design and Planting
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.
- Available 24/7
- Dedicated support
- Environmentally friendly
- Professional team
Lawn and Garden Care
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.
- Available 24/7
- Dedicated support
- Environmentally friendly
- Professional team
Stone and Hard Scaping
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.
- Available 24/7
- Dedicated support
- Environmentally friendly
- Professional team
Spring and Fall Cleanup
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.
- Available 24/7
- Dedicated support
- Environmentally friendly
- Professional team
Lawn Moving
Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.
- Available 24/7
- Dedicated support
- Environmentally friendly
- Professional team
<div class="horizontaltab tab-style1">
<ul class="resp-tabs-list hor_1 wow fadeIn" data-wow-delay="100ms">
<li class="tab1"><i class="icon-edit"></i>Design and Planting</li>
<li class="tab2"><i class="icon-scissors"></i>Lawn and Garden Care</li>
<li class="tab3"><i class="icon-puzzle"></i>Stone and Hard Scaping</li>
<li class="tab4"><i class="icon-paintbrush"></i>Spring and Fall Cleanup</li>
<li class="tab5"><i class="icon-recycle"></i>Lawn Moving</li>
</ul>
<div class="resp-tabs-container hor_1 wow fadeIn" data-wow-delay="200ms">
<div class="first">
<div class="row">
<div class="col-lg-5 mb-1-9 mb-lg-0">
<img src="img/service/service-01.jpg" alt="...">
</div>
<div class="col-lg-7">
<div class="ps-lg-2-2 ps-xl-2-9">
<h3 class="h4 mb-3">Design and Planting</h3>
<p class="w-xl-85 mb-1-6 mb-lg-1-9">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.</p>
<ul class="list-style2">
<li><i class="fas fa-check"></i>Available 24/7</li>
<li><i class="fas fa-check"></i>Dedicated support</li>
<li><i class="fas fa-check"></i>Environmentally friendly</li>
<li><i class="fas fa-check"></i>Professional team</li>
</ul>
<a href="#!" class="butn small">Read more</a>
</div>
</div>
</div>
</div>
<div class="second">
<div class="row">
<div class="col-lg-5 mb-1-9 mb-lg-0">
<img src="img/service/service-02.jpg" alt="...">
</div>
<div class="col-lg-7">
<div class="ps-lg-2-2 ps-xl-2-9">
<h3 class="h4 mb-3">Lawn and Garden Care</h3>
<p class="w-xl-85 mb-1-6 mb-lg-1-9">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.</p>
<ul class="list-style2">
<li><i class="fas fa-check"></i>Available 24/7</li>
<li><i class="fas fa-check"></i>Dedicated support</li>
<li><i class="fas fa-check"></i>Environmentally friendly</li>
<li><i class="fas fa-check"></i>Professional team</li>
</ul>
<a href="#!" class="butn small">Read more</a>
</div>
</div>
</div>
</div>
<div class="third">
<div class="row">
<div class="col-lg-5 mb-1-9 mb-lg-0">
<img src="img/service/service-03.jpg" alt="...">
</div>
<div class="col-lg-7">
<div class="ps-lg-2-2 ps-xl-2-9">
<h3 class="h4 mb-3">Stone and Hard Scaping</h3>
<p class="w-xl-85 mb-1-6 mb-lg-1-9">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.</p>
<ul class="list-style2">
<li><i class="fas fa-check"></i>Available 24/7</li>
<li><i class="fas fa-check"></i>Dedicated support</li>
<li><i class="fas fa-check"></i>Environmentally friendly</li>
<li><i class="fas fa-check"></i>Professional team</li>
</ul>
<a href="#!" class="butn small">Read more</a>
</div>
</div>
</div>
</div>
<div class="fourth">
<div class="row">
<div class="col-lg-5 mb-1-9 mb-lg-0">
<img src="img/service/service-04.jpg" alt="...">
</div>
<div class="col-lg-7">
<div class="ps-lg-2-2 ps-xl-2-9">
<h3 class="h4 mb-3">Spring and Fall Cleanup</h3>
<p class="w-xl-85 mb-1-6 mb-lg-1-9">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.</p>
<ul class="list-style2">
<li><i class="fas fa-check"></i>Available 24/7</li>
<li><i class="fas fa-check"></i>Dedicated support</li>
<li><i class="fas fa-check"></i>Environmentally friendly</li>
<li><i class="fas fa-check"></i>Professional team</li>
</ul>
<a href="#!" class="butn small">Read more</a>
</div>
</div>
</div>
</div>
<div class="fifth">
<div class="row">
<div class="col-lg-5 mb-1-9 mb-lg-0">
<img src="img/service/service-05.jpg" alt="...">
</div>
<div class="col-lg-7">
<div class="ps-lg-2-2 ps-xl-2-9">
<h3 class="h4 mb-3">Lawn Moving</h3>
<p class="w-xl-85 mb-1-6 mb-lg-1-9">Lorem ipsum dolor sit amet consectetur adipiscing elit do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam nostrud exercitation ullamco laboris.</p>
<ul class="list-style2">
<li><i class="fas fa-check"></i>Available 24/7</li>
<li><i class="fas fa-check"></i>Dedicated support</li>
<li><i class="fas fa-check"></i>Environmentally friendly</li>
<li><i class="fas fa-check"></i>Professional team</li>
</ul>
<a href="#!" class="butn small">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
Horizontal Tab Style 2
- Info
- Skills
- Education
Ann Black
GardenerLorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip commodo.
- Phone (+44) 123 456 7892
- Email info@webmail.com
- Website www.yoursite.com
- Address73 Canal street, UK
Ann Black Skills
10 years of experienceIt is a long established fact that is reader will be then distracted by the thing and readable content off page when looking at that page layout. It is a long fact that a readable content of page.
Watering Garden
70%
Garden Care
95%
Lawn Renovation
95%
Education
Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Harvard University
1997 - 2001Diploma in Horticulture
The first thing to remember about success is that it is a process nothing more.
Harvard University
2000 - 2004BE in Horticulture
The first thing to remember about success is that it is a process nothing more.
UK University
2004 - 2005PHD of Horticulture
The first thing to remember about success is that it is a process nothing more.
<div class="horizontaltab tab-style2 h-100 w-100">
<ul class="resp-tabs-list hor_1">
<li><span>Info</span></li>
<li><span>Skills</span></li>
<li><span>Education</span></li>
</ul>
<div class="resp-tabs-container hor_1">
<div>
<h2 class="h3">Ann Black</h2>
<span class="fs-5 d-block mb-3 text-muted">Gardener</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation nisi ut aliquip commodo.</p>
<div class="borders-bottom pb-4 mb-4 border-color-extra-light-gray">
<ul class="team-info">
<li><span>Phone</span> <a href="tel:1234567892">(+44) 123 456 7892</a></li>
<li><span>Email</span> <a href="mailto:info@webmail.com">info@webmail.com</a></li>
<li><span>Website</span> <a href="mailto:info@webmail.com">www.yoursite.com</a></li>
<li><span>Address</span>73 Canal street, UK</li>
</ul>
</div>
<ul class="social-box">
<li>
<a href="#!"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-youtube"></i></a>
</li>
<li>
<a href="#!"><i class="fab fa-linkedin-in"></i></a>
</li>
</ul>
</div>
<div>
<h2 class="h3">Ann Black Skills</h2>
<span class="fs-5 d-block mb-3 text-muted">10 years of experience </span>
<p>It is a long established fact that is reader will be then distracted by the thing and readable content off page when looking at that page layout. It is a long fact that a readable content of page.</p>
<div class="mb-4">
<div class="progress-text display-30 font-weight-600 mb-2">
<div class="row">
<div class="col-7">Watering Garden</div>
<div class="col-5 text-end">70%</div>
</div>
</div>
<div class="custom-progress progress progress-medium" style="height: 10px;border-radius: 0">
<div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" role="progressbar"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-text display-30 font-weight-600 mb-2">
<div class="row">
<div class="col-7">Garden Care</div>
<div class="col-5 text-end">95%</div>
</div>
</div>
<div class="custom-progress progress progress-medium" style="height: 10px;border-radius: 0">
<div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-text display-30 font-weight-600 mb-2">
<div class="row">
<div class="col-7">Lawn Renovation</div>
<div class="col-5 text-end">95%</div>
</div>
</div>
<div class="custom-progress progress progress-medium" style="height: 10px;border-radius: 0">
<div class="animated custom-bar progress-bar slideInLeft bg-primary" style="width: 95%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar"></div>
</div>
</div>
</div>
<div>
<h2 class="h3 mb-3">Education</h2>
<p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="vertical-timeline">
<div class="d-block d-sm-flex justify-content-between mb-1-9">
<div class="left-side">
<h4 class="h5 lh-base">Harvard University</h4>
<span class="text-primary">1997 - 2001</span>
</div>
<div class="right-side">
<h4 class="h5 lh-base">Diploma in Horticulture</h4>
<p class="mb-0">The first thing to remember about success is that it is a process nothing more.</p>
</div>
</div>
<div class="d-block d-sm-flex justify-content-between mb-1-9">
<div class="left-side">
<h4 class="h5 lh-base">Harvard University</h4>
<span class="text-primary">2000 - 2004</span>
</div>
<div class="right-side">
<h4 class="h5 lh-base">BE in Horticulture</h4>
<p class="mb-0">The first thing to remember about success is that it is a process nothing more.</p>
</div>
</div>
<div class="d-block d-sm-flex justify-content-between">
<div class="left-side">
<h4 class="h5 lh-base">UK University</h4>
<span class="text-primary">2004 - 2005</span>
</div>
<div class="right-side">
<h4 class="h5 lh-base">PHD of Horticulture</h4>
<p class="mb-0">The first thing to remember about success is that it is a process nothing more.</p>
</div>
</div>
</div>
</div>
</div>
</div>