Rich Timeline Component - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ngày 1: Đến và dạo quanh Hồ Hoàn Kiếm</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { background-color: #f8f9fa; } .itinerary-header { margin-top: 20px; margin-bottom: 15px; } .itinerary-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid #ddd; } .itinerary-item:last-child { border-bottom: none; } .time { font-weight: 500; color: #888; } .dots { margin-left: 5px; font-weight: 500; color: #888; } .place-card { padding: 15px; background-color: white; border: 1px solid #ddd; border-radius: 10px; margin-top: 15px; } .place-card .place-name { font-weight: 600; margin-bottom: 5px; } .place-card .place-address { color: #888; font-size: 14px; } .place-card .btn { font-size: 14px; padding: 5px 10px; } </style> </head> <body> <div class="container mt-3"> <!-- Itinerary Day Header --> <div class="itinerary-header"> <h6>Thứ tư · Ngày 18 tháng 9</h6> <h4>Ngày 1: Đến và dạo quanh Hồ Hoàn Kiếm</h4> </div> <!-- Itinerary Item 1 --> <div class="itinerary-item"> <div> <div class="time">10:00 sáng</div> <div>Đến Sân bay quốc tế Nội Bài</div> </div> <div class="dots">...</div> </div> <!-- Itinerary Item 2 --> <div class="itinerary-item"> <div> <div class="time">10:30 sáng</div> <div>Vận chuyển đến nơi ở (phương tiện công cộng)</div> </div> <div class="dots">...</div> </div> <!-- Itinerary Item 3 --> <div class="itinerary-item"> <div> <div class="time">11:30 sáng</div> <div>Nhận phòng tại nơi lưu trú</div> </div> <div class="dots">...</div> </div> <!-- Accommodation Card --> <div class="place-card"> <div class="place-name">Nhà nghỉ Hà Nội Buffalo</div> <div class="place-address">44 P. Hàng Giấy, Hàng Buồm, Hoàn Kiếm, Hà Nội, Việt Nam</div> <div class="mt-2"> <a href="#" class="btn btn-outline-primary">Trang web</a> <a href="tel:+84987654321" class="btn btn-outline-primary">Gọi</a> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html> đây là base code tôi muốn cho nó đẹp hơn
