Hire Us for Customization

### Hously - Tailwind CSS Real Estate Landing Template

#### Introduction

Hously is one of The Best Real Estate Responsive HTML5 Template build with the Tailwind CSS framework. Each and every section of the template is 100% customizable according to your needs. It is supported on all modern & old browsers, tablets, and mobile devices. Hously is a high-Quality and well organized HTML Template specially designed to fit all the needs of a Real Estate Business. Hously supported Dark Theme and Light Theme. It's a clean and complete solution for all sorts of real estate property agencies and agents, real estate companies and businesses dealing with real estate in a number of ways.

Please feel free to get back to me in case if you are having any question or feedback.

#### Setup HTML

##### Introduction

We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

##### Prerequisites

Please follow below steps to install and setup all prerequisites:

- ###### Yarn

  Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

- ###### Nodejs

  Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 16.

- ###### Gulp

  Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command npm install -g gulp from your terminal.

- ###### Git

  Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

##### Installation

To setup the admin theme, follow below-mentioned steps:

- ###### Install Prerequisites

  Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command | Description
--- | ---
`yarn install` | This would install all the required dependencies in the `node_modules` folder.
`gulp` | Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
`gulp build` | Generates a `/dist` directory with all the production files.

#### Folder & File Structure

    Hously_v1.4.0
    │
    ├──  Documentation
    ├──  HTML
        │
        ├──  dist folder
        ├──  src folder
        │   └──  assets
        │       └──  fonts
        │       └──  imagess
        │       └──  js
        │       └──  php
        │       └──  scss
        │       │   └──  custom
        │       │   │   └──  components
        │       │   │   │    └──  _buttons.scss
        │       │   │   │
        │       │   │   └──  pages
        │       │   │   │    └──  _contact.scss
        │       │   │   │    └──  _countdown.scss
        │       │   │   │    └──  _helper.scss
        │       │   │   │    └──  _hero.scss
        │       │   │   │    └──  _testi.scss
        │       │   │   │    └──  _choices.scss
        │       │   │   │
        │       │   │   └──  structure
        │       │   │        └──  _footer.scss
        │       │   │        └──  _topnav.scss
        │       │   └──  icons (Removed)
        │       │   └──  icons.scss (Removed)
        │       │   └──  tailwind.scss
        │       │
        │       └──  All HTML Files (30 Pages)
        │
        └──  gulpfile.js (Updated)
        └──  package.json (Updated)
        └──  tailwind.config.js (Updated)

##### HTML Structure

    <!doctype html>
    <html class="light" lang="en">
        <head>

            <meta charset="utf-8" />
            <title> Hously - Tailwind CSS Real Estate Landing Template </title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta name="description" content="Site description" />
            <meta name="keywords" content="Your tags" />

            <!-- favicon icon -->
            <link rel="shortcut icon" href="images/favicon.ico">

            <!-- Bootstrap -->
            <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

            <!-- Main css -->
            <link href="css/icons.css" rel="stylesheet" type="text/css" />
            <link href="css/tailwind.css" rel="stylesheet" type="text/css" />

        </head>

        <body>

            <!-- Loader Start -->
            <div id="#--------">
                --------
                --------
            </div>
            <!-- Loader End -->

            <!-- Navbar Start -->
            <header>
                <div class="--------">
                    --------
                    --------
                    --------
                    --------
                </div>
            </header>
            <!-- Navbar End -->

            <!-- Hero Start -->
            <section class="--------">
                <div class="--------">
                    --------
                    --------
                    --------
                    --------
                </div>
            </section>
            <!-- Hero End -->

            <!-- Footer Start -->
            <footer>
                <div class="--------">
                    --------
                    --------
                    --------
                    --------
                </div>
            </footer>
            <!-- Footer End -->

            <!-- Back To Home Start -->
            <a href="#" class="--------" id="#--------">
                --------
                --------
            </a>
            <!-- Back To Home End -->

            <!-- Javascript Start -->
            --------
            --------
            --------
            <script src="js/plugins.init.js"></script>
            <script src="js/app.js"></script>
            <!-- Javascript End -->
        </body>
    </html>

##### CSS

Files are explained below:

File | Description
--- | ---
CSS | You use `icons.css` and `tailwind.css`.
RTL Version | In order to have RTL mode enabled, Please changes in the `src/partials/main.html` file update the html tag like `<lang="en" class="light scroll-smooth" dir="rtl">`
Dark Version | In order to have Dark mode enabled, only add dark class in HTML tag like, `<html class="dark scroll-smooth" lang="en" dir="ltr">`

##### Javascript

Files are explained below:

File | Description
--- | ---
`app.js` | This is a main js file. All important javascript like page loader, menu, sticky menu, menu-toggler, one page menu etc.
`plugins.init.js` | All init js like working contact js, tiny slider, counter, countdown, maintenance, lightbox, gallery, swiper slider, aos animation etc.

#### How to change the color in Hously?

It's easy to change your color if your color is indigo-600 to another (red-600, red-400, orange-700, etc. as your theme primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors

#### How to change the fonts family in Hously?

Please first of all open the `tailwind.config.js` and please create your google fonts name in the `module.exports > theme > fontFamily`
For example: `'rubik': ['"Rubik", sans-serif'],` add your Google fonts like the above example.

#### Menu Styles

##### Landing Page Tamplate

Some changes like that:

###### 1) Right Side Navbar Menu

