/home/websdxuk/www/web-offer/header.php
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php echo $pageTitle; ?>
</title>
<meta name="description" content="<?php echo $description; ?>" />
<meta name="author" content="<?php echo $author; ?>" />
<meta name="keywords" content="<?php echo $keywords; ?>" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/fancybox.css">
<link rel="stylesheet" type="text/css" href="css/slick.css">
<link rel="stylesheet" type="text/css" href="css/slick-theme.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon.webp">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap"
rel="stylesheet">
</head>
<body>
<!-- ------------- -->
<style>
.navbar {
transition: all 0.3s ease;
width: 100%;
}
.navbar.sticky {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: white; /* Change to your preferred sticky background */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional shadow effect */
animation: slideDown 0.3s ease-out;
z-index: 99999999;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.navbar-brand {
float: left;
padding: 10px 0px 10px 0;
}
:root {
--primary-color: #ec0000;
--secondary-color: #2c3e50;
--accent-color: #27ae60;
--white: #ffffff;
}
/* Urgency Banner */
.urgency-banner {
background: var(--accent-color);
color: var(--white);
text-align: center;
padding: 8px 0;
font-size: 14px;
}
/* Header Top Bar */
.header-top {
background: var(--secondary-color);
color: var(--white);
padding: 8px 0;
font-size: 14px;
}
.contact-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.contact-item {
display: flex;
align-items: center;
margin-right: 15px;
}
.contact-item i {
margin-right: 8px;
}
.contact-item a {
color: var(--white);
text-decoration: none;
}
/* Main Navigation */
.navbar {
background: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
margin-bottom: 0;
position: sticky;
top: 0;
z-index: 1020;
}
.navbar.scrolled {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Call Now Button (Animated) */
.call-now-btn {
background: var(--primary-color);
color: var(--white);
padding: 10px 20px;
border: none;
border-radius: 25px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
animation: pulse 0.5s infinite;
box-shadow: 0 4px 12px rgba(236, 0, 0, 0.3);
transition: all 0.3s ease;
text-indent: 6px;
}
.call-now-btn:hover {
background: #c40000;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(236, 0, 0, 0.4);
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
/* Floating CTA (Mobile Only) */
.floating-cta {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 999;
display: none;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.urgency-banner,
.header-top {
font-size: 12px;
}
}
@media (max-width: 576px) {
.contact-item {
margin: 3px 5px;
}
}
</style>
</head>
<body>
<!-- Urgency Banner -->
<div class="urgency-banner">
<div class="container">
<i class="fa fa-clock mr-2"></i> LIMITED TIME OFFER: 70% OFF - CALL NOW!
</div>
</div>
<!-- Header Top Bar -->
<div class="header-top">
<div class="container">
<div class="contact-info">
<div class="contact-item">
<i class="fa fa-phone"></i>
<a href="tel:+17372044979">+1 (737) 204-4979</a>
</div>
<div class="contact-item">
<i class="fa fa-envelope"></i>
<a href="mailto:support@websitebuildersofficial.com">Email Us</a>
</div>
</div>
</div>
</div>
<!-- Main Navigation -->
<nav class="navbar navbar-expand-lg m-0">
<div class="container">
<div class="d-flex justify-content-between w-100 align-items-center">
<!-- Logo (Left) -->
<div>
<a class="navbar-brand m-0" href="#">
<img src="./images/logo.svg" alt="Website Builders Official" height="40">
</a>
</div>
<!-- Call Button (Right) -->
<div class="text-end">
<a href="tel:+17372044979" class="call-now-btn">
<i class="fa fa-phone mr-2"></i> CALL NOW
</a>
</div>
</div>
</div>
</nav>
<!-- Floating CTA (Mobile) -->
<div class="floating-cta">
<a href="tel:+17372044979" class="call-now-btn">
<i class="fa fa-phone"></i> CALL NOW
</a>
</div>
<!-- jQuery + Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
// Floating CTA for mobile
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).width() < 992) {
if ($(this).scrollTop() > 200) {
$('.floating-cta').fadeIn(300);
} else {
$('.floating-cta').fadeOut(300);
}
}
});
});
</script>
XML-RPC server accepts POST requests only.