EdgeZpace

Citrus & Sage

Lightweight, Responsive HTML/CSS Bistro Site Template

Website Design & Development.

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.

Clean, Lightweight Build

Developed entirely with HTML, CSS, and Bootstrap—no plugins or CMS—ensuring a fast-loading, maintainable site.

Fully Responsive Layout

Crafted mobile-first with seamless scaling across devices, including adaptive navigation and interactive image galleries.

Cohesive Brand Design

Unified logo, palette, and typography create a warm yet polished identity reflecting a modern bistro aesthetic.

Interactive User Experience

Includes a modal reservation form, contact pop-up, and Swiper.js image carousel to enhance engagement and usability.

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 centered on creating a clean, two-page restaurant template using HTML, CSS, Bootstrap, and light JavaScript—built for speed, clarity, and mobile-first performance. Designed to strike a balance between structure and style, it features a modal contact popup, a reservation form, and a fully responsive layout. Thoughtful branding ties it all together through a custom logo, defined color palette, and modern typography with PDF menu mockups that demonstrate how the concept extends seamlessly across both digital and physical touchpoints.

Design & Developement

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 Poppins 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, such as 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.

Results & Impact

This project showcases core front-end development skills, from writing semantic HTML and well-structured CSS to implementing a responsive layout with Bootstrap and light JavaScript. Working without CMS tools or plugins emphasized thoughtful structuring, clarity in design, and efficient interactivity. It also reinforced my ability to maintain brand consistency—from typography to color palette—while managing responsive behaviors with minimal dependencies. Built as a flexible, modular template, Citrus & Sage can be adapted for cafés, small restaurants, or seasonal pop-ups. Its lightweight codebase and clean structure make it easy to update, expand, or repurpose—ideal for client proposals, portfolio demonstrations, or real-world deployment with minimal backend setup.

  • Front-End Precision
  • Responsive Craftsmanship
  • Consistent Branding
  • Lean Interactivity
  • Thoughtful Design Flow
  • Front End Precision
  • Responsive Craftsmanship
  • Consistent Branding
  • Lean Interactivity
  • Thoughtful Design Flow
Live Demo
Pool Service App
Pool Service Project
Pool Service App
Pool Service Project

EdgeZpace is my creative portfolio showcasing a collection of my design and art projects.

With a BFA in 2D Design specializing in printmaking, painting, and photography, I bring a thoughtful approach to every project. My work spans graphic and web design, custom pieces for print, and commissioned paintings. I’ve also exhibited and sold my artwork as an artist vendor, sharing my passion for visual storytelling across different mediums.

Along with website design for small businesses and individuals, I create custom logos, graphics, and photography to build a cohesive brand presence. I also design social media posts, marketing materials, and layouts for both digital and print. Beyond aesthetics, I focus on organization and structure, ensuring that information is easy to access and that designs remain visually balanced across all screen sizes.

Here, you’ll find a selection of my work—including paintings, graphic designs, social media content, and websites—each reflecting both my creative vision and attention to detail.

Skills & Services
Full Portfolio

EdgeZpace