Tazkarty

Hotel & Flight Booking HTML Template

• by: ITGeeks

Tazkary is an a creative travel and tourism landing page HTML template with modern and clean features. In addition real flexibility and customization. We hope you like it! :)

Welcome! First of all we want to thank you for purchasing our Premium Ecommerce HTML Page Template
We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better items.

In the following sections we will explain how to set up and use it the easiest way possible. If you have any questions that you feel should have been in this document you can contact us through our profile page on https://themeforest.net/user/it_geeks/ and we'll get back to you as soon as possible. Thanks so much!!!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit this tempate.

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Quickly find what you are looking for in this document by using your browser's "Find in Page" feature, typically Control + F.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code.

1. Based on Twitter Bootstrap 3.4.1
2. Built With Sass
3. 100% W3C Valid Files
4. Fully Responsive Layout (PC, Tablet and Mobile phone)
5. Cross Browser Compatible (Chrome, Opera, Safari, Firefox, Edge)
6. RTL Support — full Arabic right-to-left layout in HTML/rtl/
7. premium.css — Design token system (CSS custom properties: colors, shadows, radius, motion)
8. premium.js — 8 enhancement modules: scroll header, IntersectionObserver reveals, button ripple, input focus, image fade, animated counters, section tints, language switcher
9. Standalone Login & Register Pages — two-column auth layout with visual panel and form card
10. Language & Currency Switcher — popup with LTR↔RTL redirect, currency selector, localStorage persistence
11. Real Unsplash Photography — hero banners, destination cards, hotel/car/guide cards across all 36 pages
12. Performance Optimised — non-blocking font loading, fetchpriority hero images, deferred JS, minified assets, self-hosted jQuery UI CSS
13. Taking Care of Content Possibilities
14. Very Easy to Customize
15. Very Detailed Documentation
16. Font Awesome Icons
17. Over 800 Google Web Fonts You Can Use

HTML folder is structured as following:

css/
  css-assets.css    - third-party library imports (Bootstrap, Slick, FontAwesome, Magnific Popup, jQuery UI)
  style.css         - main compiled stylesheet
  style-rtl.css     - RTL overrides
  bootstrap-rtl.css - Bootstrap RTL grid
  premium.css       - design token system, component enhancements, auth pages, language switcher (minified)
  jquery-ui.min.css - jQuery UI widgets (self-hosted)

scss/ - Sass source files (commons, header, banner, content, footer)

js/
  jquery.min.js             - jQuery 3.7.1
  functions.js              - plugin init and custom scripts
  premium.js                - 8 enhancement modules (minified, deferred)
  bootstrap.min.js
  slick.min.js
  jquery.magnific-popup.min.js
  + other utility scripts

images/ - separated into 2 folders.
  "general-elements" - pattern, logo and design elements
  "files" - images used in preview

videos/ - locally hosted videos

18 .html files - LTR pages (index, search, login, register, hotel pages, car pages, guide pages, contact, 404, etc.)

rtl/ - RTL mirror: 18 matching .html files with Arabic content and dir="rtl", using ../ path prefix

In HTML Structure, we will talk about every structure of all content used as possible. These content are as following:

HTML Markup

Tazkarty template is based on Bootstrap v3.4.1 - a collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Bootstrap's base grid is a variation of the grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

The default Bootstrap3 grid system is composed by 12 columns, named like "col-*-1", "col-*-2", "col-*-3"...."col-*-12". Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Each .html file contains the HTML structure of the template. Here is the general structure (shortened):

<div class="container">


<div class="row">

<div class="col-md-12">1 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-6">1/2 Column - Content goes here</div>

<div class="col-md-6">1/2 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-4">1/3 Column - Content goes here</div>

<div class="col-md-4">1/3 Column - Content goes here</div>

<div class="col-md-4">1/3 Column - Content goes here</div>

</div>


<div class="row">

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

<div class="col-md-3">1/4 Column - Content goes here</div>

</div>


</div>

General Structure

All HTML files has the same structure. I made this similarity to save time and efforts.

<!DOCTYPE html>
<html lang="en-US">

<head>

    <!-- Meta
    ============================================= -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="author" content="IT Geeks">
    <!-- description -->
    <meta name="description" content="">
    <!-- keywords -->
    <meta name="keywords" content="">

    <!-- Stylesheets
    ============================================= -->
    <link href="css/css-assets.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- Favicon
    ============================================= -->
    <link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
    <link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">

    <!-- Title
    ============================================= -->
    <title>Tazkarty</title>

</head>

