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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: github.com/partum/profile-card-component-main
• Live Site URL: juliaarrington.com/portfolio/profile-card/index.html

My process

Built with

• CSS custom properties
• Flexbox

What I learned

<p style="font-size: 12px">London</p>

I wanted to add a small style rule to one component, so instead of figuring out what selector should be use specificaly I just used inline CSS.

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

This snippet is important to center items both horizontaly and verticaly.

Continued development

I think the most obvious improvement I need to make is with positioning background images. I know they look off, but I don't know how to make them perfect. I also don't know how to position them so they look right in the mobile view. Now that I type this I realize the answer is media quires.
The other thing I want to improve is my positioning skills. I think my work /looks/ right but I'm not sure I went about it in the right way.

Author

• Website - Julia Arrington
• Frontend Mentor - @partum