Sleepy Pikachu🥱 | Frontend Challenge June | CSS Art

Dhrutisundar Sahoo — Mon, 03 Jun 2024 23:12:45 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

The June Prompt reminded me of beaches in no time(stole the beach idea from glam up challenge). And I deep dived pinterest to find some cool(and sleepy---because I'm posting this at 4:25am in the morning) pixel art that I could make up in CSS.

Demo

Here's the final result of my night-long strive (●'◡'●)
(View in 0.5x)

Journey

The journey of this art is quite straightforward. I got inspired by the Previous CSS Art winner who was inspired by a Medium Blog who was inspired by a YouTube Video.

And I wanted to try to make pixel art using CSS(and I make some on paper and paste it around in my room too)

Then I went to the best place to steal others' artwork---Pinterest 😛
I stumbled upon a cute Pikachu, who looked no less sleepy than I was.

Here are the images I used to make this art:
Pikachu🥰
Beach🏖️

I wish I added some animation(but that would lead to more sleepless nights, and my mother getting disappointed with me missing breakfast everyday 😹)

Here's a Pikachu Meme and Cute Pikachu Photo to help me get more reactions on this post.

Peace Out! ✌️

Take me to a Beach! T-T

Dhrutisundar Sahoo — Sat, 01 Jun 2024 20:29:27 +0000

This is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches

What I Built

I was trying to build a table on a beach that would show different beaches in the form of cards. I wanted to give it a relaxed and "beachy" look with the help of textures and warm colors.

Demo

I have made this for PC screens only(Pardon me for being lazy). Best viewed in 1024x532.

Keyboard Inputs are also supported:

SpaceBar: To begin exploring.
Left and Right Arrows: To navigate the gallery.
Escape: To exit the gallery and move to landing page.

Edit: I am facing some issues with applying a hosted font on codepen. Make sure you check out netlify site as well :)

View the full code here
Hosted on Netlify as well

Journey

I was excited to participate in the frontend challenges(Yes! This is the first time :P). When I saw the topic, I started diving deep into all kinds of illustrations(Freepik) and fonts(Google Fonts and Google Search :P) I could collect to get something into shape.

I thought showing different beaches on paper cards would be simple and cool. So, I dived into Figma and built a desktop screen for the landing page.

Given that beaches are filled with shuttle movements of nature(waves, wind and creatures), I wanted to add some transitions and animations with the help of GSAP. I was also dreaming of putting a crab that would randomly crawl in and out, but I decided to be happy with being able to imagine it.(Laziness-2 Me-0)

Credits

Illustrations: Freepik
Beach Images: Google Images
Fonts: Beach, Josefin Sans
Transitions: GSAP

Forem: Dhrutisundar Sahoo

Sleepy Pikachu🥱 | Frontend Challenge June | CSS Art

Inspiration

Demo

Journey

Take me to a Beach! T-T

What I Built

Demo

Journey

Credits