Submitted about 2 years ago

Profile Card — HTML & CSS

Dylan• 20

@dylancatala

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello! Here's a new project, I did it in (approximatively) 7 hours, I know it can be a lot for a small project like this, but feels good to deploy it (even If some settings aren't the same as intended).

For example;

Background of the body, I don't know how to setup to make a Bubble in the top corner left and another in the bottom corner right. (See the solution)
Difficulties to setup the top background of the card, I wasn't using "display : flex" to the picture div.

I still feel very happy with the progress I'm making! (2 months ago I would have given up, and found it very difficult)

Your feedback is always highly appreciated! Help me to be better.

Community feedback

Atul kumar• 200

@AtulKumar0001

Posted about 2 years ago

Hey Dylan, I have a solution for your bg-pattern that you were unable to set in the background. You can replace your body in the style.css file with the code I have given below. I hope this is going to help you.

body {

font-family: 'Kumbh Sans', sans-serif;

background: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);

background-repeat: no-repeat, no-repeat;

background-position: bottom 40vh right 105vh, left 105vh top 50vh;

background-color: hsl(185, 75%, 39%);

}

Marked as helpful

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