Property Gallery
Display the elements of the property in the gallery layout
Property Gallery 01
<div class="position-relative">
<div class="position-absolute pos-fixed-top-right z-index-3">
<ul class="list-inline pt-4 pr-5">
<li class="list-inline-item mr-2">
<a href="#" data-toggle="tooltip" title="Favourite"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-heart"></i></a>
</li>
<li class="list-inline-item mr-2">
<button type="button"
class="btn btn-white p-0 d-flex align-items-center justify-content-center w-40px h-40 text-heading bg-hover-primary hover-white rounded-circle border-0 shadow-none"
data-container="body"
data-toggle="popover" data-placement="top" data-html="true" data-content=' <ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item ">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-youtube"></i></a>
</li>
</ul>'>
<i class="far fa-share-alt"></i>
</button>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Print"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-print"></i>
</a>
</li>
</ul>
</div>
<div class="row galleries m-n1">
<div class="col-md-6 p-1">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-1.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="01"
style="background-image:url('../../images/single-property-2.jpg')">
</a>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="row m-n1">
<div class="col-md-6 p-1">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-2.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="01"
style="background-image:url('../../images/single-property-22.jpg')">
</a>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-3.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="01"
style="background-image:url('../../images/single-property-3.jpg')">
</a>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-4.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="01"
style="background-image:url('../../images/single-property-4.jpg')">
</a>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-5.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="01"
style="background-image:url('../../images/single-property-5.jpg')">
</a>
<a href="#"
class="card-img-overlay d-flex flex-column align-items-center justify-content-center hover-image bg-dark-opacity-04">
<p class="fs-48 font-weight-600 text-white lh-1 mb-4">+12</p>
<p class="fs-16 font-weight-bold text-white lh-1625 text-uppercase">View
more</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Property Gallery 02
<div class="galleries position-relative">
<div class="position-absolute pos-fixed-top-right z-index-3">
<ul class="list-inline pt-4 pr-5">
<li class="list-inline-item mr-2">
<a href="#" data-toggle="tooltip" title="Favourite"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-heart"></i></a>
</li>
<li class="list-inline-item mr-2">
<button type="button"
class="btn btn-white p-0 d-flex align-items-center justify-content-center w-40px h-40 text-heading bg-hover-primary hover-white rounded-circle border-0 shadow-none"
data-container="body"
data-toggle="popover" data-placement="top" data-html="true" data-content=' <ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item ">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-youtube"></i></a>
</li>
</ul>'>
<i class="far fa-share-alt"></i>
</button>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Print"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-print"></i>
</a>
</li>
</ul>
</div>
<div class="slick-slider slider-for"
data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":false,"asNavFor": ".slider-nav"}'>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-1.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-lg-1.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-4.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-lg-4.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-17.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-17.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-3.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-lg-3.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-7.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-7.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-18.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-18.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-8.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="02"
style="background-image:url('../../images/single-property-8.jpg')">
</a>
</div>
</div>
</div>
</div>
<div class="slick-slider slider-nav mt-1 mx-n1 arrow-haft-inner"
data-slick-options='{"slidesToShow": 6, "autoplay":false,"dots":false,"arrows":true,"asNavFor": ".slider-for","focusOnSelect": true,"responsive":[{"breakpoint": 768,"settings": {"slidesToShow": 4}},{"breakpoint": 576,"settings": {"slidesToShow": 2}}]}'>
<div class="box pb-6 px-0">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-7.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-2.jpg" alt="Gallery 02"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-3.jpg" alt="Gallery 03"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-4.jpg" alt="Gallery 04"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-5.jpg" alt="Gallery 05"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-6.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-8.jpg" alt="Gallery 06"
class="h-100 w-100 rounded-lg">
</div>
</div>
</div>
</div>Property Gallery 03
<div class="galleries position-relative">
<ul class="nav nav-pills position-absolute pos-fixed-top-right z-index-3 pt-4 pr-5 flex-nowrap nav-gallery"
id="pills-tab"
role="tablist">
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 active d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#image" role="tab"
aria-selected="true">
<i class="fal fa-camera"></i>
</a>
</li>
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#map-view" role="tab"
aria-selected="false">
<i class="fal fa-map-marked-alt"></i>
</a>
</li>
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#street-view" role="tab"
aria-selected="false">
<i class="fal fa-street-view"></i>
</a>
</li>
</ul>
<div class="tab-content p-0 shadow-none">
<div class="tab-pane fade show active" id="image" role="tabpanel">
<div class="slick-slider dots-white arrow-inner"
data-slick-options='{"slidesToShow": 1, "autoplay":false}'>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-1.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-lg-1.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-4.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-lg-4.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-6.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-6.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-3.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-lg-3.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-7.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-7.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-8.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-8.jpg')">
</a>
</div>
</div>
</div>
<div class="box">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-2.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="03"
style="background-image:url('../../images/single-property-lg-2.jpg')">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="map-view" role="tabpanel">
<div id="map" class="mapbox-gl map-point-animate"
style="height: 620px"
data-mapbox-access-token="pk.eyJ1IjoiZzVvbmxpbmUiLCJhIjoiY2xkMDB1b2ZvMDRmMjNxcWpwajV5NTFjeiJ9.OTlSugt4ZFDFny07_l2s7Q"
data-mapbox-options='{"center":[-73.981566, 40.739011],"setLngLat":[-73.981566, 40.739011]}'
data-mapbox-marker='[{"position":[-73.981566, 40.739011],"className":"marker","backgroundImage":"../../images/googlle-market-01.png","backgroundRepeat":"no-repeat","width":"32px","height":"40px"}]'
></div>
</div>
<div class="tab-pane fade" id="street-view" role="tabpanel">
<div class="py-10"
style="background-image: url('../../images/BG2.jpg');background-size: cover;background-position: center"></div>
</div>
</div>
</div>Property Gallery 04
<div class="galleries position-relative">
<div class="position-absolute pos-fixed-top-right z-index-3">
<ul class="list-inline pt-4 pr-5">
<li class="list-inline-item mr-2">
<a href="#" data-toggle="tooltip" title="Favourite"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-heart"></i></a>
</li>
<li class="list-inline-item mr-2">
<button type="button"
class="btn btn-white p-0 d-flex align-items-center justify-content-center w-40px h-40 text-heading bg-hover-primary hover-white rounded-circle border-0 shadow-none"
data-container="body"
data-toggle="popover" data-placement="top" data-html="true" data-content=' <ul class="list-inline mb-0">
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-twitter"></i></a>
</li>
<li class="list-inline-item ">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-facebook-f"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-instagram"></i></a>
</li>
<li class="list-inline-item">
<a href="#" class="text-muted fs-15 hover-dark lh-1 px-2"><i
class="fab fa-youtube"></i></a>
</li>
</ul>'>
<i class="far fa-share-alt"></i>
</button>
</li>
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Print"
class="d-flex align-items-center justify-content-center w-40px h-40 bg-white text-heading bg-hover-primary hover-white rounded-circle">
<i class="far fa-print"></i>
</a>
</li>
</ul>
</div>
<div class="slick-slider slider-for-01 arrow-haft-inner mx-0"
data-slick-options='{"slidesToShow": 1, "autoplay":false,"dots":false,"arrows":true,"asNavFor": ".slider-nav-01"}'>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-1.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-lg-1.jpg')">
</a>
</div>
</div>
</div>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-4.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-lg-4.jpg')">
</a>
</div>
</div>
</div>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-3.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-lg-3.jpg')">
</a>
</div>
</div>
</div>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-2.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-lg-2.jpg')">
</a>
</div>
</div>
</div>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-9.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-9.jpg')">
</a>
</div>
</div>
</div>
<div class="box px-0">
<div class="item item-size-3-2">
<div class="card p-0">
<a href="../../images/single-property-lg-10.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="04"
style="background-image:url('../../images/single-property-1.jpg')">
</a>
</div>
</div>
</div>
</div>
<div class="slick-slider slider-nav-01 mt-4 mx-n1 arrow-haft-inner"
data-slick-options='{"slidesToShow": 5, "autoplay":false,"dots":false,"arrows":false,"asNavFor": ".slider-for-01","focusOnSelect": true,"responsive":[{"breakpoint": 768,"settings": {"slidesToShow": 4}},{"breakpoint": 576,"settings": {"slidesToShow": 2}}]}'>
<div class="box pb-6 px-0">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-7.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-2.jpg" alt="Gallery 02"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-4.jpg" alt="Gallery 04"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-sm-1.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-9.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
<div class="box px-0 pb-6">
<div class="bg-white p-1 shadow-hover-xs-3 h-100 rounded-lg">
<img src="../../images/single-property-1.jpg" alt="Gallery 01"
class="h-100 w-100 rounded-lg">
</div>
</div>
</div>
</div>Property Gallery 05
<div class="row galleries">
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-11.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-11.jpg')">
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-12.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-12.jpg')">
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-13.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-13.jpg')">
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-14.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-14.jpg')">
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-15.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-15.jpg')">
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 mb-6">
<div class="item item-size-4-3">
<div class="card p-0 hover-zoom-in hover-change-image">
<a href="../../images/single-property-lg-16.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="05"
style="background-image:url('../../images/single-property-16.jpg')">
</a>
<a href="#"
class="card-img-overlay d-flex flex-column align-items-center justify-content-center hover-image bg-dark-opacity-04">
<p class="fs-48 font-weight-600 text-white lh-1 mb-4">+12</p>
<p class="fs-16 font-weight-bold text-white lh-1625 text-uppercase">View
more</p>
</a>
</div>
</div>
</div>
</div>Property Gallery 06
<div class="row galleries">
<div class="col-lg-8 mb-6 mb-lg-0">
<div class="item custom-size-1">
<div class="card p-0 hover-zoom-in">
<a href="../../images/single-property-lg-9.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-9.jpg')">
</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row no-gutters m-n1 pb-7">
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-3.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-4.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-2.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-1.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-4.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-2.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-1.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-7.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-17.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-17.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-7.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-5.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-15.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-18.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 bg-white p-1">
<a href="../../images/single-property-lg-19.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-19.jpg')">
</a>
</div>
</div>
</div>
<div class="col-6 col-sm-4 p-1">
<div class="item item-size-1-1">
<div class="card shadow-hover-xs-3 hover-change-image">
<a href="../../images/single-property-19.jpg" class="card-img"
data-gtf-mfp="true"
data-gallery-id="06"
style="background-image:url('../../images/single-property-sm-19.jpg')">
</a>
<a href="#"
class="card-img-overlay d-flex flex-column align-items-center justify-content-center hover-image bg-dark-opacity-04 rounded-lg">
<p class="fs-24 font-weight-600 text-white lh-1 mb-0">+3</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Property Gallery 07
<div class="py-8">
<div class="galleries">
<div class="container position-relative">
<ul class="nav nav-pills position-absolute pos-fixed-top-right z-index-3 pt-4 pr-5 flex-nowrap nav-gallery"
role="tablist">
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 active d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#image-1" role="tab"
aria-selected="true">
<i class="fal fa-camera"></i>
</a>
</li>
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#map-view-1" role="tab"
aria-selected="false">
<i class="fal fa-map-marked-alt"></i>
</a>
</li>
<li class="nav-item mr-2" role="presentation">
<a class="nav-link p-0 d-flex align-items-center justify-content-center w-48px h-48 bg-white text-heading bg-hover-primary hover-white rounded-circle fs-18"
data-toggle="pill" href="#street-view-1" role="tab"
aria-selected="false">
<i class="fal fa-street-view"></i>
</a>
</li>
</ul>
</div>
<div class="tab-content p-0 shadow-none">
<div class="tab-pane fade show active" id="image-1" role="tabpanel">
<div class="slick-slider mx-lg-n5"
data-slick-options='{"slidesToShow": 1, "autoplay":false,"centerMode":true,"infinite":true,"arrows":false,"centerPadding":"80px","responsive":[{"breakpoint": 992,"settings": {"centerMode":false}}]}'>
<div class="box px-lg-5">
<div class="item item-size-3-2">
<div class="card p-0">
<div class="card-img"
style="background-image:url('../../images/single-property-21.jpg')">
</div>
<div class="card-img-overlay d-flex align-items-center justify-content-center p-4">
<a href="http://www.youtube.com/watch?v=0O2aH4XLbto"
class="d-inline-block position-relative play-animation"
data-gtf-mfp="true" data-mfp-options='{"type":"iframe"}'>
<span class="text-primary bg-white w-78px h-78 rounded-circle d-flex align-items-center justify-content-center">
<i class="fas fa-play"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="box px-lg-5">
<div class="item item-size-3-2">
<div class="card p-0">
<div class="card-img"
style="background-image:url('../../images/single-property-20.jpg')">
</div>
<div class="card-img-overlay d-flex align-items-center justify-content-center p-4">
<a href="http://www.youtube.com/watch?v=0O2aH4XLbto"
class="d-inline-block position-relative play-animation"
data-gtf-mfp="true" data-mfp-options='{"type":"iframe"}'>
<span class="text-primary bg-white w-78px h-78 rounded-circle d-flex align-items-center justify-content-center">
<i class="fas fa-play"></i>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="box px-lg-5">
<div class="item item-size-3-2">
<div class="card p-0">
<div class="card-img"
style="background-image:url('../../images/single-property-lg-1.jpg')">
</div>
<div class="card-img-overlay d-flex align-items-center justify-content-center p-4">
<a href="http://www.youtube.com/watch?v=0O2aH4XLbto"
class="d-inline-block position-relative play-animation"
data-gtf-mfp="true" data-mfp-options='{"type":"iframe"}'>
<span class="text-primary bg-white w-78px h-78 rounded-circle d-flex align-items-center justify-content-center">
<i class="fas fa-play"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="map-view-1" role="tabpanel">
<div style="height:620px;" class="position-relative">
<div id="map2" class="mapbox-gl map-point-animate"
style="height: 620px"
data-mapbox-access-token="pk.eyJ1IjoiZzVvbmxpbmUiLCJhIjoiY2xkMDB1b2ZvMDRmMjNxcWpwajV5NTFjeiJ9.OTlSugt4ZFDFny07_l2s7Q"
data-mapbox-options='{"center":[-73.981566, 40.739011],"setLngLat":[-73.981566, 40.739011],"container":"map2"}'
data-mapbox-marker='[{"position":[-73.981566, 40.739011],"className":"marker","backgroundImage":"../../images/googlle-market-01.png","backgroundRepeat":"no-repeat","width":"32px","height":"40px"}]'
></div>
</div>
</div>
<div class="tab-pane fade" id="street-view-1" role="tabpanel">
<div class="py-10"
style="background-image: url('../../images/BG2.jpg');background-size: cover;background-position: center"></div>
</div>
</div>
</div>
</div>