Skip to content
Submitted over 3 years ago

First project - Profile card - HTML & CSS

Nicholas•235
@fytrw
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

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
    @analuzcervantesPosted over 3 years ago

    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
    Nicholas•235
    @fytrwPosted over 3 years ago

    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
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @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

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