Jen Kramer

Magenta Lime

This project was completed in 2023 for the world-famous band Magenta Lime in support of their world tour and album release. The goal was to reflect the band's brand, aligning the website's look and message with the latest tunes.

Website Tour

The diamond image layout is a grid of individual images, shaped like diamonds and tiled in CSS. — Starting with the basics of CSS and HTML, you'll progress through creating responsive designs for mobile, tablet, and desktop layouts. You'll learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists. You'll explore concepts like rem and em units, custom fonts, responsive images, and the picture element. By the end of the course, you'll have built three variations of a website, each increasing in complexity!

The tracklist and audio player work differently at different screen sizes. — Starting with the basics of CSS and HTML, you'll progress through creating responsive designs for mobile, tablet, and desktop layouts. You'll learn to code complex layouts with CSS Grid and Flexbox and tackle real-world exercises like styling buttons, audio players, hamburger menus, and lists. You'll explore concepts like rem and em units, custom fonts, responsive images, and the picture element. By the end of the course, you'll have built three variations of a website, each increasing in complexity!

A closer look at the diamond grid in isolation, showing parts of 12 individual images.

A closeup of the track list on desktop display. — This track list flies in and out on click. It's powered by JavaScript, but the layout has some interesting CSS tricks behind it. An excellent next step would be to have each track load and play in the audio player when selected.