This is a solution to the Equalizer 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
- Solution URL: GitHub
- Live Site URL: Equalizer Landing Page on Vercel
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
When an svg is embedded in an <img>
-tag, you can not change color by adjusting the fill
but you need to use filter
.
I'm also feeling a lot more comfortable using positioning since last exercise.
- Utopia - This helped me making the typography fluid to fix the issue with the long word 'extraordinary' on smartphone-view. This way it was easy to use a
clamp
-value. I used it on bothh1
andh2
. - The Many Ways to Change an SVG Fill on Hover
- CSS Filter Generator - To change the color on the active-states.
- Website - www.katriens.be
- Frontend Mentor - @graficdoctor
- Twitter - @graficdoctor