Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

profile-card-component [html+css+flexbox]

@medwasleti2

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I just larned the basics of html and css ^^. Please feel free to give a feedback to help me improve.

Thanks😍😍

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Good work there!

I'd suggest not using fixed width for the body such as 1440px, even though your page might look good on a certain screen sizes, it won't adapt for other devices and screensizes. You can simply remove that to have the card item always centered.

Also instead of using position absolute for images, you can simply display them by adding these to the body itself:

background: url(images/bg-pattern-top.svg),url(images/bg-pattern-bottom.svg); background-color: #19a2ae; background-position: right 52vw bottom 35vh,left 48vw top 52vh; background-repeat: no-repeat,no-repeat;

and simply remove the ones with <img/>.

Hope you find this feedback helpful!

Marked as helpful

0

@medwasleti2

Posted

@visualdenniss thank you very much, you helped me a lot ^^.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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