Citrus & Sage
Website Design & Development. Lightweight, Responsive HTML/CSS Bistro Site Template
Project Overview
Citrus & Sage is a fully responsive restaurant website template designed to showcase a clean, modern bistro brand. Built as a demo to highlight design and development skills, the site blends aesthetic detail with practical user interface elements, including a reservations form, contact pop-up, and mobile-optimized navigation. While it’s not tied to a live client, the project serves as a flexible theme starter for restaurants, cafés, or hospitality brands.
Logo Design Insight
The Citrus & Sage logo combines a simple illustration of an orange and a sage leaf with elegant serif typography. The pairing of bright citrus and earthy sage mirrors the site’s design approach—fresh yet grounded. The logo is designed to be versatile across digital and print applications.
Objectives
The project aimed to create a two-page, lightweight template using only HTML, CSS, and Bootstrap—intentionally avoiding WordPress or external plugins to keep the build clean and fast-loading. A key goal was to develop a polished, mobile-first restaurant layout that showcases both responsive structure and thoughtful design. To enhance usability, the site includes interactive elements such as a modal contact popup and an embedded reservation request form. The branding was carefully considered, with a focus on establishing a cohesive visual identity through a custom logo, defined color palette, and clear typography pairings. Finally, the design system was expanded to include mockups for print materials, packaging, and menus, demonstrating how the concept could be applied across both digital and physical touchpoints.
Design & Development
This site was designed and hand-coded using HTML and CSS with Bootstrap for responsive layout. A calming palette of orange, green, and deep slate-blue gives the design both warmth and polish. Custom sections include a branded hours display, parallax-style hero, interactive Swiper image gallery, and a reservation form with a modal popup. Typography uses Marcellus for headings and Inter for body content, establishing a balance of modern refinement and readability.
Design Considerations
The choice to build Citrus & Sage as an HTML and CSS-only template (with Bootstrap and minimal JavaScript) shaped every part of the design process. Without the aid of CMS features or plugins, I focused on clean, semantic structure and efficient styling. The layout was crafted mobile-first, ensuring that key elements like the Swiper.js image carousel, navigation menu, and contact modal worked seamlessly across devices. Careful attention was given to spacing, font scaling, and content hierarchy to maintain a polished appearance at every screen size—all while keeping the site lightweight and fast-loading.
Project Reflection
This project showcases core front-end development skills, from writing semantic HTML and well-organized CSS to implementing a responsive layout using Bootstrap. Working without CMS tools or plugins emphasized thoughtful structuring and clarity in design. It also highlighted my ability to maintain brand consistency—from typography to color palette—while managing responsive behaviors and interactivity with minimal dependencies.
Template Use & Adaptability
Citrus & Sage was built as a flexible, modular template that can be adapted for cafés, small restaurants, or seasonal food pop-ups. Its lightweight codebase and clean structure make it easy to update, expand, or repurpose—ideal for client proposals, portfolio demonstration, or real-world deployment with minimal backend requirements.
