<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blog Grid Layout</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> body { background-color: #f8f9fa; } .blog-card { transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .blog-card img { height: 200px; object-fit: cover; } .featured-post img { height: 400px; object-fit: cover; } .badge-category { position: absolute; top: 15px; left: 15px; z-index: 1; } .card-img-wrapper { position: relative; overflow: hidden; } </style> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand" href="#"><i class="fas fa-blog me-2"></i>MyBlog</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="#">Categories</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 --> <header class="bg-primary text-white text-center py-5 mb-4"> <div class="container"> <h1 class="display-4 fw-bold">Welcome to Our Blog</h1> <p class="lead">Discover amazing stories and insights</p> </div> </header> <div class="container mb-5"> <!-- Featured Post --> <div class="row mb-4"> <div class="col-12"> <div class="card featured-post shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-danger badge-category">Featured</span> <img src="https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=800" class="card-img-top" alt="Featured post"> </div> <div class="card-body"> <h2 class="card-title">The Future of Web Development in 2025</h2> <p class="text-muted mb-3"> <i class="far fa-calendar me-2"></i>October 28, 2025 <i class="far fa-user ms-3 me-2"></i>Sarah Johnson </p> <p class="card-text">Explore the latest trends and technologies shaping the future of web development. From AI integration to progressive web apps, discover what's coming next in the digital landscape.</p> <a href="#" class="btn btn-primary">Read More <i class="fas fa-arrow-right ms-2"></i></a> </div> </div> </div> </div> <!-- Blog Grid --> <div class="row g-4"> <!-- Blog Post 1 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-success badge-category">Technology</span> <img src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">Getting Started with Bootstrap 5</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 25, 2025 </p> <p class="card-text flex-grow-1">Learn the fundamentals of Bootstrap 5 and how to create responsive websites quickly and efficiently.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> <!-- Blog Post 2 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-info badge-category">Design</span> <img src="https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">UI/UX Design Principles</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 23, 2025 </p> <p class="card-text flex-grow-1">Discover the essential principles of user interface and user experience design that make websites intuitive.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> <!-- Blog Post 3 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-warning text-dark badge-category">JavaScript</span> <img src="https://images.unsplash.com/photo-1579468118864-1b9ea3c0db4a?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">Modern JavaScript Features</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 20, 2025 </p> <p class="card-text flex-grow-1">Explore ES6+ features that will make your JavaScript code cleaner and more efficient than ever before.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> <!-- Blog Post 4 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-primary badge-category">CSS</span> <img src="https://images.unsplash.com/photo-1507721999472-8ed4421c4af2?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">CSS Grid vs Flexbox</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 18, 2025 </p> <p class="card-text flex-grow-1">Understanding when to use CSS Grid and when to use Flexbox for your layout needs.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> <!-- Blog Post 5 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-secondary badge-category">Tutorial</span> <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">Building REST APIs</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 15, 2025 </p> <p class="card-text flex-grow-1">A comprehensive guide to building scalable and secure REST APIs with best practices.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> <!-- Blog Post 6 --> <div class="col-md-6 col-lg-4"> <div class="card blog-card shadow-sm"> <div class="card-img-wrapper"> <span class="badge bg-dark badge-category">DevOps</span> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400" class="card-img-top" alt="Blog post"> </div> <div class="card-body d-flex flex-column"> <h5 class="card-title">Docker for Beginners</h5> <p class="text-muted small mb-3"> <i class="far fa-calendar me-2"></i>October 12, 2025 </p> <p class="card-text flex-grow-1">Get started with containerization and learn how Docker can simplify your development workflow.</p> <a href="#" class="btn btn-outline-primary btn-sm mt-auto">Read More</a> </div> </div> </div> </div> <!-- Pagination --> <nav aria-label="Blog pagination" class="mt-5"> <ul class="pagination justify-content-center"> <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1">Previous</a> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#">Next</a> </li> </ul> </nav> </div> <!-- Footer --> <footer class="bg-dark text-white text-center py-4 mt-5"> <div class="container"> <p class="mb-0">© 2025 MyBlog. All rights reserved.</p> <div class="mt-3"> <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a> <a href="#" class="text-white me-3"><i class="fab fa-facebook"></i></a> <a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a> <a href="#" class="text-white"><i class="fab fa-linkedin"></i></a> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Login to leave a comment
No comments yet. Be the first!
No comments yet. Be the first!