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

Profile Card Component Using HTML, CSS

@fitrifityanto

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm having some difficulty in placing two background images :confused: . I'm trying to get closer to the design. I doubt if my code is correct. because the background image changes when the screen size is different :v: . maybe some feedback for me

Community feedback

@AmanpreetSingh1995

Posted

Hi, Good Job on completing the challenge. I have listed a few things I hope will be helpful in coding for you.

  1. in your body styles , background color and background images can be written in background only (like this background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"), var(--color-dark-cyan);).

  2. The issue regarding the images change in screen size is because you have added media query on the body you don't have to do that. Instead of 100%, you can reduce the value to 50% or 40%. Just define in the main body where you are putting images.

  3. there is no need to define no-repeat two times in background-repeat.

I hope these tips will be useful for you. Keep Coding ! :)

Marked as helpful

1

@fitrifityanto

Posted

@AmanpreetSingh1995 Hi, thankyou so much. I will fix it according to your suggestion

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