Skip to content
Submitted over 3 years ago

Profile card component - HTML, CSS, & Vite

P
Darrick Fauvel•490
@DarrickFauvel
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everybody, 👋

I found placing the circles as background images to be challenging 😥, as I used a few media queries to make them respond to varying screen sizes. 🤷‍♂️

If I've missed anything or you think I could do something better, please let me know. I appreciate your feedback. 🥰

😊 Happy codding!

Code

Please log in to post a comment

Log in

Community feedback

  • Han•320
    @hcxweb

    Hello Darrick,

    To save you the hassle of writing media query for the background, try something like: background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg"); background-position: right 50vw bottom 40vh, left 50vw top 50vh; background-repeat: no-repeat;

    Marked as helpful
  • Naveen Gumaste•10,420
    @NaveenGumaste

    Hello Darrick Fauvel ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    • the color the numbers is very dark then the original design so reduce the opacity a little.

    happy Coding😀

    Marked as helpful

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