Frontend Mentor - Article preview component solution

This is a solution to the Article preview component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See the social media share links when they click the share icon

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• React Styled components

What I learned

.proud-of-this-css {
  filter: brightness(0) invert(1);
}

  const handleClick = () => {
    let contactArrow = document.querySelector('.contact');
    let shareDiv = document.querySelector('.share');
    contactArrow.classList.toggle('clicked');
    shareDiv.classList.toggle('visible');
  };

Useful resources

• Stackoverflow
• MDN docs

Author

• Website - 404
• Frontend Mentor - @LenyPython