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 with Sass

Flash 80

@flash54

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


Was confused with the background circles but i did find a solution which helped. https://github.com/Astrobean/frontendmentor-2 . Thanks @Astrobean. I don't know if its the correct way to use background position but it worked for now. If yall have any other ways, drop them in the comments please. Thank you. I'm new to this.

Community feedback

@Astrobean

Posted

Never imagined that my code would help someone like this, that's actually really cool, so thanks for that awesome moment! 🙏

The bad news is: I did not do it right, but I did learn that understanding how CSS position works is equally as important as layout options like flexbox and grid! And, just like flexbox and grid, it can be tricky to wrap your head around it.

I think more practice with CSS position will help you for sure.

1
argel omnes 1,800

@argelomnes

Posted

Hey, You can also use absolute positioning or even Grid. The latter will be a lot of work. But for this challenge, I'd prefer Astrobean's.

1

Account Deleted

Looks ok, but I think the card the size is small relative to the screen size on desktop.

Keep coding👍.

1

Flash 80

@flash54

Posted

@thulanigamtee yeah i realised that after it being compared side to side. ill update the solution later. thank you

0

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