DEV Community

Cover image for Glam up my markup challenge
Sean Young
Sean Young

Posted on • Edited on

Glam up my markup challenge

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I decided I wanted to use some of the new features of CSS and see how much interactive and animated features could be built with just CSS.

I've tried to incorporate subtle animations and hints while providing a modern, minimalist, flat interface.

Demo

Image description

Hosted on github pages: https://seanyoung247.github.io/dev-glamup/
https://github.com/seanyoung247/dev-glamup

Journey

I've been away from coding for a little while, so this was a relatively simple project to get back into.

I went in with a very nebulous idea of what I wanted to achieve. Initially I wanted a single background image with overlays displayed for the activities. However, working with free stock images getting a result that was aesthetic was taking too long. So I changed it to change the entire background image. Now it's done I would prefer perhaps a single background image with iconic images for the different activities. I would also have liked to incorporate a dark/light theme.

It was interesting exploring what can be done in CSS alone without building extra HTML. Also interesting to find the odd little holes that remain in CSS that require patching with JS.

MIT License.

Top comments (0)