UnityLane - Modern Lifestyle Blog

A minimalist, responsive blog website featuring curated content across six lifestyle categories.

Features

Design

• Minimalist Aesthetic: Clean lines, generous whitespace, limited color palette
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Smooth Animations: Subtle transitions and fade-in effects
• Modern Typography: System font stack for optimal performance

Functionality

• Category Filtering: 6 categories - Fashion & Accessories, Health & Beauty, Home & Garden, Travel & Accommodation, Finance & Insurance, Food & Beverage
• Search Feature: Full-text search across articles, titles, and tags
• Pagination: Clean pagination with 6 articles per page
• Article Detail Pages: Individual pages for each article with related content
• Product Recommendations: Embedded product reviews and recommendations
• Contact Form: Functional contact form with validation
• Social Media Integration: Connected social media icons

Content

• 5 High-Quality Articles:
  1. Sustainable Fashion Guide (January 2025)
  2. Skincare Routine Guide (March 2025)
  3. Minimalist Home Design (May 2025)
  4. Travel Insurance Guide (June 2025)
  5. Organic Food Delivery Review (August 2025)
• Product Reviews: Each article includes detailed product recommendations
• Rich Media: High-quality images from Unsplash
• SEO Optimized: Meta descriptions, semantic HTML, proper heading structure

Technology Stack

• HTML5: Semantic markup
• CSS3: Custom properties, Grid, Flexbox, animations
• Vanilla JavaScript: No dependencies, pure ES6+
• Font Awesome: Icon library
• Unsplash: Professional stock photography

File Structure

UnityLane/
│
├── index.html              # Homepage with article grid
├── article.html            # Article detail template
├── about.html              # About page
├── contact.html            # Contact page
│
├── css/
│   └── style.css          # Complete styling system
│
└── js/
    ├── articles.js        # Article content database
    ├── main.js            # Homepage functionality
    ├── article-detail.js  # Article page logic
    └── contact.js         # Contact form handling

Getting Started

1. Open the website: Simply open index.html in a modern web browser
2. No build process required: Static HTML/CSS/JS site
3. No dependencies: All code is self-contained

Features in Detail

Category System

Each article is categorized under one of six main categories:

• Fashion & Accessories
• Health & Beauty
• Home & Garden
• Travel & Accommodation
• Finance & Insurance
• Food & Beverage

Search Functionality

The search feature searches across:

• Article titles
• Excerpts
• Category names
• Tags

Responsive Breakpoints

• Desktop: 1200px+ (full layout)
• Tablet: 768px - 1199px (adjusted grid)
• Mobile: 0 - 767px (single column, mobile menu)

Color Palette

• Primary: #000000 (Black)
• Secondary: #666666 (Gray)
• Light: #F5F5F5 (Off-white)
• White: #FFFFFF
• Accent: #2D2D2D (Dark gray)

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance

• Lazy Loading: Images load as they enter viewport
• Optimized Animations: CSS transforms and opacity for 60fps
• Minimal JavaScript: Vanilla JS with no frameworks
• Fast Load Times: Minimal external dependencies

Customization

Adding New Articles

Edit js/articles.js and add a new article object with the following structure:

{
    id: 6,
    title: "Your Article Title",
    category: "category-slug",
    categoryName: "Category Display Name",
    excerpt: "Brief description...",
    date: "2025-09-15",
    author: "Author Name",
    readTime: "X min read",
    featuredImage: "image-url",
    content: `<p>Article content...</p>`,
    tags: ["tag1", "tag2"]
}

Modifying Colors

Update CSS custom properties in css/style.css:

:root {
    --color-primary: #000000;
    --color-secondary: #666666;
    /* etc. */
}

Changing Layout

Adjust grid settings in .articles-grid:

.articles-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--spacing-lg);
}

Credits

• Images: Unsplash
• Icons: Font Awesome
• Design: Custom minimalist design system

License

This project is created for demonstration purposes.

Contact

For questions or feedback, use the contact form on the website or reach out to contact@unitylane.com

---

UnityLane - Where modern living meets thoughtful curation.