Skip to content
Submitted 10 months ago

Profile Card Component - flexbox/grid mix

Chriscent Pingol•230
@KishonShrill
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

This challenge is done together with Blog Preview Card

  • Both done within 12 hours

Unsure:

  • Can someone check if the way I did my <hr class="profile__divider" /> correct? I feel like I could have done better on that part...
  • Also the banner of the card, i think the pattern is not aligned correctly, is the banner on the design a little scaled?

Community feedback

  • Daniel 🛸•44,250
    @danielmrz-devPosted 10 months ago

    Hello @KishonShrill!

    Your solution looks great!

    The background pattern with the circles is a bit tricky, but here's how you can do it:

      background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;

    I hope it helps!

    Other than that, you did an excelent job!

    Marked as helpful
    1
    Chriscent Pingol•230
    @KishonShrillPosted 10 months ago

    @danielmrz-dev Woahh, I didn't know we could manipulate multiple image url()'s in one go. This is a first for me, thanks for the big help! 👍

    1
    Daniel 🛸•44,250
    @danielmrz-devPosted 10 months ago

    @KishonShrill

    Until I finished this project, I didn't know either! I had help from people in the community 😊

    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