Hero with Company Milestone Timeline Strip — Free HTML CSS JS Snippet

<section class="mts-hero">
  <span class="mts-eyebrow">Our story so far</span>
  <h1 class="mts-h1">Six years, one obsession: making invoicing invisible</h1>
  <p class="mts-sub">From two founders in a co-working space to the billing layer behind 40,000 businesses. Here's how we got here.</p>

  <div class="mts-timeline" id="mtsTimeline">
    <div class="mts-track"><div class="mts-track-fill" id="mtsTrackFill"></div></div>

    <div class="mts-point mts-point-active" data-index="0">
      <span class="mts-dot"></span>
      <span class="mts-year">2020</span>
    </div>
    <div class="mts-point" data-index="1">
      <span class="mts-dot"></span>
      <span class="mts-year">2021</span>
    </div>
    <div class="mts-point" data-index="2">
      <span class="mts-dot"></span>
      <span class="mts-year">2023</span>
    </div>
    <div class="mts-point" data-index="3">
      <span class="mts-dot"></span>
      <span class="mts-year">2024</span>
    </div>
    <div class="mts-point" data-index="4">
      <span class="mts-dot"></span>
      <span class="mts-year">2026</span>
    </div>
  </div>

  <div class="mts-detail" id="mtsDetail">
    <h3 id="mtsDetailTitle">Founded in a co-working space</h3>
    <p id="mtsDetailText">Two engineers, tired of chasing late invoices manually, write the first line of code that would become the product.</p>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#fbfaf8;color:#201d18}
.mts-hero{max-width:760px;margin:0 auto;padding:72px 24px;text-align:center}

.mts-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#b3541e;margin-bottom:16px}
.mts-h1{font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1.15;letter-spacing:-.02em;margin-bottom:14px}
.mts-sub{font-size:15px;color:#6b6558;line-height:1.6;max-width:520px;margin:0 auto 48px}

.mts-timeline{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:36px;padding:0 4px}
.mts-track{position:absolute;left:0;right:0;top:6px;height:2px;background:#e7e0d3;z-index:0}
.mts-track-fill{height:100%;background:#b3541e;width:0%;transition:width .35s cubic-bezier(.4,0,.2,1)}

.mts-point{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;background:none;border:none;padding:0}
.mts-dot{width:13px;height:13px;border-radius:50%;background:#fbfaf8;border:2.5px solid #d8cfbc;transition:border-color .2s,background .2s,transform .2s}
.mts-point-active .mts-dot{border-color:#b3541e;background:#b3541e;transform:scale(1.15)}
.mts-year{font-size:12.5px;font-weight:700;color:#a39a87;transition:color .2s}
.mts-point-active .mts-year{color:#201d18}
.mts-point:hover .mts-dot{border-color:#b3541e}

.mts-detail{background:#fff;border:1px solid #ece5d6;border-radius:16px;padding:26px 30px;min-height:108px;transition:opacity .2s}
.mts-detail h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.mts-detail p{font-size:13.5px;color:#6b6558;line-height:1.6;max-width:480px;margin:0 auto}

@media(max-width:560px){
  .mts-timeline{padding:0}
  .mts-year{font-size:10.5px}
  .mts-detail{padding:20px}
}

// A horizontal milestone timeline where clicking any year point updates a
// detail card below it and fills the connecting track up to that point —
// like a tiny progress-bar-driven story rather than a plain bullet list.
var milestones = [
  { year: '2020', title: 'Founded in a co-working space', text: "Two engineers, tired of chasing late invoices manually, write the first line of code that would become the product." },
  { year: '2021', title: 'First 100 paying customers', text: 'Word of mouth alone gets the product to its first 100 small businesses, all before any paid marketing spend.' },
  { year: '2023', title: 'Series A and the finance team is born', text: 'A $12M raise lets us hire our first dedicated finance and compliance engineers, and ship bank-grade reconciliation.' },
  { year: '2024', title: 'Crossed 10,000 businesses', text: 'The platform processes its first $1B in invoices, and the mobile app ships to keep up with demand.' },
  { year: '2026', title: '40,000 businesses and counting', text: "Today the product is the billing layer behind teams in 30 countries, still built by people who once chased their own late invoices." }
];

var points = Array.prototype.slice.call(document.querySelectorAll('.mts-point'));
var trackFill = document.getElementById('mtsTrackFill');
var detailTitle = document.getElementById('mtsDetailTitle');
var detailText = document.getElementById('mtsDetailText');
var detailCard = document.getElementById('mtsDetail');
var activeIndex = 0;

function selectMilestone(index) {
  activeIndex = index;
  var milestone = milestones[index];

  points.forEach(function (point, i) {
    point.classList.toggle('mts-point-active', i === index);
  });

  var fillPercent = points.length > 1 ? (index / (points.length - 1)) * 100 : 0;
  trackFill.style.width = fillPercent + '%';

  detailCard.style.opacity = '0';
  setTimeout(function () {
    detailTitle.textContent = milestone.title;
    detailText.textContent = milestone.text;
    detailCard.style.opacity = '1';
  }, 120);
}

points.forEach(function (point) {
  point.addEventListener('click', function () {
    selectMilestone(parseInt(point.getAttribute('data-index'), 10));
  });
});

selectMilestone(0);