Frontend Mentor - Profile card component solution

This is a solution to the Profile card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • What I learned
  • Continued development

Overview

The challenge

• Build out the project to the designs provided

My process

Built with

• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

I've learned how to put one div behind another div in a container. I've set the conatainer's position to relative and content's position to absolute. This way the background stayed behind the content.

Continued development

I must work on the ability to center multiple elements. I didn't really know how to approach the bottom part of design so that likes would be in the center and both photos and followers will be centered neatly in the leftover space.

As of now the space between followers and likes is bigger than the space between likes and photos.