<body class="homepage">

    <!-- Document Full Container
    ============================================= -->
    <div id="full-container">

        <!-- Header
        ============================================= -->
        <header id="header">

            <div id="header-bar-1" class="header-bar">

                <div class="header-bar-wrap">

                    .
                    .

                </div><!-- .header-bar-wrap -->

            </div><!-- #header-bar-1 end -->

            <div id="header-bar-2" class="header-bar sticky">

                <div class="header-bar-wrap">

                    .
                    .

                </div><!-- .header-bar-wrap -->

            </div><!-- #header-bar-2 end -->

        </header><!-- #header end -->

        <!-- Banner
        ============================================= -->
        <section id="banner">

            <div class="banner-parallax" data-banner-height="550">
                <img src="images/files/parallax-bg/img-4.jpg" alt="">
                <div class="overlay-colored color-bg-white opacity-40"></div><!-- .overlay-colored end -->
                <div class="slide-content">

                    .
                    .

                </div><!-- .slide-content end -->
            </div><!-- .banner-parallax end -->

        </section><!-- #banner end -->

        <!-- Content
        ============================================= -->
        <section id="content">

            <div id="content-wrap">

                <!-- === Section About 1 =========== -->
                <div id="section-about-1" class="section-flat">

                    <div class="section-content">

                        .
                        .

                    </div><!-- .section-content end -->

                </div><!-- .section-flat end -->

                <!-- === Section Top Destinations =========== -->
                <div id="section-top-destintations" class="section-flat">

                    <div class="section-content">

                        .
                        .

                    </div><!-- .section-content end -->

                </div><!-- .section-flat end -->

            </div><!-- #content-wrap -->

        </section><!-- #content end -->

        <!-- Footer
        ============================================= -->
        <footer id="footer">

            <div id="footer-bar-1" class="footer-bar">

                <div class="footer-bar-wrap">

                    .
                    .

                </div><!-- .footer-bar-wrap -->

            </div><!-- #footer-bar-1 end -->

            <div id="footer-bar-2" class="footer-bar">

                <div class="footer-bar-wrap">

                    .
                    .

                </div><!-- .footer-bar-wrap -->

            </div><!-- #footer-bar-2 end -->

        </footer><!-- #footer end -->

        <div class="side-panel-menu">
                .
                .
            <div class="mobile-side-panel-menu">
                <ul id="menu-mobile" class="menu-mobile">

                </ul><!-- .mobile-menu-categories end -->
            </div><!-- .mobile-side-panel-menu end -->
                .
                .
        </div><!-- .side-panel-menu end -->

    </div><!-- #full-container end -->

    <a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a>

        .
        .

    <!-- External JavaScripts
    ============================================= -->
    <script src="js/jquery.js"></script>
        .
        .
    <script src='js/functions.js'></script>

</body>
</html>

Now i will talk about each main section as following:

<head>

<head> contains common meta tags, title, favicon and the attachment of CSS stylesheet.

<!DOCTYPE html>
<html lang="en-US">

<head>

    <!-- Meta
    ============================================= -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="author" content="IT Geeks">
    <!-- description -->
    <meta name="description" content="">
    <!-- keywords -->
    <meta name="keywords" content="">

    <!-- Stylesheets
    ============================================= -->
    <link href="css/css-assets.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- Favicon
    ============================================= -->
    <link rel="shortcut icon" href="images/general-elements/favicon/favicon.png">
    <link rel="apple-touch-icon" href="images/general-elements/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/general-elements/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/general-elements/favicon/apple-touch-icon-114x114.png">

    <!-- Title
    ============================================= -->
    <title>Tech Gears</title>

</head>

Body

<body> contains the appearing content like header, main content and footer. JS attachment is at the end of body tag

<body class="homepage">

    <!-- Document Full Container
    ============================================= -->
    <div id="full-container">

        <!-- Header
        ============================================= -->
        <header id="header">

            <div id="header-bar-1" class="header-bar sticky">
        
                <div class="header-bar-wrap">
        
                    .
                    .

                </div><!-- .header-bar-wrap -->
        
            </div><!-- #header-bar-1 end -->

        </header><!-- #header end -->

        <!-- Banner
        ============================================= -->
        <section id="banner" data-scroll-index="0">
        
            <div class="banner-parallax" data-banner-height="750">
                <div class="slider-banner">
                    <ul class="slick-slider slider-img-bg">
                        <li>
                            .
                            .
                        </li>
                    </ul><!-- .slick-slider end -->
                </div><!-- .slider-banner end -->
            </div><!-- .banner-parallax end -->
        
        </section><!-- #banner end -->
    
        <!-- Content
        ============================================= -->
        <section id="content">

            <div id="content-wrap">

                <!-- === What We Do =========== -->
                <div id="what-we-do" class="section-flat" data-scroll-index="1">

                    <div class="section-content">

                        .
                        .
                        
                    </div><!-- .section-content end -->
                    
                </div><!-- .section-flat end -->

                <!-- === About Us =========== -->
                <div id="about-us" class="section-flat" data-scroll-index="1">
                
                    <div class="section-content">

                        .
                        .
                        
                    </div><!-- .section-content end -->
                
                </div><!-- .section-flat end -->

            </div><!-- #content-wrap -->
            
        </section><!-- #content end -->

        <!-- Footer
        ============================================= -->
        <footer id="footer">
        
            <div id="footer-bar-1" class="footer-bar text-white">
        
                <div class="footer-bar-wrap">
        
                    .
                    .
        
                </div><!-- .footer-bar-wrap -->
        
            </div><!-- #footer-bar-1 end -->

            <div id="footer-bar-2" class="footer-bar text-white">
            
                <div class="footer-bar-wrap">
        
                    .
                    .
        
                </div><!-- .footer-bar-wrap -->
            
            </div><!-- #footer-bar-2 end -->
        
        </footer><!-- #footer end -->
        
        <div class="side-panel-menu">
            <div class="mobile-side-panel-menu">
                <ul id="menu-mobile" class="menu-mobile">
        
                </ul><!-- .mobile-menu-categories end -->
            </div><!-- .mobile-side-panel-menu end -->
        </div><!-- .side-panel-menu end -->
        
    </div><!-- #full-container end -->

    <a class="scroll-top-icon scroll-top" href="javascript:;"><i class="fa fa-angle-up"></i></a>

    <!-- External JavaScripts
    ============================================= -->
    <script src="js/jquery.js"></script>
    <script src="js/jRespond.min.js"></script>
    <script src="js/jquery.fitvids.js"></script>
    <script src="js/superfish.js"></script>
    <script src="scss/slick/slick.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/scrollIt.min.js"></script>
    <script src='js/functions.js'></script>

