dieudonneallognon/profile-card-component

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

• Frontend Mentor - Profile card component solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
  • Author

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: https://github.com/dieudonneallognon/profile-card-component
• Live Site URL: https://dieudonneallognon.github.io/profile-card-component/

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• Mobile-first workflow
• Less

What I learned

This project helped me to understand more about background image positioning properties.

html {

  &::before,
  &::after {
      position: absolute;
      content: "";

      width: inherit;
      height: inherit;
      max-width: inherit;
      min-width: inherit;
      background-repeat: no-repeat;
      z-index: -1;
  }

  &::before {
      background-image: url("./images/bg-pattern-top.svg");
      background-position-y: -28.7rem;
      background-position-x: -45.2rem;
  }

  &::after {
      background-image: url("./images/bg-pattern-bottom.svg");
      top: 0;
      background-position-x: 8.7rem;
      background-position-y: 21rem;
  }

  ...
}

@media (min-width: 376px) {
    html {
        &::before {
            background-position-y: -28rem;
            background-position-x: -16rem;
        }

        &::after {
            top: 0;
            background-position-x: 38.5rem;
            background-position-y: 20.8rem;
        }
    }
}

Author

• Github - dieudonneallognon
• LinkedIn - Dieudonné Allognon
• Frontend Mentor - @dieudonneallognon
• Twitter - @JieDevM