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: https://github.com/filecc/FM-clipboard-landing-page
- Live Site URL: https://filecc.github.io/FM-clipboard-landing-page/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile and Desktop side by side workflow
I had some difficult trying positioning the image in the first section, so I decided to take a look at it later on. I worked side by side with Desktop an Mobile preview, so I was targetting everything before commit, to make sure that the elements were good enouught. Love how I wrote +200 line of code and just 90 lines for the @media. Sure, it can be better.
As always the best help is this:
.social a:hover{
filter: invert(60%) sepia(74%) saturate(437%) hue-rotate(121deg) brightness(88%) contrast(85%);
}
- CSS filter for SVG - Always so much love.