</body>

Header contains 2 bars as following:

1. Header Bar 1
2. Header Bar 2

From outside, the 2 bars are wrapped with <header id="header"> as the following:

<!-- Header
============================================= -->
<header id="header">
    .
    .
</header><!-- #header end -->

Now i will describe each bar and its general inner content.

Header Bar 1

It consists of 2 sides which are left and right as following:

The content is as following:

<!-- Header
============================================= -->
<header id="header">

    <div id="header-bar-1" class="header-bar">

        <div class="header-bar-wrap">

            <div class="container">
                <div class="row">
                    <div class="col-md-12">

                        <div class="hb-content">
                            <div class="position-left">
                                .
                                .
                            </div><!-- .position-left end -->
                            <div class="position-right">
                                .
                                .
                            </div><!-- .position-right end -->
                        </div><!-- .hb-content end -->

                    </div><!-- .col-md-12 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->

        </div><!-- .header-bar-wrap -->

    </div><!-- #header-bar-1 end -->

</header><!-- #header end -->

Header Bar 2

It contains Logo, Menu Main & Language Switcher Button as following:

<!-- Header
============================================= -->
<header id="header">

    <div id="header-bar-2" class="header-bar sticky">

        <div class="header-bar-wrap">

            <div class="container">
                <div class="row">
                    <div class="col-md-12">

                        <div class="hb-content">
                            <a class="logo logo-header" href="index.html">
                                <img src="images/files/logo-header.png" data-logo-alt="images/files/logo-header-alt.png" alt="">
                                <h3><span class="colored">IT Geeks</span></h3>
                                <span>Web Services</span>
                            </a><!-- .logo end -->
                            <ul id="menu-main" class="menu-main">
                                <li><a href="javascript:;" class="current">Home</a></li>
                                <li><a href="javascript:;">Flights</a></li>
                                <li><a href="javascript:;">Hotels</a></li>
                                <li><a href="javascript:;">Car Rental</a></li>
                                <li><a href="javascript:;">Guides</a></li>
                                <li>
                                    <a href="javascript:;">Pages</a>
                                    <ul class="sub-menu">
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="login.html">Login</a></li>
                                        <li><a href="register.html">Register</a></li>
                                        <li><a href="blog-single.html">Blog Single</a></li>
                                        <li><a href="destination-single.html">Destination Single</a></li>
                                        <li><a href="booking-hotel-single.html">Booking Hotel Reservation</a></li>
                                        <li><a href="booking-hotel-payment.html">Booking Hotel Payment</a></li>
                                        <li><a href="booking-hotel-confirmation.html">Booking Hotel Confirmation</a></li>
                                        <li><a href="profile-hotel-availability.html">Profile Hotel Availability</a></li>
                                    </ul><!-- .sub-menu end -->
                                </li>
                            </ul><!-- #menu-main end -->
                            <div class="menu-mobile-btn">
                                <div class="hamburger hamburger--slider">
                                    <span class="hamburger-box">
                                        <span class="hamburger-inner"></span>
                                    </span>
                                </div>
                            </div><!-- .menu-mobile-btn end -->
                            <a class="btn-header popup-btn-language-choice btn medium colorful hover-dark ml-30 ml-sm-20 move-top" href="javascript:;">EGP / AR</a>
                        </div><!-- .hb-content end -->

                    </div><!-- .col-md-12 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->

        </div><!-- .header-bar-wrap -->

    </div><!-- #header-bar-2 end -->

</header><!-- #header end -->

Banner has the following code:

<!-- Banner
============================================= -->
<section id="banner">

    <div class="banner-parallax" data-banner-height="550">
        <img src="images/files/parallax-bg/img-4.jpg" alt="">
        <div class="overlay-colored color-bg-white opacity-40"></div><!-- .overlay-colored end -->
        <div class="slide-content">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
        
                        <div class="banner-center-box">
                            <h1 class="font-heading-secondary">
                                <strong>Go</strong> Tour
                                <br>
                                With <strong>Tazkarty</strong>
                            </h1>
                            <h4>Visit Europe, America, Asia, Africa or beyond!</h4>
                            <div class="banner-reservation-tabs">
                                .
                                .
                            </div><!-- .banner-reservation-tabs end -->
                        </div><!-- .banner-center-box end -->
        
                    </div><!-- .col-md-12 end -->
                </div><!-- .row end -->
            </div><!-- .container end -->
        </div><!-- .slide-content end -->
    </div><!-- .banner-parallax end -->

</section><!-- #banner end -->

The default height of the slider is 800px. The height can be controlled by the data-banner-height="value" as follows:

<div class="banner-parallax" data-banner-height="550">

Also there is a colored overlay for each slide. You can control its opacity by adding class from opacity-05, opacity-10, opacity-15 to opacity-95 as following:

<div class="overlay-colored color-bg-dark opacity-40"></div><!-- .overlay-colored end -->

There is a Reservation Tabs used in banner which have the following code:

