Bootstrap 5.3.3 · Vanilla JS · No jQuery
Welcome to Tazkarty V2 — a complete rebuild of the Tazkarty travel booking template using Bootstrap 5.3.3, vanilla JavaScript, and Flatpickr. This version drops jQuery entirely and delivers a faster, leaner, more modern codebase while keeping the same premium design.
Upgraded from Bootstrap 3.4.1. Native flexbox/grid utilities, no jQuery dependency.
All interactions rewritten in vanilla JS. ~87KB lighter than V1.
Replaced jQuery UI Datepicker with Flatpickr — 16KB, mobile-friendly, no dependencies.
Arabic version uses Bootstrap's native RTL stylesheet instead of manual CSS overrides.
Deferred scripts, non-blocking fonts, Bootstrap 5 CDN. Typical FCP < 1.2s.
Semantic HTML5, ARIA labels, accessible forms, keyboard navigation support.
All assets are loaded via CDN — no build step or npm install required. Simply open any HTML file in a browser.
Scripts go before </body>:
All design values are CSS custom properties defined in css/premium.css:
| Token | Value | Usage |
|---|---|---|
--tk-navy | #0b1437 | Primary dark, header, footer |
--tk-blue | #1a5fff | CTAs, links, active states |
--tk-gold | #c4922a | Accent, badges, highlights |
--tk-bg | #f4f5f9 | Page background |
--tk-grad-brand | navy→blue gradient | Buttons, hero overlay |
--tk-s1 … --tk-s4 | Shadow scale | Cards, modals, dropdowns |
--tk-r-sm … --tk-r-2xl | 4px → 36px | Border-radius scale |
| File | Page | Notes |
|---|---|---|
index.html | Homepage | Hero search, featured sections |
flights.html | Flight Search Results | Sidebar filters, 6 result cards |
hotels.html | Hotel Search Results | Sidebar filters, 6 hotel cards |
search.html | Combined Search | Tabbed results: flights/hotels/destinations |
booking-flight-checkout.html | Flight – Passenger Details | Step 1 of 3 |
booking-flight-payment.html | Flight – Payment | Step 2 of 3 |
booking-flight-confirmation.html | Flight – Confirmed | Step 3 of 3, booking ref |
booking-flight-invoice.html | E-Ticket & Invoice | Print-ready, @media print rules |
booking-hotel-single.html | Hotel Room Selection | Gallery, rooms, amenities |
booking-hotel-payment.html | Hotel Payment | Step 2 flow |
booking-hotel-confirmation.html | Hotel Confirmed | Booking ref, summary |
car-rental.html | Car Rental Listing | 6 car cards with filters |
car-single.html | Car Details | Specs, booking sidebar |
car-booking-confirmation.html | Car Booking Confirmed | |
login.html | Sign In | Full-page two-column auth layout |
register.html | Create Account | Full-page two-column auth layout |
destination-single.html | Destination Guide | Gallery, attractions, practical info |
guides.html | Travel Guides | Featured guide + 9 guide cards |
blog-single.html | Blog Post | Full article, sidebar |
profile-hotel-availability.html | User Profile | Bookings list, availability calendar |
The Arabic version of V2 is currently in development (65% complete). When ready, it will use Bootstrap 5's native RTL stylesheet:
No manual [dir="rtl"] CSS overrides needed — Bootstrap 5 handles all logical properties natively.
| Library | Version | Purpose |
|---|---|---|
| Bootstrap | 5.3.3 | CSS framework + JS components |
| Flatpickr | latest | Date picker |
| Font Awesome | 5.15.4 | Icons |
| Google Fonts | — | Montserrat, Raleway, Cairo |
| Unsplash CDN | — | Photography |
Designed & developed by ITGeeks · info@itgeeks.store · +201002747846