Submitted over 1 year ago

Chat App Illustration | Blob Background, BEM, Animation

Chee Kian Teoh• 330

@teoh4770

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Chat app CSS illustration

HTML
CSS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feel free to leave feedback and help me improve my code structure or even the solution!

Hi there! This is my attempt at the Chat App Illustration with Frontend Mentor. I was inspired by the blob background and animation from a newsletter I saw somewhere, so I decided to implement it instead of keeping the original background.

This is what I learnt(mostly CSS):

BEM naming convention
Simple animation and transition(I implement the spinning effect!)
Creating blob shapes with border-radius
Using margin property to align the items in the illustration

Community feedback

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord