Skip to content
Submitted over 2 years ago

Profile Card Component Using HTML, CSS

Fitrifit Yanto•80
@fitrifityanto
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

I'm having some difficulty in placing two background images :confused: . I'm trying to get closer to the design. I doubt if my code is correct. because the background image changes when the screen size is different :v: . maybe some feedback for me

Community feedback

  • Amanpreet Singh•550
    @AmanpreetSingh1995Posted over 2 years ago

    Hi, Good Job on completing the challenge. I have listed a few things I hope will be helpful in coding for you.

    1. in your body styles , background color and background images can be written in background only (like this background: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"), var(--color-dark-cyan);).

    2. The issue regarding the images change in screen size is because you have added media query on the body you don't have to do that. Instead of 100%, you can reduce the value to 50% or 40%. Just define in the main body where you are putting images.

    3. there is no need to define no-repeat two times in background-repeat.

    I hope these tips will be useful for you. Keep Coding ! :)

    Marked as helpful
    1
    Fitrifit Yanto•80
    @fitrifityantoPosted over 2 years ago

    @AmanpreetSingh1995 Hi, thankyou so much. I will fix it according to your suggestion

    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