aroyan / profile-card

Challenge from frontendementor.io to build profile card display using HTML and CSS

Home Page:https://aroyan.github.io/profile-card/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

Screenshot

Links

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

Author

Acknowledgments

Thanks to w3schools your pages is big help to me.

About

Challenge from frontendementor.io to build profile card display using HTML and CSS

https://aroyan.github.io/profile-card/


Languages

Language:CSS 58.6%Language:HTML 41.4%