<div class="banner-reservation-tabs">
    <ul class="br-tabs">
        <li class="active"><a href="javascript:;">Round Trip</a></li>
        <li><a href="javascript:;">One Way</a></li>
        <li><a href="javascript:;">Multiple Destinations</a></li>
    </ul><!-- .br-tabs end -->
    <ul class="br-tabs-content">
        <li class="active">

        </li>
        <li>

        </li>
        <li>

        </li>
    </ul><!-- .br-tabs-content end -->
</div><!-- .banner-reservation-tabs end -->

The Content container contains all the main contents of the template.

The main content section has the following code:

<!-- Content
============================================= -->
<section id="content">

    <div id="content-wrap">

        <!-- === What We Do =========== -->
        <div id="what-we-do" class="section-flat">

            <div class="section-content">

                .
                .
                
            </div><!-- .section-content end -->
            
        </div><!-- .section-flat end -->

        <!-- === About Us =========== -->
        <div id="about-us" class="section-flat">
        
            <div class="section-content">

                .
                .
                
            </div><!-- .section-content end -->
        
        </div><!-- .section-flat end -->

    </div><!-- #content-wrap -->
    
</section><!-- #content end -->

Here are the following included sections in the homepage as following:

• Section About 1
• Section Top Destinations
• Section Popular Packages
• SectionServices 1
• Section Customers Review
• Section News Events

They will be as following:

Section About 1

It's a flat section with id="section-about-1" as following:

<!-- === Section About 1 =========== -->
<div id="section-about-1" class="section-flat">

    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

It has box info with class box-about-1 as following:

<div class="box-info box-about-1">
    <div class="box-content">
        <h4>
            <i class="far fa-heart"></i>
            Sed Magni
        </h4>
        <p>
            Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. architecto beatae vitae dicta.
        </p>
    </div><!-- .box-content end -->
</div><!-- .box-info box-about-1 end -->

it also has video preview with class video-preview as following:

<div class="video-preview mt-md-60">
    <a class="img-bg lightbox-iframe" href="https://vimeo.com/45830194">
        <div class="overlay-colored color-bg-dark opacity-50"></div><!-- .overlay-colored end -->
        <img src="images/files/bg-video-preview/img-1.jpg" alt="">
    </a><!-- .img-bg end -->
    <a class="btn-video lightbox-iframe" href="https://vimeo.com/45830194">
        <i class="fa fa-play"></i>
    </a><!-- .btn-video end -->
</div><!-- .video-preview end -->

Section Top Destinations

It's a flat section with id="section-top-destinations" as following:

<!-- === Section Top Destinations =========== -->
<div id="section-top-destinations" class="section-flat">

    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

It has a slider with class slider-top-destinations as following:

<div class="slider-top-destinations">
    <ul class="slick-slider">
        <li>
            <div class="box-preview box-area-destination">
                <div class="box-img img-bg">
                    <a href="javascript:;"><img src="images/files/box-area-destination/img-2.jpg" alt=""></a>
                    <div class="overlay">
                        <div class="overlay-inner">
                        </div><!-- .overlay-inner end -->
                    </div><!-- .overlay end -->
                </div><!-- .box-img end -->
                <div class="box-content">
                    <i class="fas fa-map-marker-alt"></i>
                    <div class="title">
                        <h5><a href="javascript:;">South America</a></h5>
                        <h6>3 Tours</h6>
                    </div><!-- .title end -->
                </div><!-- .box-content end -->
            </div><!-- .box-preview end -->
        </li>
        <li>
            .
            .
        </li>
    </ul><!-- .slick-slider end -->
</div><!-- .slider-top-destinations end -->

Section Popular Packages

It's a parallax section with id="section-popular-packages" as following:

<!-- === Section Popular Packages =========== -->
<div id="section-popular-packages" class="section-parallax">

    <img src="images/files/parallax-bg/img-8.jpg" alt="">
    <div class="overlay-colored color-bg-white opacity-80"></div><!-- .overlay-colored end -->
    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

It has a slider with class slider-popular-packages as following:

<div class="slider-popular-packages">
    <ul class="slick-slider">
        <li>
            <div class="box-preview box-tour-package">
                <div class="box-img img-bg">
                    <a href="javascript:;"><img src="images/files/box-tour-package/img-2.jpg"
                            alt=""></a>
                    <div class="overlay">
                        <div class="overlay-inner">
                        </div><!-- .overlay-inner end -->
                    </div><!-- .overlay end -->
                    <span class="night-price">$65/Night</span>
                </div><!-- .box-img end -->
                <div class="box-content">
                    <h4><a href="javascript:;">Deluxe Double Bed</a></h4>
                    <p>
                        Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                    </p>
                    <ul class="list-meta">
                        <li><i class="fas fa-bed"></i>4</li>
                        <li><i class="far fa-user"></i>2</li>
                        <li><i class="fas fa-users"></i>3</li>
                        <li><i class="fas fa-ruler-combined"></i>87m²</li>
                    </ul><!-- .list-meta end -->
                </div><!-- .box-content end -->
            </div><!-- .box-preview end -->
        </li>
            .
            .
    </ul><!-- .slick-slider end -->
</div><!-- .slider-popular-packages end -->

Inside the slider there is a box preview with class box-tour-package as following:

