TimeLine

Anleitung

1. Gehe zu ACP ➜ Inhalt Boxen / Seiten ➜ + Box / Seite hinzufügen oder editiere eine vorhandene Box / Seite.
   ⚠ Hinweis: Beachte, dass die Box / Seite zwingend den Typ HTML entsprechen muss!
2. Kopiere den o.g. HTML-Quellcode und füge diesen dort ein und speichere ab.
3. Gehe zu ACP ➜ Anpassung ➜ Stile ➜ DEIN STIL ➜ Tab: Erweiterte Einstellungen
4. Kopiere den o.g. CSS-Quellcode und füge diesen dort ein und speichere ab.

5. Fertig!

   HTML: HTML

   <!-- START: CODE -->
   <section id="timeline">
         <ul>
           <li>
             <i class="fa fa-html5"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>HTML Language</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-css3"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>CSS Language</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-jsfiddle"></i>
             <div class="box">
               <h3 class="title">
                 <span class="year">2024</span>JavaScript Programming
               </h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-database"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>SQL Server</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-code"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>C# Programming</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-code"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>PHP Programming</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-code"></i>
             <div class="box">
               <h3 class="title"><span class="year">20240</span>React JS</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
           <li>
             <i class="fa fa-code"></i>
             <div class="box">
               <h3 class="title"><span class="year">2024</span>Node JS</h3>
               <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo possimus in ipsum iure eaque atque esse commodi molestiae, et odio!</p>
               <button class="button">Mehr</button>
             </div>
           </li>
         </ul>
       </section>
   
   <script>
   "use strict";
   const boxes = document.querySelectorAll(".box");
   window.addEventListener("scroll", DisplayContent);
   DisplayContent();
   function DisplayContent() {
     const TriggerBottom = (window.innerHeight / 5) * 4;
     boxes.forEach((box) => {
       const topBox = box.getBoundingClientRect().top;
       if (topBox < TriggerBottom) {
         box.classList.add("show");
       } else {
         box.classList.remove("show");
       }
     });
   }
   </script>
   <!-- ENDE: CODE -->

   Alles anzeigen

<!-- START: CODE -->
.title {
  box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 1rem 0rem 1rem 0.7rem;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #fff;
  font-size: 1.3rem;
  background-color: #B51836;
}
.year {
  background-color: #fff;
  padding: 0.2rem 0.8rem;
  border-radius: 10px;
  color: #2c3e50;
  font-size: 0.9rem;
  margin: 0 0.5rem;
}
#timeline p {
  padding: 1rem 0 1rem 1rem;
  color: #000;
}
#timeline ul {
  padding: 50px 0;
}
#timeline ul li {
  list-style: none;
  position: relative;
  width: 7px;
  margin: 0 auto;
  padding-top: 50px;
  background-color: #B51836;
}
#timeline ul li .box {
  position: relative;
  bottom: 0;
  width: 450px;
  background-color: #fff !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  transform: translateX(400%);
  transition: all 0.5s ease-in-out;
}
#timeline ul li:nth-child(odd) .box {
  left: 50px;
}
#timeline ul li:nth-child(even) .box {
  left: -500px;
  transform: translateX(-400%);
}
#timeline ul li .box.show {
  transform: translateX(0%);
  transition: all 0.5s ease-in-out;
}
#timeline ul li i {
  position: absolute;
  left: 50%;
  top: 80px;
  width: 45px;
  height: 45px;
  background: #2c3e50;
  transform: translateX(-50%);
  border-radius: 50%;
}
#timeline ul li i::before {
  font-size: 2.2em;
}
#timeline button {
  margin: 0.5rem 0rem 1rem 1rem;
  padding: 0.5rem 1rem;
}
#timeline .box:before {
  content: "";
  position: absolute;
  top: 5px;
  width: 0;
  right: 0;
  border-style: solid;
}
#timeline ul li:nth-child(odd) .box:before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #B51836;
}
#timeline ul li:nth-child(even) .box:before {
  right: -15px;
  border-width: 8px 0px 8px 16px;
  border-color: transparent #B51836;
}
@media (max-width: 900px) {
  #timeline ul li .box {
    width: calc(70vw);
    left: 45px;
  }
  #timeline ul li:nth-child(even) .box:before {
    left: -15px;
    border-width: 8px 16px 8px 0px;
    border-color: transparent #B51836;
  }
  #timeline ul li:nth-child(odd) .box {
    left: 40px;
  }
  #timeline ul li:nth-child(even) .box {
    left: -390px;
  }
}
@media (max-width: 768px) {
  #timeline ul li {
    margin-left: 30px;
  }
  #timeline ul li .box {
    width: calc(70vw);
    left: 45px;
  }
  #timeline ul li:nth-child(even) .box {
    left: 40px;
  }
  #timeline ul li:nth-child(even) .box:before {
    left: -15px;
    border-width: 8px 16px 8px 0px;
    border-color: transparent #de3163;
  }
}
::-webkit-scrollbar:horizontal {
    display: none;
}    
<!-- ENDE: CODE -->

Ich habe mir ein Plugin geschrieben dafür sieht sehr manierlich aus