made visual changes
This commit is contained in:
Gary
parent
469d437d76
commit
bc1217fe08
125
css/style.css
125
css/style.css
@ -10638,3 +10638,128 @@ textarea.form-control {
|
|||||||
.white-text {
|
.white-text {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Branding Color */
|
||||||
|
.text-orange { color: #ff6600; }
|
||||||
|
|
||||||
|
.header-middle {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Control the Logo Size */
|
||||||
|
.logo-img {
|
||||||
|
max-height: 70px; /* Adjust this to make the gap smaller or larger */
|
||||||
|
width: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make the icons look more premium to match the logo */
|
||||||
|
.icon-circle {
|
||||||
|
width: 45px;
|
||||||
|
height: 45px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ff6600;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Styling the logo text specifically */
|
||||||
|
.logo-text span {
|
||||||
|
line-height: 1.2;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #333;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-text small {
|
||||||
|
line-height: 1;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Remove the gap from the logo section */
|
||||||
|
.header-middle {
|
||||||
|
padding-bottom: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ftco-navbar {
|
||||||
|
position: relative !important;
|
||||||
|
/* This slides the bar UP by exactly half its own height */
|
||||||
|
transform: translateY(-240%) !important;
|
||||||
|
z-index: 1000 !important;
|
||||||
|
/* These ensure no other code is dragging the hero image up */
|
||||||
|
margin-top: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. Mobile View (Phones and Tablets) */
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#ftco-navbar {
|
||||||
|
position: relative !important;
|
||||||
|
transform: translateY(0) !important; /* Resets the jump so it sits naturally */
|
||||||
|
margin-top: 0 !important;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
top: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Optional: Add a little space above the menu on mobile so it doesn't touch the logo */
|
||||||
|
.header-middle {
|
||||||
|
padding-bottom: 15px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-custom {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 20px; /* Pushes the button away from the paragraph */
|
||||||
|
padding: 15px 20px;
|
||||||
|
background: #01081f; /* Your Navy Color */
|
||||||
|
color: #fff !important;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%; /* Makes buttons uniform width */
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-custom:hover {
|
||||||
|
color: #01081f !important; /* Navy */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 1. Force the container to be a Flexbox and match heights */
|
||||||
|
.services-wrap {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
background: #fff !important;
|
||||||
|
height: 100% !important;
|
||||||
|
min-height: 480px !important; /* Adjust this number to make boxes taller/shorter */
|
||||||
|
margin-bottom: 60px !important;
|
||||||
|
position: relative !important;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
padding-bottom: 50px !important; /* Adds space at the bottom for the button */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 2. Force the text area to expand and fill the box */
|
||||||
|
.services-wrap .text {
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
flex: 1 0 auto !important; /* Forces this area to grow and push the button down */
|
||||||
|
padding: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 3. Force the button to the absolute bottom */
|
||||||
|
.services-wrap .btn-custom {
|
||||||
|
margin-top: auto !important; /* This ONLY works if the parent is flex */
|
||||||
|
margin-bottom: 10px !important;
|
||||||
|
display: block !important;
|
||||||
|
width: 100% !important;
|
||||||
|
background: #01081f !important;
|
||||||
|
color: #fff !important;
|
||||||
|
padding: 15px !important;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
BIN
images/North-East-Loft-Boarding-Logo.png
Normal file
BIN
images/North-East-Loft-Boarding-Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
@ -48,30 +48,38 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pt-4 pb-5">
|
<div class="header-middle pt-2 pb-4">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row d-flex align-items-start align-items-center px-3 px-md-0">
|
<div class="row d-flex align-items-center">
|
||||||
<div class="col-md-4 d-flex mb-2 mb-md-0">
|
<div class="col-md-4 d-flex mb-2 mb-md-0">
|
||||||
<a class="navbar-brand d-flex align-items-center" href="index.html">
|
<a class="navbar-brand d-flex align-items-center" href="index.php">
|
||||||
<span class="flaticon flaticon-crane"></span>
|
<div class="logo-wrapper">
|
||||||
<span class="ml-2">North East <small>Loft Boarding</small></span>
|
<img src="<?= $URLcorrection ?>images/North-East-Loft-Boarding-Logo.png" class="logo-img" alt="NE Loft Boarding">
|
||||||
|
</div>
|
||||||
|
<div class="logo-text ml-2">
|
||||||
|
<span class="d-block font-weight-bold">North East</span>
|
||||||
|
<small class="d-block text-orange">Loft Boarding</small>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 d-flex topper mb-md-0 mb-2 align-items-center">
|
<div class="col-md-4 d-flex topper mb-md-0 mb-2 align-items-center">
|
||||||
<div class="icon d-flex justify-content-center align-items-center">
|
<div class="icon-circle mr-3">
|
||||||
<span class="fa fa-map"></span>
|
<span class="fa fa-phone"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="pr-md-4 pl-md-3 pl-3 text">
|
<div class="text">
|
||||||
<p class="con"><span>Free Call</span><span> 0191 3561008</span></p>
|
<p class="mb-0"><span>Free Call:</span> <strong>0191 3561008</strong></p>
|
||||||
<p class="con">Call Us Now</p>
|
<p class="mb-0 small text-muted">Call Us Now</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-4 d-flex topper mb-md-0 align-items-center">
|
<div class="col-md-4 d-flex topper mb-md-0 align-items-center">
|
||||||
<div class="icon d-flex justify-content-center align-items-center"><span class="fa fa-paper-plane"></span>
|
<div class="icon-circle mr-3">
|
||||||
|
<span class="fa fa-map-marker-alt"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text pl-3 pl-md-3">
|
<div class="text">
|
||||||
<p class="hr"><span>Our Location</span></p>
|
<p class="mb-0"><span>Our Location:</span></p>
|
||||||
<p class="con">Unit 4a Fishburn Industrial Estate, Stockton -on -tee's, TS214AJ</p>
|
<p class="mb-0 small text-muted">Stockton-on-Tees, TS21 4AJ</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,7 +98,6 @@
|
|||||||
<li class="nav-item"><a href="<?= $URLcorrection ?>projects.php" class="nav-link">Projects</a></li>
|
<li class="nav-item"><a href="<?= $URLcorrection ?>projects.php" class="nav-link">Projects</a></li>
|
||||||
<li class="nav-item"><a href="<?= $URLcorrection ?>contact.php" class="nav-link">Contact</a></li>
|
<li class="nav-item"><a href="<?= $URLcorrection ?>contact.php" class="nav-link">Contact</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<a href="<?= $URLcorrection ?>contact.php" class="btn-custom">Arrange a free quote</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -54,7 +54,6 @@ include_once 'sections/discount.php';
|
|||||||
include_once 'sections/services.php';
|
include_once 'sections/services.php';
|
||||||
include_once 'sections/counter.php';
|
include_once 'sections/counter.php';
|
||||||
include_once 'sections/projects.php';
|
include_once 'sections/projects.php';
|
||||||
include_once 'sections/reviews.php';
|
|
||||||
|
|
||||||
?>
|
?>
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/boarding.jpg);"></div>
|
<div class="img" style="background-image: url(images/boarding.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -18,7 +18,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/ladder_new.jpg);"></div>
|
<div class="img" style="background-image: url(images/ladder_new.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -29,7 +29,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/wooden-hatch.jpg);"></div>
|
<div class="img" style="background-image: url(images/wooden-hatch.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -42,7 +42,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/lighting.jpg);"></div>
|
<div class="img" style="background-image: url(images/lighting.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -53,7 +53,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/insulation-1.jpg);"></div>
|
<div class="img" style="background-image: url(images/insulation-1.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4">
|
<div class="col-md-4 padding-bottom-20">
|
||||||
<div class="services-wrap ftco-animate">
|
<div class="services-wrap ftco-animate">
|
||||||
<div class="img" style="background-image: url(images/roofliner.jpg);"></div>
|
<div class="img" style="background-image: url(images/roofliner.jpg);"></div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
@ -78,3 +78,65 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section class="padding-bottom-50 padding-top-50" style="background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); position: relative;">
|
||||||
|
<div class="container" style="position: relative; z-index: 2;">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-8 col-md-12 mx-auto text-center text-white">
|
||||||
|
<h2 style="color: white; margin-bottom: 20px; font-size: 2.5rem;">Transform Your Loft Today</h2>
|
||||||
|
<p style="font-size: 20px; margin-bottom: 30px; opacity: 0.9;">Join thousands of satisfied customers across the UK with professional hatch solutions</p>
|
||||||
|
|
||||||
|
<div class="row mt-4 mb-4">
|
||||||
|
<div class="col-md-4 col-6 text-center mb-3">
|
||||||
|
<div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
|
||||||
|
<h4 class="white-text" style="margin: 0; font-weight: bold;">10000+</h4>
|
||||||
|
<small style="color: white; opacity: 0.8;">Jobs Completed</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-6 text-center mb-3">
|
||||||
|
<div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
|
||||||
|
<h4 class="white-text" style="margin: 0; font-weight: bold;">100%</h4>
|
||||||
|
<small style="color: white; opacity: 0.8;">NHBC Compliant</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-6 text-center mb-3">
|
||||||
|
<div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px;">
|
||||||
|
<h4 class="white-text" style="margin: 0; font-weight: bold;">10 Year</h4>
|
||||||
|
<small style="color: white; opacity: 0.8;">Product Warranty</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 mb-4">
|
||||||
|
<a href="<?= $URLcorrection ?>contact" class="btn customer-quote-button btn-lg mr-3" style="padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: 600; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
|
||||||
|
<i class="fas fa-calculator"></i> Get Free Quote & Survey
|
||||||
|
</a>
|
||||||
|
<a href="<?= $URLcorrection ?>pricing" class="btn btn-outline-light btn-lg" style="padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: 600; border: 2px solid white;">
|
||||||
|
<i class="fas fa-eye"></i> View Our Pricing
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: rgba(255,255,255,0.1); padding: 25px; border-radius: 15px; margin-top: 30px;">
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-md-3 col-6 mb-2">
|
||||||
|
<i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
|
||||||
|
<small style="color: white;">Free Survey</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-6 mb-2">
|
||||||
|
<i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
|
||||||
|
<small style="color: white;">Professional Installation</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-6 mb-2">
|
||||||
|
<i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
|
||||||
|
<small style="color: white;">Energy Efficient</small>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 col-6 mb-2">
|
||||||
|
<i class="fas fa-check-circle" style="color: #27ae60; margin-right: 8px;"></i>
|
||||||
|
<small style="color: white;">10-Year Warranty</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
Loading…
Reference in New Issue
Block a user