Massive Cover-Up course project

Context

This project was completed as an assignment for a course on JavaScript. I was to come up with a music artist or group to use as a subject.
Below is a list of key features.

The site was to have 3 complete pages, with at least 5 links in the main navigation.
At least one page was to demonstrate the use of a show and hide element.
There was to be the use of an image gallery with thumbnail previews.
I was to make sure that the site displayed the current date and time. There was also to be a message specific for the time of day including, morning, afternoon, and evening.
Another requirement was to provide a way for the user to adjust a style element on the site. I chose font size as the adjustable element.

Technologies applied: HTML5, CSS3, JavaScript, and Photoshop

Demonstration Of Show And Hide Element

If the user clicks the "Read more" button (top image), more text content is shown. Then, they can hide it by clicking "Read Less" (bottom image).

Image of band member with read more button beneath it

Image of band member with read less button beneath it

Image Gallery With Thumbnail Previews

This element on the events page also has captions for each image the user can read as they click each thumbnail.

Image gallery with thumbnail images of various events the band has played

Current Date And Time With A Message

Dates and times were accurate according to Vancouver time when the screenshots were taken. Each displays a preprogrammed message for that specific time of day.

Afternoon

Morning

Evening

Adjusting The Style

Illustrated here is a "zoom in" and "zoom out" effect for font size on the site, to suit a user's needs, for example, if they were to have any visual limitations.