Solution : Live Site URL
Solution submitted at Frontend Mentor - Submission link
This is a solution to the 3-column preview card component challenge on Frontend Mentor.
Your challenge is to build out this 3-column preview card component and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- HTML
- CSS
- CSS Grid
- CSS Flexbox
This challenge had a simple layout to follow. It required very little CSS too for the layout, most of the CSS code is towards the design of typography and design of the cards itself.
So I decided to have a little fun with it, I stuck to the design specs provided by the challenge on mobile and desktop. But between 600px and 900px I used grid to make a different design choice for provided cards by adding some hover effects. I experimented with tabindex for each card (terrible idea, MDN & accessibility doesn't approve), I also added hover state for each card div (another accessibility concern) and with the help of z-index made each card/div expand their grid values on hover. This is just to experiment some CSS properties and try different possibilities of overlapping grid items. Most of the experiment parameters I set were a success, only thing I wasn't happy about was the transition animation effects I wanted to add to the card's hover, the effects weren't very pleasant because the padding would make the text dance around differently in each card on hover.
Learn more about animation and transition to make it look consistent and linear across similar elements.
- Final challenge screenshot(s) (desktop and mobile)