Bean & Craft Coffee

A premium, handcrafted coffee brand website featuring a warm, "Nescafe-inspired" aesthetic. This project showcases small-batch roasted coffee, ethically sourced beans, and a community-focused brewing guide.

🔗 Live Preview

🎨 Visual Identity

• Nescafe Palette: A warm and inviting color scheme featuring creamy latte backgrounds, deep coffee browns, earthy cinnamon accents, and a custom surface color (#eaddcf).
• Glassmorphism Header: A sophisticated, semi-transparent navigation bar with professional typography and animated interactions.
• HD Imagery: High-quality visuals showcasing the roasting process and our signature coffee collections.

🚀 Key Features

• Smooth Navigation: Seamless anchor scrolling to key sections (Shop, Discover, Bestsellers, Reviews).
• Responsive Design: Optimized for a flawless experience across desktop, tablet, and mobile devices.
• Interactive Elements: Elegant hover effects on navigation links, product cards, and trusted partner logos.
• Modern Typography: A refined mix of "Playfair Display" for headings and "Inter" for readable body text.

📁 Project Structure

/
├── login.html          # Main entry point (redirects from index.html)
├── index.html          # Redirects to login.html
├── photos/             # HD coffee assets
├── Styles/             # Modular CSS architecture
│   ├── tokens.css      # Design system & color palette
│   ├── layout.css      # Structural grid & container utilities
│   ├── nav.css         # Header & navigation styling
│   ├── hero.css        # Hero section styles
│   ├── products.css    # Collection grid styles
│   ├── explore.css     # Discovery section styles
│   ├── bestseller.css  # Bestseller features
│   ├── testimonials.css# Customer reviews
│   ├── subscribe.css   # Newsletter section
│   ├── trusted.css     # Partner logo section
│   ├── footer.css      # Site footer
│   └── responsive.css  # Media queries & mobile optimization
├── Plan.md             # Development roadmap
└── rules.md            # Project-specific coding standards

🛠️ Technology Stack

• HTML5: Semantic structure for accessibility and SEO.
• CSS3: Modern layout techniques (Grid & Flexbox) with a modular approach.
• No JavaScript: The entire interactive experience is built purely with CSS for maximum performance and stability.

📖 How to Run

Simply open login.html in any modern web browser to view the site (or open index.html to be redirected automatically).

---

© 2026 Bean & Craft Coffee. All rights reserved.