Fix service section file inclusion and update services layout for better presentation

This commit is contained in:
Gary 2025-05-08 09:54:36 +01:00
parent 848c7c19b4
commit 6d432b5d2b
2 changed files with 147 additions and 135 deletions

View File

@ -8,7 +8,7 @@ include_once $URLcorrection . "includes/nav.php";
include_once $URLcorrection . "includes/index-hero.php"; include_once $URLcorrection . "includes/index-hero.php";
include_once $URLsorrection . "sections/about-us.php"; include_once $URLsorrection . "sections/about-us.php";
include_once $URLcorrection . "sections/counter.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/projectsphp";
include_once $URLcorrection . "sections/reviews.php"; include_once $URLcorrection . "sections/reviews.php";
include_once $URLcorrection . "includes/footer.php"; include_once $URLcorrection . "includes/footer.php";

View File

@ -1,140 +1,152 @@
<section class="ftco-section"> <section class="ftco-section">
<div class="container"> <div class="container">
<div class="row justify-content-center mb-5"> <div class="row justify-content-center pb-5 mb-3">
<div class="col-md-8 text-center heading-section ftco-animate"> <div class="col-md-7 heading-section text-center ftco-animate">
<h2 class="mb-4">Our Best Services</h2> <span class="subheading">The Roofing Specialists</span>
<h2>Our Services</h2>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-lg-9"> <div class="col-md-4 services ftco-animate">
<div class="row tabulation mt-4 ftco-animate"> <div class="d-block d-flex">
<div class="col-md-4"> <div class="icon d-flex justify-content-center align-items-center">
<ul class="nav nav-pills nav-fill d-md-flex d-block flex-column"> <span><i class="fa-solid fa-window-minimize"></i></span>
<li class="nav-item text-left"> </div>
<a class="nav-link active py-4" data-toggle="tab" href="#services-1"><span class="flaticon-roof mr-2"></span> UPVC Rooflines</a> <div class="media-body pl-3">
</li> <h3 class="heading">UPVC Roofline</h3>
<li class="nav-item text-left"> <p><a href="#" class="btn-custom">Read more</a></p>
<a class="nav-link py-4" data-toggle="tab" href="#services-2"><span class="flaticon-roof-1 mr-2"></span> Fascias</a> </div>
</li> </div>
<li class="nav-item text-left"> <div class="d-block d-flex">
<a class="nav-link py-4" data-toggle="tab" href="#services-3"><span class="flaticon-roof-5 mr-2"></span> Soffits</a> <div class="icon d-flex justify-content-center align-items-center">
</li> <span><i class="fa-solid fa-circle"></i></span>
<li class="nav-item text-left"> </div>
<a class="nav-link py-4" data-toggle="tab" href="#services-4"><span class="flaticon-roof-2 mr-2"></span> Guttering</a> <div class="media-body pl-3">
</li> <h3 class="heading">Fascias</h3>
<li class="nav-item text-left"> <p><a href="#" class="btn-custom">Read more</a></p>
<a class="nav-link py-4" data-toggle="tab" href="#services-5"><span class="flaticon-roof-3 mr-2"></span> Roof Repairs</a> </div>
</li> </div>
<li class="nav-item text-left"> <div class="d-block d-flex">
<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> <div class="icon d-flex justify-content-center align-items-center">
</li> <span><i class="fa-solid fa-trowel-bricks"></i></span>
<li class="nav-item text-left"> </div>
<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> <div class="media-body pl-3">
</li> <h3 class="heading">Valleys Repointed</h3>
<li class="nav-item text-left"> <p><a href="#" class="btn-custom">Read more</a></p>
<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> </div>
</li> </div>
<li class="nav-item text-left"> <div class="d-block d-flex">
<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> <div class="icon d-flex justify-content-center align-items-center">
</li> <span><i class="fa-solid fa-window-minimize"></i></span>
<li class="nav-item text-left"> </div>
<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> <div class="media-body pl-3">
</li> <h3 class="heading">Flat Roof</h3>
<li class="nav-item text-left"> <p><a href="#" class="btn-custom">Read more</a></p>
<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> </div>
</li> </div>
<li class="nav-item text-left"> <div class="d-block d-flex">
<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> <div class="icon d-flex justify-content-center align-items-center">
</li> <span><i class="fa-solid fa-soap"></i></span>
<li class="nav-item text-left"> </div>
<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> <div class="media-body pl-3">
</li> <h3 class="heading">Roof Cleaning</h3>
<li class="nav-item text-left"> <p><a href="#" class="btn-custom">Read more</a></p>
<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> </div>
</li>
</ul>
</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 didnt 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 didnt listen</li>
</ul>
</div> </div>
<div class="tab-pane container p-0 fade" id="services-2"> <div class="col-md-4 services ftco-animate">
<h3><a href="#">Waterproofing</a></h3> <div class="d-block d-flex">
<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> <div class="icon d-flex justify-content-center align-items-center">
<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 didnt listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> <span><i class="fa-solid fa-square-minus"></i></span>
<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 didnt listen</li>
</ul>
</div> </div>
<div class="tab-pane container p-0 fade" id="services-3"> <div class="media-body pl-3">
<h3><a href="#">Industrial Roofing</a></h3> <h3 class="heading">Soffits</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><a href="#" class="btn-custom">Read more</a></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 didnt 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 didnt listen</li>
</ul>
</div> </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 didnt 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 didnt listen</li>
</ul>
</div> </div>
<div class="tab-pane container p-0 fade" id="services-5"> <div class="d-block d-flex">
<h3><a href="#">Gutter Cleaning</a></h3> <div class="icon d-flex justify-content-center align-items-center">
<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> <span><i class="fa-solid fa-water"></i></span>
<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 didnt 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 didnt listen</li>
</ul>
</div> </div>
<div class="tab-pane container p-0 fade" id="services-6"> <div class="media-body pl-3">
<h3><a href="#">Commercial Roofing</a></h3> <h3 class="heading">Guttering</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><a href="#" class="btn-custom">Read more</a></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 didnt listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p> </div>
<ul> </div>
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> <div class="d-block d-flex">
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> <div class="icon d-flex justify-content-center align-items-center">
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> <span><i class="fa-solid fa-soap"></i></span>
<li><span class="fa fa-check"></span>She packed her seven versalia</li> </div>
<li><span class="fa fa-check"></span>Little Blind Text didnt listen</li> <div class="media-body pl-3">
</ul> <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>
</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> </div>
<div class="col-lg-3 d-flex align-items-stretch"> <div class="d-block d-flex">
<div class="img" style="background-image: url(images/about.jpg);"></div> <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> </div>
</div> </div>