Submitted about 3 years ago

Profile-Card-Component

Laxmi• 10

@Laxmi-Hirabayi

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

In order to make background for the page, I used position: absolute; property but that is not looks fine, and also i felt difficulty in making background using .svg files.So please help me with this, it would be much appreciated

Community feedback

Raymart Pamplona• 16,090

@pikapikamart

Posted about 3 years ago

Also @Drallas already said what is need. To add up something up

You could see that there is scrollbar at the bottom? To remove this, make the container or your section main to be overflow:hidden to hide the circle from overflowing the container
Remove the image of the person, remove the width propert so that it will be in its native size

drallas• 375

@Drallas

Posted about 3 years ago

Hello Laxmi

I'd recomment using background-image and background-position to set to images correctly.

background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
    background-position: ???;
    background-repeat: no-repeat, no-repeat;

It's hard and requires tweaking the values. left -??rem top -??rem, right -??rem bottom -??rem the exact values I leave for you to figure out, that's part of the fun!

Card design is also a bit bigger then design!

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