All comments

• 

  Nick Williams•320

  @nickfwilliamsSubmitted almost 3 years ago

  Despite an easy start with the mobile layout, when it came to swapping out the mobile image for the desktop image, I found this quite tricky. In the end I used an empty div and the background-image css property to swap this around. One bonus this approach had was that it allowed me to add the purple overlay (via background-blend-mode) without the need for an additional div over the top. In the end I sized the empty img div using fixed pixel measurements - however, this doesn't feel responsive or eloquent, so I'd be interested to hear how else it might have been done.

  Thanks!

  

  Mobile first stats preview card using flexbox

  2

  50
  

  Mayank Agarwal•70

  @mayank-2323Posted almost 3 years ago

  Hey Nick! Great design! I recently submitted my solution as well!

  As for the background overlay - you might want to checkout background tag - where you can use linear-gradient attribute first and then url attribute. You can Google it - or you can go through my version of the challenge here - https://github.com/mayank-2323/Stats-preview-card

  Marked as helpful

  0