Skip to content
Submitted over 3 years ago

I used Vanilla HTML & Css

Johan Jubin•90
@Johan-Jubin
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

Made my first project in Frontend Mentor, I had 2 problems:

  1. I can't position the background circles in their respective positions.
  2. I can't add a white circle behind the profile picture.

All your valuable feedbacks are always welcome. Please review my code & suggest ways to tackle the problems

Community feedback

  • María Daniela•185
    @mdagudoPosted over 3 years ago

    Hello! You can also add the background images in the css, you just have to add the two images as the background-image of the body, then make sure it won't repeat and finally position them simultaneously with background-position. For the "circle behind the profile picture", you can add border to that picture :) Keep coding!

    1
    Johan Jubin•90
    @Johan-JubinPosted over 3 years ago

    Oh thank you so much for your feedback, I will implement that.

    0
  • Suvankar Pradhan•670
    @suvankarpradhanPosted over 3 years ago

    good job...you can remove two images from your css and use this process.... add two images within your body tag like this<body> <img class="top-img" src="images/bg-pattern-top.svg" alt="img1"> <img class="bottom-img" src="images/bg-pattern-bottom.svg" alt="im2"></body>

    then use css -->

    .top-img, .bottom-img { position: absolute; } .top-img { transform: translate(-30%, -50%); } .bottom-img { transform: translate(70%, 40%); }`

    hope this will work ..

    1
    Johan Jubin•90
    @Johan-JubinPosted over 3 years ago

    Most of the time, I position images that are in the background using CSS, I got confused in this one. But I forgot that I can also add images in HTML and position it with CSS. Thank you for telling me about that trick.

    Thank you so much

    0

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