Skip to content
Submitted over 1 year ago

Profile-card with custom CSS properties

newtothis90•240
@newtothis90
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

If anyone could help me with the background images.

It seems that they are somewhat responsive unless I am missing something. I tried researching on how to get the background images in place for both the mobile and desktop with no success. If anybody has any tips on the css/html for that it would be greatly appreciated.

I used custom CSS properties throughout and instead of any semantic HTML, I just went ahead and used DIVS. I thought about using utility classes, but just thought the page was extremely simple to begin with.

Any other comments would be greatly appreciated!

Thank in advance!

Community feedback

  • Tushar Biswas•4,080
    @itushPosted over 1 year ago

    Congratulations on completing the challenge! 🎉

    It is important to correctly understand CSS Position property to render HTML elements as per the requirement. Please note:

    • By default, all HTML elements are static (non-positioned elements).

    • By using top, right, bottom, left we can control the final location of an HTML element.

    • Top, right, bottom, left, z-index don’t have any effect on Statically positioned / non-positioned elements.

    • So, basically, we first need to convert a non-positioned element to a positioned element using (relative/fixed/absolute/sticky) then only (top/right/bottom/left/z-index) etc. will work for the targeted element.

    You may checkout 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first Workflow etc. in a simple way.

    I hope this helps.

    Keep at it...💻 Happy hacking!

    Marked as helpful
    0
    newtothis90•240
    @newtothis90Posted over 1 year ago

    @itush

    Great info! I'll definitely check out your discussion on those topics!

    1
  • hitmorecode•6,680
    @hitmorecodePosted over 1 year ago

    It looks good, well done. For the background just add both images and then use position: absolute or position: relative and place them in position for mobile and for desktop. See if you can manage to do it, other wise let me know

    Marked as helpful
    0
    newtothis90•240
    @newtothis90Posted over 1 year ago

    @hitmorecode

    Ahhh. So it's not "exactly responsive", but uses media queries to place them in one position for mobile and another position for desktop.

    I was trying to have them dynamically shift position as the screen size grew/shrank.

    Thanks 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