Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 10 months ago

Responsive four card feature section using BEM syntax and SASS.

bem, sass/scss
Adesh Katiya•590
@adeysh
A solution to the Four card feature section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I created the layout pretty close to the design png and was able to figure out the grid card layout by tinkering with grid-template-areas property. So I would try to be more organized next time with the code as it gets messy real quick.

What challenges did you encounter, and how did you overcome them?
  • The main challenge was to figure out the card layout which I had to search for on google. After you figure it out you realize that It was not that hard actually.
  • I also encountered problems in making the layout reponsive according to the container that my main layout was in.
What specific areas of your project would you like help with?
  • I think the html markup is pretty accurate but the styles that I have used may be overly complicated according to the bem syntax that I have used.
  • If you see some code that is unnecessary complex, please give me your feedback as to why you thought about doing that and I will surely reflect upon that. Thnx.
Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Adesh Katiya's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License