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

Responsive profile card using css flexbox

Priyanka 150

@priyankalad

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


  1. The most difficult part for me was to adjust two background images "bg-pattern-bottom.svg" and "bg-pattern-top.svg". Initially I tried with "position:absolute", but in the final version, I used "background-position" property with unit percentage. I am still not satisfied with this implementation. I would like to know more sophisticated way to implement this feature.

  2. Also the designs are created for below widths: Mobile: 375px Desktop: 1440px So, I have created one media query for min-width:1440px . Want to know if it's a correct approach

Community feedback

Tereza 605

@sirriah

Posted

Hello,

I saw your code, and I think, that it is pretty cool. I used similar solution for background circles like you.

I look forward do your next design. Happy coding!

0

Priyanka 150

@priyankalad

Posted

@sirriah Thank you so much for your feedback! :)

0
Priyanka 150

@priyankalad

Posted

@sirriah I refer the code of the user @analuzcervantes. She has used below background position style to adjust those 2 images and I found it very useful

body{ //other styles... background-position: right 45vw bottom 45vh, left 45vw top 45vh; }

I hope, you find it useful too :)

1

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