Frontend Mentor - Clipboard landing page solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

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

Screenshot

Links

• Solution URL: https://github.com/gchristofferson/clipboard-landing-page
• Live Site URL: https://gchristofferson.github.io/clipboard-landing-page/

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow
• BEM methodology

What I learned

One of my major learnings in this project was how to change the color of an .svg image on hover using CSS filters. What I learned was that in order to change the color, first I needed to convert a hex color code to a CSS filter. This is not something someone can easily do without the help of a tool. I used Barret Sonntag's CSS filter generator. I highly recommend this tool if you need to do something like this.

To get this to work in your projects, first add the SVG image using either using an <img> tag or like I did, using CSS background image. Here's the div I added the .svg image as a background to:

<div class="social__icon social__icon--facebook"></div>

Here is the CSS to where I added the background svg image:

.social__icon--facebook {
    background-image: url("../images/icon-facebook.svg");
}

Out of the box, this .svg is black, which is perfect for this design. However, on hover, I needed to change the color to the cyan color. This is where the css filter came to the rescue:

.social__icon:hover,
.social__icon:focus {
  color: var(--strong-cyan);
  filter: invert(57%)
  sepia(89%)
  saturate(360%)
  hue-rotate(121deg)
  brightness(90%)
  contrast(89%);
}

Continued development

Going forward I will continue using the CSS filters technique mentioned above to change the color of .svg images. I also want to deepen my knowledge in general in the use of svg's and CSS filters because there is so much more that can be done with them.

Useful resources

• stackoverflow: How to change the color of an svg element? - This post is where I learned how to use CSS filters to change the color of svg images.
• MDN - SVG filter - This article goes more into depth in explaining all the filter functions used in this technique.

Author

• Frontend Mentor - @gchristofferson
• Twitter - @GreggChristoff2

Acknowledgments

I want to give a shout-out to Barret Sonntag. I wouldn't have been able to complete this project without his awesome CSS filter generator!