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

• The challenge
• Screenshot
• Links
• Built with
• What I learned
• Author

The challenge

This HTML & CSS-only challenge is a perfect project for beginners getting up to speed with HTML and CSS fundamentals, like HTML structure and the box model. And see hover and focus states for all interactive elements on the page.

Screenshot

Links

• Solution URL: https://github.com/rough-diamond213/blog-preview-card
• Live Site URL: https://rough-diamond213.github.io/blog-preview-card/

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flex
• Mobile-first workflow

What I learned

I got comfortable writing my code and also using the hover and fucus states for all interactive elements. And the use of box shadow

box-shadow: 5px 10px black;
.card>h2:hover{
    color: hsl(47, 88%, 63%);
}

.card>h2:active{
    color: hsl(47, 88%, 63%);
    cursor: pointer;
}

Author

• Frontend Mentor - @rough-diamond213
• Twitter - @callme_roughD