Intoduction

Quarter - Real Estate Tailwind Template + RTL


  • Created : August, 2024
  • By : Theme Pixells
  • E-mail: themepixells@gmail.com

Thank you for purchasing our template.
If you have any questions that are beyond the scope of this help file,
Please feel free to contact us with sending mail to themepixells@gmail.com or from our ThemeForest profile Tuna Theme

Template Installation

  1. FTP Upload:

    • Open up your FTP manager and connect to your hosting
    • Browse to required directory (Normally public_html)
    • Upload the files inside quarter folder.

How to edit Tailwind template

To use Tailwind CSS on your computer, you will need to install it as a development dependency in your project. Here are the steps you can follow to do this:

  • Make sure you have Node.js and npm (the package manager for Node.js) installed on your computer. If you don't have them already, you can download and install them from the official website (https://nodejs.org).
  • Open project on your editor
  • Open the terminal as a root directory
  • Run the command to install node module package
                                                    npm i 
                    
                                                    //===== or
                                                    
                                                    yarn
                                          
  • To build css for qurter run the command in your terminal
                                            npm run dev 
                    
                                            //===== or
                                            
                                            yarn run dev
                                        
  • To build css for qurter-rtl run the command in your terminal
                                            npm run dev_rtl 
                    
                                            //===== or
                                            
                                            yarn run dev_rtl
                                        
=========================================
  • Open project on your editor
    changing-content-img
  • Open the terminal as a root directory and run the command npm i
    changing-content-img
  • To build css for quarter run the command in your terminal npm run dev
    changing-content-img
  • To build css for quarter-rtl run the command in your terminal npm run dev_rtl
    changing-content-img

Template Features

  • Valid HTML5 & CSS3
  • Vuild with latest Tailwind 3.4.3
  • Responsive Design
  • Speed Optimized
  • SEO friendly code
  • W3C Validation
  • Working PHP AJAX Contact Form
  • Highly Responsive and Customizable
  • Flexible Colors & Typography
  • Easy to customize
  • Free Updates
  • User Friendly
  • Well Commented HTML, CSS & JS files
  • Professional Support
  • Cross-Browser Compatibility: Firefox, Safari, Chrome, Edge
  • Icofont Icon
  • Instagram Shop
  • Wishlist
  • Quick View
  • Mega-Menu
  • Images are not included
  • Home Pages
    • Default
    • Default rtl
    • home2
    • home2 rtl
    • home3
    • home3 rtl
    • home4
    • home4 rtl
    • home5
    • home5 rtl
    • home6
    • home6 rtl
    • home7
    • home7 rtl
    • home8
    • home8 rtl
    • home9
    • home9 rtl
    • home10
    • home10 rtl
    • home11
    • home11 rtl
  • eCommerce Pages
    • Cart
    • Checkout
    • Product Details
    • Shop
    • Wishlist
  • Others Pages
    • News Page
    • News Grid Page
    • News Left sidebar
    • News Right sidebar
    • News details
    • About Us Page
    • Service Page
    • Service Details
    • Portfolio
    • Blog Details
    • Portfolio - 02
    • Portfolio Details
    • Team
    • Team Details
    • Maintenance Page
    • FAQ
    • History
    • Add Listing
    • Google Map Locations
    • 404
    • Contact
    • Coming Soon
    • Much More...

Contact Form Settings

#

Please open contact.html file to edit contact form section

#

Please open mail.php file to change Email for contact form

#

Google Map Settings

#
#
#
#

Font Family Change

#
#
#
#
#
#

Color Change

#

Font Icon Change

#
#
#
#
#

Used Font Icon in This Template

Used icon fonts link here:-

Font Awesome Icon: Font Awesome Icon
Custom Icon - 1: Icon Moon Icon
Custom Icon - 2: Flat Icon

Used icon fonts here:-
#

Newsletter - ( MailChimp )

