/home/hdwebsolution/public_html/ns-interior/gallery.php
<?php include('include/header.php');?>
<div class="clearfix"></div>
<!-- Header Container / End -->
<section class="headings">
<div class="text-heading">
<div class="container">
<h1 class="text-center">Projects</h1>
</div>
</div>
</section>
<div class="road">
<div class="container">
<div class="row">
<div class="col">
<a href="index.php">Home</a><span>ยป</span><span>Projects</span>
</div>
</div>
</div>
</div>
<!-- END SECTION HEADINGS -->
<!-- START SECTION PORTFOLIO -->
<section class="portfolio">
<div class="container">
<div class="filters-group">
<ul>
<li class="active" data-filter="*">Show All</li>
<li data-filter=".people">Residential</li>
<li data-filter=".landscapes">Commercial</li>
<li data-filter=".web">Office</li>
<li data-filter=".graphic">Hospitaly</li>
</ul>
</div>
<div class="row portfolio-items">
<div class="item col-lg-3 col-md-6 landscapes">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-1.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-1.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 people">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-2.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-2.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 people landscapes">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-3.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-3.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 people landscapes">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-4.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-4.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item it2 col-lg-3 col-md-6 people">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-5.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-5.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item it2 col-lg-3 col-md-6 web">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-6.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-6.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item it2 col-lg-3 col-md-6 web">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-7.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-7.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item it2 col-lg-3 col-md-6 web graphic">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-8.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-8.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 landscapes last-item">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-9.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-9.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 people last-item">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-10.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-10.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-md-6 people landscapes last-item one">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-11.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-11.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
<div class="item col-lg-3 col-sm-6 col-xs-12 people landscapes last-item two pt">
<div class="single-portfolio">
<div class="portfolio-img">
<img src="images/project/p-12.jpg" alt="" />
<div class="portfolio-view">
<div class="item-wrap">
<a class="img-poppu" href="images/project/p-12.jpg" data-rel="lightcase:myCollection:slideshow">
<span class="plus"></span>
</a>
</div>
</div>
</div>
<div class="portfolio-text">
<a href="#"><h4>Portfolio</h4></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END SECTION PORTFOLIO -->
<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');?>