Timeline

jitesh208
Jan 28, 2026 7
Live Preview

Live Editor

<div class="timeline">

  <!-- Line -->
  <div class="timeline-line"></div>

  <!-- Step 1 -->
  <div class="timeline-item">
    <div class="timeline-dot">1</div>
    <div class="timeline-card">
      <h3>Ideation & Planning</h3>
      <p>
        Define goals, scope, and user needs. Create wireframes and roadmap.
      </p>
      <span>Phase One</span>
    </div>
  </div>

  <!-- Step 2 -->
  <div class="timeline-item">
    <div class="timeline-dot">2</div>
    <div class="timeline-card">
      <h3>Design & Launch</h3>
      <p>
        Build, test, and launch the product for real users.
      </p>
      <span>Phase Two</span>
    </div>
  </div>

</div>
*{
  box-sizing:border-box;
  font-family:'Inter',sans-serif;
}

body{
  min-height:100vh;
  display:grid;
  place-items:center;
  background:#f5f7fb;
}

/* Timeline wrapper */
.timeline{
  position:relative;
  max-width:600px;
  width:100%;
  padding-left:60px;
}

/* Vertical line (FIXED) */
.timeline-line{
  position:absolute;
  left:28px;
  top:14px;
  bottom:14px;
  width:3px;
  background:linear-gradient(to bottom,#6b7cff,#9f7bff);
  border-radius:2px;
}

/* Item */
.timeline-item{
  position:relative;
  margin-bottom:50px;
}

.timeline-item:last-child{
  margin-bottom:0;
}

/* Dot */
.timeline-dot{
  position:absolute;
  left:-46px;
  top:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#fff;
  border:3px solid #6b7cff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:#6b7cff;
  z-index:2;
}

/* Card */
.timeline-card{
  background:#fff;
  border-radius:16px;
  padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

.timeline-card h3{
  font-size:18px;
  margin-bottom:6px;
}

.timeline-card p{
  font-size:14px;
  color:#666;
  line-height:1.5;
}

.timeline-card span{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  font-weight:600;
  color:#6b7cff;
}
Categories

Timeline

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
