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
• Author

Overview

The challenge

• Build out the project to the designs provided

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

body {
  background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
  background-repeat: no-repeat, no-repeat;
  background-position: right 51vw bottom 40vh, left 49vw top 52vh;
}

.profile-image {
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%); <!-- !important property -->
}

Author

• Frontend Mentor - @shamizen