Glam Up My Markup - Cozy Camp

#frontendchallenge #devchallenge #css #javascript

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

What I Built

This was a very fun challenge.
I explain the details of this journey after the demo.

Demo

Journey

I started by choosing the colors. I wanted to deliver a cozy and warm vibe, so I used CSS Variables to help me remember them.

:root {
  --color-camp-01: #738d5e; // muted green
  --color-camp-02: #293d31; // rich green
  --color-camp-03: #ffc78a; // warm golden
}

Looking at camp inspiration designs, I found strong typography, colorful contrasts and nature-inspired illustrations. Fonts are always hard to choose, so I made up my mind on Truculenta and kept moving forward.

Ok, time to build the thing.
Since we cannot edit the HTML, with flexbox I manage to achieve something like this.
Looks fine, but there is still some work to be done.

This is more of a mobile-first approach, since on desktop we have more room to work with, I thought about changing the direction of the flex elements. And using the :after pseudo element so I could place something inside the <h1> tag.
I used an SVG from game-icons library.

Putting it all together, we have this:

Good, we are getting somewhere.
Although, there is something missing 🤔

Getting back at the camp designs inspiration, I found some rough edges designs, and things that give some organic look. So I decide to try some border-image css to see how it looks.