Skip to content

This project contains the front end of a website named Travelaro. It is a multi-linked and mobile screen featured website which consists of different travel details, blogs, tips and a contact form.

Notifications You must be signed in to change notification settings

AshiniAnantharaman/Travel_Website-Travellaro

Repository files navigation

Travel_Website-Travellaro

This project consists of a fully responsive multi-page website's front-end design which is created using HTML, CSS and JavaScript. It is a travel website which consists of different destinations visited (blog section), travel and tourism tips, restaurants and resorts in different places within US and a contact page to get assistance in your Trip. The contact form will send an email to myself with all the details and message regarding which they need assistance. This is adaptable to both mobile and laptop screens and can be used in any device. The different functionalities of the pages are shown in the upcoming sections.

Below is the video of the complete website's functionality

Compressed_video.mp4

1. Display Adaptability

The website is created in such a way that it is adaptable to the screen size.

DESKTOP

The below images shows the display in a desktop or a lapton screen size

MOBILE

The below images shows the display in a mobile phone screen size

The below video shows this function.

Device_Compatible.mp4

2. Multi-page response

There are 6 different pages connected to this main website. They are as follows.

  • Boston
  • California
  • Rochester
  • Couples_trip
  • Family trip
  • Contact Form

Images of 2 pages have been shown below.

3. Different features

There are multiple features used in the website to make it user friendly and attractive. These features are explained with images and videos.

3.1. Flip Image:

The flip image feature works in such a way that when hovered over the image, it will be flipped and the contents in the back of the image will be displayed. This can be used in different places. One such example in this website is for season based tourist locations where for each of the seasons the tourist places which can be visited will be listed in the back. The below example shows the locations in Boston which can be visited during winter.

flip_function.mp4
3.2 Rotating Gallery

The Rotating Gallery feature works in such a way that when hovered over the image, it will move up to a certain distance. This can be used to display differnt ideas, locations, functionalities, etc. In this website it is used to highlight the images of family trips and couples' trip. The below video shows the gallery used in this website.

Rotating_Gallery.mp4
3.3 Auto-Change Background

This is a feature used to attract the travellers to the location by showing its beauty in the main background of the page. In this website, the background of California page is set in such a way that it keeps changing the images at a frequency of 5 secs automatically. The same has been done in boston page as well. Below video shows the example of california in this webpage.

California_background.mov
3.4 Autoplay background video

This is similar to auto-change background using images but in this case a video has been used. This video is played automatically without any trigger needed for the start. Once the video ends, it will again start from the beginning and keeps playing in a loop. This is used in the background for the couples trip page, rochetser page, family page and contact us form. Below video shows the background video feature used in this website.

background_video_family.mov
3.5 On-Click links

This is used to click on a particular text box or image to navigate to a different section. This also will basically be used in different scenarios to navigate. In this website in used in so many scenarios which are listed below.

  • Clicking on the logo/Back to Travelaro will re-direct to home page
  • Click on the images of CA, Boston or Rochester takes you to their corresponding pages.
  • Clicking on the options like contact us, about me and Home will take to that specific page or section.
  • Used in Couple's Trip page to navigate to the corresponding section in Date Ideas
  • Contact Us box on the bottom section of the page takes you to a separate contact form.

4. Contact Form

This form is used to connect with the website owner by sending them their email and message body. Once these details are updated, send button click will send the contact details of the person to the mentioned email so that they can reach out or reply to their email.

About

This project contains the front end of a website named Travelaro. It is a multi-linked and mobile screen featured website which consists of different travel details, blogs, tips and a contact form.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published