Submitted almost 3 years ago

Profile Card Component using HTML, CSS and Flexbox

@wesleyjacoby

A solution to the Profile card component challenge

Solution retrospective

The first challenge I ran into was the background and how to position the two images. I think I got close using this code:

body {
    background-image: url(./images/bg-pattern-bottom.svg), url(./images/bg-pattern-top.svg);
    background-position: right -7.5rem bottom -31.25rem, left -7.5rem top -31.25rem;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;

Could there have been an easier way?

The other part I struggled a lot with was the positioning of the profile image, but I think I got it right efficiently.

On the mobile design picture, there always seems to be a gap between the browser and the actual card. I have been adding a margin around the card once the browser reaches a certain width. Is this right?

@media screen and (max-width: 500px) {
    body {
        margin: 0 1.25rem;
    }
}

Thanks for the help!

Code

Please log in to post a comment

Community feedback

Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
Hello Wesley, congratulations for your solution!

Answering your question:

About the background-image import you've used the best way, its possible also to the same using a pseudo-element with position absolute/relative or with the property "content" inside the class, but its a really long work and you'll have to position each element and also work z-index to put the element under everything. So you have done the best choice.

For the background to keep your code clean, you can use a shorthand to write less code and reach the same properties. For background you can write color, image, repeat and position in only one property. See the example below:

Background shorthand: body { background: #color url("your-img.png") no-repeat right 10% top 10%; }

I hope it helps you and congrats, I know how hard is work with this background multiple image position.
Marked as helpful

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