Timeline Blocks

Copy and paste these timeline designs directly into your projects

Classic Vertical Timeline

A traditional vertical timeline with alternating sides

Classic Vertical Design

Company Founded

January 2015

Our journey began with a vision to revolutionize the industry with innovative solutions.

First Major Client

March 2016

Secured our first enterprise client, marking a significant milestone in our growth.

Product Launch

September 2017

Launched our flagship product, receiving industry recognition and positive reviews.

Global Expansion

June 2020

Expanded operations to three continents, establishing a global presence.

Complete Code (HTML, CSS, JS)

<!-- Classic Vertical Timeline -->
<div class="timeline-classic">
  <div class="timeline-line"></div>
  
  <div class="timeline-item">
    <div class="timeline-content left">
      <h3>Company Founded</h3>
      <span class="timeline-date">January 2015</span>
      <p>Our journey began with a vision to revolutionize the industry with innovative solutions.</p>
    </div>
    <div class="timeline-dot dot-1"></div>
    <div class="timeline-content right"></div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left"></div>
    <div class="timeline-dot dot-2"></div>
    <div class="timeline-content right">
      <h3>First Major Client</h3>
      <span class="timeline-date">March 2016</span>
      <p>Secured our first enterprise client, marking a significant milestone in our growth.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left">
      <h3>Product Launch</h3>
      <span class="timeline-date">September 2017</span>
      <p>Launched our flagship product, receiving industry recognition and positive reviews.</p>
    </div>
    <div class="timeline-dot dot-3"></div>
    <div class="timeline-content right"></div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left"></div>
    <div class="timeline-dot dot-4"></div>
    <div class="timeline-content right">
      <h3>Global Expansion</h3>
      <span class="timeline-date">June 2020</span>
      <p>Expanded operations to three continents, establishing a global presence.</p>
    </div>
  </div>
</div>

<style>
.timeline-classic {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff9a9e;
  border-radius: 2px;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
}

.timeline-content {
  flex: 1;
  padding: 0 40px;
}

.timeline-content.left {
  text-align: right;
}

.timeline-content h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.timeline-date {
  color: #ff9a9e;
  margin-bottom: 5px;
  display: block;
  font-weight: 600;
}

.timeline-content p {
  color: #7f8c8d;
  line-height: 1.5;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-1 {
  background: #ff9a9e;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-2 {
  background: #4ecdc4;
  box-shadow: 0 0 0 3px #4ecdc4;
}

.dot-3 {
  background: #45b7d1;
  box-shadow: 0 0 0 3px #45b7d1;
}

.dot-4 {
  background: #96ceb4;
  box-shadow: 0 0 0 3px #96ceb4;
}

@media (max-width: 768px) {
  .timeline-line {
    left: 30px;
  }
  
  .timeline-content {
    padding: 0 20px 0 60px;
    text-align: left !important;
  }
  
  .timeline-dot {
    left: 30px;
  }
}
</style>

<script>
// Add animation for timeline items
document.addEventListener('DOMContentLoaded', function() {
  const timelineItems = document.querySelectorAll('.timeline-item');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateY(0)';
      }
    });
  }, { threshold: 0.1 });
  
  timelineItems.forEach(item => {
    item.style.opacity = '0';
    item.style.transform = 'translateY(20px)';
    item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    observer.observe(item);
  });
});
</script>

Modern Cards Timeline

A modern timeline with card-style elements

Modern Cards Design

Company Founded

January 2015

Our journey began with a vision to revolutionize the industry with innovative solutions.

First Major Client

March 2016

Secured our first enterprise client, marking a significant milestone in our growth.

Product Launch

September 2017

Launched our flagship product, receiving industry recognition and positive reviews.

Global Expansion

June 2020

Expanded operations to three continents, establishing a global presence.

Complete Code (HTML, CSS, JS)

<!-- Modern Cards Timeline -->
<div class="timeline-modern">
  <div class="timeline-line"></div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-1"></div>
    <div class="timeline-card">
      <div class="card-header">
        <h3>Company Founded</h3>
        <span class="timeline-date">January 2015</span>
      </div>
      <p>Our journey began with a vision to revolutionize the industry with innovative solutions.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-2"></div>
    <div class="timeline-card">
      <div class="card-header">
        <h3>First Major Client</h3>
        <span class="timeline-date">March 2016</span>
      </div>
      <p>Secured our first enterprise client, marking a significant milestone in our growth.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-3"></div>
    <div class="timeline-card">
      <div class="card-header">
        <h3>Product Launch</h3>
        <span class="timeline-date">September 2017</span>
      </div>
      <p>Launched our flagship product, receiving industry recognition and positive reviews.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-4"></div>
    <div class="timeline-card">
      <div class="card-header">
        <h3>Global Expansion</h3>
        <span class="timeline-date">June 2020</span>
      </div>
      <p>Expanded operations to three continents, establishing a global presence.</p>
    </div>
  </div>
