Dịch vụ nâng cấp, sửa lỗi, tối ưu, thiết kế blogspot

Dòng thời gian timeline đẹp cho blogspot

Dòng thời gian timeline đẹp cho blogspot

Cập nhật ngày Bởi
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 HTMLCSS

Dòng thời gian timeline đẹp cho blogspot

Các bạn có thể xem demo của Dòng thời gian timeline đẹp cho blogspot bên dưới:

Dòng thời gian timeline đẹp cho blogspot

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://ift.tt/2QB6N7l' rel='stylesheet'/>  
<style>
@import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:[email protected];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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</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.themeblogger.net kho tổng hợp mẫu blogspot dành cho bạn.</p>
        <div class='bottom'>
          <a href='#'>Xem thêm</a>
          <i>- themeblogger.net</i>
        </div>
      </section>
    </div>
  </div> 

Nhận xét