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 - Grid Layout Practice

@brianlfarmerllc

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


I had two goals in mind while doing this project.

1 - Create the layout only using display grid. I've gotten in the habit on relying 95% on flexbox and I need to practice using grid more.

2 - Really work on positioning background images in a more precise manner. I found that I could place and keep the background images in the correct position using edge offset values in the background position where before I was just trying to use percentage values with no edge reference. This worked so much better.

Community feedback

P
Patrick 14,325

@palgramming

Posted

Nice Personalization of the project

see if you can center yourself in the circle cause with you off to the side it makes the circle look off center even thought the circle is centered

0

@brianlfarmerllc

Posted

@palgramming good suggestion, but I might have to find a different photo. My wife wanted to be cut out.

0
P
Patrick 14,325

@palgramming

Posted

@brianlfarmerllc no problem wives are always correct. In looking at your code in this case if you make a DIV to be your main circle then you can change the size and position of the photo if you set it as a background image... it might be fun to play with it just for the experience doing the same thing two different ways

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