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 with HTML and CSS

Lucas 120

@LucasDev98

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@climb512

Posted

Looks good!

Did you consider different options for positioning the background images? To me, it looks like they have vertical edges positioned near the center. This way also eliminates the need for a media query. If you like that look, you can use a "calc" to set this bg-image posiition:

position: absolute;
top: -488px; /* half the image height */
left: calc(50% - 976px); /* 50% minus full image width */
width: 976px;
height: 976px;

The bottom image would just use

right: calc(50% - 976px);

...instead of left.

Cheers!

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