/frontend_mentor-profile-card-component-main

Primary LanguageCSS

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

Overview

The challenge

  • Build out the project to the designs provided

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • Desktop-first workflow

What I learned

I learned how to position an absolute element in the middle of its parent. I took me a while to figure it out but in the end am happy I tackled this challenge

.profile__info {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

Author