Submitted over 3 years ago

Profile card created with only HTML and CSS

Afolabi Oseni• 105

@GoldenAceTech

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello there! This is actually my first project on Frontend Mentor. I just started my Web Development journey so I will appreciate your feedbacks. Let me know what you think and criticize if you have to. Thank you for taking your time to check, have a good day!

Community feedback

Jane• 1,040

@janegca

Posted over 3 years ago

That's a really good first project Afolabi. Your code for the background images is the most succinct I've seen yet, so naturally I have stolen (ahem, borrowed) it 😄. Well done!

Afolabi Oseni• 105

@GoldenAceTech

Posted over 3 years ago

@janegca lol go ahead then. Thank you for taking time to check it out, I appreciate it.

Jimmy Sweeney• 350

@sweenejp

Posted over 3 years ago

background: bottom 40vh right 50vw url('images/bg-pattern-top.svg') no-repeat, 
    top 50vh left 50vw url('images/bg-pattern-bottom.svg') no-repeat,

Nice. I was fumbling around with the background images for so long. Using vh and vw units seems to do the trick. Shamelessly stole your solution to the background as well :)

Jimmy Sweeney• 350

@sweenejp

Posted over 3 years ago

One small detail is that I think the card has a really subtle shadow effect. Other than that, looks great!

I like how you used grid to set up the layout of the card. Works well.

Afolabi Oseni• 105

@GoldenAceTech

Posted over 3 years ago

@sweenejp Thank you. You got great eyes, I need to start paying more attention to details.

Fauzan Reza• 130

@codebyfauzan

Posted over 3 years ago

Great work Afolabi. I think your HTML structure is easier to read and your CSS is more efficient than mine. Also, you should check the font color in the style-guide.md so your solution can be looking as close to the design. I learn a few things from your solution, thank you again. And can I approach you in slack? so we can learn together if you interest please kindly reply to this feedback

Afolabi Oseni• 105

@GoldenAceTech

Posted over 3 years ago

@codebyfauzan Thank you for pointing that out. I just fixed it. I am glad I was able to help. And sure thing, you can approach me on slack and am also available on twitter. Have a nice day!

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted over 3 years ago

Hi, Afolabi Oseni! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Well done on this one! 👍

Everything looks great and as others have said, the background images are placed quite nicely on this page (something that can be quite tricky to get right)! 👏

Keep coding (and happy coding, too)! 😁

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