This is a four page website for a fictional tour company called BlueFoot Tours who offer services to people visiting the Galapagos Islands. It will contain pages detailing services provided with photographs of the area so those visiting have a visual of some of the things they may be able to see themselves. As it is not a real company, I have limited the depth I go into the tours themselves, otherwise I feel the site would be more complicated than necessary and lots of time would have wasted writing up content that wasn't needed.

This site is aimed at tourists who want to see what the area has to offer, therefore it needs to be interesting but not over complicated. The index page will be labeled as a 'Home' page with introductory information about the company, the owners and the sort of services that they provide. It will also have photos of animals taken on the Galapagos Islands, as will all of the pages. There will be a 'Tours' page which goes into more depth about tours the company can run and a contact page with a form for inquires. I later decided to add a photos page to utilise the media I and give the user an improved visual experience. The main colour (#87D9E8) was chosen as it mimics the colour of the feet of the animal the company is named after, the Blue Footed Boobie. I also re-sized and compressed all of the media so that it would have a good load time. For the 'logo' I only gave it a col size of three with the rest of header at 8 because I think it looks better than utilising the whole 12 cols available. The project changed over time from the orignal wireframe plan to include more media and be more aesthetically pleasing.

• As a user I want the links I click on to take me to the correct page so that I can see the information there.
• As a user I want the information to be easy to read -for example: text not small on large device and vice versa.

Link to my wireframe- https://github.com/NickBaker11/BlueFoot-Tours/blob/master/assets/wireframes/Milestone%20Project%20no.1.pdf

The navbar below the logo and title will allow the user to navigate between each page- Home, Tours, Photos and Contact, each having different information and media. Clicking on the logo will also bring the user to the Home page. The Contact page has a form with name, email and query sections that would allow the user to ask questions of the company regarding tours/extra information. In the footer of each page, there are links to social media (Facebook and Instagram)and TripAdvisor where they would be able to access the sites social media presence and find reviews if the were company real.

• In future I would like to add a navicon and a message after the submit button hit been clicked.
• I attempted both of these things but was unable to successfully implement them.

• Bootstrap- https://getbootstrap.com/ To help me with the general structure, using rows and columns to simplify the layout.
• Font Awesome- https://fontawesome.com/ This allowed my to use different fonts and icons to improve the project look.
• Adobe colour-https://color.adobe.com/create Helped to choose and create the colours for fonts and background.
• Diff Checker- https://www.diffchecker.com/ To check for errors in my code.
• Stack Overflow- https://stackoverflow.com/ to help answer questions I have.
• Chrome DevTools- Helped me find and fix issues such as margin errors or padding I didn't want/need. also for mimicking how the site will look on larger screen sizes.
• Free Formatter- https://www.freeformatter.com/ to tidy my code as I feel GitPod spreads out too much.
• Hover.css - https://ianlunn.github.io/Hover/ Allowed me to use a 'grow' effect when the cursor hovered over certain elements.

• Testing the navbar

1. Clicking on Home and/or the logo on all four pages brings you to the Home page.
2. Clicking on Tours on all four pages brings you to the Tours page.
3. Clicking on Photos on all four pages brings you to the Photos page.
4. Clicking on Contact on all four pages brings you to the Contact page.
5. Clicking on the logo and the title in the top right will bring you to the Home page from each other page.

• Testing the form

1. If you try to submit an empty form, warnings come up on each text box asking the user to 'fill out this field'
2. The email section of the form requires a valid email address with an '@' to be submitted successfully.
3. The 'Inquiry' section brings up a Please fill out this field' message if you try to submit an empty field.

• Social Media links

1. When clicking on the Facebook link in the footer of each page, it takes you to the Facebook login page in a new tab
2. When clicking on the TripAdvisor link in the footer of each page, it takes you to the TripAdvisor login page in a new tab
3. When clicking on the Instagram link in the footer of each page, it takes you to the Instagram login page in a new tab

• Different screen sizes

1. When reducing or increasing the size of the screen, the text and images adjust so that they are relative to that screen size.
2. For mobile, certain images and text content disappears to give a better flow

The site has roughly the same look on medium devices and above with changes to text and image sizes. On smaller devices, I have hidden certain elements such as images and text to give it a better flow. I tested this using

I sent my live link to friends and family, asking them for feedback and screenshots to see how it looked on their devices with positive results. This gave me insight on issues to fix for different screen sizes.

I used GitHub Pages to deploy my site using the given instructions on GitHub. I run my code locally through GitPod. There are no differences between my deployed and development versions. Here is a link to the live site https://nickbaker11.github.io/BlueFoot-Tours/

Code

• Any code with 'hvr-grow' in my HTML and CSS (lines 113-127 in style.css) files are attributed to hover.css

Content

• All text was written by me

Media- All images are photos taken by myself on the Galapagos Islands, with the exceptions of-

• 'lonesome-george.jpg' taken from https://en.wikipedia.org/wiki/Lonesome_George
• 'bluefootlogo-edit.jpg' taken from https://www.kickstarter.com/projects/bebezee/the-blue-footed-booby-enamel-pin
• 'puerto-ayora-map.jpg' taken from https://www.pinterest.ie/pin/272749321154640179/

Acknowledgements

• This project was inpired by my fiance Aisling and our visit to the Galapagos last Februrary