Xin chào các bạn, trong bài viết này, mình chia sẻ cách tạo Thiết kế dòng thời gian timeline chuẩn responsive trên mobile chỉ sử dụng HTML và CSS.
Các bạn có thể xem demo của Dòng thời gian timeline đẹp cho blogspot bên dưới:
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/><style>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}html{scroll-behavior:smooth}::selection{color:#fff;background:#00bcd4}.content-wrapper{max-width:1080px;margin:50px auto;padding:15px 20px;position:relative;background:#00bcd4}.content-wrapper .center-line{position:absolute;height:100%;width:4px;background:#fff;left:50%;top:20px;transform:translateX(-50%)}.content-wrapper .row-x{display:flex}.content-wrapper .row-x-1{justify-content:flex-start}.content-wrapper .row-x-2{justify-content:flex-end}.content-wrapper .row-x section{background:#fff;border-radius:5px;width:calc(50% - 40px);padding:20px;position:relative}.content-wrapper .row-x section::before{position:absolute;content:"";height:15px;width:15px;background:#fff;top:28px;z-index:-1;transform:rotate(45deg)}.row-x-1 section::before{right:-7px}.row-x-2 section::before{left:-7px}.row-x section .icon,.center-line .scroll-icon{position:absolute;background:#f2f2f2;height:40px;width:40px;text-align:center;line-height:40px;border-radius:50%;color:#00bcd4;font-size:17px;box-shadow:0 0 0 4px #fff,inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05)}.center-line .scroll-icon{bottom:0;left:50%;font-size:25px;transform:translateX(-50%)}.row-x-1 section .icon{top:15px;right:-60px}.row-x-2 section .icon{top:15px;left:-60px}.row-x section .details,.row-x section .bottom{display:flex;align-items:center;justify-content:space-between}.row-x section .details .title{font-size:22px;font-weight:600}.row-x section p{margin:10px 0 17px 0}.row-x section .bottom a{text-decoration:none;background:#00bcd4;color:#fff;padding:7px 15px;border-radius:5px;font-weight:400;transition:all 0.3s ease}.row-x section .bottom a:hover{transform:scale(0.97)}@media(max-width:790px){.content-wrapper .center-line{left:40px}.content-wrapper .row-x{margin:30px 0 3px 60px}.content-wrapper .row-x section{width:100%}.row-x-1 section::before{left:-7px}.row-x-1 section .icon{left:-60px}}@media(max-width:440px){.content-wrapper .center-line,.row-x section::before,.row-x section .icon{display:none}.content-wrapper .row-x{margin:10px 0}}</style><div class='content-wrapper'><div class='center-line'><a class='scroll-icon' href='#'><i class='fas fa-caret-up'/></a></div><div class='row-x row-x-1'><section><i class='icon fas fa-home'/><div class='details'><span class='title'>Blogspot bán hàng</span><span>01/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div><div class='row-x row-x-2'><section><i class='icon fas fa-star'/><div class='details'><span class='title'>Blogspot landing page</span><span>02/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div><div class='row-x row-x-1'><section><i class='icon fas fa-rocket'/><div class='details'><span class='title'>Blogspot doanh nghiệp</span><span>03/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div><div class='row-x row-x-2'><section><i class='icon fas fa-globe'/><div class='details'><span class='title'>Blogspot tin tức, tạp chí</span><span>04/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div><div class='row-x row-x-1'><section><i class='icon fas fa-paper-plane'/><div class='details'><span class='title'>Blogspot bất động sản</span><span>05/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div><div class='row-x row-x-2'><section><i class='icon fas fa-map-marker-alt'/><div class='details'><span class='title'>Blogspot công ty</span><span>06/3/2021</span></div><p>Template blogspot bán hàng chuyên nghiệp hiện đại chuẩn seo, truy cập ngay trang www.giaodien.blog kho tổng hợp mẫu blogspot dành cho bạn.</p><div class='bottom'><a href='#'>Xem thêm</a><i>- Giaodien.blog</i></div></section></div></div>
HIỆN TẠI CÓ 0 BÌNH LUẬN
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé