Live preview of the site is available here

This website is used to promote three different areas in Italy. I want to high=light three attractions and three hotels in these areas.

• Rome
• Abruzzo
• Sicily

• Also included is a contact form and a map that shows markers for each attraction and hotel.

• UX
  • strategy
    • user stories
    • visitor stories
    • site goals
    • business goals
    • customer goals
  • scope
    • features
    • future features
  • structure
  • skeleton
    • wireframes
  • surface
• Technologies used
• Testing
• Deployment
• credits

• An easy to navigate website to promote the tourism web page and its social media accounts.
• Promote the three regions to help boost tourism in the specific areas by highlighting the attractions located in each.

• This website is used to promote three areas in Italy. It is for people who are interested in Italy as a holiday choice but might be unsure of which area to go to. Using this website they will have more information to help make a choice.
• This website is for people based worldwide looking to travel for a holiday or extended stay, or may just want to access information for future reference.
• Three different areas for holidays:
  • Rome
  • Abruzzo
  • Sicily
• It is aimed at people aged 18+ with disposable income.

• Clear purpose for the site.
• Intuitive navigation throughout the site, responsive on smaller screens.
• Clear information on attractions in each place linking to a page that gives detailed information on the specific attraction.
• C;ear information on hotels and how to book using a link to the relevant TripAdvisor page.
• Clear contact form to get more information if required which sends contact information through to emailJS account.
• A trustworthy, easy to navigate site that gives clear information about the featured areas.
• Multiple ways to contact the page admin's including links to social media pages and a contact form.

1. Build on and extend the awareness around these areas.
2. Showcase attractions and hotels in each area.
3. Beach holiday in Sicily, nature lovers holiday in wild Abruzzo and finally a city of culture break in Rome.
4. Using links to wikipedia and tripadvisor, potential clients have access to multiple information sources to help plan their holiday.
5. Promote social media pages to build awareness of these areas and the site.

1. Is this site trusthworthy and easy to navigate?
2. Is the purpose of this site clear?
3. Do I understand the information provided by the site?
4. Is the information provided relevant to my needs?
5. How can I contact them to ask for more information?
6. Can I see some of the sights I can expect to see in these areas?
7. Can I look at potential hotels?
8. Can I follow this site on social media for more updates?

1. If I have more questions can I easily contact them?
2. Can I use this site to book a hotel?
3. Can I follow this business on social media?

• How to book hotels?.
• What the regions have to offer?
  • Rome - City break
  • Abruzzo - Nature lovers holiday.
  • Sicily - Sun worshippers holiday.
• A gallery to show pictures of the items on offer here.
• How to contact for further information.
• A review section.
• An about section to give a brief history of the business.

• A minimalist site with clear sections for each region and hotels for those regions.
• A clear easy to use contact form and social media links.
• Good flow through the page so the user knows what to expect and how to find information.
• An easy to find and use contact form, with a button on the hero image that links straight to the contact form making it more convienent for repeat users.
• Multiple social media links to appeal to more users.

• Nav bar featuring links to various areas in the site.
• Hero image with a welcome paaragraph about Italy featuring a contact button for ease of use.
• Clickable links to tripadvisor and wikipedia for hotel bookings and info.
• Contact for with email address, message, phone number, name.
• Section with address, e-mail and telephone number.
• Footer with social media links, legal info.

• Colors used:

1. #36454f charcoal,
2. #ffffec cream,
3. #f2f2f2 off-white,
4. rgb(193, 238, 253) lightblue,
5. rgb(0, 204, 255) blue,
6. red

• Fonts used:

1. "Dancing Script", cursive
2. "Roboto", sans-serif

• Images:

1. All from Unsplash.com

• A home page with a hero image and company logo in the nav bar.
• About us section with details of opening hours, address, e-mail address and phone number.

• Hero image with info text.
• Image with link to Wikipedia info page for attractions.
• Image with link to Tripadvisor info page for hotels.

• Hero image with info text.
• Image with link to Wikipedia info page for attractions.
• Image with link to Tripadvisor info page for hotels.

• Hero image with info text.
• Image with link to Wikipedia info page for attractions.
• Image with link to Tripadvisor info page for hotels.

• Featuring an area for users to request info if needed.

• Interactive map featuring markers with info windows.

In the future I would like to build on to this site by adding:

• An online booking system.
• A section for users to post their pictures to the page.
• Interactivity between the information cards and the map such as a "see on map" button that would link to the relevant infoWindow on the map.
• Adding a cluster map as more areas are added.
• Adding more areas with attractions and hotels for each one.

• home/rome mockup
• abruzzo wireframe
• sicily wireframe
• map/contact form wireframe

• HTML5
• CSS3
• Bootstrap 4
• JS
• jQuery
• Font Awesome
• Google Fonts
• Google Maps

• Located in seperate file test

• Sign into GitHub and access your repositories.
• Select desired repository.
• Once clicked on, this bring you to a code and deploy page which contains details of your READme.md, a description of the repository details and other info.
• Located near the top, under the repository name is a tool bar. At the end of this bar is a settings selector.
• Click on settings and scrool down to GitHub Pages. Here you will click on the dropdown menu under source. (Currently showing "None"), click on this and select "Master", click save. Page will automatically refresh. Once refreshed, scroll down to find the link to your website high-lighted in green.
• Click on this or copy and paste into browser to access your site.

• If you have a GitHub account you will need to log in. If not you will need to sign up at https://www.GitHub.com/ to access this file.
• To run project, go to the repository for that project and click on it.
• Click the Green button to start the repositroy. This should only be clicked once as each time it is clicked it opens a new copy of the GitHub workspace.
• The workspace is now open to be viewed and edited locally.

• To clone select desired repository.
• Once clicked on, this bring you to a code and deploy page which contains details of your READme.md, a description of the repository details and other info.
• Located beside the green gitpod button is a button with "Code" written on it. Here you will find a drop-down menu, that when selected gives you the option to clone or download the repository file.

• For my navbar I used code from W3Schools/bootstrap with jquery and popper.js.
• Card element from w3schools.
• CSS for the row and column class for the menu page was taken from W3Schools.
• The CSS for my hero-text was taken from W3Schools and amended to suit.
• geeks4geeks.com, here I found a solution for my hero-image issues as referred to in the TESTING.md
• Henrique Peroni, I got the button and JS code to access the map from the cards from code I saw done by this person on Slack.

• All images used in this project were taken from Unsplash.com
• All icons taken from font awesome.

• Content for this Milestone 2 Project was created by myself, Irene Neville, with help from the Code Institute and my mentor Brian Macharia, unless otherwise stated.

• All media from Unsplash.com
• All text for the information cards for each section has been taken from TripAdvisor and Wikipedia respectively.

I would like to take this opportunity to thank my mentor Brian Macharia for all his help during this project and to Anna Gilhespy and Haley Schafer for ideas on how to complete a READMEmd.

I would also like to thank the student support team, all on the CI Slack community and everyone at Code Institute for helpful advise, videos and content.