120 lines
5.6 KiB
PHP
120 lines
5.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<title>1</title>
|
|
<meta name="description" content="Built with Flatlogic Generator">
|
|
<meta name="keywords" content="clean blog, articles, updates, modern blog, web development, PHP, Bootstrap, Flatlogic">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="1">
|
|
<meta property="og:description" content="Built with Flatlogic Generator">
|
|
<meta property="og:image" content="">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:image" content="">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
|
|
|
|
<!-- Stylesheets -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
</head>
|
|
<body>
|
|
|
|
<?php
|
|
// Hardcoded post data as a substitute for a database
|
|
$posts = [
|
|
[
|
|
"id" => 1,
|
|
"title" => "The Future of Web Development",
|
|
"excerpt" => "Exploring the latest trends and technologies shaping the web. From AI-powered tools to the rise of serverless architectures...",
|
|
"image" => "https://picsum.photos/seed/tech/800/600",
|
|
"alt" => "Abstract technology background",
|
|
"category" => "Technology",
|
|
"date" => "September 29, 2025"
|
|
],
|
|
[
|
|
"id" => 2,
|
|
"title" => "A Guide to Mindful Productivity",
|
|
"excerpt" => "In a world of constant distractions, learn how to focus your energy, manage your time, and achieve your goals with less stress.",
|
|
"image" => "https://picsum.photos/seed/writing/800/600",
|
|
"alt" => "A person writing in a notebook",
|
|
"category" => "Productivity",
|
|
"date" => "September 25, 2025"
|
|
],
|
|
[
|
|
"id" => 3,
|
|
"title" => "Exploring Urban Landscapes",
|
|
"excerpt" => "A photographic journey through the architectural marvels and hidden gems of the world's most vibrant cities.",
|
|
"image" => "https://picsum.photos/seed/city/800/600",
|
|
"alt" => "Cityscape at dusk",
|
|
"category" => "Travel",
|
|
"date" => "September 22, 2025"
|
|
]
|
|
];
|
|
?>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">1</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="hero">
|
|
<div class="container">
|
|
<h1>A Clean Blog for Your Ideas</h1>
|
|
<p class="lead">Publish updates and articles with a focus on readability and style.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mt-5 mb-5">
|
|
<div class="row g-4">
|
|
<?php foreach ($posts as $post): ?>
|
|
<div class="col-lg-4 col-md-6">
|
|
<div class="card blog-card h-100">
|
|
<img src="<?php echo htmlspecialchars($post['image']); ?>" class="card-img-top" alt="<?php echo htmlspecialchars($post['alt']); ?>">
|
|
<div class="card-body d-flex flex-column">
|
|
<div class="post-meta">
|
|
<span><?php echo htmlspecialchars($post['category']); ?></span> • <span><?php echo htmlspecialchars($post['date']); ?></span>
|
|
</div>
|
|
<h5 class="card-title"><?php echo htmlspecialchars($post['title']); ?></h5>
|
|
<p class="card-text flex-grow-1"><?php echo htmlspecialchars($post['excerpt']); ?></p>
|
|
<a href="post.php?id=<?php echo $post['id']; ?>" class="btn btn-primary align-self-start">Read More</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date("Y"); ?> 1. All Rights Reserved.</p>
|
|
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|