Hello
I thought about the theme and bought it.
I will use the "demo-real-estate-2" page for the new installation.
I need help on this.
"FEATURES" shown on the home page
real estate listings
As in the "Registration" page
( https://themes.semicolonweb.com/html/canvas/demo-real-estate-listing.html )
How can I show?
I own a small real estate business and I want to list 9-10 real estate listings on the homepage.
Thank you
Hello,
Thank you so much for Purchasing Canvas! :)
This is Definitely Possible! You can simply display the .real-estate-item inside the Bootstrap Grid as follows:
<div class="row g-5 mb-5">
<div class="col-md-6 col-lg-4">
<div class="real-estate-item">
<div class="real-estate-item-image">
<div class="badge bg-danger bg-color2">For Sale</div>
<a href="#">
<img src="demos/real-estate/images/items/1.jpg" alt="Image 1">
</a>
<div class="real-estate-item-price">
$1.2m<span>Leasehold</span>
</div>
<div class="real-estate-item-info clearfix">
<a href="#"><i class="icon-line-stack-2"></i></a>
<a href="#"><i class="icon-line-heart"></i></a>
</div>
</div>
<div class="real-estate-item-desc">
<h3><a href="#">3 Bedroom Villa</a></h3>
<span>Seminyak Area</span>
<a href="#" class="real-estate-item-link"><i class="icon-info"></i></a>
<div class="line" style="margin-top: 15px; margin-bottom: 15px;"></div>
<div class="real-estate-item-features fw-medium font-primary clearfix">
<div class="row g-0">
<div class="col-lg-4 p-0">Beds: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Baths: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Area: <span class="color">150 sqm</span></div>
<div class="col-lg-4 p-0">Pool: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Internet: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Cleaning: <span class="text-danger"><i class="icon-minus-sign-alt"></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="real-estate-item">
<div class="real-estate-item-image">
<div class="badge bg-success">Hot Deal</div>
<a href="#">
<img src="demos/real-estate/images/items/2.jpg" alt="Image 2">
</a>
<div class="real-estate-item-price">
$200,000<span>bi-annually</span>
</div>
<div class="real-estate-item-info clearfix">
<a href="#"><i class="icon-line-stack-2"></i></a>
<a href="#"><i class="icon-line-heart"></i></a>
</div>
</div>
<div class="real-estate-item-desc">
<h3><a href="#">3 Bedroom Villa</a></h3>
<span>Seminyak Area</span>
<a href="#" class="real-estate-item-link"><i class="icon-info"></i></a>
<div class="line" style="margin-top: 15px; margin-bottom: 15px;"></div>
<div class="real-estate-item-features fw-medium clearfix">
<div class="row g-0">
<div class="col-lg-4 p-0">Beds: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Baths: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Area: <span class="color">150 sqm</span></div>
<div class="col-lg-4 p-0">Pool: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Internet: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Cleaning: <span class="text-success"><i class="icon-check-sign"></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="real-estate-item">
<div class="real-estate-item-image">
<div class="badge bg-danger">Long Term Rental</div>
<a href="#">
<img src="demos/real-estate/images/items/4.jpg" alt="Image 3">
</a>
<div class="real-estate-item-price">
$1600<span>per month</span>
</div>
<div class="real-estate-item-info clearfix">
<a href="#"><i class="icon-line-stack-2"></i></a>
<a href="#"><i class="icon-line-heart"></i></a>
</div>
</div>
<div class="real-estate-item-desc">
<h3><a href="#">3 Bedroom Villa</a></h3>
<span>Seminyak Area</span>
<a href="#" class="real-estate-item-link"><i class="icon-info"></i></a>
<div class="line" style="margin-top: 15px; margin-bottom: 15px;"></div>
<div class="real-estate-item-features fw-medium clearfix">
<div class="row g-0">
<div class="col-lg-4 p-0">Beds: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Baths: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Area: <span class="color">150 sqm</span></div>
<div class="col-lg-4 p-0">Pool: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Internet: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Cleaning: <span class="text-success"><i class="icon-check-sign"></i></span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
... add new items
</div>
</div>This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
i don't understand how to do this
can you help me
Hello,
This is a Single Real Estate Item:
<div class="real-estate-item">
<div class="real-estate-item-image">
<div class="badge bg-danger">Long Term Rental</div>
<a href="#">
<img src="demos/real-estate/images/items/4.jpg" alt="Image 3">
</a>
<div class="real-estate-item-price">
$1600<span>per month</span>
</div>
<div class="real-estate-item-info clearfix">
<a href="#"><i class="icon-line-stack-2"></i></a>
<a href="#"><i class="icon-line-heart"></i></a>
</div>
</div>
<div class="real-estate-item-desc">
<h3><a href="#">3 Bedroom Villa</a></h3>
<span>Seminyak Area</span>
<a href="#" class="real-estate-item-link"><i class="icon-info"></i></a>
<div class="line" style="margin-top: 15px; margin-bottom: 15px;"></div>
<div class="real-estate-item-features fw-medium clearfix">
<div class="row g-0">
<div class="col-lg-4 p-0">Beds: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Baths: <span class="color">3</span></div>
<div class="col-lg-4 p-0">Area: <span class="color">150 sqm</span></div>
<div class="col-lg-4 p-0">Pool: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Internet: <span class="text-success"><i class="icon-check-sign"></i></span></div>
<div class="col-lg-4 p-0">Cleaning: <span class="text-success"><i class="icon-check-sign"></i></span></div>
</div>
</div>
</div>
</div>You can simply place this inside any Grid Column and it will work flexibly. There are no more setups required for this.
Canvas is a Static HTML5/CSS3 Template, you will need HTML/CSS Knowledge to edit the Templates and the Edits needs to be done manually using a Text Editor like VS Code, Sublime Text or equivalent.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
I don't understand in which css file and where to add this
Hi,
the code you said "real-estate.css"
I added it to the bottom of the css file.
but there was no change in the home page.
my file path is like this " canvas-package\demos\real-estate\real-estate.css "
Could you add the code you sent to the correct css file and send it to me please?
I don't understand which file or a file to add
Hello,
We have never mentioned to add the above codes in the demos/real-estate/real-estate.css File. The above codes are HTML Codes and must be added to the HTML File, preferably to your demo-real-estate.html File.
We have attached an Example HTML File with the Real Estate Listings added in the Grid.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard