Savoria - Restaurant & Cafe Template

Thank you for purchasing Savoria! This documentation will guide you through the installation, customization, and usage of this premium restaurant template.

What's Included

• 12+ fully responsive HTML pages (including 4 homepage variations)
• 4 unique homepage designs (V1, V2, V3, V4)
• Ultra-modern design with smooth animations
• Clean, well-commented code
• SCSS source files included for all versions
• Font Awesome icons
• Google Fonts integration
• Elements showcase page
• Comprehensive documentation
• Live Sass Compiler support
• AOS (Animate On Scroll) library integration

Homepage Variations

Getting Started

Savoria is a modern, responsive HTML template designed specifically for restaurants, cafes, and food businesses. It features a clean design, smooth animations, and is built with the latest web technologies.

Key Features

Installation

Requirements

To use this template, you'll need:

• A code editor (VS Code, Sublime Text, etc.)
• Basic knowledge of HTML, CSS, and JavaScript
• A local server or hosting environment
• Node.js and npm (optional, for SCSS compilation)

Setup Process

savoria/
├── index.html (V1 - Classic)
├── index-v2.html (V2 - Side Navigation)
├── index-v3.html (V3 - Asymmetric Modern)
├── index-v4.html (V4 - Minimalist Luxury)
├── menu.html
├── about.html
├── reservations.html
├── gallery.html
├── blog.html
├── contact.html
├── elements.html
├── documentation.html
├── .vscode/
│   └── settings.json (Live Sass Compiler config)
├── assets/
│   ├── css/
│   │   ├── style.css (V1 compiled)
│   │   ├── style-v2.css (V2 compiled)
│   │   ├── style-v3.css (V3 compiled)
│   │   └── style-v4.css (V4 compiled)
│   ├── scss/
│   │   ├── style.scss (V1 source)
│   │   ├── style-v2.scss (V2 source)
│   │   ├── style-v3.scss (V3 source)
│   │   ├── style-v4.scss (V4 source)
│   │   ├── _variables.scss
│   │   ├── _mixins.scss
│   │   ├── _base.scss
│   │   ├── _components.scss
│   │   ├── _elements.scss
│   │   ├── _documentation.scss
│   │   └── _responsive.scss
│   ├── js/
│   │   ├── main.js (V1 scripts)
│   │   ├── main-v2.js (V2 scripts)
│   │   ├── main-v3.js (V3 scripts)
│   │   └── main-v4.js (V4 scripts)
│   └── images/
│       └── (your images here)
└── README.md

File Structure

HTML Files

CSS/SCSS Structure

Each homepage version has its own dedicated SCSS source file and compiled CSS:

Version-Specific Files:

• style.scss → style.css: V1 Classic homepage styles
• style-v2.scss → style-v2.css: V2 Side navigation styles
• style-v3.scss → style-v3.css: V3 Asymmetric modern styles
• style-v4.scss → style-v4.css: V4 Minimalist luxury styles

Shared SCSS Partials:

• _variables.scss: Colors, fonts, spacing variables (shared across all versions)
• _mixins.scss: Reusable SCSS mixins (transitions, flex-center, absolute-cover)
• _base.scss: Reset and base styles
• _components.scss: Shared component styles
• _elements.scss: UI elements and reusable components
• _documentation.scss: Documentation page specific styles
• _responsive.scss: Media queries and responsive styles

SCSS Features Used:

• Variables for easy theming
• Nesting for better organization
• Mixins for reusable code
• Parent selector (&) for modifiers
• @for loops for animations
• Color functions (rgba, lighten, darken)

JavaScript

Each homepage version has dedicated JavaScript functionality:

main.js (V1)

• Mobile menu toggle functionality
• Sticky navigation on scroll
• Smooth scrolling
• Filter functionality for menu and gallery
• Form validation
• AOS animation initialization

main-v2.js (V2)

• Side navigation interactions
• Horizontal scroll menu functionality
• Lightbox for gallery images
• Parallax scroll effects
• Smooth scroll navigation

main-v3.js (V3)

• Floating navigation scroll effects
• Mobile burger menu toggle
• Add to cart floating animations
• Form validation with notifications
• Animated stats counter (Intersection Observer)
• Hero parallax effect
• Smooth scrolling

main-v4.js (V4)

• Hamburger menu toggle with overlay
• Full-screen menu animations
• ESC key to close menu
• Form validation with notification system
• Parallax effect on hero image
• Header background on scroll
• Form input animations

Customization

Working with SCSS

The template includes Live Sass Compiler extension configuration. To compile SCSS:

1. Install "Live Sass Compiler" extension in VS Code
2. Click "Watch Sass" in the VS Code status bar
3. Any changes to .scss files will automatically compile to .css

Changing Colors

To customize the color scheme, edit the variables in _variables.scss:

// Shared color variables across all versions
$primary-gold: #D4AF37;
$dark: #1a1a1a;
$text: #555555;
$light: #f8f9fa;
$white: #ffffff;

// Version-specific colors in each style-v*.scss
$primary-color: #D4AF37;
$secondary-color: #333333;
$dark-color: #1a1a1a;
$light-color: #f8f9fa;
$text-color: #555555;

Changing Fonts

The template uses Google Fonts. To change fonts, update the link in the HTML head and variables in SCSS:

// In each version's SCSS file
$font-heading: 'Playfair Display', serif;
$font-body: 'Inter', sans-serif;

