Velisse Hero Hero Block - Let's templates
Unlock every premium block and template with All-Access from $20 / 3 months, cancel anytime. Get All-Access
All blocks
Free Hero

Velisse Hero

A hero block extracted from the Velisse template, available in Tailwind CSS and Bootstrap.

0 2
Demo Download
Velisse Hero preview
velisse.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    window.FontAwesomeConfig = { autoReplaceSvg: 'nest' };
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Velisse Hero | Tailwind CSS UI Block</title>
  <meta name="description" content="A hero block extracted from the Velisse template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Velisse, Tailwind CSS template, HTML website template, beauty salon template, hair salon, makeup studio, skincare clinic, nail studio, spa website">
  <meta name="author" content="Let's templates">
  <link rel="canonical" href="">

  <meta property="og:type" content="product">
  <meta property="og:site_name" content="Let's templates">
  <meta property="og:locale" content="en_US">
  <meta property="og:url" content="">
  <meta property="og:title" content="Velisse | Tailwind CSS Health & Fitness Template">
  <meta property="og:description" content="An elegant Tailwind CSS beauty salon template with an editorial portrait hero, treatment cards, a tabbed price list and online booking.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Velisse template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Velisse | Tailwind CSS Health & Fitness Template">
  <meta name="twitter:description" content="An elegant Tailwind CSS beauty salon template with an editorial portrait hero, treatment cards, a tabbed price list and online booking.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Velisse template preview">
  <script src="https://cdn.tailwindcss.com/3.4.17"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;1,400&family=Urbanist:wght@400;500;600;700&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { gold: '#d4a72c', ink: '#1d1d1f', smoke: '#7a7a7d', mist: '#eceef0', pearl: '#f6f6f4' },
          fontFamily: { serif: ['"Bodoni Moda"', 'serif'], sans: ['Urbanist', 'sans-serif'] }
        }
      }
    }
  </script>
  <style>
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: 180ms ease-out both page-fade-out; }
    ::view-transition-new(root) { animation: 220ms ease-in both page-fade-in; }
    @keyframes page-fade-out { to { opacity: 0; } }
    @keyframes page-fade-in { from { opacity: 0; } }
    html { scroll-behavior: smooth; }
    .hero-glow { background: radial-gradient(120% 90% at 45% 40%, #fbfbfa 0%, #e9eaeb 55%, #a9acaf 100%); }
    .price-row { background-image: radial-gradient(circle, #b9b9bb 1px, transparent 1.2px); background-size: 7px 2px; background-repeat: repeat-x; background-position: 0 72%; }
    .reveal-ready [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
    .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-pearl font-sans text-ink antialiased">
<% active_page = "index" %>
<% { "index" => "Home", "team" => "Our Team", "services" => "Services", "prices" => "Prices", "contact" => "Contact" }.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% { "index" => "Home", "team" => "Our Team", "services" => "Services", "prices" => "Prices", "contact" => "Contact" }.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<!-- block:start hero -->
  <section id="intro" class="hero-glow relative overflow-hidden">
    <div class="mx-auto grid min-h-[100svh] max-w-7xl items-center gap-8 px-5 pb-16 pt-28 md:px-10 lg:grid-cols-2 lg:pb-0 lg:pt-24">
      <div class="relative order-2 -mx-5 self-end md:-mx-10 lg:order-1 lg:-ml-10 lg:mr-0">
        <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?auto=format&fit=crop&w=1100&h=1200&q=80" alt="Portrait of a woman with natural curls and glowing skin" class="aspect-[11/12] w-full object-cover [mask-image:linear-gradient(to_top,transparent,black_18%)] lg:aspect-auto lg:h-[88svh]">
        <ul class="absolute bottom-6 left-5 flex gap-7 font-serif text-lg md:left-10" aria-label="Social media">
          <li><a href="https://twitter.com" class="hover:text-gold">Tw</a></li>
          <li><a href="https://instagram.com" class="hover:text-gold">Ig</a></li>
          <li><a href="https://facebook.com" class="hover:text-gold">Fb</a></li>
        </ul>
      </div>
      <div class="order-1 lg:order-2">
        <h1 data-reveal class="font-serif text-[clamp(3rem,6.5vw,5.75rem)] font-normal leading-[1.05] tracking-[0.08em] text-smoke">Velisse Beauty Studio</h1>
        <p data-reveal style="--reveal-delay:120ms" class="mt-10 max-w-xl text-xl leading-snug">Velisse is built around unhurried, one-to-one care and an experience you'll remember. Your privacy and comfort come first in every treatment.</p>
        <div data-reveal style="--reveal-delay:220ms" class="mt-12 flex flex-wrap gap-6">
          <a href="contact.html" class="inline-flex min-w-[14rem] items-center justify-center bg-gold px-8 py-4 text-lg font-semibold text-white transition hover:bg-ink">Book online</a>
          <a href="contact.html#call" class="inline-flex min-w-[14rem] items-center justify-center border border-smoke/60 px-8 py-4 text-lg font-semibold text-smoke transition hover:border-ink hover:text-ink">Request a call</a>
        </div>
      </div>
    </div>
  </section>
  <!-- block:end hero -->
<script>
    document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
      const menu = document.getElementById(button.getAttribute('aria-controls'));
      if (!menu) return;
      button.addEventListener('click', () => {
        const open = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!open));
        menu.classList.toggle('hidden', open);
      });
    });

    document.querySelectorAll('[data-tabs]').forEach((group) => {
      const tabs = [...group.querySelectorAll('[role="tab"]')];
      const select = (tab) => {
        tabs.forEach((other) => {
          const active = other === tab;
          other.setAttribute('aria-selected', String(active));
          other.tabIndex = active ? 0 : -1;
          document.getElementById(other.getAttribute('aria-controls')).classList.toggle('hidden', !active);
        });
      };
      tabs.forEach((tab, index) => {
        tab.addEventListener('click', () => select(tab));
        tab.addEventListener('keydown', (event) => {
          if (!['ArrowRight', 'ArrowLeft'].includes(event.key)) return;
          const next = tabs[(index + (event.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length];
          select(next);
          next.focus();
        });
      });
    });

    document.querySelectorAll('[data-carousel]').forEach((carousel) => {
      const track = carousel.querySelector('[data-carousel-track]');
      if (!track) return;
      const slides = [...track.children];
      const dots = carousel.querySelector('[data-carousel-dots]');
      let index = 0;
      const perView = () => Math.max(1, Math.round(track.clientWidth / slides[0].clientWidth));
      const maxIndex = () => Math.max(0, slides.length - perView());
      const render = () => {
        track.style.transform = `translateX(-${index * slides[0].clientWidth}px)`;
        dots?.querySelectorAll('button').forEach((dot, i) => dot.setAttribute('aria-current', String(i === index)));
      };
      const go = (next) => { const max = maxIndex(); index = next > max ? 0 : next < 0 ? max : next; render(); };
      const buildDots = () => {
        if (!dots) return;
        dots.innerHTML = '';
        for (let i = 0; i <= maxIndex(); i++) {
          const dot = document.createElement('button');
          dot.type = 'button';
          dot.className = 'h-2 w-2 rounded-full bg-current opacity-30 aria-[current=true]:opacity-100';
          dot.setAttribute('aria-label', `Go to review ${i + 1}`);
          dot.addEventListener('click', () => go(i));
          dots.append(dot);
        }
      };
      carousel.querySelector('[data-carousel-prev]')?.addEventListener('click', () => go(index - 1));
      carousel.querySelector('[data-carousel-next]')?.addEventListener('click', () => go(index + 1));
      addEventListener('resize', () => { buildDots(); go(Math.min(index, maxIndex())); });
      buildDots();
      render();
    });

    document.querySelectorAll('[data-accordion]').forEach((accordion) => {
      const triggers = accordion.querySelectorAll('[data-accordion-trigger]');
      triggers.forEach((trigger) => {
        trigger.addEventListener('click', () => {
          const willOpen = trigger.getAttribute('aria-expanded') !== 'true';
          triggers.forEach((other) => {
            const open = other === trigger && willOpen;
            other.setAttribute('aria-expanded', String(open));
            document.getElementById(other.getAttribute('aria-controls')).classList.toggle('hidden', !open);
            other.querySelector('[data-accordion-icon]')?.classList.toggle('rotate-45', open);
          });
        });
      });
    });

    document.querySelectorAll('[data-contact-form]').forEach((form) => {
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const status = form.querySelector('[data-form-status]');
        if (!form.checkValidity()) {
          status.textContent = form.dataset.error || 'Please complete the required fields.';
          return;
        }
        status.textContent = form.dataset.success || 'Thanks! We will be in touch soon.';
        form.reset();
      });
    });

    document.querySelectorAll('[data-current-year]').forEach((el) => { el.textContent = new Date().getFullYear(); });

    (() => {
      const items = document.querySelectorAll('[data-reveal]');
      const skip = navigator.webdriver || !('IntersectionObserver' in window) || matchMedia('(prefers-reduced-motion: reduce)').matches;
      if (!items.length || skip) return;
      document.documentElement.classList.add('reveal-ready');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          entry.target.classList.add('is-visible');
          observer.unobserve(entry.target);
        });
      }, { rootMargin: '0px 0px -10% 0px' });
      items.forEach((item) => observer.observe(item));
    })();
  </script>
</body>
</html>

From this template

Velisse screenshot

Health & Fitness

Velisse

Unlimited access to all products

Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.

$20 / 3 months or $60 / year
Get Unlimited Access