</div>

<style>
.timeline-modern {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 100px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #ff9a9e, #4ecdc4, #45b7d1, #96ceb4);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 150px;
}

.timeline-dot {
  position: absolute;
  left: 90px;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-1 {
  background: #ff9a9e;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-2 {
  background: #4ecdc4;
  box-shadow: 0 0 0 3px #4ecdc4;
}

.dot-3 {
  background: #45b7d1;
  box-shadow: 0 0 0 3px #45b7d1;
}

.dot-4 {
  background: #96ceb4;
  box-shadow: 0 0 0 3px #96ceb4;
}

.timeline-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  border-left: 4px solid #ff9a9e;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:nth-child(2) .timeline-card {
  border-left-color: #4ecdc4;
}

.timeline-item:nth-child(3) .timeline-card {
  border-left-color: #45b7d1;
}

.timeline-item:nth-child(4) .timeline-card {
  border-left-color: #96ceb4;
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-header h3 {
  color: #2c3e50;
  margin: 0;
  font-size: 1.3rem;
}

.timeline-date {
  color: #ff9a9e;
  font-weight: 600;
}

.timeline-item:nth-child(2) .timeline-date {
  color: #4ecdc4;
}

.timeline-item:nth-child(3) .timeline-date {
  color: #45b7d1;
}

.timeline-item:nth-child(4) .timeline-date {
  color: #96ceb4;
}

.timeline-card p {
  color: #7f8c8d;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .timeline-line {
    left: 30px;
  }
  
  .timeline-item {
    padding-left: 60px;
  }
  
  .timeline-dot {
    left: 20px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .timeline-date {
    margin-top: 5px;
  }
}
</style>

<script>
// Add hover effects
document.addEventListener('DOMContentLoaded', function() {
  const timelineCards = document.querySelectorAll('.timeline-card');
  
  timelineCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-5px)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
    });
  });
});
</script>

Horizontal Timeline

A horizontal timeline perfect for showcasing milestones

Horizontal Design

2015

Company Founded

Our journey began with a vision to revolutionize the industry.

2016

First Major Client

Secured our first enterprise client.

2017

Product Launch

Launched our flagship product.

2020

Global Expansion

Expanded to three continents.

Complete Code (HTML, CSS, JS)

<!-- Horizontal Timeline -->
<div class="timeline-horizontal">
  <div class="timeline-line"></div>
  
  <div class="timeline-items">
    <div class="timeline-item">
      <div class="timeline-dot dot-1"></div>
      <div class="timeline-card">
        <h4>2015</h4>
        <p class="event-title">Company Founded</p>
        <p class="event-desc">Our journey began with a vision to revolutionize the industry.</p>
      </div>
    </div>
    
    <div class="timeline-item">
      <div class="timeline-dot dot-2"></div>
      <div class="timeline-card">
        <h4>2016</h4>
        <p class="event-title">First Major Client</p>
        <p class="event-desc">Secured our first enterprise client.</p>
      </div>
    </div>
    
    <div class="timeline-item">
      <div class="timeline-dot dot-3"></div>
      <div class="timeline-card">
        <h4>2017</h4>
        <p class="event-title">Product Launch</p>
        <p class="event-desc">Launched our flagship product.</p>
      </div>
    </div>
    
    <div class="timeline-item">
      <div class="timeline-dot dot-4"></div>
      <div class="timeline-card">
        <h4>2020</h4>
        <p class="event-title">Global Expansion</p>
        <p class="event-desc">Expanded to three continents.</p>
      </div>
    </div>
  </div>
</div>

<style>
.timeline-horizontal {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  padding: 60px 0 40px;
}

.timeline-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 4px;
  background: linear-gradient(to right, #ff9a9e, #4ecdc4, #45b7d1, #96ceb4);
  border-radius: 2px;
}

.timeline-items {
  display: flex;
  justify-content: space-between;
}

.timeline-item {
  position: relative;
  text-align: center;
  flex: 1;
}

