Introduction
Oddity Coffee is a beautifully crafted, fully responsive frontend website designed to capture the unique and modern aesthetic of a specialty coffee shop. Built with a clean and minimalist design philosophy, this project provides a comprehensive digital storefront that tells the brand's story, showcases its products, and engages with its community. The website is designed to be visually immersive, using high-quality imagery and smooth animations to create an inviting and premium user experience that reflects the quality of the coffee and food being served.
Key Features
-
Stunning Hero Slider: The homepage immediately captures attention with a full-screen image slider featuring professional photos and compelling taglines like "The Best Tasting Experience!" and "Hot And Ready To Serve."
-
Dynamic 'Our Numbers' Counter: An animated counter highlights key business metrics like "Clients Served," "Products," and "Positive Reviews," building social proof and trust.
-
Interactive Product Showcase:
-
The products page features a clean grid layout for all items.
-
A filterable menu allows users to easily sort between "Drinks" and "Food" to find exactly what they're looking for.
-
-
Detailed 'About' and 'Beans' Pages: Dedicated pages tell the story behind the brand, its mission, vision, and the quality of its coffee beans, creating a strong brand identity.
-
Engaging Photo Gallery: A beautiful, responsive image gallery with a lightbox feature allows users to click on any photo to view it in a larger, focused pop-up.
-
Customer Testimonials Slider: A sleek, auto-scrolling slider displays positive reviews and customer feedback, reinforcing the shop's reputation.
-
Multi-Page Structure: The site is logically organized with dedicated pages for Home, Products, Beans, Gallery, Testimonials, Careers, About, and Contact Us, ensuring intuitive navigation.
-
Integrated Contact Form & Map: The "Contact Us" page includes a functional contact form for inquiries and an embedded map showing the physical location of the shop.
-
Clean & Minimalist UI/UX: The entire website uses a consistent and modern design language, with a simple color palette, elegant typography, and subtle wave-like section dividers that create a unique visual flow.
Technology Stack
-
Frontend: HTML5, CSS3, JavaScript
-
Backend (for contact form): PHP
-
Design Principles: Fully Responsive, Mobile-First, Minimalist UI
Category
-
Website Development
-
Frontend Design
-
Business & E-Commerce Presence
