-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Mohd Asif
authored and
Mohd Asif
committed
Jan 2, 2024
1 parent
03fc935
commit 29879fc
Showing
26 changed files
with
7,039 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,309 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>WonderWave Travels - Packages</title> | ||
| <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> | ||
|
|
||
| <link rel="stylesheet" href="/style.css" /> | ||
|
|
||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" | ||
| integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" | ||
| crossorigin="anonymous" referrerpolicy="no-referrer" /> | ||
|
|
||
| <style> | ||
| /* Custom Styles */ | ||
| .sticky-header { | ||
| background-color: #4B4491; | ||
| color: white; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1000; | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| .hero-section { | ||
| background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('travel.jpg') no-repeat center center; | ||
| background-size: cover; | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: 60px 0; | ||
| } | ||
|
|
||
| .filter-section, | ||
| .packages-content { | ||
| background-color: #f8f9fa; | ||
| padding: 20px 0; | ||
| } | ||
|
|
||
| .container-boxed { | ||
| width: 85%; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .package-card { | ||
| margin-bottom: 20px; | ||
| } | ||
|
|
||
| .cart-icon { | ||
| color: white; | ||
| font-size: 1.5em; | ||
| } | ||
|
|
||
| .sticky-header { | ||
| background-color: #4B4491; | ||
| /* deep blue/purple */ | ||
| color: white; | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 1000; | ||
| padding: 10px 0; | ||
| } | ||
|
|
||
| .hero-section { | ||
| background-color: #6D5BD0; | ||
| /* lighter purple */ | ||
| color: #fff; | ||
| text-align: center; | ||
| padding: 60px 0; | ||
| } | ||
|
|
||
| .filter-section, | ||
| .packages-content { | ||
| background-color: #f8f9fa; | ||
| padding: 20px 0; | ||
| } | ||
|
|
||
| .container-boxed { | ||
| width: 85%; | ||
| margin: auto; | ||
| } | ||
|
|
||
| .package-card { | ||
| background-color: #fff; | ||
| /* white background for cards */ | ||
| border: none; | ||
| /* remove border */ | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); | ||
| /* light shadow for depth */ | ||
| transition: transform 0.3s ease, box-shadow 0.3s ease; | ||
| /* smooth transition for hover effects */ | ||
| margin-bottom: 20px; | ||
| border-radius: 5px; | ||
| /* slightly rounded corners */ | ||
| } | ||
|
|
||
| .package-card:hover { | ||
| transform: translateY(-5px); | ||
| /* subtle lift effect on hover */ | ||
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); | ||
| /* increased shadow on hover for depth */ | ||
| } | ||
|
|
||
| .card-header { | ||
| background-color: #FFC107; | ||
| /* bright yellow for header */ | ||
| color: #333; | ||
| /* dark text for contrast */ | ||
| border-bottom: none; | ||
| /* remove border */ | ||
| } | ||
|
|
||
| .card-img-top { | ||
| height: 200px; | ||
| /* fixed height for images */ | ||
| object-fit: cover; | ||
| /* ensures images cover the area nicely */ | ||
| } | ||
|
|
||
| .card-body { | ||
| padding: 15px; | ||
| } | ||
|
|
||
| .card-title { | ||
| color: #4B4491; | ||
| /* color theme for titles */ | ||
| margin-bottom: 10px; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| background-color: #FF5722; | ||
| /* bright accent color */ | ||
| border-color: #FF5722; | ||
| } | ||
|
|
||
| .btn-primary:hover { | ||
| background-color: #E64A19; | ||
| /* darker shade on hover */ | ||
| border-color: #E64A19; | ||
| } | ||
|
|
||
| .cart-icon { | ||
| color: #FFC107; | ||
| /* matching bright yellow */ | ||
| font-size: 1.5em; | ||
| } | ||
|
|
||
| .cart-container { | ||
| position: relative; | ||
| cursor: pointer; | ||
| /* Makes it obvious that it's clickable */ | ||
| } | ||
|
|
||
| #cart-count { | ||
| position: absolute; | ||
| top: -10px; | ||
| /* Adjust as needed */ | ||
| /* right: -10px; */ | ||
| /* Adjust as needed */ | ||
| background-color: red; | ||
| /* Or any color you prefer */ | ||
| color: white; | ||
| padding: 2px 5px; | ||
| font-size: 0.75rem; | ||
| border-radius: 50%; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
|
|
||
| <!-- NAV BAR START --> | ||
| <div style=" | ||
| background-image: url(https://img.freepik.com/premium-vector/summer-holidays-vector-illustrationflat-design-beach-with-car-surf_808505-2305.jpg?w=740); | ||
| "> | ||
| <nav> | ||
| <div> | ||
| <img class="logo" src="/images/WonderWave Travels Logo-1.png" alt="Logo" /> | ||
| </div> | ||
| <div class="links"> | ||
| <a href="/">HOME</a> | ||
| <a href="/packages/">PACKAGES</a> | ||
| <a href="/login/login.html">LOGIN</a> | ||
| <a href="/signup/signup.html">SIGN-UP</a> | ||
|
|
||
| <div class="cart-container"> | ||
| <a href="/cart"> <i class="fas fa-shopping-cart cart-icon"></i> | ||
| <span id="cart-count" class="badge badge-pill badge-danger">0</span></a> | ||
|
|
||
|
|
||
|
|
||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </nav> | ||
|
|
||
| <!-- NAV BAR END --> | ||
|
|
||
|
|
||
|
|
||
| <!-- Sticky Header --> | ||
| <!-- <div class="sticky-header"> | ||
| <div class="container-boxed d-flex justify-content-between align-items-center"> | ||
| <h2>Every Sunday Travel</h2> | ||
| <div class="cart-container"> | ||
| <a href="/cart"> <i class="fas fa-shopping-cart cart-icon"></i> | ||
| <span id="cart-count" class="badge badge-pill badge-danger">0</span></a> | ||
| </div> | ||
| </div> | ||
| </div> --> | ||
|
|
||
| <div class="container-fluid"> | ||
| <!-- Hero Section --> | ||
| <div class="row"> | ||
| <div class="col-12 hero-section"> | ||
| <h1>Find Your Perfect Package | ||
| </h1> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Filter Section --> | ||
| <div class="row filter-section"> | ||
| <div class="col-12"> | ||
| <div class="container-boxed text-center"> | ||
| <div class="d-flex justify-content-center"> | ||
| <input type="text" id="location-filter" class="form-control mx-2" | ||
| placeholder="Filter by Location..."> | ||
| <select id="duration-sort" class="form-control mx-2"> | ||
| <option value="default">Sort by Duration</option> | ||
| <option value="asc">Shortest to Longest</option> | ||
| <option value="desc">Longest to Shortest</option> | ||
| </select> | ||
| <select id="price-sort" class="form-control mx-2"> | ||
| <option value="default">Sort by Price</option> | ||
| <option value="asc">Lowest to Highest</option> | ||
| <option value="desc">Highest to Lowest</option> | ||
| </select> | ||
| </div> | ||
| <div class="text-center mt-3"> <!-- Centering wrapper for the button --> | ||
| <button id="apply-filters" class="btn btn-primary">Apply Filters</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- Main content area for packages --> | ||
| <div class="row packages-content"> | ||
| <div class="col-12"> | ||
| <div class="container-boxed"> | ||
| <div class="row" id="packages-container"> | ||
| <!-- Packages will be inserted here --> | ||
| </div> | ||
|
|
||
| <!-- Pagination controls --> | ||
| <nav> | ||
| <ul class="pagination justify-content-center" id="pagination-controls"> | ||
| <!-- Pagination buttons will be added here dynamically --> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <footer> | ||
| <div> | ||
| <img class="logo" src="/images/WonderWave Travels Logo-1.png" alt="Logo" /> | ||
| </div> | ||
| <div class="links"> | ||
| <a href="#">HOME</a> | ||
| <a href="#">DESTINATION</a> | ||
| <a href="#">FEEDBACK</a> | ||
| <a href="#">PRICING</a> | ||
| </div> | ||
| <div class="copyright"> | ||
| <span class="material-symbols-outlined"> copyright </span> 2023 Every | ||
| Sunday | ||
| </div> | ||
| </footer> | ||
| <div class="last"> | ||
| <a href="https://www.facebook.com/your-facebook-page" target="_blank"> | ||
| <img style="margin-left: 700px" src="/images/facebook.png" alt="Facebook" /> | ||
| </a> | ||
| <a href="https://www.instagram.com/your-instagram-page" target="_blank"> | ||
| <img src="/images/instagram.png" alt="Instagram" /> | ||
| </a> | ||
| <a href="https://twitter.com/your-twitter-page" target="_blank"> | ||
| <img src="/images/twitter.png" alt="Twitter" /> | ||
| </a> | ||
| </div> | ||
|
|
||
|
|
||
| <script src="packages.js"></script> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.0/dist/umd/popper.min.js"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.