Chinese Lantern Festival E-card

  • Tools
    JavaScript / HTML5 / CSS3 / Illustrator
  • Position
    Front-end Developer / Graphic Designer
  • Completed
    February 2018 - March 2018
  • GitHub
    Link

Development

This project was developed during second term at BCIT. We were given to develope a interactive festival e-card and I chose Chinese Lantern Festival to be my topic. The purpose of this e-card is to help the user to learn the festival with ten information and also interact with the user. I used Illustrator to create all my assests for the e-card and HTML5 to place all my assets on the web. I used CSS3 to resize and position all the assets. Finally, I used JavaScript to make the e-card interative.

How Does It Work

On the landing page, you can simply click on the lantern to start the e-card. After clicking the lantern, it will have an animation of lanterns flying and the title will be display. You can click the enter button to enter to the information page. On the information page, you will have to collect all the missing items at the bottom. Every items you find will display a window about the item related to lantern festival. Finally, missing items from the bottom will be displayed.

You can try it by clicking below.