If you use right side navbar menu please use `src/partials/navbar/nav-right.html`
otherwise
If you directly use `dist` file if so please just add one class `justify-end` along with `navigation-menu`

###### Navbar Center

###### Navbar Right

###### 2) Left Navbar Menu

If you use left side navbar menu please use `src/partials/navbar/nav-left.html`
otherwise
If you directly use `dist` file if so please just add one class `justify-start` along with `navigation-menu`

###### Navbar Left

###### 3) Light Navbar Menu

If you use Light menu so please use `src/partials/navbar/nav-center-light.html`
otherwise
If you directly use `dist` file if so please just add one class `nav-light` along with `navigation-menu`

###### Navbar Light with Center

###### Navbar Light with Right

If you use Light with Right side navbar menu please use `src/partials/navbar/nav-right-light.html`
otherwise
If you directly use `dist` file if so please just add two class `justify-end nav-light` along with `navigation-menu`

###### Navbar Light with Left

If you use Light with Left side navbar menu please use `src/partials/navbar/nav-left-light.html`
otherwise
If you directly use `dist` file if so please just add two class `justify-start nav-light` along with `navigation-menu`

#### Install Visual Studio Code

- Downloads the visual studio code https://code.visualstudio.com/download
- Now goto `Files -> Preferences -> Settings`.
- Now goto `Extension` and please search and install Tailwind CSS IntelliSense otherwise install here, Tailwind CSS IntelliSense.
- Now goto `Extension` and please search and install PostCSS Language Support
- Type in the search box "`live sass compile`".
- Now you wil able to very first option "`Live Sass Compile > Settings: Autoprefix`" option. Click on the below "`Edit in settings.json`" link.
- It will open a `settings.json` file in a new tab. Please put the below code in the file.

-     	{
      		"workbench.colorTheme": "Monokai",
      		"workbench.iconTheme": "material-icon-theme",
      		"liveServer.settings.donotShowInfoMsg": true,
      		"explorer.confirmDelete": false,
      		"workbench.sideBar.location": "left",
      		"window.zoomLevel": 0,

      		"liveSassCompile.settings.formats":[
      			// More Complex
      			{
      				"format": "expanded",
      				"extensionName": ".css",
      				"savePath": "~/../css/"
      			},

      			{
      				"format": "compressed",
      				"extensionName": ".min.css",
      				"savePath": "~/../css/"
      			},
      		],
      		"files.autoSave": "off",
      		"liveSassCompile.settings.excludeList": [

      			"**/node_modules/**",
      			".vscode/**"
      		],
      		"terminal.integrated.shellArgs.windows": "null",
      		"liveSassCompile.settings.autoprefix": [],
      		"workbench.welcomePage.hiddenCategories": [
      			"Beginner",
      			"Setup"
      		],
      	}

#### Loader

To add `loader` you need to add the below code after the `<body>` tag.

`<-- loader start -->
<div id="preloader"">
<div id="status">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<-- loader end -->`

#### Credits & Official Documentation

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

- Yarn Js
- Gulp Js
- Nodejs.
- Git
- Tailwind css 3.x.
- Google Fonts
- Feather Icons
- Material Design Icons
- Flaticon Icons
- Iconscout Icons
- Tiny Slider
- Tobii Lightbox
- Lukaszadam Illustrations Images
- Stories Illustrations Images
- Manypixels Illustrations Images
- Isometric Illustrations Images
- Freepic Images
- Unsplash Images

#### Supports

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Stay awesome

###### - Shreethemes

#### Changelog

Version v1.4.0 - 15th May 2023

- Updated: Update Latest Tailwind CSS v3.3.2
- Updated: Update Latest Material Design Icon
- Updated: Update gulpfile.js file
- Updated: Update package.json file
- Updated: Update tailwind.config.js file
- Fixed: Fixed & Remove icons file and add icons from Yarn package
- Remove: Removed other form yarn package

Version v1.3.0 - 3rd March 2023

- Updated: Update Latest Tailwind CSS v3.2.7
- Added: Add New Demo Index Five
- Added: Add New Grid With Sidebar
- Added: Add New List With Sidebar
- Added: Add New Blog Pages
- Updated: Update latest choices.js Plugin
- Updated: Update latest unicons icons
- Fixed: Fixed some responsive issues
- Fixed: Fixed Background cover issues in all pages for background image
- Fixed: Fixed menu issues (App.js)

Version v1.2.0 - 24th November 2022

- Updated: Update Latest Tailwind CSS v3.2.4
- Added: Added RTL Mode

Version v1.1 - 29th August 2022

- Updated: Update Latest Tailwind CSS v3.1.8
- Added: Add new Demo Four (index-four.html) demo
- Added: Add new Comingsoon Page (comingsoon.html) demo
- Added: Add new Maintenance Page (maintenance.html) demo
- Added: Add new 404 Error Page (404.html) demo
- Fixed: Fixed footer issues on dark mode
- Updated: Update & fixed menu in small devices
- Update: Update & Add Choices plugin for Filters
- Updated: Update Gulp File
- Updated: Update package.json
- Updated: Update tailwind.config.js
- Removed: Remove postcss.config.js

Version v1.0 - 13th June 2022

- Initial Released

#### Changes in SCSS files v1.3.0

Fixed: Fixed menu issues (App.js)

Note: Changes Full file because changes all margin, padding, float, etc. css for LTR & RTL mode

##### Thank you very much for your purchase !