Skip to content
Submitted 4 months ago

CSS only Chat App Illustration

Bakhtiar•380
@b4khtiar
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

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

creating css illustration that is close to the design and added some animation on it.

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

still looking for the best way to place or use shape on the background

What specific areas of your project would you like help with?

lets discuss

Community feedback

  • Rupali•780
    @rupali317Posted 4 months ago

    Hi @b4khtiar

    Congrats on completing the challenge with the cool animation!

    I have the following feedback related to how you are displaying the background image. I noticed that for .shape-two you have the definition left: 70vw. This causes overflow issue as I can scroll in the horizontal direction.

    I suggest using background image with background position properties. Here is a snippet of my code:

    .background-1,
.background-2 {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  width: 18.75rem; /* 300px */
  height: 37.5rem; /* 600px */
}

.background-1 {
  background-image: url("./icons/background-1.svg");
  background-position: -9.5rem -9.5rem;
  top: 0;
  left: 0;
}

.background-2 {
  background-image: url("./icons/background-2.svg");
  background-position: 9.5rem 9.5rem;
  bottom: 0;
  right: 0;
}

    For full reference: Rupali's version of chat app css illustration challenge

    Marked as helpful
    1

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