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

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Live Site URL live site

My process

Built with

• Flexbox
• backgroun-images
• divs and spans
• customize fonts

What I learned

.card-main-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

I learnt to align items vertically and horizontally using flexbox properties justify-contente and align-items.

Continued development

• background-images -position propertie -flexbox -grid -responsive images

Useful resources

• Example resource 1 - This helped me to clear my understanding in a lot of css properties and how they behave.
• Example resource 2 - This helped to understand concepts that i was unfamiliar with before.

Author

• Frontend Mentor - @maxlopzb
• Twitter - @maxlopzb17