This is a solution to the Skilled e-learning landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
As for the naming of my selectors in CSS, I took inspiration from Cube CSS. It's the first time I was writing following these rules as it is closer to how I generally write my CSS.
I'm struggling placing the images outside the page-flow. I fiddled with grid, but it seems there's some blank space on these images that bother me while placing them. Which leads me to believe there's a different solution. But I'm lost.
How to place images outside the page-flow.
- CUBE CSS - CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency. It’s designed to work with the medium that you’re working in.
- Website - Katrien S.
- Frontend Mentor - @graficdoctor