Solution to a Frontend Mentor challenge: creating a similar webpage as the design preview provided

  • By Anosha Ahmed
  • Last update: Jan 13, 2022
  • Comments: 0

Frontend Mentor - Profile card component solution

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

Table of contents


The challenge



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