BlogHub - A Modern Blogging Platform

A fully functional blog website built with HTML, CSS, and JavaScript. Features a responsive design, search functionality, category filtering, and individual blog post pages.

Project Structure

blog/
├── index.html          # Home page with featured posts
├── blog.html           # All blog posts with search & filters
├── blog-detail.html    # Individual blog post details
├── styles.css          # Shared styling for all pages
└── script.js           # Blog data and JavaScript functionality

Features

1. Home Page

• Hero section with call-to-action
• Featured articles showcase
• About section
• Responsive navigation bar

2. Blog Posts Page

• Search Functionality: Search by title, author, or content
• Category Filtering: Filter posts by category (Technology, Travel, Lifestyle, Business)
• Grid Layout: Responsive grid displaying all blog posts
• Post Cards: Each post shows title, excerpt, author, date, and read more button

3. Blog Detail Page

• Full blog post content
• Author information with avatar
• Publication date and category
• Tags for each post
• Related posts section
• Back to blog navigation

4. Design Features

• Beautiful gradient backgrounds
• Smooth animations and transitions
• Hover effects on interactive elements
• Mobile-responsive design
• Professional typography and spacing

How to Use

1. Open index.html in your web browser to start
2. Navigate through:
   • Home: View featured posts and learn about BlogHub
   • Blog: Browse all posts, search, and filter by category
   • Blog Detail: Click any post to read the full content

Blog Categories

• Technology: Programming, web development, software
• Travel: Destinations, travel tips, adventures
• Lifestyle: Health, wellness, personal development
• Business: Entrepreneurship, marketing, e-commerce

Technical Details

• HTML5: Semantic markup for content structure
• CSS3: Modern styling with gradients, flexbox, and grid
• JavaScript: Dynamic content filtering and search functionality
• Data: 8 sample blog posts included in script.js

Customization

Adding New Blog Posts

Edit script.js and add new post objects to the blogPosts array:

{
    id: 9,
    title: "Your Post Title",
    excerpt: "Brief description...",
    content: "Full content with HTML...",
    author: "Author Name",
    date: "June 20, 2026",
    category: "Technology",
    image: "Image",
    tags: ["tag1", "tag2"]
}

Changing Colors

Modify the gradient colors in styles.css:

• Look for #0d9488 and #06b6d4 and replace with your colors

Adding More Categories

Update the filter buttons in blog.html and add logic to filterCategory() function

Responsive Design

• Desktop (1200px+): Full grid layout
• Tablet (768px - 1199px): Adjusted grid
• Mobile (below 768px): Single column layout

Deployment

This site can be easily deployed to:

• GitHub Pages
• Netlify
• Vercel
• Any static hosting service

License

Open source - feel free to use and modify!

Future Enhancements

• Comments system
• User accounts and admin panel
• Category pages
• Archive by date
• Social sharing buttons
• Related posts by tags

---

Enjoy your new blog platform!