This page has three separate code snippets that are being trialled. I've also set up the code so it's responsive. I've used Bootstrap to implement the responsiveness.
The first code snippet is the scissors, paper, rock game. The inspiration for this came from an article I saw called Building a circular navigation with CSS Transforms a tutorial by SARA SOUEIDAN. I've adapted the circular navigation to show and select the scissors, paper or rock.
The second code snippet is the random image display. This is an interesting concept. When a page is refreshed, an image is selected from a folder that contains a selection of images. So you don't always see the same image in the same spot. However, this doesn't have the annoying feature of changing the image while you're looking at it! The source for this came from the Web Designer Magazine. The only change is that this is responsive.
The third code snippet has the footer in the form of drawers. Hovering over the drawer reveals the clickable links. This is also Web Designer Magazine inspired - they called this the Ultimate Footer. The code has been adapted to make it responsive, so that the drawers change to fit the width of the screen. Also, a little bit of work needed to be done to simulate the hover on mobile screens with touch screens. For this I found an article about binding touchstart to the parent.
