CREATIVE BRIEF
Online Publication / Grid Layout
“Students will create an online publication (fan site, zine, exhibition, etc) that includes 3-5 separate pages and a navigational tool/toolset. No single page and its linked content can be larger than 5 megabytes.”
ONLINE PUBLICATION
Interactive Collage
I created this interactive collage to mash up album art from some of my favorite musicians in an interactive way. Easy to spot are R.E.M., Steely Dan, and System of a Down.Hovering over a visual element highlights it, and a click leads you to a song from the corresponding album. There are ten tracks in total hidden in the collage.
GRID LAYOUT
Song Pages
Each piece of album art leads to a page for a track on that album. Each of these pages highlights an ASCII-fied version of the album art, and shows the lyrics to the song. The elements of the page are arranged in a column using flexbox, satisfying the grid layout objective.You can also listen to the song with the Play button, which should play a hidden YouTube embed. It can be inconsistent, so try reloading the page if it doesn't work.
EXTRAS
Responsive Layout
Using @media rules, I created a separate mobile layout. Since phone screens are in portrait rather than landscape, I had to fine-tune the size of the hover effects quite precisely.