Skip to content
Submitted about 2 years ago

Profile Card — HTML & CSS

Dylan•20
@dylancatala
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @AtulKumar0001Posted 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
    0

Please log in to post a comment

Log in with GitHub

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