Nocturna — Cocktail Bar & Lounge HTML5 Template

About This Item

Nocturna is a cocktail bar website template: a moody, animated HTML5 template for cocktail bars, lounges and speakeasies. Libre Caslon headlines and Outfit text give it the low light of a bar after ten. Underneath, it runs real bar logic. The bar clock knows when happy hour starts and when last call comes. Every drink’s strength is worked out from its own recipe, and an age gate opens once for each visitor. It ships with night and day mode, right-to-left support and WebGL layers – a neon haze in teal and rose and a neon sign that hums in the footer.

Three Home Pages

• Home 01 – Cocktail Lounge: a hero slider, a quick table booking and the upcoming events. In Dusk To Night, the sky fades into the night while the clock runs from happy hour to last call.
• Home 02 – Aperitivo Garden: the garden in daylight, long drinks and the club. In The Pour, the signature drink builds in a tall glass, one ingredient at a time.
• Home 03 – Late-Night Speakeasy: open till three, with the bar in photographs and a week at Nocturna. As the page leaves the hero, its photographs pull back to their full frame.

Bar Pages

• Cocktail Menu: spirit tabs, a flavour, vegan and zero-proof checks, a ceiling on strength, a search and a sort.
• Recipes: each drink scales from one to eight servings, in millilitres or fluid ounces, with the pure alcohol for the batch.
• Book A Table: four steps – the party and the night, a time with tables free, a room with its minimum spend and deposit, then your details.
• Private Events: an estimate with the drinks package per guest, extra hours, the room’s hire fee, extras, service and tax.
• Masterclasses: the next six sessions with their seats left, and a booking that checks the guests fit.
• Events: tonight’s night with its state – on now, starting at, or done – and special events dated from today.
• Shop & Gift Cards: a bag and wishlist for the whole site, and a gift card whose face follows every choice.

Inner Pages

Nocturna includes About Us, Our Bartenders, Bartender Profile, Cocktail Menu, Cocktail Details and Recipes. It also has Book A Table, Private Events, Masterclasses, Events, Event Details and Gift Cards. Then come Shop, Product Details, Cart, Checkout, Wishlist, Gallery, FAQ, Journal and Journal Post. Finally, there are Contact Us, Login, Register, Forgot Password, Coming Soon and 404 – thirty pages in total.

Cocktail Bar Website Template Features

• 30 HTML pages, 3 unique home page designs
• Night and day mode on one switch, remembered between visits, with no flash on load
• Right-to-left stylesheets and a language picker that turns any page around
• WebGL layers tinted by the theme colours: a neon haze and a neon sign
• Real bar logic from one data block: bar clock, happy-hour prices, drink strength and standard drinks
• An age gate that opens once and points under-age visitors to the zero-proof list
• A blend-mode cursor that inverts the big serif words
• Three scroll moments that never pin the page
• prefers-reduced-motion support for accessibility
• Working PHP form handler with optional invisible reCAPTCHA v3
• Fully responsive, zero console errors
• Well-commented code with a numbered JS index
• Documentation included

This cocktail bar website template ships with documentation, free lifetime updates and an instant download. Every page also works on phones, tablets and desktops. Nocturna also comes as React, Vue, Angular and WordPress, or in the developer bundle at 20% off. Browse more Restaurant & Cafe HTML5 templates.

Credits

Bootstrap 5.3, jQuery 3.7.1, Swiper 11, GSAP 3 with ScrollTrigger, Fancybox 3.5 and Font Awesome Free. It also uses RTLCSS and Google Fonts (Libre Caslon Text, Outfit).