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.

📸 Screenshot

---

🔗 Links

• Live Site URL: https://blackmagenuit.github.io/Blog-preview-card/
• Solution URL: https://github.com/blackmagenuit/Blog-preview-card
• Frontend Mentor Profile: https://www.frontendmentor.io/profile/blackmagenuit

---

🛠 Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox / card layout
• Mobile-first workflow
• Accessible focus states

---

✅ Features

• Hover and focus states for interactive elements
• Clean and responsive layout
• Accessible and semantic structure

---

💡 What I learned

During this project I practiced:

• Using semantic HTML for better structure
• Styling with CSS variables for consistency
• Adding keyboard-friendly focus states with :focus-visible

.title__link:hover { color: var(--yellow); }

.title__link:focus-visible {
  box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5px var(--black);
  border-radius: 6px;
}

---

📦 Project structure

.
├─ assets/
│ ├─ screenshot.png
├─ index.html
├─ styles.css
└─ README.md

---

🚀 How to run locally

# Clone this repository
git clone https://github.com/blackmagenuit/blog-preview-card

# Open the folder
cd blog-preview-card

# Open index.html in your browser

---

👤 Author

• Name: Blackmagenuit
• Frontend Mentor: https://www.frontendmentor.io/profile/blackmagenuit

---

🙏 Acknowledgments

Thanks to the Frontend Mentor community for feedback and support.