Taffline Bricks

A modern, responsive single-page website for Taffline Bricks - Zimbabwe's trusted building materials supplier.

🏗️ About

Taffline Bricks is a Zimbabwe-based construction materials supplier committed to delivering quality products at competitive prices. Based in Harare, we serve clients across the country — from individual home builders to large commercial contractors.

🌐 Website Features

• Hero Slideshow - Auto-rotating background images showcasing our operations
• Product Catalog - 9+ building material categories including:
  • Bricks
  • Cement
  • Pavers
  • River & Pit Sand
  • Quarry & Stones
  • Timber & Boards
  • Roof Tiles
  • Plumbing & Electrical
  • Gravel
• Transport Services - Tipper and grabber truck hire
• Interactive Gallery - Filterable project gallery with lightbox viewer
• Contact Form - Easy quote requests and inquiries
• 24-Hour Delivery - Fast nationwide delivery across Zimbabwe

🎨 Design

• Color Scheme: Orange (#F47920) primary with Navy (#0f1e2d) backgrounds
• Typography: Barlow Condensed & Barlow font families
• Fully Responsive - Mobile, tablet, and desktop optimized
• Modern Animations - Smooth scrolling, hover effects, and scroll-triggered animations

🛠️ Technology Stack

• Pure HTML5
• CSS3 (Custom Properties, Grid, Flexbox, Clip-path)
• Vanilla JavaScript (ES6+)
• No frameworks or dependencies
• Google Fonts

📦 Project Structure

taffline-bricks/
├── index.html              # Main website file
├── images/                 # Image assets
│   ├── hero/              # Hero slideshow images
│   ├── bricks/            # Brick product photos
│   ├── cement/            # Cement product photos
│   ├── pavers/            # Paver product photos
│   ├── quarry/            # Quarry stone photos
│   ├── sand/              # Sand product photos
│   ├── timber/            # Timber product photos
│   ├── rooftiles/         # Roof tile photos
│   ├── trucks/            # Transport fleet photos
│   ├── gallery/           # Project gallery images
│   └── about/             # About section images
├── setup-taffline.ps1     # Folder structure setup script
└── rename-images.ps1      # Image renaming utility

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/YOUR_USERNAME/taffline-bricks.git
   cd taffline-bricks

2. Open the website

   • Simply open index.html in your web browser
   • Or use a local server like Live Server in VS Code

3. Deploy

   • Upload to any web hosting service
   • Compatible with GitHub Pages, Netlify, Vercel, etc.

📝 PowerShell Scripts

setup-taffline.ps1

Creates the project folder structure and README guide files for organizing images.

.\setup-taffline.ps1

rename-images.ps1

Renames all images in the image folders to follow consistent naming conventions (e.g., bricks-01.jpg, pavers-03.jpg).

.\rename-images.ps1

📞 Contact Information

• Location: Plot 3 next to N. Richards, Westlea, Harare, Zimbabwe
• Phone: +263 78 224 1423
• WhatsApp: +263 78 224 1423
• Alternative: +263 71 421 0662
• Director: T. Rashamira (Logistics & Operations)

🕐 Business Hours

• Monday - Saturday: 7:00am - 6:00pm
• Sunday: On request

📄 License

© 2025 Taffline Bricks (Taffline Investments). All rights reserved.

🤝 Contributing

This is a business website. For inquiries about services or partnership opportunities, please contact us directly using the information above.

---

Built with ❤️ for Zimbabwe's construction industry