Submitted over 2 years ago

Profile Card Component using HTML, CSS and Flexbox

Wesley•330

@wesleyjacoby

Preview site View code

This is a solution for...Profile card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

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!

Community feedback

Lucas 👾•104,340
@correlucasPosted over 2 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
0
Wesley•330
@wesleyjacobyPosted over 2 years ago
@correlucas Hi Lucas,

Thanks so much for the feedback - It's great to know I'm on the right track with the background images.

Thanks for the tip regarding the shorthand - It's definitely cleaner! I'll refactor the code to reflect your solution.

Thanks again!
1
Lucas 👾•104,340
@correlucasPosted over 2 years ago
@wesleyjacoby You're welcome Wesley. By the way you did great positioning the background-images. I was lazy so exported the background with the two circles incorporated from Figma and set them as the background. Only few weeks them I discover how to apply a multiple images background and its kinda hard.

If you want to see my solution here it its: https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8

Happy coding!
1
Wesley•330
@wesleyjacobyPosted over 2 years ago
@correlucas Thanks man - I appreciate that. I still have to learn about figma. Once I upgrade to the pro subscription, I'll see what that's all about.

Your solution looks awesome! You went above and beyond what was required - Haha. I still have so much to learn.
1

Please log in to post a comment

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