### Clone Grilli Repository

Source: https://github.com/codewithsadee/grilli/blob/master/README.md

Commands to clone the repository locally for Linux/macOS and Windows environments.

```bash
sudo git clone https://github.com/codewithsadee/grilli.git
```

```bash
git clone https://github.com/codewithsadee/grilli.git
```

--------------------------------

### Import Ionicon Icons

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

Add these script tags to your HTML to enable the use of Ionicon icons. Ensure correct placement for module and nomodule scripts.

```html
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
```

--------------------------------

### Project Directory Structure

Source: https://context7.com/codewithsadee/grilli/llms.txt

The file organization for the Grilli template, separating assets, styles, and scripts.

```text
grilli/
├── index.html              # Main HTML file with all sections
├── favicon.svg             # Site favicon
├── assets/
│   ├── css/
│   │   └── style.css       # Complete stylesheet with CSS variables
│   ├── js/
│   │   └── script.js       # JavaScript functionality
│   └── images/             # All image assets
├── README.md
└── style-guide.md          # Design tokens reference
```

--------------------------------

### Implement Header Scroll Behavior

Source: https://context7.com/codewithsadee/grilli/llms.txt

Manages sticky header visibility based on scroll direction and distance. Requires elements with data-header and data-back-top-btn attributes.

```javascript
/**
 * HEADER & BACK TOP BTN
 * Header hides when scrolling down, shows when scrolling up
 */
const header = document.querySelector("[data-header]");
const backTopBtn = document.querySelector("[data-back-top-btn]");

let lastScrollPos = 0;

const hideHeader = function () {
  const isScrollBottom = lastScrollPos < window.scrollY;
  if (isScrollBottom) {
    header.classList.add("hide");
  } else {
    header.classList.remove("hide");
  }
  lastScrollPos = window.scrollY;
}

window.addEventListener("scroll", function () {
  if (window.scrollY >= 50) {
    header.classList.add("active");
    backTopBtn.classList.add("active");
    hideHeader();
  } else {
    header.classList.remove("active");
    backTopBtn.classList.remove("active");
  }
});

// Usage: Required HTML elements
// <header class="header" data-header></header>
// <a href="#top" class="back-top-btn" data-back-top-btn>...</a>
```

--------------------------------

### Implement Service Card Component

Source: https://context7.com/codewithsadee/grilli/llms.txt

HTML structure for service cards featuring hover shine effects and lazy-loaded images. Ensure the img-holder container uses the correct aspect ratio variables.

```html
<!-- Service Cards -->
<ul class="grid-list">
  <li>
    <div class="service-card">
      <a href="#" class="has-before hover:shine">
        <figure class="card-banner img-holder" style="--width: 285; --height: 336;">
          <img src="./assets/images/service-1.jpg" width="285" height="336"
               loading="lazy" alt="Breakfast" class="img-cover">
        </figure>
      </a>
      <div class="card-content">
        <h3 class="title-4 card-title">
          <a href="#">Breakfast</a>
        </h3>
        <a href="#" class="btn-text hover-underline label-2">View Menu</a>
      </div>
    </div>
  </li>

  <li>
    <div class="service-card">
      <a href="#" class="has-before hover:shine">
        <figure class="card-banner img-holder" style="--width: 285; --height: 336;">
          <img src="./assets/images/service-2.jpg" width="285" height="336"
               loading="lazy" alt="Appetizers" class="img-cover">
        </figure>
      </a>
      <div class="card-content">
        <h3 class="title-4 card-title">
          <a href="#">Appetizers</a>
        </h3>
        <a href="#" class="btn-text hover-underline label-2">View Menu</a>
      </div>
    </div>
  </li>
</ul>
```

--------------------------------

### Implement Menu Card Component

Source: https://context7.com/codewithsadee/grilli/llms.txt

Displays food items in a grid layout with support for images, pricing, and status badges. Uses CSS custom properties for image aspect ratio control.