Modifying Layout

The container width and spacing can be adjusted in each version's SCSS:

$container-width: 1200px;
$section-padding: 80px 0;

// V3 specific asymmetric grids
.experience-v3-grid {
    grid-template-columns: 45% 55%;
}

// V4 minimalist spacing
.hero-v4 {
    padding: 10rem 3rem 6rem;
}

Choosing a Homepage Version

To use a specific homepage version:

1. Rename your chosen version (e.g., index-v3.html) to index.html
2. Or update all navigation links to point to your preferred version
3. Ensure the correct CSS file is linked in the HTML head

Key Components

Navigation Systems

V1 & V3: Traditional Top Navigation

<nav class="navbar">
    <div class="container">
        <a href="#" class="logo">Exquisite</a>
        <ul class="nav-menu">
            <li><a href="#hero">Home</a></li>
        </ul>
    </div>
</nav>

V2: Side Navigation (80px Fixed Left Bar)

<nav class="side-nav">
    <div class="logo-vertical">EXQUISITE</div>
    <div class="nav-icons">
        <a href="#hero"><i class="fas fa-home"></i></a>
    </div>
</nav>

V4: Hamburger Overlay Menu

<div class="menu-button" id="menuButton">
    <span></span><span></span><span></span>
</div>
<div class="menu-overlay" id="menuOverlay">
    <nav class="menu-nav">
        <a href="#hero">01. Home</a>
    </nav>
</div>

Hero Sections

V1: Traditional Hero

Full-width hero with background images and parallax scrolling.

V2: Split-Screen Hero

50/50 split layout with image on left, content on right.

V3: Full-Width Modern Hero

Large background image with centered content and scroll indicator.

V4: Minimalist Hero

Dark background with oversized headings (clamp(3rem, 8vw, 7rem)).

Special Components

Stats Counter (V3)

Animated counter using Intersection Observer - automatically animates when scrolled into view:

<div class="stats-v3">
    <div class="stat-item">
        <h3 class="stat-number" data-target="15">0</h3>
        <p>Years of Excellence</p>
    </div>
</div>

Horizontal Scroll Menu (V2)

Touch-enabled horizontal menu scroll with smooth animations.

Masonry Gallery (V2)

Grid layout with varying image sizes and lightbox functionality.

Awards Section (V4)

Minimalist grid with icon rotation on hover (360deg transform).

Form Components

All versions include reservation forms with:

• Client-side validation
• Date/time pickers
• Floating labels (V4)
• Success/error notifications

Navigation

The navigation bar is fixed on scroll and includes mobile responsive menu:

<nav class="navbar" id="navbar">
    <div class="container">
        <!-- Navigation content -->
    </div>
</nav>

Hero Section

The hero section features full-width background image with overlay:

<section class="hero">
    <div class="hero-slider">
        <!-- Hero content -->
    </div>
</section>

Forms

All forms include validation and responsive styling:

<form class="contact-form">
    <div class="form-group">
        <label>Label</label>
        <input type="text" required>
    </div>
</form>

Colors & Typography

Color Palette

Typography

Headings: Playfair Display (serif)

Body Text: Inter (sans-serif)

Responsive Design

All 4 homepage versions are fully responsive with adaptive layouts for all screen sizes.

Breakpoints

• 1200px: Large desktops
• 992px: Desktops and tablets
• 768px: Tablets (navigation collapses to hamburger)
• 576px: Mobile devices

Version-Specific Responsive Features

• V2: Side navigation collapses to top bar on mobile
• V3: Asymmetric grids stack vertically on tablets
• V4: Typography scales using clamp() for fluid responsiveness

Browser Support

Exquisite Restaurant Template is fully compatible with all modern browsers:

• Chrome: Latest version (recommended)
• Firefox: Latest version
• Safari: Latest version (macOS & iOS)
• Edge: Latest version
• Opera: Latest version

Features Used

• CSS Grid & Flexbox
• CSS Custom Properties (variables)
• CSS Animations & Transitions
• Intersection Observer API
• ES6+ JavaScript

Credits & Resources

Fonts & Icons

• Google Fonts:
  • Playfair Display - Elegant serif for headings
  • Inter - Modern sans-serif for body text
• Icons: Font Awesome 6.5.1 - Free version

Libraries & Plugins

• AOS (Animate On Scroll): Scroll animations library
• Live Sass Compiler: VS Code extension for SCSS compilation

Images

• All demo images are from Unsplash and Pexels
• Images are for demonstration purposes only
• Replace with your own images for production use

Development Tools

• SCSS: CSS preprocessor with variables, mixins, nesting
• Vanilla JavaScript: No frameworks - pure ES6+
• CSS Grid & Flexbox: Modern layout techniques

Template Author

Created by: CraftedPixel - Premium web templates and themes

Support & Updates

Getting Help

If you have any questions or need assistance with the template:

Version History

• v2.0.0 (Current) - Added V3 and V4 homepage variations, SCSS source files, new sections
• v1.5.0 - Added V2 homepage with side navigation
• v1.0.0 - Initial release with classic homepage

What's Included in Support

• Bug fixes and error resolution
• Help with template customization
• Guidance on using SCSS and compilation
• Answers to general questions about features

Not Included in Support

• Custom feature development
• Integration with third-party services
• Server-side programming
• Content creation or image sourcing