Create a zigzag timeline

client/patterns/zigzag-timeline/zigzag-timeline.css

@@ -0,0 +1,48 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.zigzag-timeline__item {
+    /* Used to position the milestone */
+    position: relative;
+
+    /* Border */
+    border-bottom: 1px solid #71717A;
+
+    /* Take full width */
+    width: 100%;
+}
+
+.zigzag-timeline__milestone {
+    /* Absolute position */
+    position: absolute;    
+    top: 50%;
+
+    /* Circle it */
+    border-radius: 50%;
+    height: 2rem;
+    width: 2rem;
+
+    /* Misc */
+    background: #71717A;
+}
+
+/* Styles for even items */
+.zigzag-timeline__item:nth-child(2n) {
+    border-left: 1px solid #71717A;
+    
+}
+.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone {
+    left: 0;
+    transform: translate(-50%, -50%);    
+}
+
+/* Styles for odd items */
+.zigzag-timeline__item:nth-child(2n + 1) {
+    border-right: 1px solid #71717A;
+}
+.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone {
+    right: 0;
+    transform: translate(50%, -50%);
+}