<div class="box-preview box-tour-package">
    <div class="box-img img-bg">
        <a href="javascript:;"><img src="images/files/box-tour-package/img-2.jpg"
                alt=""></a>
        <div class="overlay">
            <div class="overlay-inner">
            </div><!-- .overlay-inner end -->
        </div><!-- .overlay end -->
        <span class="night-price">$65/Night</span>
    </div><!-- .box-img end -->
    <div class="box-content">
        <h4><a href="javascript:;">Deluxe Double Bed</a></h4>
        <p>
            Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
        </p>
        <ul class="list-meta">
            <li><i class="fas fa-bed"></i>4</li>
            <li><i class="far fa-user"></i>2</li>
            <li><i class="fas fa-users"></i>3</li>
            <li><i class="fas fa-ruler-combined"></i>87m²</li>
        </ul><!-- .list-meta end -->
    </div><!-- .box-content end -->
</div><!-- .box-preview end -->

Section Services 1

It's a flat section with id="section-services-1" as following:

<!-- === Section Services 1 =========== -->
<div id="section-services-1" class="section-flat">

    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

There is a box info with class Box Service 1 as following:

<div class="box-info box-service-1">
    <div class="box-icon">
        <i class="fas fa-wifi"></i>
    </div><!-- .box-icon end -->
    <div class="box-content">
        <h4><a href="javascript:;">Enjoy Free Wi-Fi</a></h4>
        <p>
            Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. architecto beatae vitae dicta.
        </p>
    </div><!-- .box-content end -->
</div><!-- .box-info box-service-1 end -->

Section Customers Review

It's a flat section with id="section-customers-review" as following:

<!-- === Section Customers Review =========== -->
<div id="section-customers-review" class="section-flat">

    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

There is slider with class slider-testimonials as following:

<div class="slider-testimonials">
    <ul class="slick-slider">
        <li>
            <div class="testimonial-single-1">
                <div class="ts-content">
                    <div class="rating">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                    </div><!-- .rating end -->
                    <p>
                        Consectetur adipisicing elit, sed do eiusmo incididunt ut labore et dolore magna aliqua. Ut enim minim
                        veniam, Lorem ipsum dolor sit amet, sed do eiusmo incididunt ut labore.
                    </p>
                    <i class="sign-quote fas fa-quote-left"></i>
                </div><!-- .ts-content end -->
                <div class="ts-person">
                    <div class="ts-img">
                        <img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
                    </div><!-- .ts-img end -->
                    <div class="ts-name">
                        <h5>John Doe</h5>
                        <span>Customer</span>
                    </div><!-- .ts-name end -->
                </div><!-- .ts-person end -->
            </div><!-- .testimonial-single-1 end -->
        </li>
            .
            .
    </ul><!-- .slick-slider end -->
</div><!-- .slider-testimonials end -->

Inside the slider there is testimonail single with class testimonial-single-1 as following:

<div class="testimonial-single-1">
    <div class="ts-content">
        <div class="rating">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div><!-- .rating end -->
        <p>
            Consectetur adipisicing elit, sed do eiusmo incididunt ut labore et dolore magna aliqua. Ut enim minim
            veniam, Lorem ipsum dolor sit amet, sed do eiusmo incididunt ut labore.
        </p>
        <i class="sign-quote fas fa-quote-left"></i>
    </div><!-- .ts-content end -->
    <div class="ts-person">
        <div class="ts-img">
            <img src="images/files/sliders/clients-testimonials/img-1.jpg" alt="">
        </div><!-- .ts-img end -->
        <div class="ts-name">
            <h5>John Doe</h5>
            <span>Customer</span>
        </div><!-- .ts-name end -->
    </div><!-- .ts-person end -->
</div><!-- .testimonial-single-1 end -->

Section News Events

It's a flat section with id="section-news-events" as following:

<!-- === Section News Events =========== -->
<div id="section-news-events" class="section-flat">

    <div class="section-content">
        
        .
        .

    </div><!-- .section-content end -->

</div><!-- .section-flat end -->

It has a list grid masonry of box news event as following:

<ul class="list-boxes boxes-3 grid-masonry">
    <li>
        <div class="box-preview box-news-event">
            <div class="box-img img-bg">
                <a href="javascript:;"><img src="images/files/box-news-event/img-1.jpg" alt=""></a>
                <div class="overlay">
                    <div class="overlay-inner">
                    </div><!-- .overlay-inner end -->
                </div><!-- .overlay end -->
            </div><!-- .box-img end -->
            <div class="box-content">
                <h4><a href="javascript:;">Opening of the Restaurant</a></h4>
                <p>
                    Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.
                </p>
                <div class="meta-event">
                    <span class="date">April 20, 2019</span>
                    <a href="javascript:;" class="btn-rm">Read More</a>
                </div><!-- .meta-event end -->
            </div><!-- .box-content end -->
        </div><!-- .box-preview end -->
    </li>
        .
        .
    <li>
        
    </li>
</ul><!-- .list-boxes end -->

There is also a slider with class slider-instagram-feed as following:

<div class="slider-instagram-feed">
    <ul class="slick-slider">
        <li>
            <div class="instagram-img">
                <a href="javascript:;" class="img-bg"><img src="images/files/instagram-feed/img-1.jpg" alt=""></a>
            </div><!-- .instagram-img end -->
        </li>
            .
            .
        <li>
            
        </li>
    </ul><!-- .slick-slider end -->
</div><!-- .slider-instagram-feed end -->

Each single page must have class page-single in <body> tag as following:

<body class="page-single">

You can make the background color of the single pages to grey by adding class bg-grey as following:

