My project is a webpage containing packages that customer is able to select, inquire about them through email, view location of them on google map and read some information about packages as well as countries and cities about their desired package,also there is easy access to check up where exactly in the world user can choose to travel to Users can navigate easily through websites and choose from many options available for their desired DREAM VACATION. Users can also contact directly through email where they can write out their wishes and leave phone number so they can be called back.
You can find live preview for this project here
This project is for any customer who is willing to go for all inclusive cheap holidays. There is a variety of packages to pick from. By clicking on a desired package or on contact form user can send email with all the necessary information needed.
-
User wants to see which packages are available, simply press on holiday deals button on navigation bar and it will lead him to 3 packages that are available, including their name, a quote and price.
-
User wants to navigate back to home page from contact page, simply press either home button in top left corner or logo brand in top right.
-
User wants to get more information about Spain package simply press on the image or header and it wil take him to the page of package,showing him exact city, information about that city and what you can see there as well as what the package includes.
-
User wants to get in contact directly, under the contact us page user can send email directly with all the desired questions and information.
-
If user wants to see exactly where the city is located or where the hotel from package is, user can go to navigation bar locations button and user will get Google map with set markers for all packages. User can get more information about marker by clicking on it.
I was using Just in mind protoyper. To make a wireframe of the idea that I had for my project. From how it would look to where would text go and how many images,how many pages. The wireframe is included in assets folder in wireframe folder. Of course with going deeper into the making of project itself wireframe as such had to adapt and develop to better suit the need of the project itself.
- HTML
- CSS
- Bootstrap
- JQuery
- Font Awesome
- cdnjs
- emailjs
- google maps
Navigation bar scales with smaller screen size devices(mobile phones, tablets), using font awesome icons simply by pressing desired platform you are automatically redirected to the official facebook,instagram or twitter page, as well as using font awesome icons to style the cards and make them look more appealing. By filling out contact form you can send the email with all the desired questions or informations. Google map has markers included in the map and you can press on them to get more information about marker.
Search box on the locations page where you can type in any location and search box will automatically try and finish it for you by giving you options to choose from.
Whole CSS was validated and tested through Jigsaw/CSSCongratulations! No Error Found. This document validates as CSS level 3 + SVG ! All the HTML codes were run and tested through HTML TESTER Javascript was tested through JSHint and it has passed. This project was tested across multiple browsers and on multiple mobile devices, tablets and desktops to ensure compatibility and responsiveness.
| Test Scenario | Status |
|---|---|
| As a user, when they click on locations nav link they should navigate to location section | Pass |
| As a user, when they click on Im interested button they should navigate to contact us section | Pass |
| As a user, when they click on card under holoday page they should navigate to each package deal | Pass |
| As a user,when they click on marker on the map there is pop up window | Pass |
| As a user, when they fill out contact form and send email it goes through | Pass |
| As a user, when they click on any of social link they should navigate to social links page | Pass |
| As a user, when they click on Find out more button they should navigate to holiday deals section | Pass |
| As a user, when they click on brand name and logo they should navigate to home page | Pass |
| As a user, when they hover over card on holiday page, cards picture should zoom in | Pass |
| As a user, when they have mouse on the card it slighty grows bigger | Pass |
This project has been deployed through GitHub pages
- Opened up repositories on GitHub
- Selected TravelWebsite repository
- Clicked on settings buttom
- Scrolled down and hosted pages thorugh GitHub Pages by selecting master branch as main source
- Open a repository on your GitHub profile, navigate and click settings icon.
- Scroll down, press dropdown button under Source section which is in GitHub Pages section, select master branch as source of your deployment.
- Wait a little bit, refresh the page and the site has been deployed at the link generated.
- Travel quotes on home page were copied from here
- Granada text was copied from here
- Arles text was copied from here
- Lucerne text was copied form here
- Granada quote was taken from this website
- Van Gogh quote was taken from this website
- Istria text was copied from here
- Corfu text was copied from here
- Florence text was copied from here
- Holiday deals package picture for Istria was taken from here
- Holiday deals package picture for Corfu was taken from here
- Holiday deals package picture for Spain was taken from here
- Holiday deals package picture for France was taken from here
- Holiday deals package picture for Switzerland was taken from here
- Holiday deals package picture for Florencewas taken from here
- Picture for Florence page was taken from here
- Picture for the Granada page was taken from here
- Picture for the Arles page was taken from here
- Picture for the Lucerne page was taken from here
- Picture for the Corfu page was taken from here
- Picture for the Istria page was taken from here
- All of bootstrap content inside this project was taken from here