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

Overview

Screenshot

Links

• Solution URL: frontendmentor solution
• Live Site URL: Profile Card - GitHub Pages

My process

I Managed to finished this project for 3 hours. I understand the card concept now but I still don't know how the background property works so I need to update this challenge when I learn about background property in CSS.

Built with

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

What I learned

In this challenge I tried to use CSS Variables property and I managed to do that, it makes your code cleaner and I like that.

:root{
    --dark-cyan: hsl(185, 75%, 39%);
    --dark-blue: hsl(229, 23%, 23%);
    --gray-blue: hsl(227, 10%, 46%);
    --dark-gray: hsl(0, 0%, 59%);
}

Continued development

I'm gonna update this pages when I learn about background property in CSS.

Useful resources

• CSS Variables - w3schools - This helped me for understanding CSS Variables and it's pretty straightforward.

Author

• Website - Personal
• Frontend Mentor - @aroyan
• Twitter - @aroyanbaktis

Acknowledgments

Thanks to w3schools your pages is big help to me.