Skip to content
OverviewSolutions
39
Comments
4
Bekar Shekiladze
@beqarion

All comments

  • Bekar Shekiladze•550
    @beqarion

    That one is pixel perfect

  • Bekar Shekiladze•550
    @beqarion

    That purple overlay on picture to the right, I think It must have the 'mix-blend-mode' applied. If not mistaken, It had the same effect in figma file too. otherwise, good job. Good luck !

  • Bekar Shekiladze•550
    @beqarion

    Feedback is Welcome!

  • Bekar Shekiladze•550
    @beqarion

    Thanks! buttons are little bit fat though😆

    Well I used grid 3 places there.

    • main element

    Just for centering. I could use flexbox but I feel comfortable with grid and did so. Allmost same amount of code would be required for flex too.

    • cards container

    When I have to change elements orientation I try to always use grid, dont like flexbox flex-direction, because It feels littlebit complex for me if it needs further adjustments

    • In Card itself on widescreen

    Here I had biggest reason using grid for controlling height of elements in card: Because the card has fixed height (min-height: 500px), if elements inside it had auto height, most likely there would be leftover white space at the end of the card component. In Figma design, card at the bottom doesn't have empty space. the only element in there has opportunity to grow is the card-text element. So I set grid-template-rows: auto auto 1fr auto .

    Also, at this time I'm more used to grid than flex so I don't really remember more complex flex commands like flex-grow and etc. I use flex only for centering or layouts like space-between.