https://github.com/siyabuilds/travel-vault

https://github.com/siyabuilds/travel-vault

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/siyabuilds/travel-vault
• Owner: siyabuilds
• Created: 2025-07-15T08:04:40.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2025-07-15T09:44:20.000Z (11 months ago)
• Last Synced: 2026-05-04T01:39:37.041Z (about 2 months ago)
• Language: HTML
• Size: 2.16 MB
• Stars: 2
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Travel Vault - Travel Recommendation Website

A modern, responsive travel recommendation website built with HTML, CSS, and JavaScript. This website helps users discover ideal destinations based on their preferences with interactive displays and detailed information.

## 🌟 Features

### 🏠 Home Page

- **Welcome Section**: Engaging hero section with search functionality

- **Smart Search Bar**: Search for beaches, temples, or specific cities

- **Dynamic Recommendations**: Personalized suggestions based on user input

- **Real-time Information**: Current local time display for searched cities

- **Featured Destinations**: Categorized browse options (Beaches, Temples, Cities)

### ℹ️ About Page

- **Company Overview**: Mission, values, and goals

- **Team Profiles**: Detailed information about team members

- **Company History**: Timeline of milestones and achievements

- **Office Locations**: Global office locations with interactive map

### 📞 Contact Us Page

- **Contact Form**: User-friendly form for inquiries and feedback

- **Multiple Contact Methods**: Email, phone, live chat options

- **FAQ Section**: Commonly asked questions with expandable answers

- **Quick Response Promise**: 24-hour response commitment

## 🚀 Technologies Used

- **HTML5**: Semantic markup and structure

- **CSS3**: Modern styling with Flexbox and Grid

- **JavaScript (ES6+)**: Dynamic functionality and interactivity

- **Font Awesome**: Icons and visual elements

- **Google Fonts**: Typography (Poppins font family)

## 📁 Project Structure

```

travel-vault/

├── index.html          # Home page

├── about.html          # About page

├── contact.html        # Contact page

├── style.css           # Stylesheet

├── script.js           # JavaScript functionality

├── data.json           # Travel destinations data

├── images/             # Image assets directory

└── README.md           # Project documentation

```

## 🎯 Key Functionality

### Search System

- **Category Search**: Browse by beaches, temples, or cities

- **City-Specific Search**: Get detailed information about specific destinations

- **Time Zone Display**: Real-time local time for major cities

- **Dynamic Results**: Instant filtering and display of relevant destinations

### Interactive Features

- **Responsive Navigation**: Mobile-friendly hamburger menu

- **Category Tabs**: Easy switching between destination types

- **FAQ Toggles**: Expandable question sections

- **Form Validation**: Client-side validation for contact forms

- **Smooth Scrolling**: Enhanced user experience

### Data Structure

The website uses a JSON data structure containing:

- **Countries**: With cities and descriptions

- **Temples**: Religious and cultural sites

- **Beaches**: Coastal destinations

- **Images**: Placeholder-ready image paths

## 🎨 Design Features

- **Modern UI/UX**: Clean, intuitive interface

- **Responsive Design**: Works on all device sizes

- **Gradient Backgrounds**: Visually appealing color schemes

- **Card-based Layout**: Organized content presentation

- **Hover Effects**: Interactive elements with smooth transitions

- **Professional Typography**: Readable and attractive fonts

## 🛠️ Setup Instructions

1. **Clone or Download**: Get the project files

2. **Open in Browser**: Launch `index.html` in any modern web browser

3. **Local Server** (Optional): Use a local server for optimal performance

4. **Add Images**: Replace placeholder image paths with actual images

## 📱 Responsive Breakpoints

- **Desktop**: 1200px and up

- **Tablet**: 768px - 1199px

- **Mobile**: 480px - 767px

- **Small Mobile**: Under 480px

## 🌐 Browser Support

- Chrome (recommended)

- Firefox

- Safari

- Edge

- Mobile browsers

## 🔧 Customization

### Adding New Destinations

1. Edit `data.json` to add new entries

2. Add corresponding images to the `images/` folder

3. Update image paths in the JSON file

### Styling Changes

- Modify `style.css` for visual customizations

- Update CSS variables for color scheme changes

- Adjust responsive breakpoints as needed

### Functionality Enhancements

- Extend `script.js` for additional features

- Add new search filters or categories

- Implement user accounts or favorites system