Fix service section file inclusion and update services layout for better presentation
This commit is contained in:
Gary
parent
848c7c19b4
commit
6d432b5d2b
@ -8,7 +8,7 @@ include_once $URLcorrection . "includes/nav.php";
|
||||
include_once $URLcorrection . "includes/index-hero.php";
|
||||
include_once $URLsorrection . "sections/about-us.php";
|
||||
include_once $URLcorrection . "sections/counter.php";
|
||||
include_once $URLcorrection . "sections/services-2.php";
|
||||
include_once $URLcorrection . "sections/services.php";
|
||||
include_once $URLcorrection . "sections/projectsphp";
|
||||
include_once $URLcorrection . "sections/reviews.php";
|
||||
include_once $URLcorrection . "includes/footer.php";
|
||||
|
||||
@ -1,140 +1,152 @@
|
||||
<section class="ftco-section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<div class="col-md-8 text-center heading-section ftco-animate">
|
||||
<h2 class="mb-4">Our Best Services</h2>
|
||||
<div class="row justify-content-center pb-5 mb-3">
|
||||
<div class="col-md-7 heading-section text-center ftco-animate">
|
||||
<span class="subheading">The Roofing Specialists</span>
|
||||
<h2>Our Services</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-9">
|
||||
<div class="row tabulation mt-4 ftco-animate">
|
||||
<div class="col-md-4">
|
||||
<ul class="nav nav-pills nav-fill d-md-flex d-block flex-column">
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link active py-4" data-toggle="tab" href="#services-1"><span class="flaticon-roof mr-2"></span> UPVC Rooflines</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link py-4" data-toggle="tab" href="#services-2"><span class="flaticon-roof-1 mr-2"></span> Fascias</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link py-4" data-toggle="tab" href="#services-3"><span class="flaticon-roof-5 mr-2"></span> Soffits</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link py-4" data-toggle="tab" href="#services-4"><span class="flaticon-roof-2 mr-2"></span> Guttering</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link py-4" data-toggle="tab" href="#services-5"><span class="flaticon-roof-3 mr-2"></span> Roof Repairs</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-6"><span class="flaticon-roof-4 mr-2"></span> Ridges Pointed</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-7"><span class="flaticon-roof-4 mr-2"></span> Valleys Repointed</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-8"><span class="flaticon-roof-4 mr-2"></span> Gutter Cleaning</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-9"><span class="flaticon-roof-4 mr-2"></span> Leaks Repaired</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-10"><span class="flaticon-roof-4 mr-2"></span> Flat Roof</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-11"><span class="flaticon-roof-4 mr-2"></span> New Roof</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-12"><span class="flaticon-roof-4 mr-2"></span> Re-Roofs</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-13"><span class="flaticon-roof-4 mr-2"></span> Roof Cleaning</a>
|
||||
</li>
|
||||
<li class="nav-item text-left">
|
||||
<a class="nav-link border-bottom py-4" data-toggle="tab" href="#services-14"><span class="flaticon-roof-4 mr-2"></span> Moss Removal</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="col-md-4 services ftco-animate">
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-window-minimize"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">UPVC Roofline</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-circle"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Fascias</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-trowel-bricks"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Valleys Repointed</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-window-minimize"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Flat Roof</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-soap"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Roof Cleaning</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8 pl-md-4">
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane container p-0 active" id="services-1">
|
||||
<h3><a href="#">Skylights</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="tab-pane container p-0 fade" id="services-2">
|
||||
<h3><a href="#">Waterproofing</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
<div class="col-md-4 services ftco-animate">
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-square-minus"></i></span>
|
||||
</div>
|
||||
<div class="tab-pane container p-0 fade" id="services-3">
|
||||
<h3><a href="#">Industrial Roofing</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Soffits</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
<div class="tab-pane container p-0 fade" id="services-4">
|
||||
<h3><a href="#">Residential Roofing</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-pane container p-0 fade" id="services-5">
|
||||
<h3><a href="#">Gutter Cleaning</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-water"></i></span>
|
||||
</div>
|
||||
<div class="tab-pane container p-0 fade" id="services-6">
|
||||
<h3><a href="#">Commercial Roofing</a></h3>
|
||||
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
|
||||
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
|
||||
<ul>
|
||||
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li>
|
||||
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li>
|
||||
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li>
|
||||
<li><span class="fa fa-check"></span>She packed her seven versalia</li>
|
||||
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li>
|
||||
</ul>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Guttering</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-soap"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Gutter Cleaning</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-people-roof"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">New Roof</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-eraser"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Moss Removal</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 services ftco-animate">
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-hammer"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Roof Repairs</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 d-flex align-items-stretch">
|
||||
<div class="img" style="background-image: url(images/about.jpg);"></div>
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-trowel-bricks"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Ridges Pointed</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-droplet"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Leaks Repaired</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="d-block d-flex">
|
||||
<div class="icon d-flex justify-content-center align-items-center">
|
||||
<span><i class="fa-solid fa-people-roof"></i></span>
|
||||
</div>
|
||||
<div class="media-body pl-3">
|
||||
<h3 class="heading">Re-Roofs</h3>
|
||||
<p><a href="#" class="btn-custom">Read more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user