<body class="page-single bg-grey">

There is 2 layouts for single pages. If we need to make a page with sidebar, we need to add class with-sidebar as following:

<body class="page-single bg-grey with-sidebar">

The content layout in case of with sidebar pages is as following:

<!-- Content
============================================= -->
<section id="content">

    <div id="content-wrap">

        <!-- === Section Flat =========== -->
        <div class="section-flat">

            <div class="section-content">

                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            
                            <div class="page-single-content">
                                
                                <div class="row">
                                    <div class="col-lg-8 col-md-12">
                                
                                        <div class="content-main">
                                            .
                                            .
                                        </div><!-- .content-main end -->
                                
                                    </div><!-- .col-lg-8 end -->
                                    <div class="col-lg-4 col-md-12">
                                
                                        <div class="sidebar style-2">
                                            .
                                            .
                                        </div><!-- .sidebar end -->
                                
                                    </div><!-- .col-lg-4 end -->
                                </div><!-- .row end -->

                            </div><!-- .page-single-content end -->
                            
                        </div><!-- .col-md-12 end -->
                    </div><!-- .row end -->
                </div><!-- .container end -->

            </div><!-- .section-content end -->

        </div><!-- .section-flat end -->

    </div><!-- #content-wrap -->

</section><!-- #content end -->

There is class page-single-content wraps the main content and the sidebar.

They are as following:

• Content Main
• Sidebar

Content Main

It's a <div> tag with class content-main as following:

<div class="content-main">
    .
    .
</div><!-- .content-main end -->

Inside main content, there is boxed block content with shadow. It has the following code:

<div class="block-content">
    .
    .
</div><!-- .block-content end -->

There is block content with different padding depending on the style of design.

The default padding is 30px.

To get block content with big padding of 50px, just add class style-2 as following:

<div class="block-content style-2">
    .
    .
</div><!-- .block-content end -->

Also there small different change on block content by changing only the default padding bottom to 50px. just add class style-3 as following:

<div class="block-content style-3">
    .
    .
</div><!-- .block-content end -->

You can add block title for the block content as following:

<div class="block-content-2 style-3">
    <div class="block-title">
        <h3><span class="colored">03</span> Confirmation</h3>
    </div><!-- .block-title end -->
</div><!-- .block-content end -->

Also you can repeat the use of this title inside block content.

Sidebar

By default, the sidebar position is on right. To make its position on left just add class sidebar-left to <div class="page-single-content"> as following:

<div class="page-single-content with-sidebar">
    .
    .
</div><!-- .page-single-content end -->

There is a style for the sidebar with white background color and shadow effect. Just add clase style-1 to <div class="sidebar"> as following:

<div class="sidebar style-1">
    .
    .
</div><!-- .sidebar end -->

The default style needs to add class style-2 to <div class="sidebar"> as following:

<div class="sidebar style-2">
    .
    .
</div><!-- .sidebar end -->

Inside sidebar, there is box widgets with the following code:

<div class="box-widget">
    <h5 class="box-title">Title</h5>
    <div class="box-content">
        .
        .
    </div><!-- .box-content end -->
</div><!-- .box-widget end -->

Also there is different style of content in sidebar as list box sidebar which can be used as row content separated with lines.

It's also can be repeated. It has the following code:

<ul class="list-box-sidebar">
    <li>
        .
        .
    </li>
    <li>
        .
        .
    </li>
</ul><!-- .list-box-sidebar end -->

By default, the English version is the default direction of the template. The full RTL version is included in the rtl/ sub-folder.

For the English (LTR) version, here are the included stylesheets in <head>:

<link href="css/css-assets.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/premium.css" rel="stylesheet">

For the RTL (Arabic) version, here are the included stylesheets in <head>:

<link href="../css/css-assets.css" rel="stylesheet">
<link href="../css/bootstrap-rtl.css" rel="stylesheet">
<link href="../css/style-rtl.css" rel="stylesheet">
<link href="../css/premium.css" rel="stylesheet">

Google Fonts are loaded non-blocking via <link rel="preload" as="style"> with the onload pattern in each HTML file's <head> — not via @import in CSS — to eliminate the serial loading waterfall.

Footer is consists of 2 bars as following:

• Footer Bar 1
• Footer Bar 2

Footer has the following code:

<!-- Footer
============================================= -->
<footer id="footer">

    <div id="footer-bar-1" class="footer-bar text-white">

        <div class="footer-bar-wrap">

            .
            .

        </div><!-- .footer-bar-wrap -->

    </div><!-- #footer-bar-1 end -->

    <div id="footer-bar-2" class="footer-bar text-white">
    
        <div class="footer-bar-wrap">
    
            .
            .
    
        </div><!-- .footer-bar-wrap -->
    
    </div><!-- #footer-bar-2 end -->

</footer><!-- #footer end -->

There is another dark style for the footer. Just add class footer-dark to <body> tag as following:

<body class="page-single bg-grey with-sidebar footer-dark">

Footer Bar 1

It's has id="footer-bar-1" as following:

<div id="footer-bar-1" class="footer-bar">

    <div class="footer-bar-wrap">

        .
        .

    </div><!-- .footer-bar-wrap -->

</div><!-- #footer-bar-1 end -->

There is a list contact info with class list-contact-info as following:

