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

First project - Profile card - HTML & CSS

P
Nicholasβ€’ 205

@fytrw

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


Hi! πŸ‘‹ It's my first project here and one of my first projects at all. I didn't know how to correctly display svgs in this project. I tried as a background-image but it didn't work so I pasted svg tag. Also, I had difficulty with placing svgs with top, left, right, and bottom and I used media for mobile. It'll be great to hear some feedback from you.

Thanks in advance! πŸ˜€

Community feedback

Ana Luz Cervantesβ€’ 1,705

@analuzcervantes

Posted

Hi! πŸ‘‹

Welcome to the frontendmentor community! πŸŽ‰

Why don't you try to put your svg in the body in your style file, it would be something like this: background-image: url(/images/bg-pattern-top), url(images/bg-pattern-bott);

For the position you can use vw and vh background-position: right 50vw bottom 50vh, left 50vw top 50vh; Here I leave you more information about vw and vh

Be well! πŸ’»πŸ‘Ύ

2

P
Nicholasβ€’ 205

@fytrw

Posted

Thanks for your reply! so I changed svgs in the index.html to background-image in the body and it works a lot better. Before this change I was using vw and vh but for placing svg tags and it didn't work that good as now.

1
P
ApplePieGiraffeβ€’ 30,565

@ApplePieGiraffe

Posted

@fytrw

Hey, Mikolaj! πŸ‘‹

Just wanted to say congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Overall, your solution looks great and the background images are now rather well-placed! πŸ‘

Keep it up! πŸ‘

Keep coding (and happy coding, 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