```html
<!-- Menu Section -->
<section class="section menu" aria-label="menu-label" id="menu">
  <div class="container">
    <p class="section-subtitle text-center label-2">Special Selection</p>
    <h2 class="headline-1 section-title text-center">Delicious Menu</h2>

    <ul class="grid-list">
      <li>
        <div class="menu-card hover:card">
          <figure class="card-banner img-holder" style="--width: 100; --height: 100;">
            <img src="./assets/images/menu-1.png" width="100" height="100" loading="lazy"
                 alt="Greek Salad" class="img-cover">
          </figure>
          <div>
            <div class="title-wrapper">
              <h3 class="title-3">
                <a href="#" class="card-title">Greek Salad</a>
              </h3>
              <span class="badge label-1">Seasonal</span>
              <span class="span title-2">$25.50</span>
            </div>
            <p class="card-text label-1">
              Tomatoes, green bell pepper, sliced cucumber onion, olives, and feta cheese.
            </p>
          </div>
        </div>
      </li>

      <li>
        <div class="menu-card hover:card">
          <figure class="card-banner img-holder" style="--width: 100; --height: 100;">
            <img src="./assets/images/menu-4.png" width="100" height="100" loading="lazy"
                 alt="Tokusen Wagyu" class="img-cover">
          </figure>
          <div>
            <div class="title-wrapper">
              <h3 class="title-3">
                <a href="#" class="card-title">Tokusen Wagyu</a>
              </h3>
              <span class="badge label-1">New</span>
              <span class="span title-2">$39.00</span>
            </div>
            <p class="card-text label-1">
              Vegetables, cheeses, ground meats, tomato sauce, seasonings and spices.
            </p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>
```

--------------------------------

### Implement Page Preloader

Source: https://context7.com/codewithsadee/grilli/llms.txt

Handles the removal of the preloader element once the window load event fires.

```javascript
'use strict';

/**
 * PRELOAD
 * Loading animation ends after document is fully loaded
 */
const preloader = document.querySelector("[data-preaload]");

window.addEventListener("load", function () {
  preloader.classList.add("loaded");
  document.body.classList.add("loaded");
});

// Usage: Preloader HTML element
// <div class="preload" data-preaload>
//   <div class="circle"></div>
//   <p class="text">Grilli</p>
// </div>
```

--------------------------------

### Transition Variables

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

CSS variables for defining transition durations and easing functions, providing options for 250ms, 500ms, and 1000ms.

```css
--transition-1: 250ms ease;
--transition-2: 500ms ease;
--transition-3: 1000ms ease;
```

--------------------------------

### Import Google Fonts

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

Include these HTML links in your document's head to import the 'DM Sans' and 'Forum' Google Fonts.

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet">
```

--------------------------------

### Create Online Reservation Form

Source: https://context7.com/codewithsadee/grilli/llms.txt

A structured HTML form for table bookings, including inputs for personal details, party size, date, and time.

```html
<!-- Reservation Section -->
<section class="reservation">
  <div class="container">
    <div class="form reservation-form bg-black-10">

      <form action="" class="form-left">
        <h2 class="headline-1 text-center">Online Reservation</h2>
        <p class="form-text text-center">
          Booking request <a href="tel:+88123123456" class="link">+88-123-123456</a>
          or fill out the order form
        </p>

        <div class="input-wrapper">
          <input type="text" name="name" placeholder="Your Name" autocomplete="off" class="input-field">
          <input type="tel" name="phone" placeholder="Phone Number" autocomplete="off" class="input-field">
        </div>

        <div class="input-wrapper">
          <div class="icon-wrapper">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
            <select name="person" class="input-field">
              <option value="1-person">1 Person</option>
              <option value="2-person">2 Person</option>
              <option value="3-person">3 Person</option>
              <option value="4-person">4 Person</option>
              <option value="5-person">5 Person</option>
            </select>
            <ion-icon name="chevron-down" aria-hidden="true"></ion-icon>
          </div>

          <div class="icon-wrapper">
            <ion-icon name="calendar-clear-outline" aria-hidden="true"></ion-icon>
            <input type="date" name="reservation-date" class="input-field">
            <ion-icon name="chevron-down" aria-hidden="true"></ion-icon>
          </div>

          <div class="icon-wrapper">
            <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
            <select name="time" class="input-field">
              <option value="08:00am">08 : 00 am</option>
              <option value="12:00pm">12 : 00 pm</option>
              <option value="06:00pm">06 : 00 pm</option>
              <option value="09:00pm">09 : 00 pm</option>
            </select>
            <ion-icon name="chevron-down" aria-hidden="true"></ion-icon>
          </div>
        </div>

        <textarea name="message" placeholder="Message" autocomplete="off" class="input-field"></textarea>

        <button type="submit" class="btn btn-secondary">
          <span class="text text-1">Book A Table</span>
          <span class="text text-2" aria-hidden="true">Book A Table</span>
        </button>
      </form>

      <div class="form-right text-center" style="background-image: url('./assets/images/form-pattern.png')">
        <h2 class="headline-1 text-center">Contact Us</h2>
        <p class="contact-label">Booking Request</p>
        <a href="tel:+88123123456" class="body-1 contact-number hover-underline">+88-123-123456</a>
        <p class="contact-label">Location</p>
        <address class="body-4">
          Restaurant St, Delicious City, <br> London 9578, UK
        </address>
      </div>

    </div>
  </div>
