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

CSS Phone Illustration with some JS functionality

Arturo Simon 1,785

@artimys

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, any feedback is much appreciated. Not sure if I made the phone to small or should increase size for a higher resolution device.

As I was building the phone styling I decided to use a real textbox and button. Then thought they were pretty useless since it's just an illustration 🤔......💡 unless it actually submits a message.

It has no practical use but was fun so what the hell.

Note: custom scrollbar styling in phone illustration can be seen in Chrome. Other browsers may vary

Community feedback

@efecollins

Posted

Hi, your CSS Illustration is really nice. I am actually using it as a guide to doing mine. Please, I don't know much JS, so I want to use a similar JS code that you used.

You know they say, don't copy code, pls inform me if I can use your code or not.

Thanks.

1

Arturo Simon 1,785

@artimys

Posted

@efecollins Thank you for your comment. Yes most definitely you can use it as a guide.

Good luck and Happy coding!!

0
P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hey, there again, Arturo Simon! 👋

Your CSS illustration looks great! 🙌

I also think using an actual input element and button is a fun touch, too! 😉

Happy coding! 😁

1

Arturo Simon 1,785

@artimys

Posted

@ApplePieGiraffe As always thank you for your comments.

Happy coding as well

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