Newsletter Design:- ( into Footer Area )
#
Newsletter HTML Code:-
                            
                                <div class="xl:col-start-10 xl:col-span-3 mb-60px">
                                  <h3 class="text-22px font-bold mb-25px text-white">
                                    <span class="leading-1.3"> Newsletter </span>
                                  </h3>
                                  <p class="leading-1.8 mb-5 lg:mb-25px text-white">
                                    Subscribe to our weekly Newsletter and receive updates via
                                    email.
                                  </p>
                              
                                  <!-- subscription input -->
                                  <div>
                                    <form class="w-full relative">
                                      <input
                                        type="text"
                                        placeholder="Email*"
                                        class="w-full text-sm text-paragraph-color pl-5 pr-50px placeholder:text-paragraph-color outline-none border-2 border-border-color-9 focus:border focus:border-secondary-color h-65px block rounded-none"
                                      >
                                      <button
                                        type="submit"
                                        class="absolute top-0 right-0 h-full px-18px text-white bg-secondary-color hover:bg-primary-color"
                                      >
                                        <i class="fas fa-location-arrow text-lg font-bold"></i>
                                      </button>
                                    </form>
                                  </div>
                                  <!-- payment methods -->
                                  <div>
                                    <h3 class="text-base lg:text-lg font-bold mt-30px mb-15px text-white">
                                      <span class="leading-1.3"> We Accept </span>
                                    </h3>
                                    <img src="../assets/img/icons/payment-4.png" alt="Payment Image">
                                  </div>
                                </div>
                              
                              
					


Newsletter HTML Code With MailChimp:-
                    	
<div class="footer-newsletter">
	<div id="mc_embed_signup">
		<form action="https://gmail.us5.list-manage.com/subscribe/post?u=dde0a42ff09e8d43cad40dc82&amp;id=72d274d15d" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
			<div id="mc_embed_signup_scroll">
				<div class="mc-field-group">
					<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email*">
				</div>
				<div id="mce-responses" class="clear">
					<div class="response" id="mce-error-response" style="display:none"></div>
					<div class="response" id="mce-success-response" style="display:none"></div>
				</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
				<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_dde0a42ff09e8d43cad40dc82_72d274d15d" tabindex="-1" value=""></div>
				<div class="clear">
					<div class="btn-wrapper">
						<button class="theme-btn-1 btn"  type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"><i class="fas fa-location-arrow"></i></button>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>
                        
                    


How to get MailChimp URL & ID:-

1. Visit MailChimp: MailChimp
2. Login or Register
3. Then Create
4. Then Click Embedded form and then click begin button

#
#
#
#
#
#

Youtube Video Link

#
#
#
#
#
#

Vimeo Video Link

#
#
#
#

HTML5 Video Link

#
#
#

Folder Structure

                    Root
					                      |
                      ├── Assets
						  |
						  ├── css
						  |   └── all css files
						  |
						  ├── fonts
						  |   └── font icon files
						  |
						  ├── img
						  |   └── all img files
						  |
						  ├── js
						  |   └── all javascript files
						  |
						  ├── webfonts
						  |   └── All Fonts
						  	
                      ├── Pages
						  |
						  ├── all pages
                      └── all html files
                    
                

HTML Structure

#
#

CSS Structure

#

Javascript Structure

#

Fonts Credit

Google Fonts

Font-family: 'Inter', sans-serif;
Font-family: 'Hind', sans-serif


Icon Fonts

Ico Font: Font Awesome Icon
Flat Icon: Flat Icon

CSS Credit

Plugins Used for CSS:

Tailwindcss: Tailwindcss
Slick Slider: Swiper Slider
Animate: Animate
Aos Animation: Aos Animation
Magnific-popup: Magnific-popup

Images Credit

Images Used: All images we used in this template come from sources. They are very good sources for free images

Pinterest: Pinterest
Freepik: Freepik
Unsplash: Unsplash
Pexels: Pexels

Support

Thank you for purchasing our template.
If you have any questions that are beyond the scope of this help file,
Please feel free to contact us with sending mail to themepixells@gmail.com

Thanks

Once again thank you for purchasing one of our Templates

Best Regards
Tuna Theme

Copyright Tuna Theme made with the Documenter v1.0.0