CSS, (transition effect)

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @Xtrum, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Your background is applied but it's not too similar to the design yet. Add background-size: contain instead of background-size: cover to make it display the size full width and center with the card vertically. Note that now is slightly different from the challenge design.Here’s the code with the modification and the image applied as background:

  body{
      min-inline-size: 100vw;
      min-block-size: 100vh;
      background-image: url(/images/pattern-background-mobile.svg);
      background-size: contain;
      background-repeat: no-repeat;
      padding: 2rem;
      display: grid;
      background-color: #E1E9FF;
      place-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Ayodele Hassan•90

  @XtrumPosted about 2 years ago

  @correlucas Thanks a bunch for the insight.....💝

  0
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Reduce the border-radius of the component to better match the FEM example.

  • The “Illustration” serves no other purpose than to be decorative; it adds no value. Its Alt Tag should left blank and have an aria-hidden=“true” to hide it from assistive technology.

  • Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

  https://web.dev/learn/design/

  If you have any questions or need further clarification, let me know.

  Happy Coding! 👻🎃

  0