| home html
|
| ............................
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| <link
|
| href="https://cdn.jsdelivr.net/npm/remixicon@3.4.0/fonts/remixicon.css"
|
| rel="stylesheet"
|
| />
|
| <link rel="stylesheet" href="home.css" />
|
| <title>TAJ AIRLINE</title>
|
| <script src="script.js"></script>
|
| </head>
|
| <body>
|
|
|
|
|
|
|
| <!-- Navigation Bar -->
|
| <nav>
|
| <div class="nav__logo">TAJ</div>
|
| <ul class="nav__links">
|
| <li class="link"><a href="#">Home</a></li>
|
|
|
| <li class="link"><a href="profile.html">My Profile</a></li>
|
| <li class="link"><a href="trips.html">My Trips</a></li>
|
| </ul>
|
| <button class="btn">Log Out<a href="login.html"></a></button>
|
| </nav>
|
|
|
|
|
| <!-- Heading -->
|
|
|
| <header class="section__container header__container">
|
| <h1 class="section__header">Welcome Passenger<br />Have A Great Experience</h1>
|
| <!-- <img src="assets/header.jpg" alt="header" /> -->
|
| </header>
|
|
|
| <!-- Seat Types -->
|
| <section class="section__container booking__container">
|
| <div class="booking__nav">
|
| <span>Economy Class</span>
|
| <span>Business Class</span>
|
| <span>First Class</span>
|
| </div>
|
|
|
|
|
|
|
| <!-- Origin and Destination -->
|
| <form>
|
| <div class="form__group">
|
| <span><i class="ri-map-pin-line"></i></span>
|
| <div class="input__content">
|
| <div class="input__group">
|
| <input type="text" />
|
| <label>Location</label>
|
| </div>
|
| <p>Where are you goung?</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <!-- Number of Travellers -->
|
| <div class="form__group">
|
| <span><i class="ri-user-3-line"></i></span>
|
| <div class="input__content">
|
| <div class="input__group">
|
| <input type="number" />
|
| <label>Travellers</label>
|
| </div>
|
| <p>Add guests</p>
|
| </div>
|
| </div>
|
|
|
|
|
| <!-- Departure -->
|
|
|
| <div class="form__group">
|
| <span><i class="ri-calendar-line"></i></span>
|
| <div class="input__content">
|
| <div class="input__group">
|
| <input type="date" />
|
| <label>Departure</label>
|
| </div>
|
| <p>Add date</p>
|
| </div>
|
| </div>
|
|
|
| <!-- Return -->
|
|
|
| <div class="form__group">
|
| <span><i class="ri-calendar-line"></i></span>
|
| <div class="input__content">
|
| <div class="input__group">
|
| <input type="date" />
|
| <label>Return</label>
|
| </div>
|
| <p>Add date</p>
|
| </div>
|
| </div>
|
| <button class="btn"><i class="ri-search-line"></i></button>
|
| </form>
|
| </section>
|
|
|
|
|
| <!-- Just a static page for designs and nothing else from the design point of view -->
|
| <section class="section__container plan__container">
|
| <p class="subheader">TRAVEL SUPPORT</p>
|
| <h2 class="section__header">Plan your travel with confidence</h2>
|
| <p class="description">
|
| Find help with your bookings and travel plans, and seee what to expect
|
| along your journey.
|
| </p>
|
| <div class="plan__grid">
|
| <div class="plan__content">
|
| <span class="number">01</span>
|
| <h4>Travel Requirements for Dubai</h4>
|
| <p>
|
| 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.
|
| </p>
|
| <span class="number">02</span>
|
| <h4>Multi-risk travel insurance</h4>
|
| <p>
|
| Comprehensive protection for your peace of mind, covering a range of
|
| potential travel risks and unexpected situations.
|
| </p>
|
| <span class="number">03</span>
|
| <h4>Travel Requirements by destinations</h4>
|
| <p>
|
| Stay informed and plan your trip with ease, as we provide up-to-date
|
| information on travel requirements specific to your desired
|
| destinations.
|
| </p>
|
| </div>
|
| <div class="plan__image">
|
| <img src="assets/plan-1.jpg" alt="plan" />
|
| <img src="assets/plan-2.jpg" alt="plan" />
|
| <img src="assets/plan-3.jpg" alt="plan" />
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="memories">
|
| <div class="section__container memories__container">
|
| <div class="memories__header">
|
| <h2 class="section__header">
|
| Travel to make memories all around the world
|
| </h2>
|
| <button class="view__all">View All</button>
|
| </div>
|
| <div class="memories__grid">
|
| <div class="memories__card">
|
| <span><i class="ri-calendar-2-line"></i></span>
|
| <h4>Book & relax</h4>
|
| <p>
|
| With "Book and Relax," you can sit back, unwind, and enjoy the
|
| journey while we take care of everything else.
|
| </p>
|
| </div>
|
| <div class="memories__card">
|
| <span><i class="ri-shield-check-line"></i></span>
|
| <h4>Smart Checklist</h4>
|
| <p>
|
| Introducing Smart Checklist with us, the innovative solution
|
| revolutionizing the way you travel with our airline.
|
| </p>
|
| </div>
|
| <div class="memories__card">
|
| <span><i class="ri-bookmark-2-line"></i></span>
|
| <h4>Save More</h4>
|
| <p>
|
| From discounted ticket prices to exclusive promotions and deals,
|
| we prioritize affordability without compromising on quality.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="section__container lounge__container">
|
| <div class="lounge__image">
|
| <img src="assets/lounge-1.jpg" alt="lounge" />
|
| <img src="assets/lounge-2.jpg" alt="lounge" />
|
| </div>
|
| <div class="lounge__content">
|
| <h2 class="section__header">Unaccompanied Minor Lounge</h2>
|
| <div class="lounge__grid">
|
| <div class="lounge__details">
|
| <h4>Experience Tranquility</h4>
|
| <p>
|
| Serenity Haven offers a tranquil escape, featuring comfortable
|
| seating, calming ambiance, and attentive service.
|
| </p>
|
| </div>
|
| <div class="lounge__details">
|
| <h4>Elevate Your Experience</h4>
|
| <p>
|
| Designed for discerning travelers, this exclusive lounge offers
|
| premium amenities, assistance, and private workspaces.
|
| </p>
|
| </div>
|
| <div class="lounge__details">
|
| <h4>A Welcoming Space</h4>
|
| <p>
|
| Creating a family-friendly atmosphere, The Family Zone is the
|
| perfect haven for parents and children.
|
| </p>
|
| </div>
|
| <div class="lounge__details">
|
| <h4>A Culinary Delight</h4>
|
| <p>
|
| Immerse yourself in a world of flavors, offering international
|
| cuisines, gourmet dishes, and carefully curated beverages.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="section__container travellers__container">
|
| <h2 class="section__header">Best travellers of the month</h2>
|
| <div class="travellers__grid">
|
| <div class="travellers__card">
|
| <img src="assets/traveller-1.jpg" alt="traveller" />
|
| <div class="travellers__card__content">
|
| <img src="assets/client-1.jpg" alt="client" />
|
| <h4>Emily Johnson</h4>
|
| <p>Dubai</p>
|
| </div>
|
| </div>
|
| <div class="travellers__card">
|
| <img src="assets/traveller-2.jpg" alt="traveller" />
|
| <div class="travellers__card__content">
|
| <img src="assets/client-2.jpg" alt="client" />
|
| <h4>David Smith</h4>
|
| <p>Paris</p>
|
| </div>
|
| </div>
|
| <div class="travellers__card">
|
| <img src="assets/traveller-3.jpg" alt="traveller" />
|
| <div class="travellers__card__content">
|
| <img src="assets/client-3.jpg" alt="client" />
|
| <h4>Olivia Brown</h4>
|
| <p>Singapore</p>
|
| </div>
|
| </div>
|
| <div class="travellers__card">
|
| <img src="assets/traveller-4.jpg" alt="traveller" />
|
| <div class="travellers__card__content">
|
| <img src="assets/client-4.jpg" alt="client" />
|
| <h4>Daniel Taylor</h4>
|
| <p>Malaysia</p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
|
|
| <section class="subscribe">
|
| <div class="section__container subscribe__container">
|
| <h2 class="section__header">Subscribe newsletter & get latest news</h2>
|
| <form class="subscribe__form">
|
| <input type="text" placeholder="Enter your email here" />
|
| <button class="btn">Subscribe</button>
|
| </form>
|
| </div>
|
| </section>
|
|
|
| <footer class="footer">
|
| <div class="section__container footer__container">
|
| <div class="footer__col">
|
| <h3>Flivan</h3>
|
| <p>
|
| Where Excellence Takes Flight. With a strong commitment to customer
|
| satisfaction and a passion for air travel, Flivan Airlines offers
|
| exceptional service and seamless journeys.
|
| </p>
|
| <p>
|
| From friendly smiles to state-of-the-art aircraft, we connect the
|
| world, ensuring safe, comfortable, and unforgettable experiences.
|
| </p>
|
| </div>
|
| <div class="footer__col">
|
| <h4>INFORMATION</h4>
|
| <a>Home</a>
|
| </div>
|
| <div class="footer__col">
|
| <h4>CONTACT</h4>
|
| <p>Support</p>
|
| <p>Media</p>
|
| <p>Socials</p>
|
| </div>
|
| </div>
|
| <div class="section__container footer__bar">
|
| <p>Copyright © 2024 Taj Airlines. All rights reserved.</p>
|
| <div class="socials">
|
| <span><i class="ri-facebook-fill"></i></span>
|
| <span><i class="ri-twitter-fill"></i></span>
|
| <span><i class="ri-instagram-line"></i></span>
|
| <span><i class="ri-youtube-fill"></i></span>
|
| </div>
|
| </div>
|
| </footer>
|
| </body>
|
| </html>
|
|
|
| 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.......
|
| ..........................
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Login - AMS</title>
|
| <link rel="stylesheet" href="login.css">
|
| </head>
|
| <body>
|
| <div id="login-container">
|
| <h2>Login to AMS</h2>
|
| <div id="error-message"></div>
|
| <form id="login-form">
|
| <div class="input-field">
|
| <i class="bx bxs-user"></i>
|
| <input type="text" id="user-id" placeholder="User ID (numeric)" maxlength="5" required>
|
| </div>
|
| <div class="input-field">
|
| <i class="bx bxs-lock"></i>
|
| <input type="password" id="password" placeholder="Password" maxlength="30" required>
|
| </div>
|
| <button type="submit" id="login-btn">Login</button>
|
| <p>New User? <a href="register.html">Register Yourself</a></p>
|
| </form>
|
| </div>
|
|
|
| <script src="login.js"></script>
|
| </body>
|
| </html>
|
| ...............
|
| 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.........
|
| ..................
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>Register - AMS</title>
|
| <link rel="stylesheet" href="register.css">
|
| </head>
|
| <body>
|
| <div id="register-container">
|
| <h2>Passenger Registration</h2>
|
| <div class="register-div">
|
| <form id="register-form">
|
| <div class="input-field">
|
| <input type="text" id="first-name" placeholder="First Name" maxlength="50" required>
|
| </div>
|
| <div class="input-field">
|
| <input type="text" id="last-name" placeholder="Last Name" maxlength="50" required>
|
| </div>
|
| <div class="input-field">
|
| <input type="date" id="dob" required>
|
| </div>
|
| <div class="input-field">
|
| <input type="email" id="email" placeholder="Email ID" required>
|
| </div>
|
| <div class="input-field">
|
| <textarea id="address" placeholder="Address" maxlength="100" required></textarea>
|
| </div>
|
| <div class="input-field">
|
| <input type="text" id="contact" placeholder="Contact Number" maxlength="10" required>
|
| </div>
|
| <button type="submit" id="register-btn">Register</button>
|
| <button type="reset" id="reset-btn">Reset</button>
|
| </form>
|
| <div id="acknowledgment" style="display:none;">
|
| <h3 style="color:green;">Passenger Registration Successful!</h3>
|
| <p>Passenger ID: <span id="passenger-id"></span></p>
|
| <p>Password: <span id="generated-password"></span></p>
|
| </div>
|
|
|
| </div>
|
| </div>
|
|
|
| <script src="register.js"></script>
|
| </body>
|
| </html>
|
| ......................
|
| 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........
|
| ...................
|
|
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <link rel="stylesheet" href="style.css">
|
| <title>Profile</title>
|
| </head>
|
| <body>
|
| <div class="section__container">
|
| <h1 class="section__header">Profile</h1>
|
| <div class="booking__container">
|
| <div class="form__group">
|
| <span>👤</span>
|
| <div class="input__group">
|
| <input type="text" value="John Doe" readonly>
|
| <label>Full Name</label>
|
| </div>
|
| </div>
|
| <div class="form__group">
|
| <span>📧</span>
|
| <div class="input__group">
|
| <input type="email" value="john.doe@example.com" readonly>
|
| <label>Email</label>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </body>
|
| </html>
|
| ..............
|
| 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
|
| }
|
| });
|
|
|