Travelopia is a web application designed for travelers to explore destinations, plan trips, and share experiences. It provides a user-friendly interface and various features to enhance the travel planning experience.
The project is deployed and accessible at:-Travelopia App
-
Dynamic Height Calculation: Utilizes the
calc()function to calculate the remaining height of the midsection after subtracting 200px (100px for the navbar and 100px for the footer). This ensures optimal use of available screen space. -
Color-Schema Harness the power of customizable colors with predefined
primaryandsecondarycolor variables, allowing effortless anduniform coloradjustments across components. -
Fluid Responsive Design: Ensures that the image displayed in the app does not stretch or distort across different screen sizes.
-
Viewport Size Optimization: The application's size is always equal to the viewport size, maintaining consistency and preventing unnecessary scrolling.
-
Overlay for Translucency: Utilizes an overlay with CSS to create a
translucent effect, enhancing the visual appeal of certain sections of the app. The overlay is strategically positioned to bring translucency while maintaining readability of the content. -
Responsive Layout: Implements responsive design principles to provide an optimal viewing experience across various devices and screen sizes.
- HTML: Used for creating the structure and content of the website.
- CSS: Employed for styling and layout.
- JavaScript: Implemented to add interactivity and dynamic behavior to the website.
To run this project locally, follow these steps:
- Clone the repository:
https://github.com/VishalKNigam/Travelopia_assignment - Open the
index.htmlfile in your preferred web browser.
Explore destinations with Travelopia
Alert message on a large screen
Optimized layout for medium-sized screens
Responsive design for small screens
Thank you for your support! We welcome your feedback.