</section>
```

--------------------------------

### Implement Hero Slider Component

Source: https://context7.com/codewithsadee/grilli/llms.txt

Displays a full-screen background image slider with navigation buttons and auto-slide functionality. Requires specific data attributes for JavaScript initialization.

```html
<!-- Hero Section with Slider -->
<section class="hero text-center" aria-label="home" id="home">
  <ul class="hero-slider" data-hero-slider>

    <li class="slider-item active" data-hero-slider-item>
      <div class="slider-bg">
        <img src="./assets/images/hero-slider-1.jpg" width="1880" height="950" alt="" class="img-cover">
      </div>
      <p class="label-2 section-subtitle slider-reveal">Traditional & Hygiene</p>
      <h1 class="display-1 hero-title slider-reveal">
        For the love of <br> delicious food
      </h1>
      <p class="body-2 hero-text slider-reveal">
        Come with family & feel the joy of mouthwatering food
      </p>
      <a href="#" class="btn btn-primary slider-reveal">
        <span class="text text-1">View Our Menu</span>
        <span class="text text-2" aria-hidden="true">View Our Menu</span>
      </a>
    </li>

    <li class="slider-item" data-hero-slider-item>
      <!-- Additional slides... -->
    </li>

  </ul>

  <button class="slider-btn prev" aria-label="slide to previous" data-prev-btn>
    <ion-icon name="chevron-back"></ion-icon>
  </button>
  <button class="slider-btn next" aria-label="slide to next" data-next-btn>
    <ion-icon name="chevron-forward"></ion-icon>
  </button>

  <a href="#" class="hero-btn has-after">
    <img src="./assets/images/hero-icon.png" width="48" height="48" alt="booking icon">
    <span class="label-2 text-center span">Book A Table</span>
  </a>
</section>
```

--------------------------------

### Project Color Palette

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

Defines the primary color variables used throughout the Grilli project, including various shades of black, grey, silver, gold, and white.

```css
--gold-crayola: hsl(38, 61%, 73%);
--quick-silver: hsla(0, 0%, 65%, 1);
--davys-grey: hsla(30, 3%, 34%, 1);
--smoky-black-1: hsla(40, 12%, 5%, 1);
--smoky-black-2: hsla(30, 8%, 5%, 1);
--smoky-black-3: hsla(0, 3%, 7%, 1);
--eerie-black-1: hsla(210, 4%, 9%, 1);
--eerie-black-2: hsla(210, 4%, 11%, 1);
--eerie-black-3: hsla(180, 2%, 8%, 1);
--eerie-black-4: hsla(0, 0%, 13%, 1);
--white: hsla(0, 0%, 100%, 1);
--white-alpha-20: hsla(0, 0%, 100%, 0.2);
--white-alpha-10: hsla(0, 0%, 100%, 0.1);
--black: hsla(0, 0%, 0%, 1);
--black-alpha-80: hsla(0, 0%, 0%, 0.8);
--black-alpha-15: hsla(0, 0%, 0%, 0.15);
```

--------------------------------

### HTML5 Boilerplate Structure

Source: https://context7.com/codewithsadee/grilli/llms.txt

The base HTML5 structure for the Grilli template, utilizing semantic tags and data attributes for JavaScript hooks.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grilli - Amazing & Delicious Food</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&family=Forum&display=swap" rel="stylesheet">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- Preload hero images for performance -->
  <link rel="preload" as="image" href="./assets/images/hero-slider-1.jpg">
</head>
<body id="top">
  <!-- Preloader -->
  <div class="preload" data-preaload>
    <div class="circle"></div>
    <p class="text">Grilli</p>
  </div>

  <!-- Top Bar with contact info -->
  <div class="topbar">...</div>

  <!-- Header with navigation -->
  <header class="header" data-header>...</header>

  <main>
    <article>
      <section class="hero" id="home">...</section>
      <section class="section service">...</section>
      <section class="section about" id="about">...</section>
      <section class="special-dish">...</section>
      <section class="section menu" id="menu">...</section>
      <section class="section testi">...</section>
      <section class="reservation">...</section>
      <section class="section features">...</section>
      <section class="section event">...</section>
    </article>
  </main>

  <footer class="footer">...</footer>

  <!-- Back to top button -->
  <a href="#top" class="back-top-btn" data-back-top-btn>
    <ion-icon name="chevron-up"></ion-icon>
  </a>

  <!-- Scripts -->
  <script src="./assets/js/script.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
</body>
</html>
```

