Our Blog Custom Code Block


This custom code block features a large, prominently displayed featured image on the left side of the section, and three smaller featured posts underneath it. Each featured post includes a title and a brief description. The layout is built using Bootstrap framework, which allows it to automatically adjust its size and elements’ positions according to the screen size it is being viewed on. The design is clean, modern, and visually appealing, with the focus on readability, and the ability for users to quickly access the most important recent posts.

<section class="py-5">
	<div class="container-fluid">
		<div class="row justify-content-center text-center">
			<div class="col-xl-9 col-xxl-8">
				<span class="text-muted">Read More</span>
				<h2 class="display-5 fw-bold">Our Blog</h2>
				<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at.</p>
			</div>
		</div>
		<div class="row g-0 align-items-center">
			<div class="col-md-6"><img alt="" class="img-fluid mb-4 mb-md-0" src="https://freefrontend.dev/assets/square.png"></div>
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-10">
						<div class="p-md-5 py-3">
							<div class="mb-2">
								<span class="text-muted">10.10.2017</span> <a class="text-muted text-decoration-none ms-4" href="">Category</a>
							</div>
							<h2 class="fw-semibold">A short engaging title</h2>
							<p class="text-muted my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at.</p><a class="btn btn-primary" href="">Read more</a>
						</div>
					</div>
					<div class="col-md-10">
						<div class="p-md-5 py-3">
							<div class="mb-2">
								<span class="text-muted">10.10.2017</span><a class="text-muted text-decoration-none ms-4" href="">Category</a>
							</div>
							<h2 class="fw-semibold">A short engaging title</h2>
							<p class="text-muted my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at.</p><a class="btn btn-primary" href="">Read more</a>
						</div>
					</div>
					<div class="col-md-10">
						<div class="p-md-5 py-3">
							<div class="mb-2">
								<span class="text-muted">10.10.2017</span> <a class="text-muted text-decoration-none ms-4" href="">Category</a>
							</div>
							<h2 class="fw-semibold">A short engaging title</h2>
							<p class="text-muted my-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum congue risus sit amet dictum malesuada. Vestibulum viverra iaculis turpis, vitae varius lectus imperdiet at.</p><a class="btn btn-primary" href="">Read more</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top