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
- 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.