--------------------------------

### Typography Variables

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

CSS variables for font families, sizes, weights, line heights, and letter spacing, supporting 'Forum' and 'DM Sans' fonts.

```css
--fontFamily-forum: 'Forum', cursive;
--fontFamily-dm_sans: 'DM Sans', sans-serif;

--fontSize-display-1: calc(1.3rem + 6.7vw);
--fontSize-headline-1: calc(2rem + 2.5vw);
--fontSize-headline-2: calc(1.3rem + 2.4vw);
--fontSize-title-1: calc(1.6rem + 1.2vw);
--fontSize-title-2: 2.2rem;
--fontSize-title-3: 2.1rem;
--fontSize-title-4: calc(1.6rem + 1.2vw);
--fontSize-body-1: 2.4rem;
--fontSize-body-2: 1.6rem;
--fontSize-body-3: 1.8rem;
--fontSize-body-4: 1.6rem;
--fontSize-label-1: 1.4rem;
--fontSize-label-2: 1.2rem;

--weight-regular: 400;
--weight-bold: 700;

--lineHeight-1: 1em;
--lineHeight-2: 1.2em;
--lineHeight-3: 1.5em;
--lineHeight-4: 1.6em;
--lineHeight-5: 1.85em;
--lineHeight-6: 1.4em;

--letterSpacing-1: 0.15em;
--letterSpacing-2: 0.4em;
--letterSpacing-3: 0.2em;
--letterSpacing-4: 0.3em;
--letterSpacing-5: 3px;
```

--------------------------------

### Toggle Mobile Navigation Menu

Source: https://context7.com/codewithsadee/grilli/llms.txt

Handles the mobile menu overlay and body state using data attributes. Requires specific HTML elements with data-navbar, data-nav-toggler, and data-overlay attributes.

```javascript
/**
 * NAVBAR - Mobile menu toggle functionality
 */
const navbar = document.querySelector("[data-navbar]");
const navTogglers = document.querySelectorAll("[data-nav-toggler]");
const overlay = document.querySelector("[data-overlay]");

const toggleNavbar = function () {
  navbar.classList.toggle("active");
  overlay.classList.toggle("active");
  document.body.classList.toggle("nav-active");
}

addEventOnElements(navTogglers, "click", toggleNavbar);

// Usage: Required HTML elements
// <nav class="navbar" data-navbar>...</nav>
// <button class="nav-open-btn" data-nav-toggler>...</button>
// <button class="close-btn" data-nav-toggler>...</button>
// <div class="overlay" data-nav-toggler data-overlay></div>
```

--------------------------------

### Spacing Variable

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

Defines the standard spacing for sections within the Grilli project.

```css
--section-space: 70px;
```

--------------------------------

### Gradient Color Definitions

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

CSS variables for defining gradient effects, including a loading text gradient and a general-purpose gradient.

```css
--loading-text-gradient: linear-gradient(90deg, transparent 0% 16.66%, var(--smoky-black-3) 33.33% 50%,  transparent 66.66% 75%);
--gradient-1: linear-gradient(to top,hsla(0, 0%, 0%, 0.9),hsla(0, 0%, 0%, 0.7),transparent);
```

--------------------------------

### Border Radius Variables

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

CSS variables for defining border radius values, including a specific value for 24px and a value for creating circular elements.

```css
--radius-24: 24px;
--radius-circle: 50%;
```

