Viewing File: D:\INETPUB\VHOSTS\officespacebangalore.com\httpdocs\includes\site-footer.php
<footer class="site-footer">
<div class="container">
<!-- =====================================================
FOOTER MAIN
===================================================== -->
<div class="footer-main">
<!-- Brand / Intro -->
<div class="footer-brand">
<div class="footer-brand-mark">
<span>OB</span>
</div>
<div class="footer-brand-name">
OFFICE SPACE
<strong>BANGALORE</strong>
</div>
<p class="footer-intro">
Find the right office, commercial space or
property opportunity in Bangalore with clarity
and confidence.
</p>
<a
class="footer-cta"
href="<?= url('properties.php') ?>"
>
Explore properties
<span>↗</span>
</a>
</div>
<!-- Explore -->
<div class="footer-column">
<div class="footer-label">
EXPLORE
</div>
<h4>
Find your space
</h4>
<nav class="footer-links">
<a href="<?= url('properties.php') ?>">
All properties
<span>↗</span>
</a>
<a href="<?= url('properties.php?stype=rent') ?>">
Properties for rent
<span>↗</span>
</a>
<a href="<?= url('properties.php?stype=sale') ?>">
Properties for sale
<span>↗</span>
</a>
</nav>
</div>
<!-- Company -->
<div class="footer-column">
<div class="footer-label">
COMPANY
</div>
<h4>
Get to know us
</h4>
<nav class="footer-links">
<a href="<?= url('about.php') ?>">
About us
<span>↗</span>
</a>
<a href="<?= url('contact.php') ?>">
Contact us
<span>↗</span>
</a>
<a href="<?= url('contact.php?subject=List%20your%20property') ?>">
List your property
<span>↗</span>
</a>
</nav>
</div>
<!-- Contact -->
<div class="footer-contact">
<div class="footer-label">
REACH US
</div>
<h4>
Let's talk property.
</h4>
<div class="footer-contact-item">
<span class="footer-contact-icon">
⌖
</span>
<div>
<strong>
Office
</strong>
<span>
#51, 2nd Floor Above Linen Club,<br>
Infantry Road,<br>
(Opp Gulistan Shadi Mahal),<br>
Bangalore - 560001.
</span>
</div>
</div>
<a
class="footer-contact-item"
href="tel:+919341000005"
>
<span class="footer-contact-icon">
☎
</span>
<div>
<strong>
Call us
</strong>
<span>
+91-9341000005
</span>
</div>
</a>
<a
class="footer-contact-item"
href="mailto:info@officebangalore.com"
>
<span class="footer-contact-icon">
@
</span>
<div>
<strong>
Email us
</strong>
<span>
info@officebangalore.com
</span>
</div>
</a>
</div>
</div>
<!-- =====================================================
FOOTER HIGHLIGHT
===================================================== -->
<div class="footer-highlight">
<div>
<span>
LOOKING FOR OFFICE SPACE?
</span>
<strong>
Tell us what you need.
</strong>
</div>
<a
href="<?= url('contact.php') ?>"
>
Start an enquiry
<span>↗</span>
</a>
</div>
<!-- =====================================================
FOOTER BOTTOM
===================================================== -->
<div class="footer-bottom">
<span>
© <?= date('Y') ?>
<?= e(SITE_NAME) ?>.
All rights reserved.
</span>
<div class="footer-bottom-links">
<span>
Designed by
<a href="https://kblues.com">
KBLUES TECHNOLOGIES
</a>
</span>
</div>
</div>
</div>
</footer>
<script src="<?= url('assets/js/site.js') ?>"></script>
</body>
</html>
<style>
/* =========================================================
PREMIUM FOOTER
========================================================= */
.site-footer {
position: relative;
background: #111614;
color: #fff;
overflow: hidden;
}
.site-footer::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -300px;
right: -180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.035);
pointer-events: none;
}
.site-footer::after {
content: "";
position: absolute;
width: 380px;
height: 380px;
bottom: -260px;
left: -180px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.025);
pointer-events: none;
}
/* =========================================================
MAIN FOOTER
========================================================= */
.footer-main {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
1.5fr
0.8fr
0.8fr
1.35fr;
gap: 70px;
padding: 85px 0 65px;
}
/* =========================================================
BRAND
========================================================= */
.footer-brand-mark {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
}
.footer-brand-mark span {
opacity: 0.9;
}
.footer-brand-name {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1.4;
}
.footer-brand-name strong {
display: block;
margin-top: 2px;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.08em;
}
.footer-intro {
max-width: 340px;
margin: 22px 0 26px;
color: rgba(255, 255, 255, 0.58);
font-size: 14px;
line-height: 1.8;
}
.footer-cta {
display: inline-flex;
align-items: center;
gap: 12px;
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: gap 0.25s ease;
}
.footer-cta span {
font-size: 17px;
}
.footer-cta:hover {
gap: 17px;
}
/* =========================================================
FOOTER COLUMNS
========================================================= */
.footer-label {
margin-bottom: 12px;
color: rgba(255, 255, 255, 0.42);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
}
.footer-column h4,
.footer-contact h4 {
margin: 0 0 22px;
color: #fff;
font-size: 17px;
font-weight: 600;
}
/* =========================================================
LINKS
========================================================= */
.footer-links {
display: flex;
flex-direction: column;
gap: 14px;
}
.footer-links a {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 190px;
color: rgba(255, 255, 255, 0.62);
font-size: 13px;
line-height: 1.5;
text-decoration: none;
transition:
color 0.25s ease,
padding-left 0.25s ease;
}
.footer-links a span {
opacity: 0;
transform: translateX(-5px);
transition:
opacity 0.25s ease,
transform 0.25s ease;
}
.footer-links a:hover {
padding-left: 4px;
color: #fff;
}
.footer-links a:hover span {
opacity: 1;
transform: translateX(0);
}
/* =========================================================
CONTACT
========================================================= */
.footer-contact {
padding-left: 5px;
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 13px;
margin-bottom: 19px;
color: rgba(255, 255, 255, 0.62);
text-decoration: none;
}
.footer-contact-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
color: #fff;
font-size: 12px;
}
.footer-contact-item strong {
display: block;
margin-bottom: 4px;
color: rgba(255, 255, 255, 0.85);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.footer-contact-item span:not(.footer-contact-icon) {
display: block;
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
line-height: 1.65;
}
a.footer-contact-item:hover
.footer-contact-item span:not(.footer-contact-icon) {
color: #fff;
}
/* =========================================================
HIGHLIGHT CTA
========================================================= */
.footer-highlight {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 28px 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 4px;
background: rgba(255, 255, 255, 0.035);
}
.footer-highlight div {
display: flex;
align-items: baseline;
gap: 18px;
}
.footer-highlight div span {
color: rgba(255, 255, 255, 0.4);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
}
.footer-highlight div strong {
color: #fff;
font-size: 20px;
font-weight: 500;
}
.footer-highlight > a {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 18px;
background: #fff;
color: #111614;
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition:
background 0.25s ease,
color 0.25s ease,
gap 0.25s ease;
}
.footer-highlight > a span {
font-size: 16px;
}
.footer-highlight > a:hover {
gap: 16px;
background: #e9e9e4;
}
/* =========================================================
FOOTER BOTTOM
========================================================= */
.footer-bottom {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 55px;
padding: 22px 0 25px;
border-top: 1px solid rgba(255, 255, 255, 0.09);
color: rgba(255, 255, 255, 0.36);
font-size: 10px;
letter-spacing: 0.02em;
}
.footer-bottom-links {
display: flex;
align-items: center;
gap: 13px;
}
.footer-divider {
opacity: 0.4;
}
.footer-bottom a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-bottom a:hover {
color: #fff;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.footer-main {
grid-template-columns: 1.3fr 1fr 1fr;
gap: 45px;
}
.footer-contact {
grid-column: 1 / -1;
padding-left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.footer-contact .footer-label,
.footer-contact h4 {
grid-column: 1 / -1;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.footer-main {
grid-template-columns: 1fr;
gap: 42px;
padding: 60px 0 45px;
}
.footer-intro {
max-width: 100%;
}
.footer-contact {
display: block;
}
.footer-contact .footer-label {
margin-bottom: 12px;
}
.footer-highlight {
align-items: flex-start;
flex-direction: column;
padding: 24px;
}
.footer-highlight div {
display: block;
}
.footer-highlight div span {
display: block;
margin-bottom: 7px;
}
.footer-highlight div strong {
font-size: 18px;
}
.footer-highlight > a {
width: 100%;
justify-content: center;
}
.footer-bottom {
align-items: flex-start;
flex-direction: column;
gap: 13px;
margin-top: 40px;
}
.footer-bottom-links {
flex-wrap: wrap;
}
}
</style>
Back to Directory
File Manager