Frontend Challenge #4, Profile card component

This is a brief description of the forth frontend project I've completed from Frontend Mentors, Profile Card component. Frontend Mentors is a online platform that provide front-end challenges that include professional web designs. You can play with the solution here.

Step 1

The first objective is to get a general idea of the layout situation in mobile view and figure out what I don't know how to do. I start by styling the body HTML tag to center the content. Then create a container with the textual content (no styling) and images.

Step 2

1. From the offset, the biggest challenge would be getting the image to float on top of the line and be screen size responsive. My solution was to give the parent container a relative position style. The child container with the image received the absolute position and a specific top alignment number. This had the desired affect of floating the image on top of the line. The image was center with flexbox in the parent container.

Final Outcome

What I learned

1. That a mixture of position absolute and relative to a parent and child elements will align elements on the web page outside of the normal flow.
2. To use CSS variables for global styles

Resources used

1. Quick recap about CSS Variables

Thank you for reading!

Thank you for reading my blog. Feel free to connect with me on Twitter or LinkedIn.

You can find the completed code here