Embrace — Inclusive LGBTQ+ Restaurant Landing Page Template

Quick summary

Gather is a scroll-reveal landing page template for LGBTQ+-owned restaurants. Each section fades and rises into view as visitors scroll, moving from a price-anchored hero through food photography, the dining room, owner portraits, and community testimonials. The result feels less like a webpage and more like walking through the door for the first time.

Who this template is for

This landing page is purpose-built for queer-owned restaurant and cafe operators who want their space to feel as welcoming online as it does in person. It suits teams promoting food menus, services, and atmosphere to local communities.

• LGBTQ+-owned restaurant and cafe owners ready to launch or refresh their landing page
• Operators targeting date-night couples, friend groups, and regulars who book on mobile
• Food-business founders who want to lead with price transparency and emotional storytelling

What problem this template solves

Most restaurant landing page designs bury the price, skip the people, and arrive at the reservation button too quickly. Visitors leave before they feel anything. This template solves that problem by showing value first and asking for the click second.

• No price clarity on the hero forces visitors to hunt for basic information
• Generic web design fails to communicate a queer-owned restaurant's distinct identity
• A landing page without scroll-triggered reveal animation feels flat and forgettable

What you get with this template

You get a fully structured, single-page landing page built using HTML, CSS, and JavaScript. Every section is ready to populate with your own images, copy, and menu link. The layout is mobile-first and designed to load cleanly on any device.

• Five pre-built content sections plus a sticky footer call-to-action element
• Scroll-reveal animations powered by a JavaScript animation library for smooth fade-and-rise transitions
• A warm Cloud Canvas color system with blush dawn, lavender mist, warm linen, and deep plum

Feature list

This landing page template ships with the following built-in capabilities.

Price-Anchored Hero Section

The opening screen displays a cinematic food photograph with the price typeset directly over the image as a gallery tag. One line of copy below it sets tone and value before the visitor scrolls an inch.

Scroll-Reveal Animation System

This template uses ScrollReveal.js to add animations to elements as users move through the landing page. Each section gently fades and rises into view, enhancing the sense of discovery that defines the unboxing experience creative direction.

Parallax Dining Room Panel

A full-width parallax pan moves across the restaurant interior as the user scrolls. The effect creates depth and atmosphere without requiring video, keeping the landing page light across every device.

Community Proof Section

An Instagram-style mosaic of tagged photos sits alongside handwritten comment card testimonials. Inclusive imagery and social proof work together to build trust before the reservation button reappears.

Sticky Footer Call-to-Action

A high-contrast "Reserve Your Table" button activates as a sticky footer after the second scroll section. It stays accessible as the user continues to scroll, ensuring the primary action is always within reach.

Owner Story Portrait Block

A candid kitchen portrait of the owners anchors the "People" section with a short origin story. Queer-owned since 2019, the narrative block adds credibility and warmth that generic restaurant templates skip entirely.

Page sections overview

Design & branding system

The visual identity follows the Cloud Canvas color system, built to feel like the sky ten minutes after sunset. Gradients wash behind sections like watercolor on wet paper, and typography pairs a serif display face with a clean body font.

• Blush dawn (#F4D1D1), lavender mist (#D5C6E0), warm linen (#FAF6F1), and deep plum (#3C1642) form the complete palette
• Fraunces handles display headings; DM Sans handles body copy and navigation
• Safety badge placements support LGBTQ+-friendly and Transgender Safe Space icons for explicit community signaling

Mobile & speed optimization

The design of this restaurant landing page is mobile-first from the start. Date-night couples booking on phones are the primary audience, so every section is sized and sequenced for smaller screens.

• Layouts reflow cleanly for any screen size, from phone to desktop device
• Static HTML structure and optimized images keep the landing page ready to load instantly
• Skip navigation support is included so keyboard and assistive-technology users can move through the page efficiently

How this template helps you convert

This landing page earns the reservation click by leading with generosity. Price, food, and people appear before any ask, so the button feels like a natural next step rather than an interruption.

1. The price-anchored hero removes hesitation immediately, showing "$42 for two" before the visitor even scrolls
2. Each scroll-reveal section deepens emotional investment, moving from food to space to people to community
3. The sticky footer call-to-action keeps "Reserve Your Table" visible throughout the entire landing page journey

Other information about this template

This template is a strong fit for cafes and other food-related businesses beyond restaurants. It is built using HTML, CSS, and JavaScript, and customization starts by editing the index.html file in any web browser. Animations are controlled through the main.js file, where you can follow along using the transcript of comments to modify or add effects. The source code is clean and well-organized for straightforward edits.

The template includes SEO-friendly metadata placeholders so operators can add terms like "LGBTQ+ friendly restaurant" to help the community find the restaurant in search results. The landing page reveal animation system uses ScrollReveal.js, a JavaScript library that makes scroll animations easy to configure. For more advanced motion work, GSAP is a powerful JavaScript library for web animation that pairs well with this structure. SVGator allows for the design and export of production-ready SVG animations directly in the browser without coding, and can complement the existing CSS transitions.

Community resources around this template style have attracted strong engagement. Tutorial videos covering similar landing page builds have reached 6.3m views and 205k views across platforms. Creators sharing scroll-reveal web design walkthroughs regularly gain audiences of 145k subscribers or more. If you follow a tutorial, use show transcript or show less controls to follow along using the relevant sections. Reference materials posted 1 day ago, 2 days ago, 1 month ago, 2 months ago, and 1 year ago are all findable through standard searches.

• The drag-and-drop builder option on the platform lets you adapt sections quickly without touching HTML or CSS
• Customer testimonial sections and community award placements support ongoing trust-building as the restaurant grows
• Inclusive imagery featuring diverse LGBTQ+ individuals and couples is a core expectation of this template style

Show more