Acorn_Media/warmseal-roofing
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
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";

280
sections/services.php
View File

@ -1,141 +1,153 @@
<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> </div>
</ul>
</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>
<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 didn’t 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> </div>
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> <div class="media-body pl-3">
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> <h3 class="heading">Soffits</h3>
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> <p><a href="#" class="btn-custom">Read more</a></p>
<li><span class="fa fa-check"></span>She packed her seven versalia</li> </div>
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li> </div>
</ul> <div class="d-block d-flex">
</div> <div class="icon d-flex justify-content-center align-items-center">
<div class="tab-pane container p-0 fade" id="services-3"> <span><i class="fa-solid fa-water"></i></span>
<h3><a href="#">Industrial Roofing</a></h3> </div>
<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="media-body pl-3">
<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> <h3 class="heading">Guttering</h3>
<ul> <p><a href="#" class="btn-custom">Read more</a></p>
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> </div>
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> </div>
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> <div class="d-block d-flex">
<li><span class="fa fa-check"></span>She packed her seven versalia</li> <div class="icon d-flex justify-content-center align-items-center">
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li> <span><i class="fa-solid fa-soap"></i></span>
</ul> </div>
</div> <div class="media-body pl-3">
<div class="tab-pane container p-0 fade" id="services-4"> <h3 class="heading">Gutter Cleaning</h3>
<h3><a href="#">Residential Roofing</a></h3> <p><a href="#" class="btn-custom">Read more</a></p>
<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>
<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> </div>
<ul> <div class="d-block d-flex">
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> <div class="icon d-flex justify-content-center align-items-center">
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> <span><i class="fa-solid fa-people-roof"></i></span>
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> </div>
<li><span class="fa fa-check"></span>She packed her seven versalia</li> <div class="media-body pl-3">
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li> <h3 class="heading">New Roof</h3>
</ul> <p><a href="#" class="btn-custom">Read more</a></p>
</div> </div>
<div class="tab-pane container p-0 fade" id="services-5"> </div>
<h3><a href="#">Gutter Cleaning</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 didn’t 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-eraser"></i></span>
<ul> </div>
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> <div class="media-body pl-3">
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> <h3 class="heading">Moss Removal</h3>
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> <p><a href="#" class="btn-custom">Read more</a></p>
<li><span class="fa fa-check"></span>She packed her seven versalia</li> </div>
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li> </div>
</ul> </div>
</div>
<div class="tab-pane container p-0 fade" id="services-6"> <div class="col-md-4 services ftco-animate">
<h3><a href="#">Commercial Roofing</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 didn’t 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-hammer"></i></span>
<ul> </div>
<li><span class="fa fa-check"></span>The Big Oxmox advised her not to do so</li> <div class="media-body pl-3">
<li><span class="fa fa-check"></span>Far far away, behind the word mountains</li> <h3 class="heading">Roof Repairs</h3>
<li><span class="fa fa-check"></span>Separated they live in Bookmarksgrove</li> <p><a href="#" class="btn-custom">Read more</a></p>
<li><span class="fa fa-check"></span>She packed her seven versalia</li> </div>
<li><span class="fa fa-check"></span>Little Blind Text didn’t listen</li> </div>
</ul> <div class="d-block d-flex">
</div> <div class="icon d-flex justify-content-center align-items-center">
</div> <span><i class="fa-solid fa-trowel-bricks"></i></span>
</div> </div>
</div> <div class="media-body pl-3">
</div> <h3 class="heading">Ridges Pointed</h3>
<div class="col-lg-3 d-flex align-items-stretch"> <p><a href="#" class="btn-custom">Read more</a></p>
<div class="img" style="background-image: url(images/about.jpg);"></div> </div>
</div> </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>
</section> </section>