📌 Blog Post Card

📖 Project Overview

This project is a blog post card built as part of the FreeCodeCamp “Styling Backgrounds and Borders” lab.
The goal of the lab was to practice using CSS to style backgrounds, borders, images, and interactive elements while following specific structural requirements.

The card presents an astronomy-themed blog post featuring:

• a cover image
• a title and short excerpt
• a call-to-action button

The design focuses on clean layout, visual hierarchy, and simple hover interactions.

---

✅ User Stories Fulfilled

• A .blog-post-card container holding all card elements
• An image with a valid alt attribute and the class .post-img
• A .post-content section containing:
  • a .post-title heading
  • a .post-excerpt paragraph
  • a .read-more link styled as a button
• A non-white background applied to the body
• Rounded corners, custom width, and text alignment on the card
• A full-width image with a bottom border
• Padding inside the content section
• Custom text colors and margins for title and excerpt
• A styled “Read More” button with:
  • background color
  • padding and margins
  • rounded corners
  • inline-block display
  • hover effect

---

🛠️ Technologies Used

• HTML5
• CSS3

---

🎓 Learning Focus

• Styling backgrounds and borders
• Working with images inside containers
• Button styling and hover effects
• Basic layout control and spacing

---

🌱 Next Steps (Post-Lab Ideas)

• Rebuild the layout using Flexbox or Grid
• Create multiple blog post cards
• Improve responsiveness
• Add a contact page or additional content sections