Layout

Markers

Features

Themes

Colors

Preview

1
Jan 2024

Project Kickoff

Initial planning and team formation for the new product launch.

2
Feb 2024

Design Phase

UI/UX design, wireframing, and prototype development.

3
Mar 2024

Development Sprint

Core feature implementation and backend development.

4
Apr 2024

Testing & QA

Comprehensive testing, bug fixes, and quality assurance.

5
May 2024

Product Launch

Official release and marketing campaign kickoff.

<div class="timeline">
  <div class="timeline-line"></div>
  <div class="timeline-container">
    <div class="timeline-item">
      <div class="timeline-marker" >
        <span class="timeline-marker-inner">1</span>
      </div>
      <div class="timeline-content">
        <div class="timeline-card">
          <div class="timeline-date">Jan 2024</div>
          <h3 class="timeline-title">Project Kickoff</h3>
          <p class="timeline-description">Initial planning and team formation for the new product launch.</p>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-marker" >
        <span class="timeline-marker-inner">2</span>
      </div>
      <div class="timeline-content">
        <div class="timeline-card">
          <div class="timeline-date">Feb 2024</div>
          <h3 class="timeline-title">Design Phase</h3>
          <p class="timeline-description">UI/UX design, wireframing, and prototype development.</p>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-marker" >
        <span class="timeline-marker-inner">3</span>
      </div>
      <div class="timeline-content">
        <div class="timeline-card">
          <div class="timeline-date">Mar 2024</div>
          <h3 class="timeline-title">Development Sprint</h3>
          <p class="timeline-description">Core feature implementation and backend development.</p>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-marker" >
        <span class="timeline-marker-inner">4</span>
      </div>
      <div class="timeline-content">
        <div class="timeline-card">
          <div class="timeline-date">Apr 2024</div>
          <h3 class="timeline-title">Testing & QA</h3>
          <p class="timeline-description">Comprehensive testing, bug fixes, and quality assurance.</p>
        </div>
      </div>
    </div>
    <div class="timeline-item">
      <div class="timeline-marker" >
        <span class="timeline-marker-inner">5</span>
      </div>
      <div class="timeline-content">
        <div class="timeline-card">
          <div class="timeline-date">May 2024</div>
          <h3 class="timeline-title">Product Launch</h3>
          <p class="timeline-description">Official release and marketing campaign kickoff.</p>
        </div>
      </div>
    </div>
  </div>
</div>