Frontend Mentor - Profile card component solution
This is a solution to the Profile card component challenge on Frontend Mentor.
Table of contents
Overview
The challenge
- Build out the project to the designs provided
Screenshot
Links
- Solution URL: FrontEnd Mentor: My Solution
- Live Site URL: GitHub Page: Profile Card Component
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
What I learned
It took me some trial and error to achieve the right results when it came to:
-
the background; but I learned more about the background-position property
body { background-color: var(--cyan); background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg); background-repeat: no-repeat; background-position: right 52vw bottom 35vh, left 48vw top 52vh; }
-
the header of the profile card; but using the following properties worked:
main { background-image: url(images/bg-pattern-card.svg); background-repeat: no-repeat; background-position: contain; }
-
shadow of the profile card
main { box-shadow: 0px 40px 100px hsla(229, 23%, 23%, 0.3); }
Continued development
I want to work on
- Fluidity
- Responsiveness
- Mobile-first Workflow
Author
- Website - Anosha Ahmed - Not up at the moment, but will be soon.
- Frontend Mentor - @anoshaahmed
- Twitter - @anosha1ahmed