Frontend Mentor - Blog Preview Card Solution

Table of contents

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

Overview

The Challenge

Users should be able to:

• View the card component perfectly centered on the page
• See a hover effect on the blog title (if implemented)
• Read blog category, publish date, title, description, and author information clearly
• Experience responsive scaling on different screen sizes (if applied)

Screenshot

Links

• **Solution URL:**https://github.com/Tetris7/blog-preview-card-main
• **Live Site URL:**https://tetris7.github.io/blog-preview-card-main/

---

My Process

Built With

• HTML5 semantic elements
• CSS3 (Flexbox for layout and spacing)
• Custom box shadow and rounded corners styling
• Responsive design techniques (if used)

What I Learned

This project helped reinforce:

• How to create clean and minimal card layouts
• Applying shadow and border styles to give a floating effect
• Aligning and spacing text elements effectively inside a container

Useful Resources

CSS Box Shadow Generator — Helped craft the smooth shadow

Frontend Mentor Community — For design reference

Author

Name – Aetoro .H. Adeniyi

Frontend Mentor – @Tetris7

Acknowledgments

Thanks to Frontend Mentor for another clean and beginner-friendly challenge!

Feedbacks

I'm always open to suggestions or improvements — feel free to share any feedback or corrections!