Corevia About About 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 About

Corevia About

A about block extracted from the Corevia template, available in Tailwind CSS and Bootstrap.

0 3
Demo Download
Corevia About preview
corevia.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>Corevia About | Tailwind CSS UI Block</title>
  <meta name="description" content="A about block extracted from the Corevia template, available in Tailwind CSS and Bootstrap.">
  <meta name="keywords" content="Corevia, Tailwind CSS template, HTML website template, fitness template, gym website, personal trainer, coaching programs, membership pricing, workout tracker, health club">
  <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="Corevia | Tailwind CSS Health &amp; Fitness Template">
  <meta property="og:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="Corevia template preview">

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:url" content="">
  <meta name="twitter:title" content="Corevia | Tailwind CSS Health &amp; Fitness Template">
  <meta name="twitter:description" content="An energetic Tailwind CSS fitness template with a program carousel, progress tracker, pricing toggle and a chat-style sign-up.">
  <meta name="twitter:image" content="">
  <meta name="twitter:image:alt" content="Corevia 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=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: { flame: { DEFAULT: '#f26b38', deep: '#d9551f' }, coal: { DEFAULT: '#0e0e0e', soft: '#232323' }, mist: '#f3f3f3' },
          fontFamily: { sans: ['Inter', 'sans-serif'], serif: ['"Instrument Serif"', '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; }
    [hidden] { display: none !important; }
    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .swap { transition: opacity .35s ease; }
    .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; }
      .swap { transition: none; }
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
  </style>
</head>
<body class="bg-white font-sans text-coal antialiased">
<% active_page = "index" %>
<% nav = { "index" => "Home", "about" => "About Us", "services" => "Services", "testimonials" => "Testimonials" } %>
<% nav.each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% nav.merge("pricing" => "Pricing", "contact" => "Contact").each do |slug, label| %>
<% active = active_page == slug %>
<% end %>
<% %w[avatar-1 avatar-2 avatar-5 avatar-3 avatar-6].each do |avatar| %>
<% end %>
<% [["Better health", "left-0 top-0"], ["Expert coaching", "left-0 top-[42%]"], ["Real community", "left-10 bottom-0"]].each do |(label, position)| %>
<% end %>
<% programs = [["Battle Rope Training", "1599058917212-d750089bc07e", "Woman training with battle ropes outdoors"], ["Bodyweight Workout", "1518611012118-696072aa579a", "Two women doing a bodyweight class"], ["Mobility & Stretch", "1599901860904-17e6ed7083a0", "Person stretching in a downward dog pose"], ["Strength Basics", "1541534741688-6078c6bfb5c5", "Woman lifting a barbell in a squat rack"], ["Run Club", "1607962837359-5e7e89f86776", "Group running together outdoors"]] %>
<!-- block:start about -->
  <section class="mx-auto max-w-7xl px-5 py-20 md:px-10 md:py-28" data-carousel>
    <div class="grid gap-8 lg:grid-cols-[1.4fr_1fr]">
      <h2 class="text-4xl font-semibold leading-tight tracking-tight md:text-5xl">At Corevia, <span class="font-serif font-normal italic">we think</span> <span class="font-serif font-normal italic">fitness</span> goes far beyond the workout</h2>
      <div>
        <p class="text-lg text-coal/70">We help you move well, get stronger and feel better day to day — with coaches who know your name.</p>
        <a href="about.html" class="mt-6 inline-block rounded-full bg-flame px-6 py-3.5 text-xs font-semibold uppercase tracking-wide text-white transition hover:bg-flame-deep">Start your journey</a>
      </div>
    </div>
    <div class="mt-12 flex justify-end gap-3">
      <button type="button" data-carousel-prev class="grid h-14 w-14 place-items-center rounded-full border border-coal/15 transition hover:bg-mist" aria-label="Previous programs"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i></button>
      <button type="button" data-carousel-next class="grid h-14 w-14 place-items-center rounded-full bg-coal text-white transition hover:bg-flame" aria-label="Next programs"><i class="fa-solid fa-chevron-right" aria-hidden="true"></i></button>
    </div>
    <ul class="no-scrollbar mt-8 flex snap-x snap-mandatory items-start gap-6 overflow-x-auto pb-2" data-carousel-track>
      <% programs.each_with_index do |(title, photo, alt), index| %>
        <li class="relative shrink-0 snap-start <%= index.zero? ? 'w-[85%] md:w-[30rem]' : 'w-[70%] md:w-[19rem]' %>">
          <img src="https://images.unsplash.com/photo-<%= photo %>?auto=format&fit=crop&w=800&h=<%= index.zero? ? 640 : 500 %>&q=75" alt="<%= alt %>" class="<%= index.zero? ? 'aspect-[5/4]' : 'aspect-[8/5]' %> w-full rounded-3xl object-cover">
          <div class="absolute inset-x-3 bottom-3 flex items-center justify-between gap-3 rounded-2xl bg-white px-5 py-3 shadow-lg"><h3 class="<%= index.zero? ? 'text-lg' : 'text-sm' %> font-medium"><%= title %></h3><a href="services.html" class="rounded-full bg-flame px-4 py-2 text-xs font-medium text-white transition hover:bg-flame-deep">View now</a></div>
        </li>
      <% end %>
    </ul>
  </section>
  <!-- block:end about -->
<script>
    const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
    const watchMotion = !reducedMotion && !navigator.webdriver && 'IntersectionObserver' in window;

    document.querySelectorAll('[data-menu-toggle]').forEach((button) => {
      const menu = document.getElementById(button.getAttribute('aria-controls'));
      button.addEventListener('click', () => {
        const open = button.getAttribute('aria-expanded') === 'true';
        button.setAttribute('aria-expanded', String(!open));
        menu.classList.toggle('hidden', open);
      });
    });

    document.querySelectorAll('[data-video]').forEach((dialog) => {
      document.querySelectorAll('[data-video-open]').forEach((button) => button.addEventListener('click', () => dialog.showModal()));
      dialog.querySelector('[data-video-close]').addEventListener('click', () => dialog.close());
      dialog.addEventListener('click', (event) => { if (event.target === dialog) dialog.close(); });
    });

    document.querySelectorAll('[data-carousel], [data-rail]').forEach((root) => {
      const track = root.querySelector('[data-carousel-track], [data-rail-track]');
      const step = () => track.children[1].getBoundingClientRect().width + 20;
      const go = (dir) => {
        const max = track.scrollWidth - track.clientWidth - 4;
        if (dir > 0 && track.scrollLeft >= max) track.scrollTo({ left: 0, behavior: reducedMotion ? 'auto' : 'smooth' });
        else if (dir < 0 && track.scrollLeft <= 4) track.scrollTo({ left: track.scrollWidth, behavior: reducedMotion ? 'auto' : 'smooth' });
        else track.scrollBy({ left: dir * step(), behavior: reducedMotion ? 'auto' : 'smooth' });
      };
      root.querySelector('[data-carousel-prev], [data-rail-prev]').addEventListener('click', () => go(-1));
      root.querySelector('[data-carousel-next], [data-rail-next]').addEventListener('click', () => go(1));
    });

    document.querySelectorAll('[data-services]').forEach((root) => {
      const cards = [...root.querySelectorAll('[data-service]')];
      const set = (card) => cards.forEach((other) => other.setAttribute('aria-current', String(other === card)));
      cards.forEach((card) => { card.addEventListener('mouseenter', () => set(card)); card.addEventListener('focus', () => set(card)); });
    });

    document.querySelectorAll('[data-tracker]').forEach((root) => {
      const data = JSON.parse(root.querySelector('[data-routine-data]').textContent);
      const tabs = [...root.querySelectorAll('[data-routine]')];
      tabs.forEach((tab) => tab.addEventListener('click', () => {
        tabs.forEach((other) => other.setAttribute('aria-selected', String(other === tab)));
        const item = data[tab.dataset.routine];
        root.querySelector('[data-track-label]').textContent = item.text;
        root.querySelector('[data-track-score]').textContent = item.score;
        root.querySelector('[data-track-delta]').textContent = item.delta;
        const bar = root.querySelector('[data-track-bar]');
        bar.style.width = `${item.percent}%`;
        bar.parentElement.setAttribute('aria-valuenow', String(item.percent));
      }));
    });

    document.querySelectorAll('[data-pricing]').forEach((root) => {
      const toggle = root.querySelector('[data-annual]');
      toggle.addEventListener('change', () => {
        root.querySelectorAll('[data-price]').forEach((price) => { price.textContent = toggle.checked ? price.dataset.annual : price.dataset.monthly; });
        root.querySelector('[data-billing-note]').textContent = toggle.checked ? 'Billed yearly — you save 20%. Cancel anytime.' : 'Billed monthly. Cancel anytime.';
      });
    });

    document.querySelectorAll('[data-newsletter]').forEach((form) => {
      const status = form.parentElement.querySelector('[data-form-status]');
      form.addEventListener('submit', (event) => {
        event.preventDefault();
        const email = form.querySelector('[name="email"]');
        if (!email.value.trim() || !email.checkValidity()) { status.textContent = 'Please enter a valid email address.'; email.focus(); return; }
        status.textContent = "You're in! Look out for your first workout this week.";
        form.reset();
      });
    });

    if (watchMotion) {
      document.documentElement.classList.add('reveal-ready');
      const observer = new IntersectionObserver((entries) => entries.forEach((entry) => {
        if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
      }), { threshold: 0.15 });
      document.querySelectorAll('[data-reveal]').forEach((el) => observer.observe(el));
    }
  </script>
</body>
</html>

From this template

Corevia screenshot

Health & Fitness

Corevia

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