สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป

เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้

CSS (ตัด media query ออก เนื่องจากใช้ flex box ช่วยในการทำ responsive อยู่แล้ว)

.timeline {
    position: relative;
    /*max-width: 1200px;*/
    margin: 0 auto;
}

    .timeline::after {
        content: '';
        position: absolute;
        width: 6px;
        background-color: #977c44;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

.timeline-container {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

    .timeline-container::after {
        content: '';
        position: absolute;
        width: 25px;
        height: 25px;
        right: -12px;
        background-color: white;
        border: 4px solid #FF9F55;
        top: 15px;
        border-radius: 50%;
        z-index: 1;
    }

.timeline-left {
    left: 0;
}

.timeline-right {
    left: 50%;
}

.timeline-left::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent white;
}

.timeline-right::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
}

.timeline-right::after {
    left: -12px;
}

.timeline-content {
    padding: 20px 30px;
    background-color: white;
    position: relative;
    border-radius: 6px;
}

HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง)

/*Include Bootstrap 5*/
<link href="css/bootstrap.min.css" rel="stylesheet" />

<div class="timeline">
    <div class="timeline-container timeline-left">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
        </div>
    </div>
    <div class="timeline-container timeline-right">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พนมรุ้ง ปราสาทหินพนมรุ้งเป็นโบสถ์พราหมณ์ลัทธิไศวะ มีการบูรณะก่อสร้างต่อเนื่องกันมาหลายสมัย ตั้งแต่ประมาณพุทธศตวรรษที่ 15 ถึงพุทธศตวรรษที่ 17 และในพุทธศตวรรษที่ 18 พระเจ้าชัยวรมันที่ 7 แห่ง...</p>
        </div>
    </div>
    <div class="timeline-container timeline-left">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location01.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1601-1700</h3>
            </div>
            <p>อุทยานประวัติศาสตร์พระนครศรีอยุธยา สัมผัสความรุ่งเรืองของกรุงศรีอยุธยา อดีตราชธานีที่ปกครองแผ่นดินมายาวนานถึง 417 ปี ภายในมีโบราณสถานมากมายน่าเที่ยว ทั้ง พระราชวังหลวง วัดพระศรีสรรเพชญ์ วัดราชบูรณะ วัดมหาธาตุ วัดไชย...</p>
        </div>
    </div>
    <div class="timeline-container timeline-right">
        <div class="timeline-content shadow-lg">
            <div class="d-flex justify-content-between align-items-baseline">
                <img src="/images/location02.jpg" class="rounded-3 img-shadow" width="150" height="150" />
                <h3 class="text-brown text-shadow">พ.ศ. 1792-2006</h3>
            </div>
            <p>อุทยานประวัติศาสตร์ศรีสัชนาลัย ศรีสัชนาลัย มีพัฒนาการมาแต่สมัยก่อนประวัติศาสตร์ตอนปลาย ประมาณ ๒,๓๐๐ – ๑,๕๐๐ ปีมาแล้ว โดยปรากฏชื่อควบคู่ไปกับเมืองสุโขทัยที่เป็นราชธานี สันนิษฐานว่าเมืองศรีสัชนาลัยมีความสำคัญในฐาน...</p>
        </div>
    </div>
</div>

ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