Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Chat-app-css-illustration-master solo Css

yanlsamaβ€’ 170

@yanlsama

Desktop design screenshot for the Chat app CSS illustration coding challenge

This is a solution for...

  • HTML
  • CSS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone πŸ€“πŸ’», I'm Yaniv and this is my solution for the challenge #11

built with :

  1. Grid.
  2. Flex-box.

Help Me 😰:

I am new to this and I tried to make it as similar as possible, finally I had no idea how to make the backgrounds with those shapes, I will study more and update the project to achieve it, or maybe you can recommend me something to achieve it, anyway I leave it like this and I will update it when I have enough knowledge.

Thanks!πŸ’–

Community feedback

Violeta Solaasβ€’ 90

@Violesol

Posted

HI YANLSAMA

For the rounded shapes at the background I suggest you to use the "border-bottom-radius" and "border-top-radius" property in order to rounds the corners of the element's.

Additionally for the background I personally like to use a CSS Gradient tool: https://cssgradient.io/ with which you can add it colors to create the gradient, copy the code and use it in your element .

I hope you find it useful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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