Skip to content
Submitted about 1 year ago

Chat App Illustration - Very difficult

RaidEyes•390
@RaidEyes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Chat app CSS illustration
  • HTML
  • CSS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

A Super Difficult CSS Challenge !!!

Here are some highlights:

  • I used fixed width for the app interface and the heading because they look better without responsiveness.
  • The ::before and ::after that I placed in my body was very hard to shape. I managed to get them about 80% right. If you know the correct way, please show me.
  • I went through a lot of trouble just to get the correct shapes for the body and the top app box.

Overall, I'm very happy that I completed such a hard challenge. Let me know if you can give me some advice on how to organize my CSS code. Thanks!!

Community feedback

  • RaidEyes•390
    @RaidEyesPosted about 1 year ago

    I don't know why it looks bigger than the size in the design. Can someone please help me?

    0
    RaidEyes•390
    @RaidEyesPosted about 1 year ago

    @RaidEyes Update: I use transform: scale(0.65); to make it smaller and match the design. Tell me what you guys think, is it a good approach?

    0

Please log in to post a comment

Log in with GitHub

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