Free Section
Connected Pipeline Workflow Process
A 4-step horizontal workflow pipeline with numbered glowing nodes, connecting dashed lines, and progressive feature descriptions.
Colours in this gradient
#090d16#3b82f6#8b5cf6#ffffff
background: ;The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="proc-sec">
<div class="proc-header">
<span class="proc-badge">How It Works</span>
<h2>From local code to edge deployment</h2>
<p>Four streamlined steps to ship low-latency vector search across 35 global nodes.</p>
</div>
<div class="proc-grid">
<div class="proc-card">
<div class="proc-num">01</div>
<h3>Connect Data Source</h3>
<p>Link your existing PostgreSQL, MongoDB, or S3 bucket with one-click CDC streaming.</p>
</div>
<div class="proc-card">
<div class="proc-num">02</div>
<h3>Generate Embeddings</h3>
<p>Automated batch ingestion transforms raw text and image chunks into optimized vector floats.</p>
</div>
<div class="proc-card">
<div class="proc-num">03</div>
<h3>Index & Shard</h3>
<p>Hierarchical Navigable Small World (HNSW) graph indexing with SIMD acceleration.</p>
</div>
<div class="proc-card">
<div class="proc-num">04</div>
<h3>Query Globally</h3>
<p>Deliver sub-2ms nearest-neighbor inference queries from the user's nearest regional edge node.</p>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a 4-step connected pipeline workflow process section in HTML and CSS. Requirements: - 4-column responsive grid layout. - Monospace step indicators (01, 02, 03, 04) with vibrant blue color. - Structured process titles and concise architectural explanations. - Hover lift transitions. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use CSS grid with repeat(4, 1fr) that adapts to 2 columns on tablet and 1 on mobile.
- 2
Highlight step numbers with monospace font and high-contrast color.
Customisation tips
- Keep text descriptions concise so all 4 cards retain balanced heights.