A complete blog layout with header, two-column layout (main content and sidebar), article cards, and footer. Ideal for blogs and content-heavy sites.
Thoughts, tutorials, and stories about web development
Learn how to build beautiful, responsive web applications with Focus UI. This comprehensive guide walks you through everything you need to know.
Read MoreExplore the power of CSS Grid and learn how to create complex, responsive layouts with ease.
Read MoreCopy this complete HTML to use the blog layout template. Perfect for personal blogs, company blogs, and content marketing sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog - Thoughts on Web Development</title>
<link rel="stylesheet" href="path/to/focus-ui.css">
</head>
<body>
<!-- Header -->
<header>
<nav class="focus-navbar focus-navbar-light" style="border-bottom: 1px solid var(--focus-color-border);">
<div class="focus-navbar-brand">
<a href="#" class="focus-text-bold focus-text-xl">My Blog</a>
</div>
<div class="focus-navbar-nav">
<a href="#" class="focus-nav-link">Home</a>
<a href="#" class="focus-nav-link">Categories</a>
<a href="#" class="focus-nav-link">About</a>
<a href="#" class="focus-nav-link">Contact</a>
<div class="focus-form-group focus-mb-0">
<input type="search" class="focus-input" placeholder="Search...">
</div>
</div>
</nav>
<!-- Hero Banner -->
<div class="focus-py-5" style="background: linear-gradient(135deg, rgba(var(--focus-color-primary-rgb), 0.1), rgba(var(--focus-color-secondary-rgb), 0.1));">
<div class="focus-container focus-text-center">
<h1 class="focus-text-4xl focus-text-bold focus-mb-3">Welcome to My Blog</h1>
<p class="focus-text-xl focus-text-secondary">Thoughts, tutorials, and stories about web development</p>
</div>
</div>
</header>
<!-- Main Content -->
<main class="focus-py-5">
<div class="focus-container">
<div class="focus-row">
<!-- Blog Posts -->
<div class="focus-col-12 focus-col-lg-8">
<!-- Post 1 -->
<article class="focus-card focus-mb-4">
<div class="focus-card-img-top" style="height: 250px; background: linear-gradient(135deg, var(--focus-color-primary), var(--focus-color-info)); display: flex; align-items: center; justify-content: center;">
<i class="fa fa-image" style="font-size: 4rem; color: white; opacity: 0.5;"></i>
</div>
<div class="focus-card-body">
<div class="focus-mb-2">
<span class="focus-badge focus-badge-primary">Web Development</span>
<span class="focus-badge focus-badge-secondary">Tutorial</span>
</div>
<h2 class="focus-card-title focus-mb-3">Getting Started with Focus UI</h2>
<div class="focus-flex focus-items-center focus-gap-3 focus-mb-3 focus-text-secondary focus-text-sm">
<span><i class="fa fa-user"></i> John Doe</span>
<span><i class="fa fa-calendar"></i> January 13, 2026</span>
<span><i class="fa fa-clock"></i> 5 min read</span>
</div>
<p class="focus-mb-3">
Learn how to build beautiful, responsive web applications with Focus UI.
This comprehensive guide will walk you through everything you need to know
to get started with this modern CSS framework.
</p>
<a href="#" class="focus-btn focus-btn-primary">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</article>
<!-- Post 2 -->
<article class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-mb-2">
<span class="focus-badge focus-badge-success">CSS</span>
<span class="focus-badge focus-badge-info">Design</span>
</div>
<h2 class="focus-card-title focus-mb-3">Modern CSS Grid Layouts</h2>
<div class="focus-flex focus-items-center focus-gap-3 focus-mb-3 focus-text-secondary focus-text-sm">
<span><i class="fa fa-user"></i> Jane Smith</span>
<span><i class="fa fa-calendar"></i> January 10, 2026</span>
<span><i class="fa fa-clock"></i> 8 min read</span>
</div>
<p class="focus-mb-3">
Explore the power of CSS Grid and learn how to create complex, responsive
layouts with ease. We'll cover best practices and real-world examples.
</p>
<a href="#" class="focus-btn focus-btn-primary">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</article>
<!-- Post 3 -->
<article class="focus-card focus-mb-4">
<div class="focus-card-body">
<div class="focus-mb-2">
<span class="focus-badge focus-badge-warning">JavaScript</span>
</div>
<h2 class="focus-card-title focus-mb-3">Building Interactive Components</h2>
<div class="focus-flex focus-items-center focus-gap-3 focus-mb-3 focus-text-secondary focus-text-sm">
<span><i class="fa fa-user"></i> Mike Wilson</span>
<span><i class="fa fa-calendar"></i> January 5, 2026</span>
<span><i class="fa fa-clock"></i> 12 min read</span>
</div>
<p class="focus-mb-3">
Discover how to create interactive, accessible components using vanilla JavaScript
and Focus UI. No frameworks required!
</p>
<a href="#" class="focus-btn focus-btn-primary">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</article>
<!-- Pagination -->
<nav class="focus-pagination focus-justify-center focus-mb-4">
<a href="#" class="focus-page-item focus-page-link">Previous</a>
<a href="#" class="focus-page-item focus-page-link focus-active">1</a>
<a href="#" class="focus-page-item focus-page-link">2</a>
<a href="#" class="focus-page-item focus-page-link">3</a>
<a href="#" class="focus-page-item focus-page-link">Next</a>
</nav>
</div>
<!-- Sidebar -->
<aside class="focus-col-12 focus-col-lg-4">
<!-- About Widget -->
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">About Me</h3>
</div>
<div class="focus-card-body focus-text-center">
<i class="fa fa-user-circle focus-text-primary focus-mb-3" style="font-size: 4rem;"></i>
<h4 class="focus-mb-2">John Doe</h4>
<p class="focus-text-secondary focus-text-sm">
Full-stack developer passionate about creating beautiful,
functional web applications and sharing knowledge.
</p>
</div>
</div>
<!-- Categories -->
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Categories</h3>
</div>
<div class="focus-card-body">
<a href="#" class="focus-btn focus-btn-outline focus-btn-block focus-text-left focus-mb-2">
Web Development <span class="focus-badge focus-badge-secondary">24</span>
</a>
<a href="#" class="focus-btn focus-btn-outline focus-btn-block focus-text-left focus-mb-2">
CSS <span class="focus-badge focus-badge-secondary">18</span>
</a>
<a href="#" class="focus-btn focus-btn-outline focus-btn-block focus-text-left focus-mb-2">
JavaScript <span class="focus-badge focus-badge-secondary">32</span>
</a>
<a href="#" class="focus-btn focus-btn-outline focus-btn-block focus-text-left focus-mb-2">
Tutorials <span class="focus-badge focus-badge-secondary">15</span>
</a>
</div>
</div>
<!-- Recent Posts -->
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Recent Posts</h3>
</div>
<div class="focus-card-body">
<div class="focus-mb-3 focus-pb-3" style="border-bottom: 1px solid var(--focus-color-border);">
<h5 class="focus-text-sm focus-mb-1">
<a href="#" class="focus-text-body">Advanced CSS Animations</a>
</h5>
<p class="focus-text-xs focus-text-secondary">January 12, 2026</p>
</div>
<div class="focus-mb-3 focus-pb-3" style="border-bottom: 1px solid var(--focus-color-border);">
<h5 class="focus-text-sm focus-mb-1">
<a href="#" class="focus-text-body">Responsive Design Tips</a>
</h5>
<p class="focus-text-xs focus-text-secondary">January 8, 2026</p>
</div>
<div class="focus-mb-3 focus-pb-3" style="border-bottom: 1px solid var(--focus-color-border);">
<h5 class="focus-text-sm focus-mb-1">
<a href="#" class="focus-text-body">Modern JavaScript Features</a>
</h5>
<p class="focus-text-xs focus-text-secondary">January 3, 2026</p>
</div>
</div>
</div>
<!-- Newsletter -->
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Newsletter</h3>
</div>
<div class="focus-card-body">
<p class="focus-text-sm focus-mb-3">
Subscribe to get the latest posts delivered to your inbox.
</p>
<form>
<div class="focus-form-group">
<input type="email" class="focus-input" placeholder="Your email">
</div>
<button type="submit" class="focus-btn focus-btn-primary focus-btn-block">
Subscribe
</button>
</form>
</div>
</div>
<!-- Tags -->
<div class="focus-card focus-mb-4">
<div class="focus-card-header">
<h3 class="focus-card-title">Tags</h3>
</div>
<div class="focus-card-body">
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">CSS</a>
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">JavaScript</a>
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">React</a>
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">UI/UX</a>
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">Tutorial</a>
<a href="#" class="focus-badge focus-badge-light focus-mr-2 focus-mb-2">Web Dev</a>
</div>
</div>
</aside>
</div>
</div>
</main>
<!-- Footer -->
<footer class="focus-py-4" style="background: var(--focus-color-bg-light); border-top: 1px solid var(--focus-color-border);">
<div class="focus-container">
<div class="focus-row">
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">My Blog</h4>
<p class="focus-text-secondary focus-text-sm">
Sharing knowledge about web development, design, and technology.
</p>
<div class="focus-mt-3">
<a href="#" class="focus-text-primary focus-mr-3"><i class="fab fa-twitter fa-lg"></i></a>
<a href="#" class="focus-text-primary focus-mr-3"><i class="fab fa-github fa-lg"></i></a>
<a href="#" class="focus-text-primary focus-mr-3"><i class="fab fa-linkedin fa-lg"></i></a>
</div>
</div>
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">Quick Links</h4>
<ul class="focus-list-unstyled">
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Home</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">About</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Contact</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Privacy Policy</a></li>
</ul>
</div>
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">Categories</h4>
<ul class="focus-list-unstyled">
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Web Development</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">CSS & Design</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">JavaScript</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Tutorials</a></li>
</ul>
</div>
</div>
<div class="focus-divider focus-my-4"></div>
<div class="focus-text-center focus-text-secondary focus-text-sm">
<p>© 2026 My Blog. All rights reserved. Built with Focus UI.</p>
</div>
</div>
</footer>
<script src="path/to/focus-ui.js"></script>
</body>
</html>Adjust column ratios from the current 8/4 split. Use .focus-col-lg-9 and .focus-col-lg-3 for a wider content area.
Change badge colors for categories and tags using variants like .focus-badge-primary, .focus-badge-success, or .focus-badge-warning.
Replace gradient placeholders with actual post featured images. Use <img src="post.jpg" class="focus-card-img-top"> for best results.
Add or remove sidebar widgets as needed. Each widget is a .focus-card component for consistent styling and spacing.