Skip to content
OverviewSolutions
6
Comments
2
Brilliant Smart
@brilliant-smart

All comments

  • YanlDev•170
    @YanlDevSubmitted over 1 year ago

    Hello everyone 🤓💻, I'm Yaniv and this is my solution for the challenge #4

    built with :

    1. Grid.
    2. Flex-box.

    Help Me 😰:

    I'm just starting and I broke my head trying to accommodate the backgrounds and I feel that my solution is very rudimentary, I hope someone can help me with that.

    Thanks!💖

    Profile-Card-Component Grid and Flex-box

    2
    Brilliant Smart•50
    @brilliant-smartPosted over 1 year ago

    I use background-image: url(); for both the background images and the area above the profile image. I use values to position the background image. Look at my css below, I use grid too, you can change the values or use %tage to position them well. Hope it will be helpful, regards!

    body { display: grid; grid-auto-flow: row; align-content: center; justify-content: center; height: 100vh; width: 100vw; background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg"); background-color: var(--Dark-cyan); background-position: -17.5rem -31.25rem, 50rem 23.75rem; background-repeat: no-repeat; font-size: 18px; font-family: 'Kumbh Sans', sans-serif; padding: 0.8rem; }

    0
  • Brilliant Smart•50
    @brilliant-smartPosted almost 2 years ago

    I will update the corrections on git.. Btw, how do I give a max-width for columns to stop them from growing at a certain breakpoint say 992px?

    0