This is a solution to the Typemaster pre-launch 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: Repository
- Live Site: Live Site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- SCSS
- Mobile-first workflow
- BEM methodology
I learned the CSS property mix-blend-mode, useful to make the orange effect on the image, combined with some opacity.
.phone-keyboard {
width: 8rem;
mix-blend-mode: multiply;
opacity: 0.75;
}
- MDN web docs - I've just searched on google "How to blend colors in css" and i found the usual but useful resources!