CSS only Chat App Illustration

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