/home/hdwebsolution/public_html/ns-interior/blog.php
<?php include('include/header.php'); ?>
<!-- PAGE HEADING -->
<section class="headings d-flex align-items-center justify-content-center text-center">
<div class="container">
<h1 class="text-white mb-3">Our Blog</h1>
</div>
</section>
<!-- BREADCRUMB -->
<div class="breadcrumb-bar py-3 bg-dark text-white">
<div class="container">
<a href="index.php" class="text-white">Home</a> <span class="mx-2">ยป</span> <span>Blog</span>
</div>
</div>
<!-- BLOG SECTION -->
<section class="blog-section py-5">
<div class="container">
<div class="row g-4">
<!-- Example Blog Card -->
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-image">
<a href="blog-details.php">
<img src="images/blog/b-1.jpg" alt="Interior Design News">
</a>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa fa-calendar"></i> April 11, 2020</span>
<span><i class="fa fa-user"></i> By Lisa Jhonson</span>
</div>
<h3><a href="blog-details.php">Interior Design News</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, ex.</p>
<a href="blog-details.php" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<!-- Duplicate & Replace Data for Multiple Blogs -->
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-image">
<a href="blog-details.php">
<img src="images/blog/b-2.jpg" alt="Modern Architecture">
</a>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa fa-calendar"></i> May 10, 2020</span>
<span><i class="fa fa-user"></i> By John Doe</span>
</div>
<h3><a href="blog-details.php">Modern Architecture Trends</a></h3>
<p>Explore the latest trends redefining modern spaces and living.</p>
<a href="blog-details.php" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="blog-card">
<div class="blog-image">
<a href="blog-details.php">
<img src="images/blog/b-3.jpg" alt="Home Decor Ideas">
</a>
</div>
<div class="blog-content">
<div class="blog-meta">
<span><i class="fa fa-calendar"></i> June 20, 2020</span>
<span><i class="fa fa-user"></i> By Sarah Lee</span>
</div>
<h3><a href="blog-details.php">Creative Home Decor Ideas</a></h3>
<p>Discover unique ways to make your home elegant and inviting.</p>
<a href="blog-details.php" class="read-more">Read More <i class="fa fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- STYLING -->
<style>
/* --- HEADINGS SECTION --- */
.headings {
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
url('images/bg/bg-1.jpg') center/cover no-repeat;
height: 50vh;
}
.headings h1 {
font-size: 48px;
font-weight: 700;
}
.breadcrumb-bar a {
text-decoration: none;
}
/* --- BLOG GRID --- */
.blog-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
transition: all 0.4s ease;
}
.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.blog-image img {
width: 100%;
height: 250px;
object-fit: cover;
transition: 0.4s ease;
}
.blog-card:hover .blog-image img {
transform: scale(1.05);
}
.blog-content {
padding: 20px;
}
.blog-content h3 {
font-size: 20px;
margin: 10px 0;
}
.blog-content h3 a {
color: #222;
text-decoration: none;
transition: color 0.3s;
}
.blog-content h3 a:hover {
color: #f1c40f;
}
.blog-meta {
font-size: 14px;
color: #888;
display: flex;
justify-content: space-between;
}
.read-more {
color: #f1c40f;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
margin-top: 10px;
}
.read-more i {
margin-left: 6px;
transition: 0.3s;
}
.read-more:hover i {
transform: translateX(4px);
}
/* --- RESPONSIVE --- */
@media (max-width: 768px) {
.headings h1 { font-size: 32px; }
.blog-meta { flex-direction: column; gap: 4px; }
}
</style>
<style>
.parallax-search.home-1 {
position: relative;
width: 100%;
height: 85vh;
overflow: hidden;
}
.frd {
gap: 20px;
display: flex
}
section.portfolio {
padding: 6rem 0;
background: #ffffff;
}
.parallax-search.home-1 video#bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.parallax-search.home-1 .video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* Adjust opacity for darkness */
z-index: 1;
}
.parallax-search.home-1 .hero-main {
position: relative;
z-index: 2;
color: #fff;
}
.top-bar {
background-color: #111;
color: #fff;
font-size: 14px;
padding: 8px 0;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.top-bar-left {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.top-bar i {
color: #f1c40f;
margin-right: 5px;
}
.top-bar-right {
font-weight: 600;
}
/* === Top Bar Styles === */
.top-bar {
background-color: #111;
color: #fff;
font-size: 14px;
padding: 8px 0;
}
.top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.top-bar-left {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.top-bar i {
color: #f1c40f;
margin-right: 5px;
}
.top-bar-right {
font-weight: 600;
}
.road {
background: red;
padding: 20px;
color: white;
}
.headings {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.5)), to(rgba(17, 17, 17, 0.5))), url(images/bg/bg-1.jpg) no-repeat center center;
background: linear-gradient(rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0.5)), url(images/bg/bg-1.jpg) no-repeat center center;
background-size: cover;
width: 100%;
height: 50vh;
}
/* Optional: improve responsiveness */
@media (max-width: 768px) {
.top-bar .container {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
</style>
<?php include('include/footer.php'); ?>