Travel Agency

About the Project: Travelty is a travel agency website built with HTML, CSS, and JavaScript. It presents destinations, featured tours, and travel blog content in a clean, professional layout — designed to show strong frontend skills to anyone reviewing this project.

Key Highlights: Fully responsive design with smooth animations, an interactive mobile navigation, and a polished multi-section layout built entirely with vanilla HTML, CSS, and JavaScript.

Project Details

What's Inside

• Header & Navigation — Sticky header with responsive mobile toggle menu.
• Hero Section — Full-width banner with headline, description, and call-to-action buttons.
• Destinations Section — Grid layout showcasing five international travel destinations.
• Popular Tours Section — Cards displaying tour duration, pricing, ratings, and location.
• About Section — Company overview with icon-based feature highlights and visuals.
• Blog Section — Latest articles with author info, publish date, and read-more links.
• Footer — Multi-column footer with links, newsletter form, and social icons.

Key Features

• Responsive Design — Layout adapts cleanly across mobile, tablet, and desktop screens.
• Mobile Navigation — Hamburger menu toggles the navbar open and closed on small screens.
• Smooth Scroll — Native CSS smooth scrolling for a seamless page navigation experience.
• Back to Top Button — Appears after scrolling 500px and returns the user to the top.
• Hover Animations — Destination cards zoom on hover; buttons and links have smooth transitions.
• Decorative Shapes — Floating animated shapes add depth and visual interest to the hero area.
• Newsletter Form — Email subscription form with a styled inline submit button in the footer.

Technologies Used

• HTML5 — Semantic markup used to structure all sections and content.
• CSS3 — Custom properties, flexbox, grid, transitions, and responsive media queries.
• JavaScript (ES6) — Handles mobile menu toggle and scroll-based back-to-top visibility.
• Google Fonts — Abril Fatface, Comforter Brush, and Heebo for display and body text.
• Ionicons — Icon library used for navigation, cards, and social media icons.

Project Structure

travel-agency/
│
├── index.html                 # Main HTML file with all sections
├── favicon.svg                # Site favicon
│
├── assets/
│   ├── css/
│   │   └── style.css          # All styles, layouts, and responsive design
│   │
│   ├── js/
│   │   └── script.js          # Mobile menu and scroll functionality
│   │
│   └── images/                # Hero backgrounds, destinations, tours, blog images
│
├── LICENSE                    # Project license file
└── README.md                  # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/travel-agency.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update destination names, images, and card content in <code>index.html</code></li>
      <li>Change brand colors and font sizes using CSS variables in <code>style.css</code></li>
      <li>Replace hero and section images inside <code>assets/images/</code></li>
      <li>Edit tour details, pricing, and ratings directly in <code>index.html</code></li>
      <li>Update footer links, social URLs, and newsletter form in <code>index.html</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview

Live project ➜ Live Demo