Skip to content
Submitted about 4 years ago

I used Vanilla HTML & Css

Johan Jubin•90
@Johan-Jubin
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • María Daniela•185
    @mdagudo

    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!

  • Suvankar Pradhan•670
    @suvankarpradhan

    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 ..

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