Project: Backbenchers Café Kasol Website

Website: backbencherscafekasol.com

Project Overview

I developed a responsive and visually engaging website for Backbenchers Café Kasol — a cozy café and stay located in the Himalayas. The project was designed to reflect the café’s chill, mountain vibe with warm colors, smooth animations, and intuitive navigation. It showcases the café’s menu, gallery, testimonials, and booking sections, offering an easy way for users to connect and reserve through WhatsApp.

Tech Stack

HTML5 & CSS3: Structured layout and responsive design.

Bootstrap 5: Used for layout grid, responsiveness, and styling.

JavaScript (ES6): Added interactivity, animations, and booking logic.

jQuery & Owl Carousel: Implemented smooth sliders and transitions.

Key Features

📱 Fully Responsive — optimized for mobile, tablet, and desktop.

💬 WhatsApp Booking — one-click table or stay booking.

🖼️ Dynamic Gallery — grid with lightbox-style animations.

🍰 Menu Filtering — users can view categories like Coffee, Desserts, Meals.

⭐ Testimonials — auto-rotating review carousel with Owl Carousel.

Challenges & Learnings

Built smooth scroll animations using IntersectionObserver API to trigger elements on view.

Optimized images, minified CSS/JS, and lazy-loaded assets for faster performance.

Integrated WhatsApp API to send pre-filled booking messages with user data.

Sample Code Snippets

(function ($) {
  "use strict";

  // Back to top button
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('.back-to-top').fadeIn('slow');
    } else {
      $('.back-to-top').fadeOut('slow');
    }
  });

  $('.back-to-top').click(function () {
    $('html, body').animate({ scrollTop: 0 }, 1500, 'easeInOutExpo');
    return false;
  });

  // Date and time picker
  $('.date').datetimepicker({
    format: 'L'
  });
  $('.time').datetimepicker({
    format: 'LT'
  });
})(jQuery);

  

// WhatsApp Booking
document.addEventListener("DOMContentLoaded", function() {
  const submitBtn = document.getElementById('submitBtn');

  submitBtn.addEventListener('click', function() {
    const name = document.getElementById('name').value.trim();
    const phone = document.getElementById('phone').value.trim();
    const guests = document.getElementById('guests').value.trim();
    const fromDate = document.getElementById('fromDate').value.trim();
    const toDate = document.getElementById('toDate').value.trim();

    if (!name || !phone || !guests || !fromDate || !toDate) {
      alert("Please fill all fields!");
      return;
    }

    const ownerNumber = "919882606242";
    const message = `Hello! I want to book a bed.\nName: ${name}\nPhone: ${phone}\nGuests: ${guests}\nFrom: ${fromDate}\nTo: ${toDate}`;
    
    const url = `https://wa.me/

Responsive Preview