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

Overview

The challenge

• Build out the project to the designs provided

Links

• Solution URL: Frontend Mentor
• Live Site URL: GitHub Page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I learned how to place several images in the background property.

body {
    background: url(images/bg-pattern-top.svg) no-repeat scroll -50rem -37rem, url(images/bg-pattern-bottom.svg) no-repeat scroll 10rem 12rem;
    background-color: hsl(185, 75%, 39%);
}
@media (min-width: 37.5em) {
    body {
        background: url(images/bg-pattern-top.svg) no-repeat scroll -17rem -35rem, url(images/bg-pattern-bottom.svg) no-repeat scroll 44rem 20rem;
        background-color: hsl(185, 75%, 39%);
    }
}

Continued development

• Be more comfortable combining several values when using super properties such as background.

Useful resources

• background - MDN Web Docs - Helped to understand how to combine various values in the background property.
• background-position - MDN Web Docs - Helped with the different syntaxes of the background-position property.

Author

• Website - Ax-coding
• Frontend Mentor - @Ax-cd
• Instagram - @ax.coding