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:

Các làm đơn giản các bạn chỉ việc copy đoạn code bên dưới dán vào vị trí muốn hiển thị là xong.

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>  

<style>

@import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&amp;display=swap&#39;);*{margin:0;padding:0;box-sizing:border-box;font-family:&quot;Poppins&quot;,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:&quot;&quot;;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>