A feature-rich, fully responsive website for a modern cafe. This project was built from the ground up, focusing on clean code, modern design principles, and dynamic user interactivity.
- Fully Responsive Design: Adapts beautifully to all screen sizes, from small mobile phones to widescreen desktops.
- Dynamic Video Hero Section: An atmospheric video background with an animated headline to immediately capture user attention.
- Dark/Light Theme Toggle: A theme switcher that respects user preference and saves the choice in their browser.
- Interactive Modals: The image gallery and blog sections use modal pop-ups for a seamless viewing experience without leaving the page.
- JavaScript-Powered Carousel: A looping, interactive carousel for customer testimonials.
- Functional Forms: Both the "Contact Us" and "Book a Table" forms are fully functional and connected to a backend service (Formspree).
- "Reveal on Scroll" Animations: Subtle animations that make sections appear as the user scrolls down the page.
This project was built using fundamental web technologies, without relying on any major frameworks.
- HTML5: Semantic markup for structure and accessibility.
- CSS3:
- Custom Properties (Variables) for theming and maintainability.
- Flexbox and CSS Grid for modern, complex layouts.
- Animations and Transitions for a dynamic feel.
- Modern JavaScript (ES6+):
- DOM Manipulation to create interactive elements.
- Event Listeners for user interactions.
IntersectionObserverAPI for efficient scroll animations.localStorageto persist user settings.
- Font Awesome: For clean and scalable icons.
- Formspree: For easy, serverless form processing.