This is a solution to the Clipboard 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 for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Github repo
- Live Site URL: Netlify
- Semantic HTML5 markup
- TailwindCSS
- Flexbox
- Mobile-first workflow
- Webpack & Postcss
CSS filter function is used to change svg color on hover. Read more on alternative approaches below.
/* main.css */
.icon:hover {
filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg) brightness(
101%
) contrast(94%);
}
Extends Tailwind color palette with custom HSL colors.
// tailwind.config.js
extend: {
colors: {
"strong-cyan": 'hsl(171, 66%, 44%)',
"light-blue": 'hsl(233, 100%, 69%)',
"grayish-blue": 'hsl(201, 11%, 66%)',
"dark-grayish-blue": 'hsl(210, 10%, 33%)',
},
...
to be used as inline utility class
<p class="mx-auto max-w-md text-center text-grayish-blue"></p>
<li><a href="#" class="hover:text-strong-cyan">FAQs</a></li>
- PerfectPixel Crome Extension - Creates overlay to match you page w/ design mockup. Useful for optimizing pages for different PPI/Retina screens.
- Change Color of SVG on Hover - There are a lot of different ways to use SVG. Depending on which way, the tactic for recoloring that SVG in different states or conditions — :hover, :active, :focus, class name change, etc. — This guide will help you choose the approach that fits you.
- Frontend Mentor - @eugenekulikou
- LinkedIn - @eugenekulikou