Mobile-first almost pixel-perfect solution with simple CSS animations

Community feedback

• 

  idukpaye alex•725

  @Esesosa-maxPosted over 2 years ago

  1. ✅ Good Looking Design(both mobile , desktop) 5/5
  2. ✅ Perfectly Responsive 5/5
  3. ✅ Good Application of Tools(BEM,SASS/SCSS) 5/5
  4. ✅ Readablity 3.5/5
  5. 🥈 Pixel Perfect 4.6/5
  6. 💡 Personal Tip: You do not have to two images just change the image with CSS when it in mobile view e.g content:url(path/to/image). In Mobile give the <br > a display:none

  Marked as helpful

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @Esesosa-max Thanks for your feedback :) Next time I'll definitely use content. I didn't even know that it is possible to use it like that. Some things regarding readability could have been done better, but I'm short on time, so yeah. I will improve this solution in a few days.

  0

  

  John Mirage•1,590

  @john-miragePosted over 2 years ago

  @GrzywN You can also use this:

  <picture>
    <source srcset="path/to/desktop.png" media="(min-width: 992px)">
    <img src="path/to/mobile.png" alt="description">
  </picture>
  

  1

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @ChaosDynamix Yeah, I read article about picture tag after I submitted, but I prefer to use classes and media queries inside css than using media queries in HTML. Thanks tho

  0
• 

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  Hello my dear friend ♥ you did great on this challenge and only little problem is about accessibility issue with keyboard in Learn More button. I wasn't able to catch it with tab key or if I did it it wasn't noticeable

  • edit: can you add useful resource which you always use for clean code, work with animation, sass, css, .... ?

  1

  ---

  

  Karol Binkowski•1,640

  @GrzywNPosted over 2 years ago

  @CyrusKabir Alright, added to todo list haha

  1

  

  CyrusKabir•1,885

  @CyrusKabirPosted over 2 years ago

  @GrzywN 😁

  0