Skip to content
Submitted about 3 years ago

Responsive profile card with svg patterns

Hugo Lindoso Correia•40
@HugoLc
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

I had 2 major issues:

  • I tryed to use the .svg pattern as a background-image like this... background-image: url(image/bg-pattern-card.svg); ...but it didn't work. So I used an img instead.

  • The gray line between the middle and bottom of the card isn't so thin like the model. Is there a way to make it thinner? I used border-top: 1px;

I hope you guys can give me some feedback!

Community feedback

  • Ahmed Faisal•5,095
    @afrusselPosted about 3 years ago

    Hi Nice work. For background image please take a look of my solution. https://afrussel.github.io/profile-card-component/

    3
  • riddhesh36•40
    @riddhesh36Posted about 3 years ago

    Hey Hugo, You did a great job on the design. The answer to your second question is that you can use lighter shade color to get that thin link as far as I understand.

    1
  • Felix onyango•0
    @felixonyangoPosted about 3 years ago

    Can I have the source code?

    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