This is a solution to the Huddle landing page with alternating feature blocks challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: FrontEnd Mentor: My Solution
- Live Site URL: GitHub Page: Huddle landing page with alternating feature blocks
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Desktop-first workflow
- Keyframes
- Focus-visibility pseudoelement
- Animation-fill-mode property
- For this project, I used desktop-first approach after a long time of not using it. And it really helped me understand, once and for all, why mobile-first is the best approach. I spent a lot of time working on media queries (smh). So, in the future, I will always design mobile-first.
- Website - Anosha Ahmed
- Frontend Mentor - @anoshaahmed
- LinkedIn - Anosha Ahmed
- Twitter - @anosha1ahmed
@vanzasetia told me about the focus-visible
pseudoelement.