Company Timeline & Development History

snippet.publishedOn January 15, 2024 Intermediate

An interactive timeline showcasing company milestones, achievements, and development history with smooth animations

#timeline #company #history #milestones #development #corporate #about

Live Preview

Code Implementation

HTML

<section class="company-timeline">
  <div class="container">
    <!-- Header -->
    <div class="timeline-header">
      <h2 class="timeline-title">Our Journey</h2>
      <p class="timeline-subtitle">Discover the milestones that shaped our company's evolution</p>
    </div>

    <!-- Timeline Container -->
    <div class="timeline-container">
      <!-- Progress Line -->
      <div class="timeline-progress">
        <div class="progress-line" id="progressLine"></div>
      </div>

      <!-- Timeline Items -->
      <div class="timeline-items">
        <!-- Milestone 1 -->
        <div class="timeline-item" data-year="2019">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2019</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop" alt="Company Foundation" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Company Founded</h3>
                <p class="card-description">
                  Started with a vision to revolutionize the tech industry. Our founders 
                  established the company with just 3 employees in a small garage office.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">3</span>
                    <span class="stat-label">Employees</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">1</span>
                    <span class="stat-label">Office</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Milestone 2 -->
        <div class="timeline-item" data-year="2020">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2020</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=250&fit=crop" alt="First Product Launch" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">First Product Launch</h3>
                <p class="card-description">
                  Successfully launched our flagship product, gaining 10,000+ users 
                  within the first month and establishing our presence in the market.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">10K+</span>
                    <span class="stat-label">Users</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">15</span>
                    <span class="stat-label">Team Size</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Milestone 3 -->
        <div class="timeline-item" data-year="2021">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2021</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1559136555-9303baea8ebd?w=400&h=250&fit=crop" alt="Series A Funding" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Series A Funding</h3>
                <p class="card-description">
                  Secured $5M in Series A funding, enabling rapid expansion and 
                  the development of new innovative features for our platform.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">$5M</span>
                    <span class="stat-label">Funding</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">50K+</span>
                    <span class="stat-label">Users</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Milestone 4 -->
        <div class="timeline-item" data-year="2022">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2022</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=400&h=250&fit=crop" alt="Global Expansion" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Global Expansion</h3>
                <p class="card-description">
                  Expanded operations to 15 countries, opened international offices, 
                  and reached 200,000+ active users worldwide.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">15</span>
                    <span class="stat-label">Countries</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">200K+</span>
                    <span class="stat-label">Users</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Milestone 5 -->
        <div class="timeline-item" data-year="2023">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2023</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop" alt="AI Integration" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">AI Integration</h3>
                <p class="card-description">
                  Launched AI-powered features, revolutionizing user experience 
                  and positioning ourselves as an industry leader in innovation.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">500K+</span>
                    <span class="stat-label">Users</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">100+</span>
                    <span class="stat-label">Team</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Milestone 6 -->
        <div class="timeline-item" data-year="2024">
          <div class="timeline-marker">
            <div class="marker-dot"></div>
            <div class="marker-year">2024</div>
          </div>
          <div class="timeline-content">
            <div class="content-card">
              <div class="card-image">
                <img src="https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=250&fit=crop" alt="Future Vision" loading="lazy">
                <div class="image-overlay">
                  <svg class="overlay-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                  </svg>
                </div>
              </div>
              <div class="card-content">
                <h3 class="card-title">Future Vision</h3>
                <p class="card-description">
                  Continuing our mission to innovate and lead the industry, 
                  with exciting new products and features on the horizon.
                </p>
                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-number">1M+</span>
                    <span class="stat-label">Goal Users</span>
                  </div>
                  <div class="stat">
                    <span class="stat-number">∞</span>
                    <span class="stat-label">Possibilities</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

CSS

.company-timeline {
  padding: 80px 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
}

.company-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="%23ffffff" opacity="0.3"/></pattern></defs><rect width="60" height="60" fill="url(%23dots)"/></svg>') repeat;
  pointer-events: none;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Timeline Header */
.timeline-header {
  text-align: center;
  margin-bottom: 80px;
}

.timeline-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 16px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.timeline-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Timeline Container */
.timeline-container {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

/* Progress Line */
.timeline-progress {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #e2e8f0;
  transform: translateX(-50%);
  border-radius: 2px;
  overflow: hidden;
}

.progress-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
  transition: height 0.3s ease;
}

/* Timeline Items */
.timeline-items {
  position: relative;
}

.timeline-item {
  position: relative;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

.timeline-item.animate {
  opacity: 1;
  transform: translateY(0);
}

.timeline-item:nth-child(even) .timeline-content {
  margin-left: 50%;
  padding-left: 40px;
}

.timeline-item:nth-child(odd) .timeline-content {
  margin-right: 50%;
  padding-right: 40px;
  text-align: right;
}

/* Timeline Marker */
.timeline-marker {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  z-index: 10;
}

.marker-dot {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.timeline-item.animate .marker-dot {
  transform: scale(1.2);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.marker-year {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* Content Card */
.content-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.timeline-item.animate .content-card {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.content-card:hover .card-image img {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.content-card:hover .image-overlay {
  opacity: 1;
}

.overlay-icon {
  width: 48px;
  height: 48px;
  color: white;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.content-card:hover .overlay-icon {
  transform: scale(1);
}

.card-content {
  padding: 24px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 12px;
}

.card-description {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
  margin-bottom: 20px;
}

.card-stats {
  display: flex;
  gap: 24px;
}

.timeline-item:nth-child(odd) .card-stats {
  justify-content: flex-end;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #667eea;
}

.stat-label {
  font-size: 0.875rem;
  color: #718096;
}

/* Responsive Design */
@media (max-width: 768px) {
  .timeline-progress {
    left: 30px;
  }
  
  .timeline-marker {
    left: 30px;
  }
  
  .timeline-item:nth-child(even) .timeline-content,
  .timeline-item:nth-child(odd) .timeline-content {
    margin-left: 60px;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }
  
  .timeline-item:nth-child(odd) .card-stats {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .timeline-title {
    font-size: 2.5rem;
  }
  
  .card-stats {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .stat {
    flex-direction: row;
    gap: 8px;
  }
  
  .timeline-item:nth-child(odd) .card-stats .stat {
    flex-direction: row;
  }
}

Snippet Features

Responsive Design: Yes

Dark Mode Support: No

Category: feature-sections

Difficulty Level: Intermediate

Related Code Snippets

Interactive Timeline

Modern interactive timeline component with smooth animations, hover effects, and responsive design. Perfect for showcasing company history, project milestones, or chronological events.

Intermediate

1/22/2024

categories.interactive

timeline interactive milestones history chronological

View Code

Featured

Company Culture Section

A modern company culture showcase section with team values, mission statement, and interactive elements

Intermediate

1/15/2024

Feature Sections

company culture about team values mission corporate

View Code

Featured

Interactive Timeline Component

A comprehensive timeline component with interactive animations, multiple layouts, and rich content support for displaying chronological events and milestones

Intermediate

1/15/2024

categories.interactive

timeline animation interactive chronological events ui

View Code