@Y-ashbhatt
Latest solutions
Responsive Four Card - Using Flexbox
#bemSubmitted 11 months agoI had to hack the orange card with a margin and it's still not perfect. Any tips appreciated!
Product Preview Card
#bemSubmitted 11 months agoUnderstanding the min width breakpoint in vh / vw instead of pixels
Blog Preview Card using Flexbox
#bemSubmitted 11 months agoI feel like I over complicated it a bit, so any feedback to simplify it would be appreciated
Latest comments
- @achallett
Incredible!
Looking at the css, I might recommend against the -- on class names:
E.g. "testimonial --daniel" -> "testimonial testimonial--daniel"
- @Bisshy@achallett
Looks good - have a look at linear gradients for the top section of the card:
e.g. background: linear-gradient(0deg, var(--color-secondary-light-gray) 98.5%, var(--color-primary-cyan) 3%);
- @iamitshaw-007@achallett
Looks good; but here are a few pointers;
- Design for mobile first, then add the adaptation for desktop - this makes it more performant.
- Maybe use a flex box in the card, so the image is 1 child item, and the card content is the other - it's easier to set it to 50% then.
- The desktop image currently overflows on your site, if you make the image 50% as per point above, and lock the aspect ratio it should not overflow
Marked as helpful - @ziedlahbib@achallett
Look to understand margins and paddings and how they interact with each other.
Design is looking great, but just need to sort out.
Link to code doesn't work.
- @iamitshaw-007@achallett
Great - just need to update the text color and adjust the font size!
Marked as helpful - @iamitshaw-007@achallett
Great work - looks pretty close.
Worth just looking at the font-size, and the hover should render a pointer
Marked as helpful