.timeline-dot {
  position: absolute;
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-1 {
  background: #ff9a9e;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.dot-2 {
  background: #4ecdc4;
  box-shadow: 0 0 0 3px #4ecdc4;
}

.dot-3 {
  background: #45b7d1;
  box-shadow: 0 0 0 3px #45b7d1;
}

.dot-4 {
  background: #96ceb4;
  box-shadow: 0 0 0 3px #96ceb4;
}

.timeline-card {
  background: white;
  border-radius: 10px;
  padding: 15px;
  margin-top: 40px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.timeline-card h4 {
  color: #2c3e50;
  margin-bottom: 5px;
  font-size: 1.2rem;
}

.event-title {
  color: #ff9a9e;
  font-weight: 600;
  margin-bottom: 5px;
}

.timeline-item:nth-child(2) .event-title {
  color: #4ecdc4;
}

.timeline-item:nth-child(3) .event-title {
  color: #45b7d1;
}

.timeline-item:nth-child(4) .event-title {
  color: #96ceb4;
}

.event-desc {
  color: #7f8c8d;
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .timeline-items {
    flex-direction: column;
    gap: 40px;
  }
  
  .timeline-line {
    display: none;
  }
  
  .timeline-dot {
    display: none;
  }
  
  .timeline-card {
    margin-top: 0;
  }
}
</style>

<script>
// Add hover effects
document.addEventListener('DOMContentLoaded', function() {
  const timelineCards = document.querySelectorAll('.timeline-card');
  
  timelineCards.forEach(card => {
    card.addEventListener('mouseenter', function() {
      this.style.transform = 'translateY(-5px)';
    });
    
    card.addEventListener('mouseleave', function() {
      this.style.transform = 'translateY(0)';
    });
  });
});
</script>

Minimalist Timeline

A clean, minimalist timeline with focus on content

Minimalist Design

Company Founded

January 2015

Our journey began with a vision to revolutionize the industry with innovative solutions.

First Major Client

March 2016

Secured our first enterprise client, marking a significant milestone in our growth.

Product Launch

September 2017

Launched our flagship product, receiving industry recognition and positive reviews.

Global Expansion

June 2020

Expanded operations to three continents, establishing a global presence.

Complete Code (HTML, CSS, JS)

<!-- Minimalist Timeline -->
<div class="timeline-minimalist">
  <div class="timeline-line"></div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-1"></div>
    <div class="timeline-content">
      <div class="content-header">
        <h3>Company Founded</h3>
        <span class="timeline-date">January 2015</span>
      </div>
      <p>Our journey began with a vision to revolutionize the industry with innovative solutions.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-2"></div>
    <div class="timeline-content">
      <div class="content-header">
        <h3>First Major Client</h3>
        <span class="timeline-date">March 2016</span>
      </div>
      <p>Secured our first enterprise client, marking a significant milestone in our growth.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-3"></div>
    <div class="timeline-content">
      <div class="content-header">
        <h3>Product Launch</h3>
        <span class="timeline-date">September 2017</span>
      </div>
      <p>Launched our flagship product, receiving industry recognition and positive reviews.</p>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-dot dot-4"></div>
    <div class="timeline-content">
      <div class="content-header">
        <h3>Global Expansion</h3>
        <span class="timeline-date">June 2020</span>
      </div>
      <p>Expanded operations to three continents, establishing a global presence.</p>
    </div>
  </div>
</div>

<style>
.timeline-minimalist {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
  border-radius: 1px;
}

.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 70px;
}

.timeline-dot {
  position: absolute;
  left: 20px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dot-1 {
  background: #ff9a9e;
}

.dot-2 {
  background: #4ecdc4;
}

.dot-3 {
  background: #45b7d1;
}

.dot-4 {
  background: #96ceb4;
}

.content-header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.content-header h3 {
  color: #2c3e50;
  margin: 0 10px 0 0;
  font-size: 1.2rem;
}

.timeline-date {
  color: #ff9a9e;
  font-size: 0.9rem;
}

.timeline-item:nth-child(2) .timeline-date {
  color: #4ecdc4;
}

.timeline-item:nth-child(3) .timeline-date {
  color: #45b7d1;
}

.timeline-item:nth-child(4) .timeline-date {
  color: #96ceb4;
}

.timeline-content p {
  color: #7f8c8d;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .timeline-line {
    left: 20px;
  }
  
  .timeline-item {
    padding-left: 50px;
  }
  
  .timeline-dot {
    left: 10px;
  }
  
  .content-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .timeline-date {
    margin-top: 2px;
  }
}
</style>

<script>
// Add fade-in animation
document.addEventListener('DOMContentLoaded', function() {
  const timelineItems = document.querySelectorAll('.timeline-item');
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = 'translateX(0)';
      }
    });
  }, { threshold: 0.1 });
  
  timelineItems.forEach(item => {
    item.style.opacity = '0';
    item.style.transform = 'translateX(-20px)';
    item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    observer.observe(item);
  });
});
</script>

Interactive Timeline

An interactive timeline with hover effects and animations

Interactive Design

Company Founded

January 2015

Our journey began with a vision to revolutionize the industry with innovative solutions.

First Major Client

March 2016

Secured our first enterprise client, marking a significant milestone in our growth.

Product Launch

September 2017

Launched our flagship product, receiving industry recognition and positive reviews.

Global Expansion

June 2020

Expanded operations to three continents, establishing a global presence.

Complete Code (HTML, CSS, JS)

