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 and Flexbox

Wesley• 330

@wesleyjacoby

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

Profile card component
  • HTML
  • CSS
1newbie
View challenge

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,440

@correlucas

Posted

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

@wesleyjacoby

Posted

@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,440

@correlucas

Posted

@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

@wesleyjacoby

Posted

@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

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