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 built with React & Emotion on Live Coding

P

@carlosloureda

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


Would love to know how to set the background images responsive for both circles on the background. Any other tips will be welcome!

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Carlos,

Well done!

According to your question, the circles are a bit tricky in this challenge. I have used pseudo-elements, position absolute, vw and vh, background url, transform translate and @media (in your solution they are not very stable on different devices). Also, you can add better box-shadow, fix the HTML issue by adding the h1 tag to the section. Generally semantic tags matter, divs are semantically inert elements — elements that don’t really do or say anything.

That's it from me. Ps. Don't forget to upvote any comments on here that you find helpful.

Greetings :D

2

P

@carlosloureda

Posted

Thanks SzymonRojek.

I applied your recommended changes and used vw for the background-images position. I will work more on the box-shadow staff on next project.

Thanks for your tips!

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