--------------------------------

### Add Event Listeners to Multiple Elements

Source: https://context7.com/codewithsadee/grilli/llms.txt

A utility function to attach a single event listener to a NodeList of elements.

```javascript
/**
 * Add event listener on multiple elements
 * @param {NodeList} elements - Collection of DOM elements
 * @param {string} eventType - Event type (click, mouseover, etc.)
 * @param {Function} callback - Function to execute on event
 */
const addEventOnElements = function (elements, eventType, callback) {
  for (let i = 0, len = elements.length; i < len; i++) {
    elements[i].addEventListener(eventType, callback);
  }
}

// Usage example:
const navTogglers = document.querySelectorAll("[data-nav-toggler]");
addEventOnElements(navTogglers, "click", toggleNavbar);
```

--------------------------------

### Define CSS Design Tokens

Source: https://context7.com/codewithsadee/grilli/llms.txt

Centralized CSS custom properties for colors, typography, spacing, and effects. Use these variables across components to maintain visual consistency.

```css
:root {
  /* Colors - Dark elegant theme with gold accents */
  --gold-crayola: hsl(38, 61%, 73%);
  --quick-silver: hsla(0, 0%, 65%, 1);
  --davys-grey: hsla(30, 3%, 34%, 1);
  --smoky-black-1: hsla(40, 12%, 5%, 1);
  --smoky-black-2: hsla(30, 8%, 5%, 1);
  --smoky-black-3: hsla(0, 3%, 7%, 1);
  --eerie-black-1: hsla(210, 4%, 9%, 1);
  --eerie-black-2: hsla(210, 4%, 11%, 1);
  --white: hsla(0, 0%, 100%, 1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --black: hsla(0, 0%, 0%, 1);

  /* Typography */
  --fontFamily-forum: 'Forum', cursive;
  --fontFamily-dm_sans: 'DM Sans', sans-serif;

  --fontSize-display-1: calc(1.3rem + 6.7vw);
  --fontSize-headline-1: calc(2rem + 2.5vw);
  --fontSize-headline-2: calc(1.3rem + 2.4vw);
  --fontSize-title-1: calc(1.6rem + 1.2vw);
  --fontSize-body-1: 2.4rem;
  --fontSize-label-1: 1.4rem;

  /* Spacing */
  --section-space: 70px;

  /* Effects */
  --shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
  --radius-24: 24px;
  --radius-circle: 50%;

  /* Transitions */
  --transition-1: 250ms ease;
  --transition-2: 500ms ease;
  --transition-3: 1000ms ease;
}

/* Usage in components */
.btn-primary {
  background-color: var(--gold-crayola);
  color: var(--smoky-black-1);
  font-family: var(--fontFamily-forum);
  transition: var(--transition-1);
}
```

--------------------------------

### Configure Hero Slider

Source: https://context7.com/codewithsadee/grilli/llms.txt

Provides an auto-sliding carousel with manual navigation controls. The auto-slide interval is set to 7 seconds and pauses on button hover.

```javascript
/**
 * HERO SLIDER
 * Auto-sliding carousel with manual controls
 */
const heroSlider = document.querySelector("[data-hero-slider]");
const heroSliderItems = document.querySelectorAll("[data-hero-slider-item]");
const heroSliderPrevBtn = document.querySelector("[data-prev-btn]");
const heroSliderNextBtn = document.querySelector("[data-next-btn]");

let currentSlidePos = 0;
let lastActiveSliderItem = heroSliderItems[0];

const updateSliderPos = function () {
  lastActiveSliderItem.classList.remove("active");
  heroSliderItems[currentSlidePos].classList.add("active");
  lastActiveSliderItem = heroSliderItems[currentSlidePos];
}

const slideNext = function () {
  if (currentSlidePos >= heroSliderItems.length - 1) {
    currentSlidePos = 0;
  } else {
    currentSlidePos++;
  }
  updateSliderPos();
}

const slidePrev = function () {
  if (currentSlidePos <= 0) {
    currentSlidePos = heroSliderItems.length - 1;
  } else {
    currentSlidePos--;
  }
  updateSliderPos();
}

heroSliderNextBtn.addEventListener("click", slideNext);
heroSliderPrevBtn.addEventListener("click", slidePrev);

/**
 * Auto slide - pauses on button hover
 */
let autoSlideInterval;

const autoSlide = function () {
  autoSlideInterval = setInterval(function () {
    slideNext();
  }, 7000);  // 7 second interval
}

addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseover", function () {
  clearInterval(autoSlideInterval);
});

addEventOnElements([heroSliderNextBtn, heroSliderPrevBtn], "mouseout", autoSlide);

window.addEventListener("load", autoSlide);
```

