Submitted almost 3 years ago

Profile card component using html and css

Zeena• 175

@kushyzee

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This looked like a simple challenge at first, but it was hell trying to figure out how to properly position the background-image. Feedbacks and tips on how i could do better and improve are highly welcome

Community feedback

Cemre• 95

@cemsjam

Posted almost 3 years ago

Great work! A couple of things i can point out that you probably forgot to add colors to your stats and name and also in your profile stats div followers,likes,photos other than these city name has a lower font-size and adding letter-spacing would be way to go!

i also completed this challenge today ,man these bg images takes it out of you dont they haha! i learned a few tricks from you keep it going brother!

Marked as helpful

Zeena• 175

@kushyzee

Posted almost 3 years ago

@cemsjam Thank you very much for your feedback, i totally forgot about those colors and i was wondering why the color was looking darker in the design comparison. I have fixed it, same with the font-size and letter-spacing as well.

Mohammad• 0

@Front-end-p

Posted almost 3 years ago

How do i change the image file from .zip to .jpg ?

Zeena• 175

@kushyzee

Posted almost 3 years ago

@Front-end-p The profile image is in jpg format while the background is in SVG format. Extract the files with a software like winrar

Mohammad• 0

@Front-end-p

Posted almost 3 years ago

Hi, im new to frontendmentor. your project is amazing, and i want to clone this too to test my skills. But i dont know how to download the images and when i do it it shows it as .zip or the file is not displayed because it is either binary or uses an unsupported encoding. Please help me if you can, and reply back.

Zeena• 175

@kushyzee

Posted almost 3 years ago

@Front-end-p If you downloaded the project file from GitHub, then just go ahead and extract it. There are 3 SVG files in there and a single jpg file

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord