WhatsApp Floating Button

Code

            <?php
// Include database connection
include 'admin/db.php';

// Fetch the hero image from the database
$query = "SELECT image FROM hero LIMIT 1";
$result = mysqli_query($conn, $query);

// Check if a row is returned
if ($result && mysqli_num_rows($result) > 0) {
    $row = mysqli_fetch_assoc($result);
    $heroImage = 'admin/' . $row['image']; // Path correction
} else {
    $heroImage = 'admin/uploads/default-hero.jpg'; // Fallback image
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alexis - Home</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>



body {
    background-color: #f4f4f4!important;
}



        /* Hero Section Styling */
        .hero {
            position: relative;
            width: 100%;
            height: 90vh;
            background: url('<?php echo $heroImage; ?>') no-repeat center center/cover;
            background-attachment: fixed; /* Parallax effect */
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 20px;
            z-index: 1;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 2;
        }

        .hero-content {
            position: relative;
            z-index: 3;
            max-width: 800px;
        }

        .hero h1 {
            font-size: 3rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .hero .btn-primary {
            background-color: #ffffff;
            border: none;
            color: #000;
            font-weight: bold;
            padding: 12px 25px;
            border-radius: 30px;
            transition: 0.3s ease-in-out;
        }

        .hero .btn-primary:hover {
            background-color: #ffffff;
            color:#000000;
        }

        /* Smooth scrolling effect for the entire page */
        html {
            scroll-behavior: smooth;
        }
    </style>
</head>
<body>

<?php include 'header.php'; ?>

<!-- Hero Section -->
<section class="hero">
    <div class="hero-overlay"></div>
    <div class="hero-content">
        <h1>Welcome to <?php echo $site_name; ?></h1>
        <p>Your ultimate source for blogs on technology, lifestyle, health, and travel.</p>
        <a href="blog.php" class="btn btn-primary">Explore Now</a>
    </div>
</section>



<!-- section for category starts -->
<?php 
include 'category.php';
?>

<!-- section for category ends -->








<?php
// Include category_wise_posts section
include 'category_wise_posts.php';

?>

















<?php
// Include database connection
include 'admin/db.php';

// Fetch all blog posts from the database
$postsQuery = "SELECT id, title, image, content, written_by, created_on FROM posts ORDER BY created_on DESC";
$postsResult = mysqli_query($conn, $postsQuery);

// Get current date and calculate the date 7 days ago
$sevenDaysAgo = date("Y-m-d", strtotime("-7 days"));
?>

<!-- Blog Posts Section -->
<section class="container mt-5">
    <h2 class="text-center mb-4 blog-section-title">Latest Blog Posts</h2>

    <div class="row">
        <?php while ($post = mysqli_fetch_assoc($postsResult)) { 
            $isNew = strtotime($post['created_on']) >= strtotime($sevenDaysAgo);
        ?>
            <div class="col-md-4 mb-4">
                <div class="card blog-card">
                    <div class="image-container">
                        <img src="admin/<?php echo htmlspecialchars($post['image']); ?>" class="card-img-top" alt="Blog Image">
                        <div class="image-overlay"></div>
                        <?php if ($isNew) { ?>
                            <span class="new-badge">New</span>
                        <?php } ?>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title"> <?php echo htmlspecialchars($post['title']); ?> </h5>
                        <p class="card-text"> <?php echo substr(strip_tags($post['content']), 0, 100); ?>... </p>
                        <p class="text-muted post-meta">
                            <i class="fa fa-user"></i> <?php echo htmlspecialchars($post['written_by']); ?> | 
                            <i class="fa fa-calendar"></i> <?php echo date("M d, Y", strtotime($post['created_on'])); ?>
                        </p>
                        <a href="view_post.php?id=<?php echo $post['id']; ?>" class="btn btn-read-more">Read More</a>
                    </div>
                </div>
            </div>
        <?php } ?>
    </div>
</section>

<style>
/* Blog Section Title */
.blog-section-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 4px solid #ff5722;
    display: inline-block;
    padding-bottom: 10px;
}

/* Blog Card */
.blog-card {
    border: none;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    position: relative;
    background: #fff;
    opacity: 0;
    animation: fadeIn 0.8s ease-in-out forwards;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Image Container */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}

.image-container:hover img {
    transform: scale(1.1);
}

/* Gradient Overlay */
.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

/* "New" Badge */
.new-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(to right, #ff4081, #e91e63);
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 64, 129, 0.8);
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(255, 64, 129, 0.6); }
    100% { box-shadow: 0 0 15px rgba(255, 64, 129, 1); }
}

/* Card Content */
.card-body {
    padding: 20px;
    text-align: center;
}

.card-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #222;
    transition: color 0.3s ease-in-out;
}

.blog-card:hover .card-title {
    color: #ff5722;
}

.card-text {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

/* Author & Date */
.post-meta {
    font-size: 0.85rem;
    color: #888;
}

/* Read More Button */
.btn-read-more {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background: linear-gradient(to right, #ff5722, #e64a19);
    color: white;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 30px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.btn-read-more:hover {
    background: linear-gradient(to right, #e64a19, #d84315);
    transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-card img {
        height: 180px;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .btn-read-more {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}
</style>

<!-- FontAwesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">















<?php
include 'most_visited.php'; ?>







<!-- Subscribe Section -->
<section class="subscribe-section text-center py-5">
    <div class="container">
        <h2 class="mb-3">Stay Updated</h2>
        <p class="mb-4">Subscribe to get the latest updates directly in your inbox.</p>
        <form id="subscribeForm" action="subscribe.php" method="POST" class="d-flex justify-content-center">
            <input type="email" name="email" class="form-control email-input" placeholder="Enter your email" required>
            <button type="submit" class="btn subscribe-btn ms-2">Subscribe</button>
        </form>
        <div id="subscribeMessage" class="mt-3"></div>
    </div>
</section>

<style>
/* Subscribe Section Styling using footer's linear gradient colors */
.subscribe-section {
    background-color: #f4f4f4!important;
    /* background: linear-gradient(135deg, #1a237e, #3f51b5); */
    color: #000000;
    padding: 60px 0;
}

.subscribe-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.subscribe-section p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.email-input {
    width: 50%;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 50px;
    margin-right: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.email-input:focus {
    outline: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.subscribe-btn {
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    background-color: #ff6b6b;
    color: #fff;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.subscribe-btn:hover {
    background-color: #ff4757;
}
</style>


<!-- Subscribe Section ends-->








<script>
document.getElementById('subscribeForm').addEventListener('submit', function(e) {
    e.preventDefault(); // Prevent the form from submitting normally
    var form = this;
    var formData = new FormData(form);

    fetch(form.action, {
         method: 'POST',
         body: formData
    })
    .then(response => response.json())
    .then(data => {
         var messageDiv = document.getElementById('subscribeMessage');
         if (data.success) {
             messageDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
             form.reset();
         } else {
             messageDiv.innerHTML = '<div class="alert alert-warning">' + data.message + '</div>';
         }
         // Prevent form re-submission on page reload by removing any URL parameters.
         if (window.history.replaceState) {
             window.history.replaceState(null, null, window.location.pathname);
         }
    })
    .catch(error => {
         console.error('Error:', error);
    });
});
</script>














<?php
include 'footer.php'; ?>
<!-- Add JavaScript files for smooth scrolling and other features -->









</body>
</html>
Advanced blogging website with admin panel

Code

Check Out Our Related Products

Attractive ecommerce website with advanced admin panel

Advanced blogging website for news agencies with admin panel

Beautiful footer for all kinds of websites

Fully responsive and attractive header with beautiful toggle
