Submitted 10 months ago

Chat app illustration using HTML and CSS

LVL 3

jezzydev•310

@jezzydev

A solution to the Chat app CSS illustration challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I discovered that there's a whole bunch of hex codes, unicodes, html codes and html entities available for adding symbols, arrows, shapes, etc.

What challenges did you encounter, and how did you overcome them?

Took some time to figure out how to implement the two vertical cylindrical shapes (the light violet and light magenta shapes) for the background in a way that would make them responsive with respect to screen sizes. I settled with ::before and ::after pseudo-elements and using transform-translate technique.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on jezzydev’s solution.

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