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.

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

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.