Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card component - HTML, CSS, & Vite

P
Darrick Fauvelβ€’ 340

@DarrickFauvel

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

Hanβ€’ 340

@hcxweb

Posted

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

1

P
Darrick Fauvelβ€’ 340

@DarrickFauvel

Posted

@hcxweb Wow! 😲 That is so much simpler, and it works perfectly.

Solution updated!

I knew there was a better way. I'm glad I mentioned my media query struggle.

Thank you so much for responding with a great solution! 😊

0
Naveen Gumasteβ€’ 10,480

@NaveenGumaste

Posted

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

1

P
Darrick Fauvelβ€’ 340

@DarrickFauvel

Posted

@Crazimonk I definitely missed that on both the numbers and profile name.

Solution updated!

Thank you so much! 😊

1

Please log in to post a comment

Log in with GitHub
Discord logo

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