A step-by-step guide for setting up, customizing, and publishing the Savoria restaurant template. No coding experience required for basic edits.
css/style.css — all styles and responsive rulesjs/script.js — slider, nav, animations, dark mode, formsindex.html — it opens directly in your browser with no setup required.index.html → "Open with Live Server" for auto-refresh on save.The name "Savoria" appears in the logo on every page. To replace it on all pages at once:
SavoriaAlso update the browser tab title in the <title> tag at the top of each HTML file.
The gold color #D4A853 is used throughout. To change it to your brand color:
css/style.css.:root block.--primary: #D4A853; /* ← Change to your brand color */ --primary-dark: #B8923F; /* ← Usually a 10-15% darker version */
This one change updates buttons, highlights, nav underlines, price labels, and icons everywhere.
The template has a built-in dark mode. The moon icon button in the header toggles it. The preference is saved in the browser so returning visitors keep their chosen mode.
To set dark mode as the default, change the <html> tag in each HTML file:
<html lang="en" data-theme="dark">
The homepage hero has 3 slides with full-screen background images from Unsplash. To use your own images:
images/ inside the template folder).index.html and find <!-- Slide 1 -->, <!-- Slide 2 -->, <!-- Slide 3 -->.src="https://images.unsplash.com/..." URL with your local path, e.g.: src="images/hero1.jpg".To add or remove slides, copy or delete the entire <div class="swiper-slide hero-slide">...</div> block.
Open index.html and find the <!-- HERO SECTION --> comment. The content block looks like this:
<span class="subtitle">Welcome to Savoria</span> <h1>Fresh Flavors<br>Await You</h1> <p>Experience culinary excellence...</p> <a href="reservation.html" class="btn btn-primary btn-lg">Reserve a Table</a> <a href="menu.html" class="btn btn-outline-light btn-lg">View Our Menu</a>
Edit the text inside each tag. To change where a button links, update its href attribute.
Open menu.html. The menu is organized into tabs (Starters, Mains, Desserts, Drinks) and each item follows this structure:
<div class="menu-item">
<img src="..." alt="Dish name">
<div class="menu-item-content">
<div class="menu-item-header">
<h4>Dish Name <span class="allergen-icon gf">GF</span></h4>
<span class="price">$24</span>
</div>
<p>Dish description here</p>
</div>
</div>
| Class | Label | Color |
|---|---|---|
allergen-icon vegan | V | Green |
allergen-icon gf | GF | Orange |
allergen-icon spicy | 🌶️ | Red |
Opening hours appear in the footer of every page and also on contact.html. Search for the hours text (e.g., 11:00 - 22:00) and update both locations.
Contact details (address, phone, email) are in the footer of every page and on contact.html. Use Find & Replace (Ctrl+Shift+H) to update them everywhere at once.
The form on reservation.html validates fields client-side and shows a success popup. To connect it to a real booking system:
action="your-backend-url" attribute to the <form> tag.action="https://formspree.io/f/your-id" and method="POST".gallery.html.<div class="gallery-grid"> section.<div class="gallery-item">...</div> block.src with your photo path.alt text to describe the image.The lightbox works automatically — clicking any gallery image opens it full-screen.
The animated counters (15, 50000, 120, 25) on the homepage are driven by data-target attributes. To change them, open index.html and find the <!-- STATS SECTION -->:
<h3 class="stat-number" data-target="15">0</h3> <h3 class="stat-number" data-target="50000">0</h3> <h3 class="stat-number" data-target="120">0</h3> <h3 class="stat-number" data-target="25">0</h3>
Change the data-target number to whatever value you want the counter to animate to. Leave the inner text as 0.
If you want elements to appear immediately without scroll-triggered fade-ins, remove all data-aos and data-aos-delay attributes from the HTML, or add this to the bottom of css/style.css:
[data-aos] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
Upload the entire template folder to your web host. All subfolders (css/, js/, docs/) must be uploaded alongside the HTML files.
public_html/ via File Manager or FTP.Make sure js/script.js is loading correctly. Check the browser console (F12) for any errors. Also ensure the file is in the js/ folder and the path in the HTML <script src="js/script.js"> is correct.
The template uses Unsplash URLs which require an internet connection. If you're viewing the file offline, replace the Unsplash URLs with local image paths (e.g., src="images/my-photo.jpg").
This is a known issue with background-attachment: fixed on iOS Safari. It has been fixed in v1.0.1 — make sure your css/style.css includes background-attachment: scroll on the CTA section.
Yes. Open index.html (and all other HTML files) and replace the Google Fonts URL in the <head>. Then update --font-heading and --font-body in css/style.css.
Duplicate any existing page (e.g., copy about.html → blog.html). Update the <title>, the active nav link class, and replace the main content. Add a link to the new page in the <nav> of every HTML file.