"ABK-t"
Bootstrap 4.1.1 Snippet by admy

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Zigzag Workflow Timeline</title> <!-- External Libraries --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" /> <!-- Custom CSS --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container work-process pb-5 pt-5"> <div class="title mb-5 text-center"> <h3>Our <span class="site-color">Process Flow</span></h3> </div> <!-- Process Steps --> <!-- Paste from STEP A to STEP H exactly as shown earlier --> <!-- Each has its own box with position animal and unique seq --> <!-- Example Step A shown, copy others accordingly --> <div class="row justify-content-between"> <div class="process-box process-A" data-aos="fade-right"> <div class="process-step" style="left: calc(100% - 22px);">A</div> <div class="entry"> <div class="action-block"> <div class="header">Initiator</div> <div class="status submitted">📝 Submitted</div> <div class="date" data-seq="0">—</div> </div> <div class="identity-block"> <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Ali" /> <div class="identity-info"> <div class="name">Ali Rahman</div> <div class="title">Engineer</div> <div class="position">🦁 Lion</div> </div> </div> <div class="remarks-box">Initial submission created.</div> </div> </div> </div> <!-- Add Step B through H here (use previous message example) --> </div> <!-- Scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="script.js"></script> </body> </html>
body { background: #eef2f7; font-family: 'Segoe UI', sans-serif; color: #333; padding: 40px 0; } .work-process { position: relative; } .work-process:before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #c5c5c5; transform: translateX(-50%); z-index: 1; } .process-box { background: #fff; padding: 20px; border-radius: 10px; position: relative; box-shadow: 0 2px 12px rgba(0,0,0,0.05); margin: 30px 0; width: calc(50% - 40px); z-index: 2; } .process-A { margin-left: 0; } .process-B { margin-left: auto; } .process-step { width: 45px; height: 45px; border-radius: 50%; background: #00BCD4; color: #fff; display: grid; place-items: center; font-size: 1.2em; position: absolute; top: -22px; } .entry { display: flex; gap: 15px; align-items: flex-start; margin-top: 10px; } .action-block { width: 150px; } .action-block .header { font-weight: bold; margin-bottom: 4px; } .status { font-weight: bold; margin-bottom: 4px; line-height: 1.2; } .status.submitted { color: #3498db; } .status.approved { color: #27ae60; } .status.waiting { color: #f39c12; } .status.returned { color: #2980b9; } .date { font-size: 0.85em; color: #777; } .identity-block { display: flex; gap: 12px; align-items: center; width: 250px; } .identity-block img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #ccc; } .identity-info .name { font-weight: 600; } .identity-info .title, .identity-info .position { font-size: 0.9em; color: #666; } .identity-info .position { margin-top: 3px; color: #777; } .remarks-box { flex: 1; background: #f7f9fb; padding: 12px 14px; border-radius: 6px; font-size: 0.95em; color: #444; }
// Initialize AOS (animation on scroll) AOS.init(); // Auto-fill timestamp based on data-seq attribute const startTime = new Date(); document.querySelectorAll('.date').forEach(el => { const seq = parseInt(el.getAttribute('data-seq') || 0); const stepTime = new Date(startTime.getTime() + seq * 2 * 60000); // +2 min per step el.textContent = stepTime.toLocaleString(); });

Questions / Comments: