home html ............................ TAJ AIRLINE

Welcome Passenger
Have A Great Experience

Economy Class Business Class First Class

Where are you goung?

Add guests

Add date

Add date

TRAVEL SUPPORT

Plan your travel with confidence

Find help with your bookings and travel plans, and seee what to expect along your journey.

01

Travel Requirements for Dubai

Stay informed and prepared for your trip to Dubai with essential travel requirements, ensuring a smooth and hassle-free experience in this vibrant and captivating city.

02

Multi-risk travel insurance

Comprehensive protection for your peace of mind, covering a range of potential travel risks and unexpected situations.

03

Travel Requirements by destinations

Stay informed and plan your trip with ease, as we provide up-to-date information on travel requirements specific to your desired destinations.

plan plan plan

Travel to make memories all around the world

Book & relax

With "Book and Relax," you can sit back, unwind, and enjoy the journey while we take care of everything else.

Smart Checklist

Introducing Smart Checklist with us, the innovative solution revolutionizing the way you travel with our airline.

Save More

From discounted ticket prices to exclusive promotions and deals, we prioritize affordability without compromising on quality.

lounge lounge

Unaccompanied Minor Lounge

Experience Tranquility

Serenity Haven offers a tranquil escape, featuring comfortable seating, calming ambiance, and attentive service.

Elevate Your Experience

Designed for discerning travelers, this exclusive lounge offers premium amenities, assistance, and private workspaces.

A Welcoming Space

Creating a family-friendly atmosphere, The Family Zone is the perfect haven for parents and children.

A Culinary Delight

Immerse yourself in a world of flavors, offering international cuisines, gourmet dishes, and carefully curated beverages.

Best travellers of the month

traveller
client

Emily Johnson

Dubai

traveller
client

David Smith

Paris

traveller
client

Olivia Brown

Singapore

traveller
client

Daniel Taylor

Malaysia

Subscribe newsletter & get latest news

homecss................. @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap"); :root { --primary-color: #3d5cb8; --primary-color-dark: #334c99; --text-dark: #0f172a; --text-light: #64748b; --extra-light: #f1f5f9; --white: #ffffff; --max-width: 1200px; } * { padding: 0; margin: 0; box-sizing: border-box; } .section__container { max-width: var(--max-width); margin: auto; padding: 5rem 1rem; } .section__header { font-size: 2.5rem; font-weight: 600; line-height: 3rem; color: var(--text-dark); } .btn { padding: 0.75rem 2rem; outline: none; border: none; font-size: 1rem; font-weight: 500; color: var(--white); background-color: var(--primary-color); border-radius: 2rem; cursor: pointer; transition: 0.3s; } .btn:hover { background-color: var(--primary-color-dark); } a { text-decoration: none; } img { width: 100%; display: flex; } body { font-family: "Poppins", sans-serif; } nav { max-width: var(--max-width); margin: auto; padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .nav__logo { font-size: 1.5rem; font-weight: 600; color: var(--text-dark); } .nav__links { list-style: none; display: flex; align-items: center; gap: 2rem; } .link a { font-weight: 500; color: var(--text-light); transition: 0.3s; } .link a:hover { color: var(--text-dark); } .header__container .section__header { text-align: center; font-size: 3rem; line-height: 4rem; } .booking__container { border-radius: 2rem; border: 1px solid var(--extra-light); box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); } .booking__nav { max-width: 600px; margin: auto; display: flex; align-items: center; background-color: var(--extra-light); border-radius: 5px; } .booking__nav span { flex: 1; padding: 1rem 2rem; font-weight: 500; color: var(--text-light); text-align: center; border-radius: 5px; cursor: pointer; } .booking__nav span:nth-child(2) { color: var(--white); background-color: var(--primary-color); } .booking__container form { margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 1rem; } .booking__container .input__content { width: 100%; } .booking__container .form__group { display: flex; align-items: center; gap: 1rem; } .booking__container .form__group span { padding: 10px; font-size: 1.5rem; color: var(--text-dark); background-color: var(--extra-light); border-radius: 1rem; } .booking__container .input__group { width: 100%; position: relative; } .booking__container label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 1.2rem; font-weight: 500; color: var(--text-dark); pointer-events: none; transition: 0.3s; } .booking__container input { width: 100%; padding: 10px 0; font-size: 1rem; outline: none; border: none; border-bottom: 1px solid var(--primary-color); color: var(--text-dark); } .booking__container input:focus ~ label { font-size: 0.8rem; top: 0; } .booking__container .form__group p { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-light); } .booking__container .btn { padding: 1rem; font-size: 1.5rem; } .plan__container .subheader { margin-bottom: 1rem; text-align: center; font-weight: 600; color: var(--text-dark); letter-spacing: 5px; } .plan__container .section__header { text-align: center; font-size: 3rem; line-height: 4rem; margin-bottom: 1rem; } .plan__container .description { text-align: center; color: var(--text-light); } .plan__grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .plan__content .number { display: inline-block; padding: 5px 15px; margin-bottom: 0.5rem; font-weight: 600; color: var(--white); background-color: var(--primary-color); border-radius: 2rem; } .plan__content .number:nth-child(4) { background-color: #e98b6d; } .plan__content .number:nth-child(7) { background-color: #ffcca3; } .plan__content h4 { font-size: 1.2rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; } .plan__content p { color: var(--text-light); margin-bottom: 2rem; } .plan__image { position: relative; } .plan__image img { position: absolute; top: 50%; left: 50%; border-radius: 10rem; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .plan__image img:nth-child(1) { max-width: 250px; transform: translate(calc(-50% - 9rem), calc(-50% + 5rem)); z-index: 3; } .plan__image img:nth-child(2) { max-width: 260px; transform: translate(-50%, calc(-50% - 5rem)); z-index: 2; } .plan__image img:nth-child(3) { max-width: 230px; transform: translate(calc(-50% + 9rem), calc(-50% + 5rem)); } .memories { background-color: var(--extra-light); } .memories__header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .memories__header .section__header { max-width: 600px; } .memories__header .view__all { padding: 1rem 2rem; font-size: 1rem; font-weight: 500; color: var(--text-dark); background: transparent; white-space: nowrap; outline: none; border: 1px solid var(--text-light); border-radius: 2rem; box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.1); cursor: pointer; } .memories__grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem; } .memories__card { padding: 3rem 2rem; text-align: center; border-radius: 5rem; background-color: var(--white); box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.05); } .memories__card span { display: inline-block; padding: 20px 32px; margin-bottom: 2rem; font-size: 3rem; color: var(--white); background-color: var(--primary-color); border-radius: 100%; } .memories__card:nth-child(2) span { background-color: #e98b6d; } .memories__card:nth-child(3) span { background-color: #ffcca3; } .memories__card h4 { margin-bottom: 1rem; font-size: 1.2rem; font-weight: 600; color: var(--text-dark); } .memories__card p { color: var(--text-light); line-height: 1.75rem; } .lounge__container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .lounge__grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .lounge__image { position: relative; } .lounge__image img { position: absolute; top: 50%; left: 50%; border-radius: 20rem; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .lounge__image img:nth-child(1) { max-width: 300px; transform: translate(calc(-50% - 3rem), -50%); } .lounge__image img:nth-child(2) { max-width: 200px; transform: translate(calc(-50% + 6rem), calc(-50% + 7rem)); } .lounge__details h4 { margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 600; color: var(--text-dark); } .lounge__details p { color: var(--text-light); } .travellers__grid { margin-top: 4rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .travellers__card { border-radius: 5rem; overflow: hidden; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); } .travellers__card__content { position: relative; padding: 1rem; text-align: center; } .travellers__card__content img { position: absolute; max-width: 70px; top: 0; left: 50%; transform: translate(-50%, -50%); border: 5px solid var(--extra-light); border-radius: 100%; } .travellers__card__content h4 { margin-top: 1.5rem; font-size: 1.2rem; font-weight: 600; color: var(--text-dark); } .travellers__card__content p { font-weight: 500; color: var(--text-light); } .subscribe { background-color: var(--extra-light); } .subscribe__container { max-width: 500px; text-align: center; } .subscribe__form { margin-top: 2rem; padding: 5px; display: flex; align-items: center; gap: 1rem; background-color: var(--white); border-radius: 2rem; } .subscribe__form input { width: 100%; padding: 0 1rem; outline: none; border: none; font-size: 1rem; color: var(--text-dark); } .footer { background-color: var(--primary-color); } .footer__container { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 5rem; } .footer__col h3 { font-size: 1.5rem; font-weight: 500; color: var(--white); margin-bottom: 1rem; } .footer__col h4 { font-size: 1.2rem; font-weight: 500; color: var(--white); margin-bottom: 1rem; } .footer__col p { color: var(--extra-light); margin-bottom: 1rem; cursor: pointer; transition: 0.3s; } .footer__col p:hover { color: var(--white); } .footer__bar { padding: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--extra-light); } .footer__bar p { font-size: 0.9rem; color: var(--extra-light); } .socials { display: flex; align-items: center; gap: 1rem; } .socials span { font-size: 1.2rem; color: var(--extra-light); } @media (width < 1200px) { .section__container.header__container, .section__container.plan__container, .section__container.lounge__container { overflow: hidden; } .memories__grid { gap: 3rem; } } @media (width < 900px) { nav .btn { display: none; } .header__container img { min-width: 900px; margin-left: 50%; transform: translateX(-50%); } .booking__container form { grid-template-columns: repeat(2, 1fr); } .plan__grid { grid-template-columns: repeat(1, 1fr); } .plan__image { min-height: 600px; grid-area: 1/1/2/2; } .memories__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .lounge__container { grid-template-columns: repeat(1, 1fr); } .lounge__image { min-height: 600px; } .travellers__grid { grid-template-columns: repeat(2, 1fr); } .footer__container { gap: 2rem; } } @media (width < 600px) { .nav__links { display: none; } .booking__nav span { padding: 1rem 0.5rem; } .booking__container form { grid-template-columns: repeat(1, 1fr); } .memories__header { flex-direction: column; } .memories__grid { grid-template-columns: repeat(1, 1fr); } .lounge__grid { grid-template-columns: repeat(1, 1fr); } .travellers__grid { grid-template-columns: repeat(1, 1fr); } .footer__container { grid-template-columns: 1fr; } .footer__bar { flex-direction: column; text-align: center; } } ....................... login html....... .......................... Login - AMS

Login to AMS

New User? Register Yourself

............... login css .............. /* Body Styling */ body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #ff7eb3, #ff758c); animation: gradientBG 6s infinite alternate; } /* Gradient Animation */ @keyframes gradientBG { 0% { background: linear-gradient(135deg, #ff7eb3, #ff758c); } 50% { background: linear-gradient(135deg, #8ec5fc, #e0c3fc); } 100% { background: linear-gradient(135deg, #f093fb, #f5576c); } } /* Login Container */ #login-container { background: rgba(255, 255, 255, 0.1); /* Transparent effect */ backdrop-filter: blur(8px); border-radius: 15px; padding: 40px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); text-align: center; width: 320px; animation: slideIn 1.2s ease-out; } /* Slide-in Animation */ @keyframes slideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* Title */ #login-container h2 { color: #fff; margin-bottom: 20px; font-size: 24px; font-weight: bold; } /* Error Message */ #error-message { color: #ff4d4d; font-size: 14px; margin-bottom: 10px; display: none; /* Initially hidden */ } /* Input Fields */ .input-field { margin-bottom: 20px; position: relative; } .input-field input { width: 100%; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 14px; outline: none; transition: all 0.3s ease; } .input-field input::placeholder { color: rgba(255, 255, 255, 0.7); } .input-field input:focus { border: 1px solid #fff; background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } /* Button */ #login-btn { width: 100%; padding: 12px; border: none; border-radius: 8px; background: linear-gradient(90deg, #56ccf2, #2f80ed); color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; } #login-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Register Link */ #login-container p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-top: 15px; } #login-container p a { color: #56ccf2; text-decoration: none; font-weight: bold; transition: color 0.3s ease; } #login-container p a:hover { color: #2f80ed; } ............... login js... .......... const users = [ { id: "12345", password: "password123" }, { id: "67890", password: "admin123" }, { id: "11111", password: "user123" } ]; document.getElementById('login-form').addEventListener('submit', function(event) { event.preventDefault(); const userId = document.getElementById('user-id').value; const password = document.getElementById('password').value; const errorMessage = document.getElementById('error-message'); const user = users.find(u => u.id === userId); if (!user) { errorMessage.textContent = "ID not valid"; errorMessage.style.color = "red"; } else if (user.password !== password) { errorMessage.textContent = "Password not valid"; errorMessage.style.color = "red"; } else { window.location.href = "/Home/home.html"; } }); ............. register html......... .................. Register - AMS

Passenger Registration

...................... register css ................. /* Body Styling */ body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #606564, #9face6); animation: gradientBG 8s infinite alternate; } /* Gradient Animation */ /* @keyframes gradientBG { 0% { background: linear-gradient(135deg, #74ebd5, #9face6); } 50% { background: linear-gradient(135deg, #f0c27b, #4b1248); } 100% { background: linear-gradient(135deg, #ff9a9e, #fad0c4); } } */ /* Form Container */ .register-div { background: rgba(255, 255, 255, 0.1); /* Transparent effect */ backdrop-filter: blur(10px); border-radius: 15px; padding: 30px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); width: 350px; animation: fadeIn 1.5s ease-in-out; } /* Fade-in Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Input Fields */ .input-field { margin-bottom: 15px; position: relative; } .input-field input, .input-field textarea { width: 100%; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 14px; outline: none; transition: all 0.3s ease; } .input-field input::placeholder, .input-field textarea::placeholder { color: rgba(255, 255, 255, 0.7); } .input-field input:focus, .input-field textarea:focus { border: 1px solid #fff; background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); } /* Buttons */ button { width: 100%; padding: 10px; border: none; border-radius: 8px; cursor: pointer; margin-top: 10px; font-size: 16px; transition: all 0.3s ease; } #register-btn { background: linear-gradient(90deg, #56ab2f, #a8e063); color: #fff; font-weight: bold; } #reset-btn { background: linear-gradient(90deg, #e53935, #e35d5b); color: #fff; font-weight: bold; } button:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* Acknowledgment Message */ #acknowledgment { margin-top: 20px; text-align: center; } ..................... register js...... ................... document.getElementById('register-form').addEventListener('submit', function(event) { event.preventDefault(); const firstName = document.getElementById('first-name').value; const lastName = document.getElementById('last-name').value; const dob = document.getElementById('dob').value; const email = document.getElementById('email').value; const address = document.getElementById('address').value; const contact = document.getElementById('contact').value; // Validate date of birth (must be after 1/1/1924) const birthDate = new Date(dob); const minDate = new Date('1924-01-01'); if (birthDate <= minDate) { alert('Choose a date greater than 1/1/1924'); return; } // Validate contact number (10 digits) if (contact.length !== 10) { alert('Enter a valid contact number'); return; } // Validate email format const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; if (!emailPattern.test(email)) { alert('Enter a valid email ID'); return; } // Simulate a passenger ID and password const passengerId = Math.floor(Math.random() * 100000); const password = firstName.slice(0, 4) + "@123"; // Show acknowledgment message document.getElementById('acknowledgment').style.display = 'block'; document.getElementById('passenger-id').textContent = passengerId; document.getElementById('generated-password').textContent = password; }); document.getElementById('reset-btn').addEventListener('click', function(event) { if (!confirm('Is it okay to reset the fields?')) { event.preventDefault(); } }); ...................... profile html........ ................... Profile

Profile

👤
📧
.............. style.css ..................... body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f9f9f9; color: #333; } .section__container { max-width: 900px; margin: 20px auto; padding: 20px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .section__header { font-size: 24px; margin-bottom: 20px; color: #444; text-align: center; text-transform: uppercase; border-bottom: 2px solid #ddd; padding-bottom: 10px; } .booking__container { display: flex; flex-direction: column; gap: 20px; } .form__group { display: flex; align-items: center; gap: 10px; } .form__group span { font-size: 20px; } .input__group { display: flex; flex-direction: column; } .input__group input { padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; width: 100%; } .input__group label { margin-top: 5px; font-size: 12px; color: #888; } .memories__grid, .plan__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .memories__card, .plan__content { background: #f4f4f4; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .memories__card span, .plan__content .number { font-size: 30px; margin-bottom: 10px; color: #555; } .plan__content .number { display: block; font-weight: bold; } h4 { font-size: 18px; margin: 10px 0; } p { font-size: 14px; color: #666; } .............. script.js .............. // script.js // Booking Class Navigation document.querySelectorAll('.booking__nav span').forEach((navItem) => { navItem.addEventListener('click', function () { document.querySelectorAll('.booking__nav span').forEach((item) => item.classList.remove('active')); this.classList.add('active'); }); }); // Form Validation and Submission document.querySelector('form').addEventListener('submit', (e) => { e.preventDefault(); // Get form values const location = document.querySelector('input[type="text"]').value; const travellers = document.querySelector('input[type="number"]').value; const departure = document.querySelector('input[type="date"]:nth-of-type(1)').value; const returnDate = document.querySelector('input[type="date"]:nth-of-type(2)').value; // Validate input if (!location || !travellers || !departure || !returnDate) { alert('Please fill out all fields before submitting.'); return; } if (new Date(departure) >= new Date(returnDate)) { alert('Return date must be after the departure date.'); return; } // Display confirmation alert(`Booking successful for ${location} with ${travellers} traveller(s) from ${departure} to ${returnDate}.`); }); // Newsletter Subscription document.querySelector('.subscribe__form').addEventListener('submit', (e) => { e.preventDefault(); const email = document.querySelector('.subscribe__form input').value; if (!email.includes('@')) { alert('Please enter a valid email address.'); return; } alert(`Thank you for subscribing, ${email}!`); }); // Log Out Button document.querySelector('.btn').addEventListener('click', () => { if (confirm('Are you sure you want to log out?')) { window.location.href = 'login.html'; // Replace with actual login page URL } });