About

Website Information

There are 8 unique HTML pages for this website:

- index.html (Main Homepage)
- story.html (Story Mode)
- story-egypt.html (Story Mode -> Chapter 1)*
- explore.html (Exploring Mode)
- explore-egypt.html (Exploring Mode -> Egypt)*
- shop.html (Shops)
- about.html (References & Website Infos)
- contact.html (Personal Infos & Feedback)

1 CSS file (style.css) under /css folder.

and 4 JavaScript files (including plugins) under /js folder.

* I didn't make other chapters/destinations for the story mode & exploring mode
since all the other chapters/destinations should look similar to the existing pages.

JavaScript Interactions

- universal: "More" drop-down menu on the navigation bar.
- story-egypt.html: Click "Next" & "Previous" button to toggle between dialogs.
- explore.html: Hover on different destination links.
- explore.html: Automatic image scrolling at the top header.
- explore.html: Manual image scrolling at the "Featured" section.
- shop.html: ScrollClass for item pop-ups.
- shop.html: Add to cart button & Clear shopping cart button.
- shop.html: Shopping cart calculation & Proceed to checkout.
- contact.html: Form submission with thank you messages contain names.

For jQuery plugin references see "References" section below.

References

Story

Verne, J. and Butcher, W. (2008). Around the world in eighty days. Oxford: Oxford University Press, p.63. Retrieved from:
http://www.ibiblio.org/julesverne/books/awed%20revd%20edn.pdf

Educational Content

Wikipedia. (2019). Wonders of the World. [online] Available at:
https://en.wikipedia.org/wiki/Wonders_of_the_World

Wikipedia. (2019). Great Pyramid of Giza. [online] Available at:
https://en.wikipedia.org/wiki/Great_Pyramid_of_Giza

Images

Ramos, L. (@leonardoeron). (2018). The six pyramids of Giza. [image] Available at:
https://unsplash.com/photos/CJ4mbwSK3EY

Jusková, I. (@bellaskova). (2018). Carrying the pyramids. [image] Available at:
https://unsplash.com/photos/icn6l4iRwKA

Christen, W. (@bobzepplin). (2018). The Great Wall of China. [image] Available at:
https://unsplash.com/photos/hB_nkwIw5f4

Leopardi, A. (@leonardoeron). (2019). Petra. [image] Available at:
https://unsplash.com/photos/k8-5bWDAklo

Yu, J. (@littlej1428). (2018). Taj Mahal. [image] Available at:
https://unsplash.com/photos/_WuPjE-MPHo

Jace and Afsoon. (@jacegrandinetti). (2016). Rome Colosseum [image] Available at:
https://unsplash.com/photos/6Yo_30FTrm4

Balla-Schottner, B. (@bensky). (2019). Budapest, Hungary. [image] Available at:
https://unsplash.com/photos/VPETME4zVWM

Grandi, P. (@peter_mc_greats). (2017). Pragser Wildsee, Italy. [image] Available at:
https://unsplash.com/photos/T7K4aEPoGGk

Bates, R. (@inksurgeon). (2018). The winding road. [image] Available at:
https://unsplash.com/photos/0eLg8OTuCw0

Cheung, K. (@kencheungphoto). (2017). Wanaka, New Zealand. [image] Available at:
https://unsplash.com/photos/KonWFWUaAuk

Saldaña, P. (@garciasaldana_). (2016). Acapulco, Mexico. [image] Available at:
https://unsplash.com/photos/PxfWjNv5PtY

Gielda, F. (@filipovsky). (2017). Chichén Itzá, Mexico. [image] Available at:
https://unsplash.com/photos/VPavA7BBxK0

Dimmock, C. (@caleydimmock). (2017). Presents. [image] Available at:
https://unsplash.com/photos/_HCpwe1-Prc

Treloar, K. (@kentreloar). (2018). Christ the Redeemer. [image] Available at:
https://unsplash.com/photos/-sw_uFvKBkk

Buzzao, G. (@giacomobuz). (2018). Machu Picchu. [image] Available at:
https://unsplash.com/photos/HSAItzUiSrg

Matzinger, S. (@8moments). (2018). Influences of the past. [image] Available at:
https://unsplash.com/photos/boyXZfqpwpU

Video Embedded

Simple History (2017). Great Pyramid of Giza. [video] Available at:
https://www.youtube.com/watch?v=GtJW-8ZvNE8&t=18s

jQuery Plugins

Malsup. (2019). Cycle2. [online] Available at: http://jquery.malsup.com/cycle2

Diaconu, V. (2019). scrollClass.js. [online] Available at: http://virgiliudiaconu.com/work/scroll-class

Fonts

Hunt, P. D. (2019). Google Fonts - Source Sans Pro. [online] Available at:
https://fonts.google.com/specimen/Source+Sans+Pro

ParaType. (2019). Google Fonts - PT Serif. [online] Available at:
https://fonts.google.com/specimen/PT+Serifo

Icons

Icons8. (2019). Download free icons, music, stock photos, vectors. [online] Available at:
https://icons8.com

Iconfinder. (2019). 3,425,000+ free and premium vector icons. SVG, PNG, AI, CSH and PNG format. [online] Available at:
https://www.iconfinder.com

Svg Repo. (2019). Free SVG Vectors and Icons. [online] Available at:
https://www.svgrepo.com

Map

The map in the story mode is generated by OpenStreetMap and Mapbox Studio (Vintage style)
under CC BY-SA 2.0 license.

Self-authored Content

"80 Days" svg logo: Made with Adobe Illustrator. Partial material from Svg Repo.
Cartoon characters: Made with Procreate.
Spinning earth video: Made with Adobe After Effects.
Item images in shops: Made with Procreate.