<ul class="list-contact-info">
    <li>
        <i class="fas fa-envelope"></i>
        <div class="info-content">
            <span>info@itgeeks.info</span>
        </div><!-- .info-content end -->
    </li>
    <li>
        <i class="fas fa-phone"></i>
        <div class="info-content">
            <span>55046994(965)+</span>
        </div><!-- .info-content end -->
    </li>
    <li>
        <i class="fas fa-map-marker-alt"></i>
        <div class="info-content">
            <span>Al Noor Tower, Ibn Sina Mansoura</span>
        </div><!-- .info-content end -->
    </li>
</ul><!-- .list-contact-info end -->

There is a list gallery thumbs with class list-gallery-thumbs as following:

<ul class="list-gallery-thumbs">
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-1.jpg" alt=""></a></li>
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-2.jpg" alt=""></a></li>
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-3.jpg" alt=""></a></li>
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-4.jpg" alt=""></a></li>
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-5.jpg" alt=""></a></li>
    <li><a href="javascript:;"><img src="images/files/gallery-thumbs/img-6.jpg" alt=""></a></li>
</ul><!-- .list-gallery-thumbs -->

There is form newsletter register with class .form-newsletter-register as following:

<form class="form-newsletter-register form-inline form-h-50">
    <div class="form-group">
        <div class="box-field">
            <input type="text" name="email" class="form-control" placeholder="Enter Your Email Address">
            <button type="submit" class="form-control icon"><i class="fas fa-long-arrow-alt-up"></i></button>
        </div><!-- .box-field end -->
    </div><!-- .form-group end -->
    <span class="form-note">Enter your email address for promotions, news and updates.</span>
</form><!-- .form-newsletter-register end -->

There is a social icons with class social-icons as following:

<ul class="social-icons x5 white hover-colorful icon-only mt-10">
    <li><a class="si-youtube" href="javascript:;"><i class="fa fa-youtube"></i><i class="fa fa-facebook"></i></a></li>
    <li><a class="si-twitter" href="javascript:;"><i class="fa fa-twitter"></i><i class="fa fa-twitter"></i></a></li>
    <li><a class="si-facebook" href="javascript:;"><i class="fa fa-facebook"></i><i class="fa fa-twitter"></i></a></li>
    <li><a class="si-instagramorange" href="javascript:;"><i class="fa fa-instagram"></i><iclass="fa fa-instagram"></i></a></li>
</ul><!-- .social-icons end -->

Footer Bar 2

It's has id="footer-bar-2" as following:

<div id="footer-bar-2" class="footer-bar text-white">

    <div class="footer-bar-wrap">

        .
        .

    </div><!-- .footer-bar-wrap -->

</div><!-- #footer-bar-2 end -->

There is copyrights message with class copyrights-message as following:

<div class="copyrights-message">
    <span>All right reserved to</span> <a href="http://itgeeks.info/" target="_blank">itGeeks</a> <span>©2020</span>
</div>

All CSS files are stored in the css/ folder. The main template styles are built with Sass; source files live in scss/.

There are 2 .scss files compiled to 2 .css files attached in each HTML file.

style.scss imports 5 partials:

• commons.scss
• header.scss
• banner.scss
• content.scss
• footer.scss

css-assets.scss bundles all third-party library imports (Bootstrap, Slick, FontAwesome, Magnific Popup, jQuery UI).

_variables.scss contains Sass variables for values used throughout the template.

premium.css is a standalone, minified stylesheet that layers on top of style.css. It provides:

• Design tokens — CSS custom properties: --tk-navy, --tk-blue, --tk-gold, shadow scale (--tk-s1…--tk-s4), radius scale (--tk-r-sm…--tk-r-2xl), motion tokens (--tk-fast, --tk-normal, --tk-slow, --tk-ease)
• Header enhancements — glassmorphism backdrop on scroll, gradient brand button
• Component upgrades — card hover lift, section reveals (.tk-reveal + stagger delays), animated counters
• Login/Register popup — gradient block-title, styled submit CTA, neutral social OAuth buttons, RTL close button fix
• Language switcher popup — flag cards, currency grid, gradient Save button, glassmorphism backdrop
• Auth pages — .tk-auth-page two-column layout, visual panel with ken-burns image, form card
• Accessibility fixes — contrast ratios for top-bar icons, footer icons, alert variants, .mfp-close

style.scss file is as following:

/*=================================================================================

    Theme Name: Tazkarty
    Theme URI: http://itgeeks.info/
    Description: Travel HTML Template
    Author: ITGeeks
    Author URI: http://itgeeks.info/
    Version: 1.0

    SCSS Stylesheet

===================================================================================*/



// Imports ( Others at Bottom )
// ==================================

@import "commons";

// ==================================



/**
 *  styles.css file is divided as the following:
 *  
 *  ( 01 ) - General Settings
 *  ( 02 ) - General Contents
 *  ( 03 ) - Header
 *  ( 04 ) - Banner
 *  ( 05 ) - Content
 *  ( 06 ) - Footer
 *
 */


@import "header";
@import "banner";
@import "content";
@import "footer";




// Imports ( Rest imports )
// ==================================


// ==================================

The css-assets.scss which has all general css assets include, is as following:

/*=====================================================================
 
    CSS ASSETS
    ----------

    Here are all imports of css libraries and helpers like
    Bootstrap, fontAwesome, Owl Carousel, .. etc.

 *=================================================================== */


// CSS Assets Imports
// ==================================

