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

Manik Maityβ€’ 220

@ManikMaity

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 have learned lot about position and background-image but I could not make the bg pattern show. Even I watched videos of this challenge but that did not work also i think its because of my laptop or my browser

Community feedback

razalalkhanβ€’ 220

@razalalkhan

Posted

Dear,

please use the following in your CSS file to set the background image on body tag.

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

there are two images one at the top and one at the bottom. use background position according to your screen size and you dont have to use necessarily vw or vh units.

Second:

when you have to put anything on the center of the screen use the following method. I have also learned from the valueable member from this platform. e.g.

body{ min-height:100vh; display:grid; place-items:center; or use margin: 0 auto; }

hope it helps. thanks

Marked as helpful

1

Manik Maityβ€’ 220

@ManikMaity

Posted

@razalalkhan Thank you so... much. I stuck on that for so longπŸ‘

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