<!-- Interactive Timeline -->
<div class="timeline-interactive">
  <div class="timeline-line"></div>
  
  <div class="timeline-item">
    <div class="timeline-content left">
      <div class="content-card">
        <h3>Company Founded</h3>
        <span class="timeline-date">January 2015</span>
        <p>Our journey began with a vision to revolutionize the industry with innovative solutions.</p>
      </div>
    </div>
    <div class="timeline-icon icon-1">
      <i class="fas fa-building"></i>
    </div>
    <div class="timeline-content right"></div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left"></div>
    <div class="timeline-icon icon-2">
      <i class="fas fa-handshake"></i>
    </div>
    <div class="timeline-content right">
      <div class="content-card">
        <h3>First Major Client</h3>
        <span class="timeline-date">March 2016</span>
        <p>Secured our first enterprise client, marking a significant milestone in our growth.</p>
      </div>
    </div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left">
      <div class="content-card">
        <h3>Product Launch</h3>
        <span class="timeline-date">September 2017</span>
        <p>Launched our flagship product, receiving industry recognition and positive reviews.</p>
      </div>
    </div>
    <div class="timeline-icon icon-3">
      <i class="fas fa-rocket"></i>
    </div>
    <div class="timeline-content right"></div>
  </div>
  
  <div class="timeline-item">
    <div class="timeline-content left"></div>
    <div class="timeline-icon icon-4">
      <i class="fas fa-globe"></i>
    </div>
    <div class="timeline-content right">
      <div class="content-card">
        <h3>Global Expansion</h3>
        <span class="timeline-date">June 2020</span>
        <p>Expanded operations to three continents, establishing a global presence.</p>
      </div>
    </div>
  </div>
</div>

<style>
.timeline-interactive {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ff9a9e;
  border-radius: 2px;
  transform: translateX(-50%);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  display: flex;
  cursor: pointer;
}

.timeline-content {
  flex: 1;
  padding: 0 40px;
}

.content-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.timeline-item:hover .content-card {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.content-card h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.timeline-date {
  color: #ff9a9e;
  margin-bottom: 5px;
  display: block;
  font-weight: 600;
}

.timeline-item:nth-child(2) .timeline-date {
  color: #4ecdc4;
}

.timeline-item:nth-child(3) .timeline-date {
  color: #45b7d1;
}

.timeline-item:nth-child(4) .timeline-date {
  color: #96ceb4;
}

.content-card p {
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0;
}

.timeline-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ff9a9e;
  border: 4px solid white;
  box-shadow: 0 0 0 3px #ff9a9e;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

.timeline-item:hover .timeline-icon {
  transform: translate(-50%, -50%) scale(1.1);
}

.icon-1 {
  background: #ff9a9e;
  box-shadow: 0 0 0 3px #ff9a9e;
}

.icon-2 {
  background: #4ecdc4;
  box-shadow: 0 0 0 3px #4ecdc4;
}

.icon-3 {
  background: #45b7d1;
  box-shadow: 0 0 0 3px #45b7d1;
}

.icon-4 {
  background: #96ceb4;
  box-shadow: 0 0 0 3px #96ceb4;
}

@media (max-width: 768px) {
  .timeline-line {
    left: 30px;
  }
  
  .timeline-content {
    padding: 0 20px 0 60px;
  }
  
  .timeline-icon {
    left: 30px;
  }
  
  .timeline-item:hover .timeline-icon {
    transform: translate(-50%, -50%) scale(1);
  }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const timelineItems = document.querySelectorAll('.timeline-item');
  
  timelineItems.forEach(item => {
    item.addEventListener('mouseenter', function() {
      const card = this.querySelector('.content-card');
      const icon = this.querySelector('.timeline-icon');
      
      if (card) {
        card.style.transform = 'translateY(-5px)';
        card.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';
      }
      
      if (icon) {
        icon.style.transform = 'translate(-50%, -50%) scale(1.1)';
      }
    });
    
    item.addEventListener('mouseleave', function() {
      const card = this.querySelector('.content-card');
      const icon = this.querySelector('.timeline-icon');
      
      if (card) {
        card.style.transform = 'translateY(0)';
        card.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
      }
      
      if (icon) {
        icon.style.transform = 'translate(-50%, -50%) scale(1)';
      }
    });
    
    // Click to expand functionality
    item.addEventListener('click', function() {
      const card = this.querySelector('.content-card');
      card.style.transform = 'translateY(-5px) scale(1.02)';
      card.style.boxShadow = '0 15px 30px rgba(0,0,0,0.2)';
      
      setTimeout(() => {
        card.style.transform = 'translateY(-5px)';
        card.style.boxShadow = '0 10px 25px rgba(0,0,0,0.15)';
      }, 300);
    });
  });
});
</script>