.png)
Get this most advanced complete blogging website with admin panel, analytics, cookies, recent posts, subscribe and many more all at nominal price
<?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: #ffeb3b;
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: #ffc107;
}
/* 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>Get the latest news, in-depth analysis, and trending stories—all in one place. Stay updated with what matters most!</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
// 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">All 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">
<?php if ($isNew) { ?>
<span class="new-badge">Latest</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"><small>By <?php echo htmlspecialchars($post['written_by']); ?> | <?php echo date("M d, Y", strtotime($post['created_on'])); ?></small></p>
<a href="view_post.php?id=<?php echo $post['id']; ?>" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<?php } ?>
</div>
</section>
<style>
/* Blog Posts Section Styling */
.blog-card {
border: none;
overflow: hidden;
transition: transform 0.3s ease-in-out;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
position: relative;
}
.blog-card:hover {
transform: scale(1.05);
}
.image-container {
position: relative;
}
.blog-card img {
height: 200px;
object-fit: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
width: 100%;
}
.card-body {
padding: 20px;
text-align: center;
}
.card-title {
font-size: 1.3rem;
font-weight: bold;
}
.card-text {
color: #555;
font-size: 0.9rem;
margin-bottom: 10px;
}
.btn-primary {
background-color: #ffeb3b;
border: none;
color: #000;
font-weight: bold;
padding: 10px 20px;
border-radius: 25px;
transition: 0.3s ease-in-out;
}
.btn-primary:hover {
background-color: #ffc107;
}
/* New Badge Styling */
.new-badge {
position: absolute;
top: 10px;
left: 10px;
background: rgba(255, 255, 255, 0.3);
color: #ff0000;
font-weight: bold;
font-size: 14px;
padding: 5px 10px;
border-radius: 10px;
backdrop-filter: blur(5px);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
animation: glow 1.5s infinite alternate;
}
@keyframes glow {
0% {
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}
}
</style>
<?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>
.png)
.png)
.png)
.png)