<?xml version="1.0" encoding="utf-8"?>
<odoo>

<template name="Timeline Images" id="s_timeline_images">
    <section class="s_timeline_images o_colored_level pt48 pb48">
        <div class="container">
            <h2 class="h3-fs" style="text-align: center;">Evolving together</h2>
            <p class="lead" style="text-align: center;">Highlight your history, showcase growth and key milestones.</p>
            <div class="position-relative pt-3">
                <div class="s_timeline_images_row position-relative d-flex flex-column" data-name="Milestone">
                    <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                    <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none" contenteditable="false"/>
                    <div class="s_timeline_images_content w-100 ps-4">
                        <div class="row">
                            <div class="col-12 col-lg-4 pb16">
                                <small class="text-muted">13/06/2023</small>
                                <h3 class="h4-fs">First Milestone</h3>
                            </div>
                            <div class="col-12 col-lg-8 pb16">
                                <p>
                                    <img src="/web/image/website.s_timeline_images_default_image_1" class="img img-fluid rounded" alt="" style="width: 100% !important;"/>
                                </p>
                                <p>A timeline is a graphical representation on which important events are marked.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="s_timeline_images_row position-relative d-flex flex-column" data-name="Milestone">
                    <div class="o_dot_line position-absolute top-0 bottom-0 w-0 mb-1 border-start pe-none"/>
                    <span class="o_dot o_not_editable position-absolute translate-middle-x rounded-circle pe-none" contenteditable="false"/>
                    <div class="s_timeline_images_content w-100 ps-4">
                        <div class="row">
                            <div class="col-12 col-lg-4 pb16">
                                <small class="text-muted">13/06/2023</small>
                                <h3 class="h4-fs">Second Milestone</h3>
                            </div>
                            <div class="col-12 col-lg-8 pb16">
                                <p>
                                    <img src="/web/image/website.s_timeline_images_default_image_2" class="img img-fluid rounded" alt="" style="width: 100% !important;"/>
                                </p>
                                <p>A timeline is a graphical representation on which important events are marked.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

</odoo>
