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

Overview

The challenge

• Build out the project to the designs provided
  • Desktop Design
  • Mobile Design

Screenshot

• Desktop Preview of my solution
• Mobile Preview of my solution

Links

• Solution URL: FrontEnd Mentor: My Solution
• Live Site URL: GitHub Page: Profile Card Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

It took me some trial and error to achieve the right results when it came to:

• the background; but I learned more about the background-position property

  body {
      background-color: var(--cyan);
      background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
      background-repeat: no-repeat;
      background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  }

• the header of the profile card; but using the following properties worked:

  main {
      background-image: url(images/bg-pattern-card.svg);
      background-repeat: no-repeat;
      background-position: contain;
  }

• shadow of the profile card

  main {
      box-shadow: 0px 40px 100px hsla(229, 23%, 23%, 0.3);
  }

Continued development

I want to work on

• Fluidity
• Responsiveness
• Mobile-first Workflow

Author

• Website - Anosha Ahmed - Not up at the moment, but will be soon.
• Frontend Mentor - @anoshaahmed
• Twitter - @anosha1ahmed

Github