<div id="horizontal" class="timeline"
data-mode="horizontal"
data-move-items="1"
data-min-width="700"
data-horizontal-start-position="top"
data-same-side-nodes="true"
data-node-color="#5f0b41"
data-line-color="#5f0b41"
data-nav-color="#b4157b"
>
<div class="timeline__wrap">
<div class="timeline__items">
<!-- Node 1 -->
<div id="1" class="timeline__item" data-aria-label="Node 1: Date October 1st, 2023. Title: Colored Tiles">
<div class="timeline__content">
<div class="timeline__date">10/01/2023</div>
<img class="timeline__image" src="../../assets/img/sample1.jpg" alt="Colored Tiles">
<h3 class="timeline__heading">Colored Tiles</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 2 -->
<div id="2" class="timeline__item" data-aria-label="Node 2: Date October 5th, 2023. Title: Library Books">
<div class="timeline__content">
<div class="timeline__date">10/05/2023</div>
<img class="timeline__image" src="../../assets/img/sample2.jpg" alt="Library Books"/>
<h3 class="timeline__heading">Library Books</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 3 -->
<div id="3" class="timeline__item" data-aria-label="Node 3: Date October 7th, 2023. Title: Country Road">
<div class="timeline__content">
<div class="timeline__date">10/07/2023</div>
<img class="timeline__image" src="../../assets/img/sample3.jpg" alt="Country Road"/>
<h3 class="timeline__heading">Country Road</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 4 -->
<div id="4" class="timeline__item" data-aria-label="Node 4: Date October 12th, 2023. Title: Ocean Waves">
<div class="timeline__content">
<div class="timeline__date">10/12/2023</div>
<img class="timeline__image" src="../../assets/img/sample4.jpg" alt="Ocean Waves"/>
<h3 class="timeline__heading">Ocean Waves</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 5 -->
<div id="5" class="timeline__item" data-aria-label="Node 5: Date October 15th, 2023. Title: Pretty Flower">
<div class="timeline__content">
<div class="timeline__date">10/15/2023</div>
<img class="timeline__image" src="../../assets/img/sample5.jpg" alt="Pretty Flower">
<h3 class="timeline__heading">Pretty Flower</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 6 -->
<div id="6" class="timeline__item" data-aria-label="Node 6: Date October 18th, 2023. Title: Volcanic Rock">
<div class="timeline__content">
<div class="timeline__date">10/18/2023</div>
<img class="timeline__image" src="../../assets/img/sample6.jpg" alt="Volcanic Rock"/>
<h3 class="timeline__heading">Volcanic Rock</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 7 -->
<div id="7" class="timeline__item" data-aria-label="Node 7: Date October 23rd, 2023. Title: Rough Texture">
<div class="timeline__content">
<div class="timeline__date">10/23/2023</div>
<img class="timeline__image" src="../../assets/img/sample7.jpg" alt="Rough Texture"/>
<h3 class="timeline__heading">Rough Texture</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 8 -->
<div id="8" class="timeline__item" data-aria-label="Node 8: Date October 25th, 2023. Title: Majestic Eagle">
<div class="timeline__content">
<div class="timeline__date">10/25/2023</div>
<img class="timeline__image" src="../../assets/img/sample8.jpg" alt="Majestic Eagle"/>
<h3 class="timeline__heading">Majestic Eagle</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 9 -->
<div id="9" class="timeline__item" data-aria-label="Node 9: Date October 27th, 2023. Title: Yellow Daffodils">
<div class="timeline__content">
<div class="timeline__date">10/27/2023</div>
<img class="timeline__image" src="../../assets/img/sample9.jpg" alt="Yellow Daffodils"/>
<h3 class="timeline__heading">Yellow Daffodils</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 10 -->
<div id="10" class="timeline__item" data-aria-label="Node 10: Date October 29th, 2023. Title: Brick Wall">
<div class="timeline__content">
<div class="timeline__date">10/29/2023</div>
<img class="timeline__image" src="../../assets/img/sample10.jpg" alt="Brick Wall"/>
<h3 class="timeline__heading">Brick Wall</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 11 -->
<div id="11" class="timeline__item" data-aria-label="Node 11: Date October 30th, 2023. Title: Intricate Flower">
<div class="timeline__content">
<div class="timeline__date">10/30/2023</div>
<img class="timeline__image" src="../../assets/img/sample11.jpg" alt="Intricate Flower"/>
<h3 class="timeline__heading">Intricate Flower</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
<!-- Node 12 -->
<div id="12" class="timeline__item" data-aria-label="Node 12: Date November 1st, 2023. Title: Pink Rose">
<div class="timeline__content">
<div class="timeline__date">11/01/2023</div>
<img class="timeline__image" src="../../assets/img/sample12.jpg" alt="Pink Rose"/>
<h3 class="timeline__heading">Pink Rose</h3>
<div class="timeline__summary">Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</div>
</div>
<div class="timeline__modal-content">
<p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
<p>Lorem ipsum dolor sit amet, officia excepteur ex fugiat reprehenderit enim labore culpa sint ad nisi Lorem pariatur mollit ex esse exercitation amet. Nisi anim cupidatat excepteur officia. Reprehenderit nostrud nostrud ipsum Lorem est aliquip amet voluptate voluptate dolor minim nulla est proident. Nostrud officia pariatur ut officia. Sit irure elit esse ea nulla sunt ex occaecat reprehenderit commodo officia dolor Lorem duis laboris cupidatat officia voluptate. Culpa proident adipisicing id nulla nisi laboris ex in Lorem sunt duis officia eiusmod. Aliqua reprehenderit commodo ex non excepteur duis sunt velit enim. Voluptate laboris sint cupidatat ullamco ut ea consectetur et est culpa et culpa duis.</p>
</div>
</div>
</div>
</div>
</div>
