Skip to content
Submitted over 1 year ago

Beginner project number 2

Delgorithm•120
@Delgorithm
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 !

This is my 2nd frontend mentor project. I'm still learning a lot from various youtubes videos et advices from some of you.

However, I still have some issues to tackle.

I don't know how to place the profil picture (Victor Crest) in the middle without perturbing all my code. Should I go with a "position: absolute" ? I tried but didn't find it that useful. As for the background, I didn't know how to play with those 2 pictures to make one, or if I had to use a website to make it similar...

Anyway, thank you for your time and take care !

Community feedback

  • visualdennis•8,375
    @visualdennissPosted over 1 year ago

    Hi, good work there!

    To display those two background circles, simply add this to the body in css:

    background: url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg); background-color: #19a2ae; background-position: right 52vw bottom 35vh,left 48vw top 52vh; background-repeat: no-repeat,no-repeat;

    And it should work like a charm ;)

    Hope you find this feedback helpful!

    Marked as helpful
    2
  • Manish Patel•730
    @savvystriderPosted over 1 year ago

    Your project came out really well! I think using display: grid and place-items: center was a good choice for centering the image. If you're doing that, you don't need the flexbox styles you applied on the image itself. You could also try changing the display of the image to block and using margin: 0 auto to center the image.

    I'd also recommend adding some padding to the bottom to add some needed whitespace. That way, the text content isn't so close to the attribution content at the bottom.

    Marked as helpful
    1

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