Create a zigzag timeline

client/constants/Pattern.ts

@@ -101,6 +101,7 @@ enum Pattern {
     Voting = 'Voting',
     Watermark = 'Watermark',
     Wizard = 'Wizard',
+    ZigzagTimeline = 'Zigzag timeline',
 }
 
 export default Pattern;

client/pages/ExplorePage.tsx

@@ -159,6 +159,7 @@ const ExplorePage = () => {
                                 <CoverCard pattern={Pattern.VideoBackground} />
                                 <CoverCard pattern={Pattern.Voting} />
                                 <CoverCard pattern={Pattern.Watermark} />
+                                <CoverCard pattern={Pattern.ZigzagTimeline} />
                             </div>
                         </section>
 

client/patterns/zigzag-timeline/Cover.tsx

@@ -0,0 +1,79 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import Frame from '../../placeholders/Frame';
+import Line from '../../placeholders/Line';
+import Rectangle from '../../placeholders/Rectangle';
+
+const Cover: React.FC<{}> = () => {
+    return (
+        <Frame>
+            <div
+                style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    justifyContent: 'center',
+                    padding: '0.5rem',
+                }}
+            >
+                <div
+                    style={{
+                        borderBottom: '1px solid #71717A',
+                        borderRight: '1px solid #71717A',
+                        padding: '0.5rem 1rem',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            background: '#71717A',
+                            borderRadius: '50%',
+                            height: '.75rem',
+                            position: 'absolute',
+                            right: 0,
+                            top: '50%',
+                            transform: 'translate(50%, -50%)',
+                            width: '.75rem',
+                        }}
+                    />
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
+                </div>
+                <div
+                    style={{
+                        borderLeft: '1px solid #71717A',
+                        padding: '0.5rem 1rem',
+                        position: 'relative',
+                        width: '100%',
+                    }}
+                >
+                    <div
+                        style={{
+                            background: '#71717A',
+                            borderRadius: '50%',
+                            height: '.75rem',
+                            left: 0,
+                            position: 'absolute',                            
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: '.75rem',
+                        }}
+                    />
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Rectangle /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '60%' }}><Line /></div>
+                    <div style={{ marginBottom: '0.25rem', width: '80%' }}><Line /></div>
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/zigzag-timeline/Details.tsx

@@ -0,0 +1,135 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+import Pattern from '../../constants/Pattern';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import Block from '../../placeholders/Block';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+
+import './zigzag-timeline.css';
+
+const Details: React.FC<{}> = () => {
+    return (
+        <DetailsLayout pattern={Pattern.ZigzagTimeline}>
+            <Helmet>
+                <meta name="description" content="Create a zigzag timeline" />
+                <meta name="og:description" content="Create a zigzag timeline" />
+                <meta name="twitter:description" content="Create a zigzag timeline" />
+                <meta name="keywords" content="css timeline, css zigzag timeline" />
+            </Helmet>
+            <div className='p-8 pb-20'>
+                <BrowserFrame
+html={`
+<div class="zigzag-timeline__item">
+    <!-- Milestone -->
+    <div className="zigzag-timeline__milestone">...</div>
+
+    <!-- Content -->
+    ...
+</div>
+
+<!-- Repeat other items -->
+...
+`}
+css={`
+.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%);
+}
+`}
+                >
+                    <div
+                        style={{
+                            alignItems: 'center',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                            justifyContent: 'center',
+                            margin: '0 auto',
+                            padding: '0.5rem',
+                            width: '60%',
+                        }}
+                    >
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{                                
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone'/>
+                            <div style={{ marginBottom: '1rem', width: '80%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={10} />
+                        </div>
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone' />
+                            <div style={{ marginBottom: '1rem', width: '60%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={20} />
+                        </div>
+                        <div
+                            className='zigzag-timeline__item'
+                            style={{
+                                padding: '1rem 1.5rem',
+                            }}
+                        >
+                            <div className='zigzag-timeline__milestone' />
+                            <div style={{ marginBottom: '1rem', width: '70%' }}><Rectangle /></div>
+                            <Block numberOfBlocks={15} />
+                        </div>
+                    </div>
+                </BrowserFrame>
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

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%);
+}

public/sitemap.xml

@@ -1,5 +1,8 @@
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
+    <url><loc>https://csslayout.io</loc></url>
     <url><loc>https://csslayout.io/patterns</loc></url>
+
+    <!-- Patterns -->
     <url><loc>https://csslayout.io/patterns/accordion</loc></url>
     <url><loc>https://csslayout.io/patterns/arrow-buttons</loc></url>
     <url><loc>https://csslayout.io/patterns/avatar</loc></url>
@@ -97,4 +100,5 @@
     <url><loc>https://csslayout.io/patterns/voting</loc></url>
     <url><loc>https://csslayout.io/patterns/watermark</loc></url>
     <url><loc>https://csslayout.io/patterns/wizard</loc></url>
+    <url><loc>https://csslayout.io/patterns/zigzag-timeline</loc></url>
 </urlset>