Frontend Mentor - Profile Card Component

Welcome! 👋

This is a solution to the Profile Card Component challenge on Frontend Mentor

Links

• Solution URL: Frontend Mentor
• Github Pages: Profile Card Component

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• SVG Images, icons

What I learned

.main {
    background-image: url(images/bg-pattern-top.svg), url('images/bg-pattern-bottom.svg');
    background-position: -90% -500px, 170% 400px;
    background-repeat: no-repeat;
    background-color: var(--dark-cyan);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Author

• Medium - kanyshai_osmonova
• Frontend Mentor - @kanyshaiosmonova
• Twitter - @KaniOsmonova

The challenge

I tried to build out this profile card component and get it looking as close to the design as possible.

Got feedback for me?

I love receiving feedback! I'm always looking to improve my coding skills. So if you have anything you'd like to mention, please email kanyshai.osmonova.kk@gmail.com