185113-Timeline2

Description

• adding timeline2 style with Team Section
• view demo – password: abc
• buy me a coffee if it is useful for you

#1. Install Code

#1.1. First you need to add Section

Choose Team > Choose section with (i) icon. You need to add 3 Team sections

Make sure use Simple List

#1.2. Next, enable these options

and add your desired text. With Title, use ## to split text

Freelancer ## 2013 – present

#1.3. Hover on top right of section > click Edit Section

at Anchor Link, enter word: timeline2

timeline2

#1.4. Hover on page where you added Team Section > Click Gear icon

Click Advanced > Paste this code

<!-- @tuanphan - 185113-Timeline2 -->
<style>
section[id*="timeline2"] .user-items-list{display:none!important}

section[id*="timeline2"] .tp-timeline{
  position:relative;
  max-width:1100px;
  margin:80px auto;
  padding:0 20px;
}
section[id*="timeline2"] .tp-timeline:before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:#ddd;
  transform:translateX(-50%);
}
section[id*="timeline2"] .tp-item{
  position:relative;
  width:50%;
  padding:20px 40px;
  box-sizing:border-box;
}
section[id*="timeline2"] .tp-item:nth-child(odd){left:0;text-align:right}
section[id*="timeline2"] .tp-item:nth-child(even){left:50%;text-align:left}
section[id*="timeline2"] .tp-dot{
  position:absolute;
  top:32px;
  width:14px;
  height:14px;
  border:3px solid #ff4d4f;
  background:#fff;
  border-radius:50%;
}
section[id*="timeline2"] .tp-item:nth-child(odd) .tp-dot{right:-7px}
section[id*="timeline2"] .tp-item:nth-child(even) .tp-dot{left:-7px}
section[id*="timeline2"] .tp-card{
  display:inline-block;
  background:#f7f7f7;
  padding:14px 18px;
  border-radius:8px;
  max-width:360px;
}
section[id*="timeline2"] .tp-title{
  font-size:18px;
  font-weight:600;
  line-height:1.2;
}
section[id*="timeline2"] .tp-date{
  font-size:14px;
  color:#ff4d4f;
  margin-left:8px;
  white-space:nowrap;
}
section[id*="timeline2"] .tp-desc{
  margin-top:8px;
  font-style:italic;
  color:#555;
}
@media(max-width:768px){
  section[id*="timeline2"] .tp-timeline:before{left:20px}
  section[id*="timeline2"] .tp-item{
    width:100%;
    left:0!important;
    padding:18px 20px 18px 60px;
    text-align:left!important;
  }
  section[id*="timeline2"] .tp-item .tp-dot{left:14px;right:auto}
  section[id*="timeline2"] .tp-card{max-width:520px}
}
</style>

<script>
(()=>{const e=()=>document.body.classList.contains("sqs-edit-mode"),t=()=>{if(e())return;const t=(()=>{const e=Array.from(document.querySelectorAll('section[id*="timeline2"]'));return e.length?e[0]:Array.from(document.querySelectorAll("section")).find((e=>e.querySelector(".user-items-list-item-container")))||null})();return!!t&&(e=>{if(!e)return!1;const t=e.querySelector(".user-items-list"),n=e.querySelector(".user-items-list-item-container");if(!t||!n)return!1;const r=Array.from(n.querySelectorAll("li.list-item"));if(!r.length)return!1;e.querySelectorAll(":scope .tp-timeline").forEach((e=>e.remove()));const i=document.createElement("div");return i.className="tp-timeline",r.forEach((e=>{const t=e.querySelector(".list-item-content__title"),n=e.querySelector(".list-item-content__description"),{title:r,date:c}=(e=>{const t=(e||"").replace(/\s+/g," ").trim().split("##");return{title:(t[0]||"").trim(),date:(t[1]||"").trim()}})(t?t.textContent:""),o=n?n.innerHTML.trim():"",l=document.createElement("div");l.className="tp-item";const s=document.createElement("div");s.className="tp-dot";const d=document.createElement("div");d.className="tp-card";const a=document.createElement("div");if(a.className="tp-title",a.textContent=r,c){const e=document.createElement("span");e.className="tp-date",e.textContent=c,a.appendChild(e)}if(d.appendChild(a),o){const e=document.createElement("div");e.className="tp-desc",e.innerHTML=o,d.appendChild(e)}l.appendChild(s),l.appendChild(d),i.appendChild(l)})),t.parentNode.insertBefore(i,t),e.classList.add("tp-done"),!0})(t)},n=()=>{let e=0;const n=()=>{e++,t()||e>=80||requestAnimationFrame(n)};n()};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",n,{once:!0}):n(),window.addEventListener("load",(()=>{e()||t()}),{once:!0})})();
</script>

#2. Customize

#2.1. To change Title + Red text style, find these

section[id*="timeline2"] .tp-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}
section[id*="timeline2"] .tp-date {
    font-size: 14px;
    color: #ff4d4f;
    margin-left: 8px;
    white-space: nowrap;
}

with description text, find these

section[id*="timeline2"] .tp-desc {
    margin-top: 8px;
    font-style: italic;
    color: #555;
}

#2.2. To change circle icon, find these

section[id*="timeline2"] .tp-dot {
    position: absolute;
    top: 32px;
    width: 14px;
    height: 14px;
    border: 3px solid #ff4d4f;
    background: #fff;
    border-radius: 50%;
}

#2.3. To change gray vertical line, find these

section[id*="timeline2"] .tp-timeline:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #ddd;
    transform: translateX(-50%);
}