[HTML5] [CSS3] [Flexbox] [Responsive Design]

This is a foundational front-end project that creates a clean, responsive, and professional-looking blog page layout. The design is content-first, focusing on readability and a user-friendly experience.

This project is a strong portfolio piece as it demonstrates the ability to build one of the most common web page layouts using semantic HTML for structure and modern CSS for styling and responsiveness.

➡️ View the Live Demo Here

• Clean Header: A modern header using Flexbox to align the site logo and navigation menu.
• Semantic Structure: Correct use of <header>, <nav>, <main>, <article>, and <footer> for better accessibility and SEO.
• Article Card Design: A clean "card" style for each blog post, separating content with box-shadow and border-radius.
• Mobile-First Responsiveness: A simple but effective media query stacks the header and navigation on small screens for a seamless mobile experience.
• Hover Effects: Subtle transitions on navigation links and "Read More" buttons provide a professional feel.

This project is not just a static page; it's a demonstration of key front-end skills required for any internship or junior role:

• Semantic HTML: Structuring the page logically with HTML5 tags. This is crucial for accessibility and team collaboration.
• CSS Flexbox: Using display: flex with justify-content: space-between to build a robust and flexible header layout.
• CSS Box Model: Expert use of padding, margin, border, and box-shadow to control spacing and create the visual hierarchy.
• Responsive Design: Using @media queries to adapt the layout for mobile devices, a non-negotiable skill in modern web development.
• CSS Variables (implied): (If you were to expand this, using CSS variables for colors and fonts would be the next step for maintainability).

1. Clone this repository.
2. Navigate to the project folder.
3. Open index.html in your web browser.