/frontend-mentor-profile-card-component

Solution to Frontend Mentor challenge to recreate a profile card component

Primary LanguageCSS

Frontend Mentor - Profile card component solution

This is a solution to the Profile card component challenge on Frontend Mentor.

Table of contents

Overview

The challenge was to build a profile card component and get the design to look as close as possible to the provided design images.

Screenshots

Desktop profile card screenshot

Links

My process

  • Created semantic HTML first
  • Created CSS selectors to:
    • create custom variables to contain the various colours, font sizes font weights used in the design
    • used a CSS reset
    • layout the design using Flexbox
    • style the various elements
    • added in :focus styling for accessibility purposes

Built with

  • Semantic HTML markup
  • CSS custom properties
  • Flexbox
  • Google Font

What I learned

I had difficulties in aligning the svg images that are used in the background behind the profile card. I ended up looking at another user's solution in order to understand how they had done it using background-position.

background-position: right 50vw bottom 40vh, top 50vh left 45vw;

Continued development

Gain extra practice in laying out more complicated background images.

Useful resources

Author