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>
<nuxt-link to="#" class="btn btn-gradient btn-pill color-1">read more </nuxt-link>
<nuxt-link to="#" class="btn btn-gradient btn-pill color-2">read more</nuxt-link>
<nuxt-link to="#" class=" btn btn-light-bg btn-pill color-2">read more </nuxt-link>
<nuxt-link to="#" class=" btn btn-white btn-pill color-1">read more </nuxt-link>
<nuxt-link to="#" class="btn btn-solid color-3 btn-flat">read more </nuxt-link>
<nuxt-link to="#" class=" btn btn-gradient btn-flat color-4">read more </nuxt-link>
<nuxt-link to="#" class=" btn btn-light-bg color-3 btn-flat">read more </nuxt-link>
<nuxt-link to="#" class="btn btn-gradient color-4">read more </nuxt-link>
<nuxt-link to="#" class=" btn btn-dashed btn-pill color-1"> <span>read more</span> </nuxt-link>
</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 xlinkHref="/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="portfolio-section zoom-gallery-multiple gy-md-4 gy-3 row">
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/1.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/banner-image.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/3.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/4.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
</div>
Ratio - "ratio_square"
<div class="portfolio-section zoom-gallery-multiple gy-md-4 gy-3 row">
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/1.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-6 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/banner-image.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-6 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/3.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-6 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<img src="/image/4.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
</div>
Ratio - "ratio_portrait"
<div class="portfolio-section zoom-gallery-multiple gy-md-4 gy-3 row">
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<Img src="/image/1.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<Img src="/image/banner-image.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<Img src="/image/3.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
<div class="grid-item col-lg-3 col-sm-6">
<div class="grid-box">
<div class="overlay">
<div class="portfolio-image">
<Img src="/image/4.jpg" class="bg-img" />
</div>
</div>
</div>
</div>
</div>
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="container-fluid 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 Nuxt icon
- First you need to add 'nuxt-icon' command into the modules of
nuxt.config.ts - As you see our given demo.
- See the complete list of icons at icones.js.org.
modules: ['nuxt-icon'],
<div class="fluid-container pt-4 demo-icons">
<Icon name="material-symbols:lock-outline" />
<Icon name="material-symbols:settings-outline" />
<Icon name="material-symbols:home" />
</div>
Charts
Apex Charts Example
<template>
<div class="container-fluid pt-4">
<ClientOnly>
<VueApexCharts type="area" height="280" :options="chartOptions" :series="series" />
</ClientOnly>
</div>
</template>
<script>
let overview = data.value.overview
let series = [
{
name: "$2530.00",
data:[20, 25, 20, 30, 20, 50, 30, 35, 25, 60, 0]
},
]
let chartOptions = option
let option = {
chart: {
height: 295,
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,
},
}
</script>
<!-- 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>
Maps
Google Map
<template>
<GoogleMap api-key="your api key" style="width: 100%; height: 100%" class="map" :center="center" :zoom="12">
<Marker v-for="(item , index) in location" :key="index" :options="{position:item}" />
</GoogleMap>
</template>
<script lang="ts" setup >
import { GoogleMap, Marker } from "vue3-google-map";
const center = { lat: 25.229721, lng: 55.338229 };
let location = [
{ lat: 25.186426, lng: 55.346465 },
{ lat: 25.222578, lng: 55.319011 },
{ lat: 25.209843, lng: 55.293616 },
{ lat: 25.269995, lng: 55.368800 }
]
</script>
Leaflet Map
<template>
<div class="map" >
<client-only>
<l-map ref="locationsMap" :min-zoom="leafletOptions.minZoom" :max-zoom="leafletOptions.maxZoom" :zoom-animation="true" :zoom="leafletOptions.zoom" :center="leafletOptions.center" :useGlobalLeaflet="false" :options="{ tap: false }" @ready="onLeafletReady">
<l-tile-layer :url="leafletOptions.url" />
<template v-for="(item,index) in data.map" :key="index">
<l-marker :lat-lng="[item.location_latitude, item.location_longitude]">
<div v-if="item.location_latitude && item.location_longitude">
<l-popup class="text-center flex flex-col gap-y-4">
<div class="infobox">
<div class="marker-detail">
<img :src="item.map_image_url" alt="Image" />
<div class="label label-shadow">{{ item.label }}</div>
<div class="detail-part">
<h6>{{ item.name_point }}</h6>
<ul>
<li>Bed : {{ item.bed }}</li>
<li>Baths : {{ item.bath }}</li>
<li>Sq Ft : {{ item.sqft }}</li>
</ul>
<span> {{ item.price }}</span>
<nuxt-link to="javascript:void(0)"></nuxt-link>
</div>
</div>
</div>
</l-popup>
<l-icon>
<img src="/image/leaflet/marker-icon.png" />
</l-icon>
</div>
</l-marker>
</l-map>
</client-only>
</div>
</template>
<script lang="ts" setup>
import {
LIcon,
LMap,
LMarker,
LPopup,
LTileLayer
} from "@vue-leaflet/vue-leaflet";
import "leaflet/dist/leaflet.css";
const leafletOptions = ref({
url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
minZoom: 5,
maxZoom: 13,
zoom: 13,
map: null,
center: [25.204500, 55.347245],
bounds: null,
overlayLocation: false,
colors: ["#ED722E", "#F6BE00", "#979B0B", "#DA2C81"],
});
</script>
Blog Modules
Type 1
January 9, 2019
<template>
<section class="blog-section bg-comman-2">
<div class="container">
<div class="row">
<div class="col">
<div class="title-2 text-white">
{{ title }}
{{ details }}
</div>
<ElementBlogBlog3/>
</div>
</div>
</div>
</section>
</template>
<script lang="ts" setup>
let title:string = 'Latest Blog'
let details:string = 'See why ProCity is one of the best friends for exploring the city.'
</script>
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
<template>
<section class="ratio2_1 simple-blog">
<div class="container">
<div class="row">
<div class="col">
<div class="title-3">
<svg class="title-svg">
<use
xlink:href="/svg/icons.svg#title-line"></use>
</svg>
<h2>Latest <span>Blog</span></h2>
<p class="font-roboto">Elegant retreat in Coral Gables setting. This home provides entertaining spaces with kitchen opening</p>
</div>
<ElementBlogBlog2/>
</div>
</div>
</div>
</section>
</template>
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
<template>
<section class="testimonial-bg">
<div class="container">
<div class="row">
<div class="col">
<div class="title-1 text-white">
<span class="label label-gradient color-1">Our</span>
<h2>Happy clients</h2>
<hr>
</div>
<ElementHappyClinetTestimonial1/>
</div>
</div>
</div>
</section>
</template>
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
<template>
<section class="pb-0 testimonial-style-2">
<div class="container">
<div class="row">
<div class="col">
<div class="title-3">
<svg class="title-svg">
<use
xlink:href="/svg/icons.svg#title-line"></use>
</svg>
<h2>Our <span>Client</span></h2>
<p class="font-roboto">Residences can be classified into different type of housing tenure can used for same physical type.</p>
</div>
<ElementHappyClinetTestimonial2/>
</div>
</div>
</div>
</section>
</template>
Type 3
John David
an elegant wave of the hand...
Different types of housing can be used same physical type.
Robot@inspirythemes.com
<template>
<section class="testimonial-client">
<div class="container">
<div class="row">
<div class="col">
<div class="title-3 text-start">
<h2>{{ title }}</h2>
<p class="font-roboto">{{ details }}</p>
</div>
<ElementHappyClinetTestimonial4/>
</div>
</div>
</div>
</section>
</template>
<script lang="ts" setup>
let title:string = 'Our happy Client';
let details:string = 'Elegant retreat in Coral Gables setting. This home provides entertaining spaces with kitchen opening'
</script>
Service Modules
Type 1
Property Management
Property management is the control, maintenance of real estate and physical property.
<template>
<section class="service-section service-1">
<div class="container">
<div class="row">
<div class="col">
<div class="title-2">
<h2>{{ title }}</h2>
<p>{{ details }}</p>
</div>
<ElementServicesServices3/>
</div>
</div>
</div>
</section>
</template>
<script lang="ts" setup>
let title:string = 'Property Services';
let details:string = 'Discover New York’s best things to do, restaurants, theatre, nightlife and more'
</script>
Type 2
Property Insurance
Property management is the control, maintenance of real estate and physical property.
view more
<template>
<section class="service-section service-2 color-3 pb-0">
<div class="container">
<div class="row">
<div class="col">
<div class="title-3">
<svg class="title-svg">
<use
xlink:href="/svg/icons.svg#title-line"></use>
</svg>
<h2>{{ 'Provided' }} <span>{{ 'Services' }}</span></h2>
<p class="font-roboto">{{'Elegant retreat in Coral Gables setting. This home provides entertaining spaces with kitchen opening'}}</p>
</div>
</div>
<div class="row property-service column-space">
<div class="col-xl-4 col-md-6 fadeInUp" v-for="item in data.services" :key="item">
<div class="service-box color-3">
<div class="hover-line">
<svg class="service-icon">
<use :xlink:href="item.svg"></use>
</svg>
<div>
<svg class="icon-line-color">
<use :xlink:href="item.svg1"></use>
</svg>
</div>
</div>
<nuxt-link to="/"><h3>{{ item.title }}</h3></nuxt-link>
<p class="font-roboto">{{ item.details }}</p>
<nuxt-link to="/page/otherpages/services" class="btn btn-light-bg color-3 btn-flat"><span>{{'view more'}}</span></nuxt-link>
</div>
</div>
</div>
</div>
</div>
</section>
</template>
<script lang="ts" setup>
import {useurl} from '@/composable/apiurl'
let {data} = await useFetch(useurl+'/data/services.json')
</script>
Type 3
Mortgage Services
Residences can be classified by and how they are connected to neighbouring residences and land.
View details
<template>
<section class="service-section service-bg">
<div class="container">
<div class="title-3 text-start">
<h2>{{ title }}</h2>
<p class="font-roboto">{{ details }}</p>
</div>
</div>
<ElementServicesServices4/>
</section>
</template>
<script lang="ts" setup>
let title:string = 'property Services';
let details:string = 'Residences can be classified into different type of housing tenure can used for same physical type.';
</script>
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
<template>
<section class="property-section">
<div class="container">
<div class="row ratio_55">
<div class="col">
<div class="title-1">
<span class="label label-gradient color-1">{{ 'sale' }}</span>
<h2>{{ 'Latest For Rent' }}</h2>
<hr>
</div>
<ElementForrentRent5/>
</div>
</div>
</div>
</section>
</template>
Type 2
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
<template>
<section class="property-section pb-0">
<div class="container-fluid">
<div class="row ratio_63 zoom-gallery property-box-flat">
<div class="col">
<div class="title-3">
<svg class="title-svg">
<use
xlink:href="/svg/icons.svg#title-line"></use>
</svg>
<h2>{{'Property'}} <span>{{'Listing'}}</span></h2>
<p class="font-roboto">{{'Residences can be classified into different types of housing tenure can used for same physical type.'}}</p>
</div>
<ElementListingListing2 classes="col-xl-3 col-lg-4 green" color="color-3"/>
</div>
</div>
</div>
</section>
</template>
Type 3
$6558.00*
-
Virtual Home
-
5000 Sq Ft
-
6 Rooms
-
2019
<template>
<section class="property-section slick-shadow">
<div class="container">
<div class="row ratio_landscape">
<div class="col">
<div class="title-3 text-start">
<h2>{{ title }}</h2>
<p class="font-roboto">{{ content }}</p>
</div>
<ElementPropertyLetest4/>
</div>
</div>
</div>
</section>
</template>
<script lang="ts" setup>
let title:string = 'Latest Property';
let content:string = 'Elegant retreat in Coral Gables setting. This home provides entertaining spaces with kitchen opening';
</script>