Tourism Website Project - Junior Front-End Developer Task

Project Overview

This project involves creating a simple and user-friendly tourism website, demonstrating your skills in HTML, CSS, Bootstrap, and basic JavaScript. The website is designed to help users explore a travel destination, view travel packages, see a gallery of images, and contact the company for more information.

Demo: - Explore Paradise

Project Structure

1. Homepage

• Hero Section: An engaging banner with a stunning image of the destination and a tagline (e.g., "Discover the Beauty of Explore Paradise").
• Introduction Paragraph: A brief description of the destination.
• Navigation: Links to the About Us, Package Details, Gallery, and Contact pages.

2. About Us Page

• History & Description: A brief history of the destination and why it’s unique.
• Visual Representation: A relevant image or graphic of the destination.

3. Package Details Page

• Travel Packages: List at least 3 travel packages, including:
  • Name
  • Description
  • Price
  • Duration
• "Book Now" Button: A button for each package to simulate booking functionality.

4. Gallery Page

• Image Gallery: Showcase 15 images of the destination and its attractions.
• Hover Effects: Include hover effects on images such as zoom-in or fade.

5. Contact Page

• Contact Form: Fields for Name, Email, and Message.
• Submit Button: Properly styled submit button.
• Contact Information: A dummy phone number and email address for inquiries.
• Map (Optional): A placeholder image or embedded map showing the destination.

Design Guidelines

• Color Scheme: Use a clean and consistent color palette (e.g., shades of blue and white for a calming effect).
• Typography: Choose a readable font with appropriate spacing and hierarchy.
• Hover Effects: Implement hover effects on buttons and links to enhance interactivity.
• Responsiveness: Ensure the website works well on both desktop and mobile devices using responsive design techniques.

Technical Requirements

• Languages: HTML, CSS, and optionally Bootstrap and JavaScript.
• Code Organization: The project structure should include separate folders for images, CSS, and JavaScript.
• Code Comments: Include comments in your code to explain key sections and logic.
• Images: Use royalty-free placeholder images from websites such as Unsplash or Pexels.

Folder Structure

tourism-website/
├── images/          # Placeholder images
│   ├── hero-image.jpg
│   ├── package1.jpg
│   └── ...
├── css/             # Stylesheets
│   ├── styles.css
├── js/              # JavaScript (optional)
│   ├── script.js
├── index.html       # Homepage
├── about-us.html    # About Us Page
├── package-details.html  # Package Details Page
├── gallery.html     # Gallery Page
└── contact.html     # Contact Page

How to Run

1. Download the ZIP file containing the source code.
2. Extract the files to your local directory.
3. Open index.html in your web browser to view the homepage.

Technologies Used

• HTML: Structure of the website
• CSS: Styling and layout
• Bootstrap: For grid and responsive design (optional)
• JavaScript: For interactivity (optional)

Notes

• Ensure that the layout is fully responsive, adapting well to mobile, tablet, and desktop screens.
• The "Book Now" buttons do not perform real bookings but are designed to simulate the process.
• The map and contact form sections are placeholders and do not submit real data.

---