@import "https://fonts.googleapis.com/css?family=Montserrat:500,700|Raleway:400,700&display=swap";
@import "_variables";
@import "bootstrap";
@import "slick/slick.scss";
@import "../fonts/fontawesome/css/all.css";
@import "https://use.fontawesome.com/releases/v5.3.1/css/v4-shims.css";
@import "magnific-popup";
@import "hamburgers/hamburgers";

// ==================================

This template uses several scripts. All JS files live in the js/ folder and are attached at the bottom of each HTML file:

<!-- External JavaScripts
============================================= -->
<script src="js/jquery.min.js"></script>
<script src="js/jRespond.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/superfish.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/scrollIt.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/price-range.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/functions.js"></script>
<script src="js/premium.js" defer></script>

jquery.min.js — jQuery 3.7.1 (minified). Note: the unminified jquery.js was removed as it was a redundant 84 KB file that was never loaded.

functions.js — plugin initialisation and custom scripts. All code is commented for understanding and customisation.

premium.js — loaded with defer (non-blocking). Contains 8 self-initialising modules:

• initHeaderScroll — adds .header-scrolled class when the user scrolls past 55 px (glassmorphism header effect)
• initReveal — IntersectionObserver that adds .visible to cards and section titles as they enter the viewport, with staggered .d1–.d5 delay classes for siblings
• initRipple — click ripple effect on all .btn and button elements
• initInputFocus — adds .tk-focused to the nearest .form-group / .box-field on input focus/blur
• initImageFade — fades in lazy-loaded images (loading="lazy") once they finish loading
• initCounters — animates elements with data-counter="N" from 0 to N using an ease-out curve when they scroll into view
• initSectionTints — stamps data-section-index on each .section-flat for alternating tint CSS rules
• initLanguageSwitcher — drives the language/currency popup: reads the current path to detect RTL, persists currency in localStorage, and redirects to rtl/<filename> or back when the user saves a language change

Fonts

• Google Fonts (Montserrat, Raleway, Cairo) — https://fonts.google.com/
• Font Awesome 5 — https://fontawesome.com/

CSS Frameworks & Libraries

• Bootstrap 3.4.1 — https://getbootstrap.com/docs/3.4/
• Bootstrap RTL — right-to-left grid overrides (bootstrap-rtl.css)
• jQuery UI (self-hosted) — https://jqueryui.com/
• Magnific Popup — https://dimsemenov.com/plugins/magnific-popup/
• Hamburgers — https://jonsuh.com/hamburgers/
• Slick Carousel — https://kenwheeler.github.io/slick/

Scripts

• jQuery 3.7.1 — https://jquery.com/
• Select2 — https://select2.org/
• Isotope — https://isotope.metafizzy.co/
• ScrollIt — smooth scroll utility
• jRespond — responsive JS breakpoints
• FitVids — fluid-width video embeds
• Superfish — accessible dropdown menus

Photography

• Unsplash — free high-resolution photography — https://unsplash.com/
  Images are served directly from images.unsplash.com CDN. A <link rel="preconnect"> hint is included in every page's <head> for fastest delivery.

PSD

No PSD files included.

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.

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

Regards,
ITGeeks

Here are the updates series information.

Version 1.7

(10 / 06 / 2026)

• Performance — Google Fonts moved to non-blocking preload pattern on all 36 pages
• LCP — fetchpriority="high" + <link rel="preload" as="image"> for hero banners
• premium.js loaded with defer; minified 9 KB → 6 KB
• premium.css minified ~80 KB → ~53 KB
• jQuery UI CSS self-hosted (removed CDN @import)
• Removed redundant unminified jquery.js (84 KB)
• Added preconnect + dns-prefetch for images.unsplash.com

Version 1.6

(10 / 06 / 2026)

• New standalone login.html and register.html pages — two-column auth layout
• Auth visual panel: Unsplash hero, ken-burns animation, dark overlay, logo, tagline, feature list
• Auth form card: 420px max-width, gradient submit CTA, neutral social OAuth buttons
• RTL equivalents: HTML/rtl/login.html and HTML/rtl/register.html
• New .tk-auth-* CSS components in premium.css Section 30

Version 1.5

(10 / 06 / 2026)

• Full language/currency switcher redesign — flag cards, currency grid, gradient Save button, glassmorphism backdrop
• LTR ↔ RTL redirect logic in premium.js (initLanguageSwitcher)
• Currency preference persisted in localStorage
• Keyboard Escape closes the language popup

Version 1.4

(10 / 06 / 2026)

• Real Unsplash CDN photography across all 36 pages (LTR + RTL)
• Native lazy loading (loading="lazy") on all non-hero images
• Image fade-in on load via initImageFade()

Version 1.3

(10 / 06 / 2026)

• New premium.css — design token system, component upgrades, glassmorphism header
• New premium.js — 8 enhancement modules (IntersectionObserver reveals, button ripple, animated counters, language switcher)
• Login/register popup fully restyled — gradient title bar, CTA button, neutral social buttons, RTL close button fix
• Fixed duplicate .popup-language-choice selector in premium.css
• Fixed contrast ratios on top-bar icons, footer icons, alerts, .mfp-close (WCAG AA)
• Removed erroneous !important from letter-spacing on header/booking buttons

Version 1.2

(29 / 02 / 2020)

• New: Car Single Page
• New: Car Booking Confirmation Page

Version 1.1

(18 / 02 / 2020)

• New: RTL support

Version 1.0

(11 / 02 / 2020)

First release.