Free
About
Velisse About
A about block extracted from the Velisse template, available in Tailwind CSS and Bootstrap.
0
3
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 About | Tailwind CSS UI Block</title>
<meta name="description" content="A about 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 about -->
<section id="about" class="bg-pearl">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 md:px-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] lg:items-center">
<div>
<p class="text-sm font-semibold uppercase tracking-[0.3em] text-gold">The studio</p>
<h2 data-reveal class="mt-4 font-serif text-4xl leading-tight md:text-5xl">A quiet room, an expert hand and time that's all yours.</h2>
<p data-reveal class="mt-6 text-lg leading-relaxed text-ink/75">We see a handful of guests a day, so no one is rushed. Every visit starts with a short consultation, and every product we use is chosen for your skin, hair and routine.</p>
<dl class="mt-10 grid grid-cols-3 gap-6 border-t border-ink/10 pt-8">
<% [["12", "Years of craft"], ["9", "Specialists"], ["4.9", "Guest rating"]].each do |value, label| %>
<div class="flex flex-col"><dt class="order-2 mt-1 text-sm text-smoke"><%= label %></dt><dd class="order-1 font-serif text-4xl"><%= value %></dd></div>
<% end %>
</dl>
</div>
<div class="grid grid-cols-[1fr_0.8fr] gap-4">
<img data-reveal src="https://images.unsplash.com/photo-1560066984-138dadb4c035?auto=format&fit=crop&w=800&h=1000&q=80" alt="Bright salon interior with styling chairs and mirrors" class="aspect-[4/5] w-full object-cover">
<img data-reveal style="--reveal-delay:120ms" src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?auto=format&fit=crop&w=700&h=900&q=80" alt="Therapist pouring a drop of facial oil into a guest's hands" class="mt-16 aspect-[7/9] w-full object-cover">
</div>
</div>
</section>
<!-- block:end about -->
<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
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