Frontend Mentor - Blog preview card solution

This is a solution to the Blog preview card challenge on Frontend Mentor.

Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned/practiced
  • Continued development
  • Useful resources
• Author

Overview

Screenshot

Links

• Solution URL: Add solution URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Media Queries

What I learned/practiced

• CSS Media Queries

@media (max-width: 768px) {
    .wrapper {
        --w: calc(325px - 3rem);
        width: var(--w);
        height: calc(500px - 3rem);
    }
    .head-img {
        width: 279px;
    }
}

• Shadows

Useful resources

• Media Queries on W3Schools - Reminder for media queries
• CSS Box Shadow on W3Schools - How to use box shadowing

Author

• Website - Francisco Maia
• Frontend Mentor - @Xico26