Lorem Ipsum is simply the of the printing and dummy text of typesetting..
Lorem Ipsum is simply dummy text of the printing and typesetting industry.....
read moreBasic UI Elements
Buttons
<div>
<a href="#" class="btn btn-gradient btn-pill color-1">read more</a>
<a href="#" class="btn btn-gradient btn-pill color-2">read more</a>
<a href="#" class="btn btn-light-bg btn-pill color-2"><span>read more</span></a>
<a href="#" class="btn btn-white btn-pill color-1"> <span>read more</span></a>
<a href="#" class="btn btn-solid color-3 btn-flat">read more</a>
<a href="#" class="btn btn-gradient btn-flat color-4">read more</a>
<a href="#" class="btn btn-light-bg color-3 btn-flat">read more</a>
<a href="#" class="btn btn-gradient color-4">read more</a>
<a href="#" class="btn btn-dashed btn-pill color-1"> <span>read more</span></a>
</div>
Tags
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
new
<div>
<span class="label label-solid label-pill color-1">new</span>
<span class="label label-dark label-pill">new</span>
<span class="label label-success label-pill">new</span>
<span class="label label-danger label-pill">new</span>
<span class="label label-gradient color-1">new</span>
<span class="label label-dark">new</span>
<span class="label label-success">new</span>
<span class="label label-danger">new</span>
<span class="label label-shadow">new</span>
<span class="label label-dark label-flat">new</span>
<span class="label label-success label-flat">new</span>
<span class="label label-danger label-flat">new</span>
<span class="label label-shadow label-flat">new</span>
<span class="label label-light label-flat color-3">new</span>
<span class="label label-light label-flat color-4">new</span>
<span class="label label-gradient label-lg color-4">new</span>
<span class="label label-solid label-lg label-flat color-3">new</span>
<span class="label label-white label-lg label-flat color-3">new</span>
<span class="label label-white label-lg color-1">new</span>
<span class="label label-white label-lg label-pill"><span class="gradient-1">new</span></span>
</div>
Title modules
Title 1
sale
Latest For Sale
<div class="title-1 pb-0">
<span class="label label-gradient color-1">sale</span>
<h2>Latest For Sale</h2>
<hr>
</div>
Title 2
Latest Property Listing
Discover New York’s best things to do, restaurants, theatre, nightlife and more
<div class="title-2">
<h2>Latest Property Listing</h2>
<p class="mb-0">Discover New York’s best things to do, restaurants, theatre, nightlife and more</p>
</div>
Title 3
Provided Services
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..
<div class="title-3 mb-0">
<svg class="title-svg">
<use
xlink:href="../assets/svg/icons.svg#title-line"></use>
</svg>
<h2>Provided <span>Services</span></h2>
<p class="font-roboto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod..</p>
</div>
Auto height adjustment
Ratio
Ratio Classes: Change your image proportion by just adding class
If you use image as background than add class ".bg-img" in image and add below class in parent.
- .ratio_40 - 40%
- .ratio_45 - 45%
- .ratio_50 - 50%
- .ratio_68 - 68%
- .ratio2_1 - 50%
- .ratio2_3 - 60%
- .ratio3_2 - 66.66%
- .ratio_landscape - 75%
- .ratio_square - 100%
- .ratio_asos - 127.77%
- .ratio_portrait - 150%
- .ratio1_2 - 200%
Ratio - "ratio2_3"
<div class="row portfolio-section ratio2_3">
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/1.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/2.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/3.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/4.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
</div>
.ratio2_3 .bg-size:before {
padding-top: 60%;
content: "";
display: block;
}
(function ($) {
"use strict";
$(".bg-top").parent().addClass('b-top');
$(".bg-bottom").parent().addClass('b-bottom');
$(".bg-center").parent().addClass('b-center');
$(".bg-left").parent().addClass('b-left');
$(".bg-right").parent().addClass('b-right');
$(".bg_size_content").parent().addClass('b_size_content');
$(".bg-img").parent().addClass('bg-size');
$(".bg-img.blur-up").parent().addClass('blur-up lazyload');
$('.bg-img').each(function () {
var el = $(this),
src = el.attr('src'),
parent = el.parent();
parent.css({
'background-image': 'url(' + src + ')',
'background-size': 'cover',
'background-position': 'center',
'background-repeat': 'no-repeat',
'display': 'block'
});
el.hide();
});
})(jQuery);
Ratio - "ratio_square"
<div class="row portfolio-section ratio_square">
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/1.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/2.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/3.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/4.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
</div>
.ratio_square .bg-size:before {
padding-top: 100%;
content: "";
display: block;
}
(function ($) {
"use strict";
$(".bg-top").parent().addClass('b-top');
$(".bg-bottom").parent().addClass('b-bottom');
$(".bg-center").parent().addClass('b-center');
$(".bg-left").parent().addClass('b-left');
$(".bg-right").parent().addClass('b-right');
$(".bg_size_content").parent().addClass('b_size_content');
$(".bg-img").parent().addClass('bg-size');
$(".bg-img.blur-up").parent().addClass('blur-up lazyload');
$('.bg-img').each(function () {
var el = $(this),
src = el.attr('src'),
parent = el.parent();
parent.css({
'background-image': 'url(' + src + ')',
'background-size': 'cover',
'background-position': 'center',
'background-repeat': 'no-repeat',
'display': 'block'
});
el.hide();
});
})(jQuery);
Ratio - "ratio_portrait"
<div class="row portfolio-section ratio_portrait">
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/1.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/2.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/3.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="overlay">
<div class="portfolio-image">
<a href="javascript:void(0)">
<img src="../assets/images/portfolio/4.jpg" class="bg-img" alt="">
</a>
</div>
</div>
</div>
</div>
.ratio_portrait .bg-size:before {
padding-top: 150%;
content: "";
display: block;
}
(function ($) {
"use strict";
$(".bg-top").parent().addClass('b-top');
$(".bg-bottom").parent().addClass('b-bottom');
$(".bg-center").parent().addClass('b-center');
$(".bg-left").parent().addClass('b-left');
$(".bg-right").parent().addClass('b-right');
$(".bg_size_content").parent().addClass('b_size_content');
$(".bg-img").parent().addClass('bg-size');
$(".bg-img.blur-up").parent().addClass('blur-up lazyload');
$('.bg-img').each(function () {
var el = $(this),
src = el.attr('src'),
parent = el.parent();
parent.css({
'background-image': 'url(' + src + ')',
'background-size': 'cover',
'background-position': 'center',
'background-repeat': 'no-repeat',
'display': 'block'
});
el.hide();
});
})(jQuery);
Icons
FontAwesome
Sheltos have mainly used FontAwesome Icons. FontAwesome icons available in FontAwesome.com/icons, other icons are available in svg file
how to use FontAwesome font
- You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name.
- To reference an icon, you need to know two bits of information. 1) its name, prefixed with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s corresponding prefix**.
<div class="fluid-container pt-4 demo-icons">
<i class="fas fa-map-marker-alt"></i>
<i class="fas fa-phone-alt"></i>
<i class="fas fa-envelope"></i>
<i class="fas fa-globe"></i>
</div>
how to use Feather icon
- To use an icon on your page, add a data-feather attribute with the icon name to an element:
- See the complete list of icons at feathericons.com.
<div class="fluid-container pt-4 demo-icons">
<i data-feather="lock"></i>
<i data-feather="settings"></i>
<i data-feather="home"></i>
</div>
<!-- feather icon js-->
<script src="../assets/js/feather-icon/feather.min.js"></script>
<script src="../assets/js/feather-icon/feather-icon.js"></script>
Charts
Apex Charts Example
<div id="overviewchart"></div>
<!-- apexchart js-->
<script src="../assets/js/chart/apex-chart/apex-chart.js"></script>
<script>
var options = {
series: [{
name: '$2530.00',
data: [20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0]
}],
chart: {
height: 280,
type: 'area',
dropShadow: {
enabled: true,
top: 10,
left: 0,
blur: 3,
color: '#720f1e',
opacity: 0.15
},
toolbar: {
show: false
},
zoom: {
enabled: false
},
},
markers: {
strokeWidth: 4,
strokeColors: "#ffffff",
hover: {
size: 9,
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth',
lineCap: 'butt',
width: 4,
},
legend: {
show: false
},
colors: ["#ff5c41"],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.5,
opacityTo: 0.4,
stops: [0, 90, 100]
}
},
grid: {
xaxis: {
lines: {
borderColor: 'transparent',
show: false,
}
},
yaxis: {
lines: {
borderColor: 'transparent',
show: false,
}
},
padding: {
right: -112,
bottom: 0,
left: 15
}
},
responsive: [{
breakpoint: 1200,
options: {
grid: {
padding: {
right: -95,
}
},
},
},
{
breakpoint: 992,
options: {
grid: {
padding: {
right: -69,
}
},
},
}
],
yaxis: {
labels: {
formatter: function (value) {
return value + "K";
}
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: false,
},
},
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",],
range: undefined,
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
axisTicks: {
show: false,
},
crosshairs: {
show: true,
position: 'back',
stroke: {
color: '#ff5c41',
width: 1,
dashArray: 0,
},
},
},
tooltip: {
formatter: undefined,
},
};
var chart = new ApexCharts(document.querySelector("#overviewchart"), options);
chart.render();
</script>
Chartist Charts Example
<div class="small-bar-chartist">
<div class="small-chart"></div>
</div>
.small-bar-chartist {
position: relative;
}
.small-bar-chartist svg {
height: 36px !important;
width: 50px !important;
}
.small-bar-chartist svg .ct-series-a .ct-point, .small-bar-chartist svg .ct-series-a .ct-line, .small-bar-chartist svg .ct-series-a .ct-bar, .small-bar-chartist svg .ct-series-a .ct-slice-donut {
stroke: var(--theme-deafult7);
}
.small-bar-chartist svg .ct-series-b .ct-point, .small-bar-chartist svg .ct-series-b .ct-line, .small-bar-chartist svg .ct-series-b .ct-bar, .small-bar-chartist svg .ct-series-b .ct-slice-donut {
stroke: var(--theme-deafult7);
opacity: 0.2;
}
.small-bar-chartist .chartist-tooltip {
position: absolute;
opacity: 0;
}
.small-bar-chartist .chartist-tooltip .chartist-tooltip-value {
font-size: 10px;
padding: 5px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 4px;
}
.small-bar-chartist .chartist-tooltip.tooltip-show {
opacity: 1;
}
<!-- chartist chart js-->
<script src="../assets/js/chart/chartist/chartist.js"></script>
<script src="../assets/js/chart/chartist/chartist-plugin-tooltip.js"></script>
<script>
new Chartist.Bar('.small-chart', {
labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'],
series: [
[400, 900, 800, 1000, 700, 1200, 300],
[1000, 500, 600, 400, 700, 200, 1100]
]
}, {
plugins: [
Chartist.plugins.tooltip({
appendToBody: false,
className: "ct-tooltip"
})
],
stackBars: true,
chartPadding: {
top: -30,
right: 0,
left: 0,
bottom: 0
},
axisX: {
showGrid: false,
showLabel: false,
offset: 0
},
axisY: {
low: 0,
showGrid: false,
showLabel: false,
offset: 0,
labelInterpolationFnc: function (value) {
return (value / 1000) + 'k';
}
}
}).on('draw', function (data) {
if (data.type === 'bar') {
data.element.attr({
style: 'stroke-width: 3px'
});
}
});
</script>
Maps
Google Map
<div class="map" id="map"></div>
.map-doc {
height: 250px;
position: relative;
}
.map-doc .map {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul {
padding-left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul li {
display: inline-block;
}
<!-- google map js -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDGCQvcXUsXwCdYArPXo72dLZ31WS3WQRw"></script>
<script src="../assets/js/map/listing-property.js"></script>
<script src="../assets/js/map/infobox.js"></script>
Leaflet Map
<div class="map-doc">
<div class="map" id="mapleaf"></div>
</div>
.map-doc {
height: 250px;
position: relative;
}
.map-doc .map {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul {
padding-left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul li {
display: inline-block;
}
<!-- map css -->
<link rel="stylesheet" type="text/css" href="../assets/css/leaflet.css">
<!-- map js -->
<script src="../assets/js/map/leaflet.js"></script>
<script src="../assets/js/map/leaflet-info.js"></script>
Bing Map
<div class="map-doc">
<div class="map" id="myMap"></div>
</div>
.map-doc {
height: 250px;
position: relative;
}
.map-doc .map {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul {
padding-left: 0;
}
.map-doc .infoBox .marker-detail .detail-part ul li {
display: inline-block;
}
<!-- map js -->
<script src="../assets/js/map/bing-info.js"></script>
<script
src='https://www.bing.com/maps/sdk/mapcontrol?key=At9Cy6f5t4j6eJ4lsWMargBxROcgv-XdX3IHAd4JC5NlbvYxCMe56N77A7FLLAze&callback=loadMapScenario'
async defer></script>
Blog Modules
Type 1
January 9, 2019
<div class="blog-1">
<div class="row">
<div class="col-lg-10">
<div class="blog-box">
<div class="img-box">
<img src="../assets/images/blog/4.jpg" alt="" class="img-fluid">
</div>
<div class="blog-content">
<span>January 9, 2019</span>
<h3><a href="https://themes.pixelstrap.com/sheltos/main/blog-detail-left-sidebar.html">Lorem Ipsum is simply the
of the printing and
dummy text of typesetting..</a></h3>
<p class="font-roboto">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.....</p>
<a href="https://themes.pixelstrap.com/sheltos/main/blog-detail-left-sidebar.html" class="btn btn-gradient btn-pill color-2" tabindex="0">read more</a>
</div>
</div>
</div>
</div>
</div>
Type 2
05
nov
Phonics ,Newyork
Twice profit than before you ever got in business.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
read more
<div class="blog-1">
<div class="row">
<div class="col-lg-10">
<div class="blog-box">
<div class="img-box">
<img src="../assets/images/blog/4.jpg" alt="" class="img-fluid">
</div>
<div class="blog-content">
<span>January 9, 2019</span>
<h3><a href="https://themes.pixelstrap.com/sheltos/main/blog-detail-left-sidebar.html">Lorem Ipsum is simply the
of the printing and
dummy text of typesetting..</a></h3>
<p class="font-roboto">Lorem Ipsum is simply dummy text of the
printing and typesetting industry.....</p>
<a href="https://themes.pixelstrap.com/sheltos/main/blog-detail-left-sidebar.html" class="btn btn-gradient btn-pill color-2" tabindex="0">read more</a>
</div>
</div>
</div>
</div>
</div>
About Modules
Type 1
John David
Communicating with..
Johndavid@inspirythemes.comA real estate agent or broker is a person who represents sellers or buyers advised to consult a licensed.
View Portfolio
<div class="about-section row">
<div class="about-1 about-wrap col-xl-8">
<div class="about-content row">
<div class="col-xl-6">
<div class="about-image">
<img src="../assets/images/about/1.jpg" class="img-fluid" alt="">
<div class="about-overlay"></div>
<div class="overlay-content">
<ul>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-1.png" alt=""></a>
</li>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-2.png" alt=""></a>
</li>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-3.png" alt=""></a>
</li>
</ul>
<span>Connect</span>
</div>
</div>
</div>
<div class="col-xl-6">
<div class="our-details">
<h6 class="d-flex">John David <span class="label-heart color-1 ms-2"><i class="fas fa-heart"></i></span></h6>
<h3>Communicating with..</h3>
<span class="font-roboto">Johndavid@inspirythemes.com</span>
<p class="font-roboto">A real estate agent or broker is a person who represents sellers or buyers advised to consult a licensed.</p>
<a href="#" class="btn btn-gradient btn-pill color-1 mt-2"><i data-feather="eye"></i>View Portfolio</a>
</div>
</div>
</div>
</div>
</div>
Type 2
John David
Wide Window Realty Group...
Johndavid@inspirythemes.comThey are responsible for managing employees. A construction foreman leads the work crew.
View Portfolio
<div class="about-section row">
<div class="about-2 about-wrap col-xl-5">
<div class="about-content">
<div class="about-image">
<img src="../assets/images/avatar/3.jpg" class="img-fluid" alt="">
<div class="about-overlay"></div>
<div class="overlay-content">
<ul>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-1.png" alt=""></a></li>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-2.png" alt=""></a></li>
<li><a href="" tabindex="0"><img src="../assets/images/about/icon-3.png" alt=""></a></li>
</ul>
<span>Connect</span>
</div>
</div>
<div class="our-details">
<h6 class="d-flex">John David <span class="label-heart color-3 ms-2"><i class="fas fa-heart"></i></span></h6>
<h3>Wide Window Realty Group...</h3>
<span class="font-roboto">Johndavid@inspirythemes.com</span>
<p class="font-roboto">They are responsible for managing employees. A construction foreman leads the work crew.</p>
<a href="#" class="btn btn-solid btn-flat color-3 mt-2"><i data-feather="eye"></i>View Portfolio</a>
</div>
</div>
</div>
</div>
Type 3
John David
an elegant wave of the hand...
Different types of housing can be used same physical type.
Robot@inspirythemes.com
<div class="about-section row ratio_asos">
<div class="about-3 col-xl-4">
<div class="about-box">
<div class="bg-size agent-image">
<img src="../assets/images/about/4.jpg" class="bg-img" alt="">
<div class="overlay-agent">
<div class="agent-details">
<h6 class="d-flex">John David<span class="label-heart color-4 ms-2"><i
class="fas fa-heart"></i></span></h6>
<h5>Advanced Equip Best Dentists in...</h5>
<p class="font-roboto">Lorem Ipsum is simply dummy text ting and
typesetting.............</p>
<span class="font-roboto">Robot@inspirythemes.com</span>
<ul>
<li><a href="javascript:void(0)" tabindex="0"><img src="../assets/images/about/icon-1.png"
alt=""></a></li>
<li><a href="javascript:void(0)" tabindex="0"><img src="../assets/images/about/icon-2.png"
alt=""></a></li>
<li><a href="javascript:void(0)" tabindex="0"><img src="../assets/images/about/icon-3.png"
alt=""></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Service Modules
Type 1
Property Management
Property management is the control, maintenance of real estate and physical property.
<div class="service-section service-1">
<div class="row property-service">
<div class="col-lg-5 col-md-6">
<div class="service-box">
<div class="icon-round">
<i data-feather="home"></i>
</div>
<h3>Property Management</h3>
<p>Property management is the control, maintenance of real estate and physical property.</p>
</div>
</div>
</div>
</div>
Type 2
Property Insurance
Property management is the control, maintenance of real estate and physical property.
view more
<div class="service-section service-2">
<div class="row property-service">
<div class="col-lg-5 col-md-6">
<div class="service-box">
<div class="hover-line">
<svg class="service-icon">
<use xlink:href="../assets/svg/icons.svg#home-heart"></use>
</svg>
<div>
<svg class="icon-line-color">
<use xlink:href="../assets/svg/icons.svg#line-straight"></use>
</svg>
</div>
</div>
<h3>Property Insurance</h3>
<p class="font-roboto">Property management is the control, maintenance of real estate and physical property.…</p>
<a href="#" class="btn btn-light-bg color-3 btn-flat">view more</a>
</div>
</div>
</div>
</div>
Type 3
Mortgage Services
Residences can be classified by and how they are connected to neighbouring residences and land.
View details
<div class="service-section service-slider">
<div class="row property-service">
<div class="col-lg-5 col-md-6">
<div class="service-wrapper">
<div class="top-img-box">
<div>
<img src="../assets/images/service/2.png" class="img-fluid" alt="">
</div>
</div>
<div class="service-details">
<h3>Mortgage Services</h3>
<p class="font-roboto">Residences can be classified by and how they are connected to neighbouring residences and land.</p>
<a href="#" tabindex="0">View details</a>
</div>
</div>
</div>
</div>
</div>
Property Modules
Type 1
sale
10
France
Allen's Across Way
$6558.00*
This home provides wonderful entertaining spaces with a chef kitchen opening. Elegant retreat in a quiet Coral Gables setting..
Bed : 4
Baths : 4
Sq Ft : 5000
June 20, 2022
<div class="property-section">
<div class="row property-1 ratio_55">
<div class="col-md-6">
<div class="property-box">
<div class="property-image">
<a href="#">
<img src="../assets/images/property/1.jpg" class="bg-img" alt="">
</a>
<div class="overlay-like">
<div class="effect-round">
<i class="fas fa-heart"></i>
<span class="effect"></span>
</div>
</div>
<div class="labels-left">
<div>
<span class="label label-dark label-pill">for sale</span>
</div>
<span class="label label-danger label-pill">hot offer</span>
</div>
</div>
<div class="property-details">
<span class="font-roboto">France</span>
<a href="#">
<h3>Home in Merrick Way</h3>
</a>
<p class="font-roboto">Elegant retreat in a quiet Coral Gables setting. This ho
me provides wonderful entertaining spaces with a chef
kitchen opening…</p>
<ul>
<li>Bed : 4</li>
<li>Baths : 4</li>
<li>Sq Ft : 5000</li>
</ul>
<div class="property-btn">
<a href="#" class="btn btn-gradient btn-pill color-1">$6558.00*</a>
<a href="single-property-8.html" class="btn btn-dashed btn-pill color-1">
<span>Details</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
Type 2
sale
25
France
Allen's Across Way
$6558.00*
This home provides wonderful entertaining spaces with a chef kitchen opening. Elegant retreat in a quiet Coral Gables setting..
- Bed : 4
- Baths : 4
- Sq Ft : 5000
June 20, 2022
<div class="property-section">
<div class="row property-2 ratio_55">
<div class="col-md-6">
<div class="property-box">
<div class="property-image">
<a href="#">
<img src="../assets/images/1.jpg" class="bg-img" alt="">
<div class="overlay-plus">
<span>+</span>
<div class="seen-data"><i data-feather="camera"></i><span>25</span></div>
<span class="like-bottom"><i data-feather="heart"></i></span>
</div>
<div class="labels-left">
<div>
<span class="label label-dark">no fees</span>
</div>
<span class="label label-success">open house</span>
</div>
</a>
</div>
<div class="property-details">
<span class="font-roboto">France</span>
<a href="#">
<h3>Home in Merrick Way</h3>
</a>
<p class="font-roboto">Elegant retreat in a quiet Coral Gables setting. This ho
me provides wonderful entertaining spaces with a chef
kitchen opening…</p>
<ul>
<li>Bed : 4</li>
<li>Baths : 4</li>
<li>Sq Ft : 5000</li>
</ul>
<div class="property-btn">
<button type="button" class="btn btn-gradient btn-pill color-2">$6558.00*</button>
<button onclick="document.location='single-property-8.html'" type="button" class="btn btn-dashed btn-pill color-2"> <span>Details</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
Type 3
sale
High Valley Fields
A great name for a ranch surrounded by valleys. This home provides wonderful entertaining spaces with a chef kitchen opening.
-
Virtual Home
-
2000 Sq Ft
-
6 Rooms
-
2022
<div class="property-section">
<div class="row ratio_55 property-box-flat no-slider-property">
<div class="col-md-6">
<div class="property-box">
<div class="property-image">
<a href="javascript:void(0)">
<div class="overlay-plus">
<span>+</span>
<div class="seen-data"><i data-feather="camera"></i><span>25</span></div>
<span class="like-bottom"><i data-feather="heart"></i></span>
</div>
<img src="../assets/images/property/11.jpg" class="bg-img" alt="">
</a>
<span class="label label-white label-lg label-flat color-3">$6558.00*</span>
<div class="labels-left">
<div>
<span class="label label-shadow label-flat">sold</span>
</div>
</div>
</div>
<div class="property-details">
<h3>Home in Merrick Way</h3>
<p class="font-roboto">Elegant retreat in a quiet Coral Gables setting. This ho
me provides wonderful entertaining spaces with a chef
kitchen opening…</p>
<ul class="icon-property">
<li>
<div class="d-flex">
<div class="property-icon color-3">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#home-heart"></use>
</svg>
</div>
<span>Virtual Home</span>
</div>
</li>
<li>
<div class="d-flex">
<div class="property-icon color-3">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#ruler"></use>
</svg>
</div>
<span>5000 Sq Ft</span>
</div>
</li>
</ul>
<ul class="icon-property mb-0">
<li>
<div class="d-flex">
<div class="property-icon color-3">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#key"></use>
</svg>
</div>
<span>6 Rooms</span>
</div>
</li>
<li>
<div class="d-flex">
<div class="property-icon color-3">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#safety"></use>
</svg>
</div>
<span>2019</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Type 4
$6558.00*
-
Virtual Home
-
5000 Sq Ft
-
6 Rooms
-
2019
<div class="property-section">
<div class="row ratio_landscape property-4 list-property">
<div class="col-xl-5">
<div class="property-box">
<div class="property-image">
<a href="javascript:void(0)">
<img src="../assets/images/property/12.jpg" class="bg-img" alt="">
</a>
<div class="overlay-property">
<div class="overlay-box">
<h4>How Much is My House Worth</h4>
<p class="font-roboto">Lorem Ipsum is simply dummy text the dummy text ever
since the</p>
<a href="#">View Details</a>
</div>
</div>
</div>
<div class="text-center">
<span class="label label-gradient label-lg color-4">$6558.00*</span>
</div>
<div class="property-details">
<ul class="icon-property">
<li>
<div class="d-flex">
<div class="property-icon color-4">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#home-heart"></use>
</svg>
</div>
<span>Virtual Home</span>
</div>
</li>
<li>
<div class="d-flex">
<div class="property-icon color-4">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#ruler"></use>
</svg>
</div>
<span>5000 Sq Ft</span>
</div>
</li>
</ul>
<ul class="icon-property mb-0">
<li>
<div class="d-flex">
<div class="property-icon color-4">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#key"></use>
</svg>
</div>
<span>6 Rooms</span>
</div>
</li>
<li>
<div class="d-flex">
<div class="property-icon color-4">
<svg class="property-svg">
<use
xlink:href="../assets/svg/icons.svg#safety"></use>
</svg>
</div>
<span>2019</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>