Arid - Travel & Tourism HTML/Tailwind CSS Template

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Introduction

First of all, Thank you so much for purchasing this template and for being my loyal customer. You are awesome!
You are entitled to get free lifetime updates to this product + exceptional support from the author directly.

This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how this template is made and how to edit this properly. Basic HTML and CSS knowledge is required to customize this template. You may learn basics here, here and here.

  • Item Name : Arid - Travel & Tourism HTML/Tailwind CSS Template
  • Item Version : V 1.0.0
  • Author : WpRealizer
  • License : Un License

Arid - Travel & Tourism HTML/Tailwind CSS Template. It’s a High-Quality and well organized Online Booking HTML/Tailwind Template.

Arid is perfect for all kinds of travel agency, including: tours, hotel booking, activity/event, travel experiences, online booking, room bnb, villa rental, holida y rental, resort rental, cruises, car rentals, real estate, flight ticket, and more.

It is built on Tailwind V3, HTML5, CSS3, jQuery and JavaScript. it is a super responsive and lightweight template. Its Fully W3C Validate and SEO Friendly Template.

It will display your content nicely on Desktop, Laptop, iPad, iPhone, Android Mobile, or tablets. This is highly customizable, looks awesome modern react template. We have included best practices of web development – you can create a great website layout.

Features:

  1. 3 Home Page
  2. 15+ Inner pages
  3. Build With Tailwind CSS V3
  4. Google Fonts
  5. Bootstarp 5 icon
  6. W3C Validated
  7. Clean & Professional Code
  8. PageSpeed Optimized
  9. Fully Responsive
  10. Easy to customize
  11. Cross Browser Support
  12. Easy Documented
  13. No console error

Be careful while editing the template. If not edited properly, the design layout may break completely.
No support is provided for faulty customization.

HTML Structure#Back to top

  1. <!-- BEGIN: service-area -->
  2. <div class="service-area mt-90">
  3.    <div class="container">
  4.       <div class="text-contain">
  5.          <h3>Are You Ready To Enjoy? Get This Perfect Theme Now!</h3>
  6.          <p>It is a long established fact that a reader will be distracted</p>
  7.          <div class="button-contain">
  8.             <button>Start Trial Free</button>
  9.          </div>
  10.       </div>
  11.    </div>
  12. </section>

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following :

  1. .text-contain h3 { color: #some_color; }

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

  1. .service-area .text-contain h3 { color: #some_color; }

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

Tailwind CSS and CSS Files#Back to top

This theme imports many Css files:

  • jarallax.css
  • animate.css
  • bootstrap-icons.min.css
  • daterangepicker.css
  • fancybox.min.css
  • select2.min.css
  • leaflet.css
  • swiper-bundle.min.css
  • styles.css

In this theme, we are utilizing two CSS files. The first one is in the src folder and is for Twilwind input (input.css). The other is style.css (inside dist folder), a compailed version of input.css that is referenced in every HTML file. I also utilized a few CSS files from external parties.

To Edit Tailwind CSS :

Install All Tailwind Dependencies Using:
npm install
To Compile Tailwind CSS :
npm run build
Make sure you have nodejs installed in your local machine.

JavaScript#Back to top

This theme imports many Javascript files:

  • jquery-3.6.0.min.js
  • bootstrap.bundle.min.js
  • swiper-bundle.min.js
  • wow.min.js
  • main.js
  • jquery is a Javascript library that greatly reduces the amount of code that you must write.
  • javaScript Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over. 
  1. // ==== Loading Page ==== //
  2. $(window).on('load', function () {
  3.    'use strict';
  4.    $('body .loading-screen').fadeOut(1000);
  5.    $('html').css('overflow-y', 'visible');
  6. }); // This function is used to hide the loading section
  • Bootstrapis a free and open-source front-end framework (library) for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional.

Sources and Credits#Back to top

I've used the following images, icons or other files as listed :

1. Images

2. CSS Files

3. JavaScript Files

4. Fonts

Template Customization #Back to top

How to Customize this Template :

Go to This Link Click Me

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

© 2022 WpRealizer