--------------------------------

### Shadow Variable

Source: https://github.com/codewithsadee/grilli/blob/master/style-guide.md

Defines a standard shadow effect used for elements in the Grilli project.

```css
--shadow-1: 0px 0px 25px 0px hsla(0, 0%, 0%, 0.25);
```

--------------------------------

### Apply Parallax Effect

Source: https://context7.com/codewithsadee/grilli/llms.txt

Calculates element movement based on mouse position relative to the viewport. Requires elements with data-parallax-item and data-parallax-speed attributes.

```javascript
/**
 * PARALLAX EFFECT
 * Elements move based on mouse position
 */
const parallaxItems = document.querySelectorAll("[data-parallax-item]");

let x, y;

window.addEventListener("mousemove", function (event) {
  x = (event.clientX / window.innerWidth * 10) - 5;
  y = (event.clientY / window.innerHeight * 10) - 5;

  // Reverse the values for natural movement
  x = x - (x * 2);
  y = y - (y * 2);

  for (let i = 0, len = parallaxItems.length; i < len; i++) {
    x = x * Number(parallaxItems[i].dataset.parallaxSpeed);
    y = y * Number(parallaxItems[i].dataset.parallaxSpeed);
    parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`;
  }
});

// Usage: Add data attributes to elements
// <img src="image.jpg" data-parallax-item data-parallax-speed="1.75">
// data-parallax-speed controls movement intensity (higher = more movement)
```

--------------------------------

### HTML Footer with Newsletter Form

Source: https://context7.com/codewithsadee/grilli/llms.txt

This HTML snippet defines the footer section of the Grilli template, including branding, contact information, navigation links, social media links, and a newsletter subscription form.

```html
<footer class="footer section has-bg-image text-center"
        style="background-image: url('./assets/images/footer-bg.jpg')">
  <div class="container">
    <div class="footer-top grid-list">

      <div class="footer-brand has-before has-after">
        <a href="#" class="logo">
          <img src="./assets/images/logo.svg" width="160" height="50" loading="lazy" alt="grilli home">
        </a>
        <address class="body-4">
          Restaurant St, Delicious City, London 9578, UK
        </address>
        <a href="mailto:booking@grilli.com" class="body-4 contact-link">booking@grilli.com</a>
        <a href="tel:+88123123456" class="body-4 contact-link">Booking Request : +88-123-123456</a>

        <p class="title-1">Get News & Offers</p>
        <p class="label-1">Subscribe us & Get <span class="span">25% Off.</span></p>

        <form action="" class="input-wrapper">
          <div class="icon-wrapper">
            <ion-icon name="mail-outline" aria-hidden="true"></ion-icon>
            <input type="email" name="email_address" placeholder="Your email"
                   autocomplete="off" class="input-field">
          </div>
          <button type="submit" class="btn btn-secondary">
            <span class="text text-1">Subscribe</span>
            <span class="text text-2" aria-hidden="true">Subscribe</span>
          </button>
        </form>
      </div>

      <ul class="footer-list">
        <li><a href="#" class="label-2 footer-link hover-underline">Home</a></li>
        <li><a href="#" class="label-2 footer-link hover-underline">Menus</a></li>
        <li><a href="#" class="label-2 footer-link hover-underline">About Us</a></li>
        <li><a href="#" class="label-2 footer-link hover-underline">Contact</a></li>
      </ul>

      <ul class="footer-list">
        <li><a href="#" class="label-2 footer-link hover-underline">Facebook</a></li>
        <li><a href="#" class="label-2 footer-link hover-underline">Instagram</a></li>
        <li><a href="#" class="label-2 footer-link hover-underline">Twitter</a></li>
      </ul>

    </div>

    <div class="footer-bottom">
      <p class="copyright">
        &copy; 2022 Grilli. All Rights Reserved
      </p>
    </div>
  </div>
</footer>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.