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 made by Flex-Box

HelalAboodβ€’ 200

@HelalAbood

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


Good day, Frontend Mentor coding community and friends!

This is my solution for the profile-card-component

Feel free to leave any feedback and help me to improve my solution (or) make the code clean!

πŸ‘¨β€πŸ”¬ I'll be happy for your Follow on GitHub too:)

Waiting to hear from you any feedback and advice!

Have a great day!

Community feedback

P
visualdennisβ€’ 8,375

@visualdenniss

Posted

Hello again,

Its look great! Regarding background, i'd suggest you an easier way that will ensure even more consistency in terms of responsiveness: simply remove that div with the img, instead you can have two images with background, e.g.:

Add 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;

Hope you find this feedback helpful!

Marked as helpful

0

HelalAboodβ€’ 200

@HelalAbood

Posted

@visualdenniss I've tried first to do it with psudo elements, but i felt the long way. so I started with property background-image but it wont worked cuz I used the same property 2 times for left and for right image. I didn't know that u can use 2 url at the same background-image property. Thanks for making it clear. I can see now where the issue was, and its fixed!

Thanks, <3

0
P
visualdennisβ€’ 8,375

@visualdenniss

Posted

@HelalAbood Yes, with this method you can actually add as many url() as you want and position them :) Glad it was useful!

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