Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card 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
• Author

Overview

The challenge

Users should be able to:

• See hover and focus states for all interactive elements on the page

Screenshot

• Desktop Preview
• Mobile Preview

Links

• Live Site URL: Blog Card Preview

My process

Built with

• Semantic HTML5 markup
• CSS
• Flexbox
• Javscript

What I learned

Used Javascript and CSS to handle the active states

h1:hover{
color: hsl(47, 88%, 63%);
cursor: pointer;
}

header.onmouseover = function(event) {
    main.style.boxShadow = "14px 14px black"
  }
header.onmouseout = function(event) {
        main.style.boxShadow = "5px 5px black"
  };

Continued development

Would work on smoother transitions betweeen desktop and mobile screens, for more usability.

Author

• Frontend Mentor - sar-mko
• Linkedin - Sarah Meko