Timeline


<!-- cd-timeline Start-->
                    <section class="cd-container" id="cd-timeline" >
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img cd-picture bg-primary bounce-in" > <i class="icon-pencil-alt" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-warning" > app-ideas</div>
                    </div>
                    <h5 class="f-w-600 m-0" > Established new the app-ideas repository.</h5>
                    <p class="mb-0" >
                    developers who are just beginning their learning process. those who often concentrate on developing programmes with a user interface.</p>
                    <div class="time-content pt-2" > <i class="icon-github" > </i>
                    <h6 class="f-w-600" > View it on Github </h6>
                    </div><span class="cd-date" > February 02 2022</span>
                    </div>
                    </div>
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img bg-danger bounce-in" > <i class="icon-youtube" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-danger" > Blog</div>
                    </div>
                    <h5 class="f-w-600 m-0" > Implemented the program for weekly code challenges.</h5>
                    <p class="mb-0" >
                    Challenges <em class="font-danger" > help you build problem-solving skills, better understand the programming. If you want to improve your skills in programming. </p>
                    <div class="ratio ratio-21x9 m-t-20" >
                    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen="" > </iframe>
                    </div><span class="cd-date" > March 12 2022</span>
                    </div>
                    </div>
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img cd-picture bg-success bounce-in" > <i class="icon-image" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-info" > Designer</div>
                    </div>
                    <h5 class="f-w-600 m-0" > Research about most recent design trends.</h5>
                    <p class="mb-0" >
                    Spend some time looking up current design trend. </p>
                    <div class="carousel slide" id="carouselExampleIndicators" data-bs-ride="true" >
                    <div class="carousel-indicators" >
                    <button class="active" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-current="true" aria-label="Slide 1" > </button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2" > </button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3" > </button>
                    </div>
                    <div class="carousel-inner" >
                    <div class="carousel-item active" > <img class="d-block w-100" src="../assets/images/banner/2.jpg" alt="office-work" > </div>
                    <div class="carousel-item" > <img class="d-block w-100" src="../assets/images/banner/1.jpg" alt="office-work" > </div>
                    <div class="carousel-item" > <img class="d-block w-100" src="../assets/images/banner/3.jpg" alt="office-work" > </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true" > </span><span class="visually-hidden" > Previous</span></button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true" > </span><span class="visually-hidden" > Next</span></button>
                    </div><span class="cd-date" > April 23 2022</span>
                    </div>
                    </div>
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img cd-location bg-info bounce-in" > <i class="icon-pulse" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-primary" > Audio testing</div>
                    </div>
                    <h5 class="f-w-600 m-0" > Musical trends and predictability</h5>
                    <p class="mb-0" >
                    So, the next time you listen to music, you might or might not consider how it's actively altering your mood.</p>
                    <audio controls="" >
                    <source src="../assets/audio/horse.ogg" type="audio/ogg" >
                    </audio><span class="cd-date" > June 12 2022</span>
                    </div>
                    </div>
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img cd-location bg-secondary bounce-in" > <i class="icon-pin-alt" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-success" > Meet-up</div>
                    </div>
                    <h5 class="f-w-600 m-0" > Web-designer's meet-up</h5>
                    <p class="mb-0" >
                    Find nearby web designers to network with! A Web Design Meetup is a place where you can discuss tools. </p>
                    <div class="time-content pt-2" > <i class="icon-android" > </i>
                    <h6 class="f-w-600" > Please! Meet-up</h6>
                    </div><span class="cd-date" > November 04 2022</span>
                    </div>
                    </div>
                    <div class="cd-timeline-block" >
                    <div class="cd-timeline-img cd-movie bg-danger bounce-in" > <i class="icon-agenda" > </i></div>
                    <div class="cd-timeline-content bounce-in" >
                    <div class="timeline-wrapper" >
                    <div class="badge bg-warning" > Resolutions</div>
                    </div>
                    <h5 class="f-w-600 m-0" > My Resolutions for 2025</h5>
                    <p class="mb-0" >
                    I'm determined to streamline, organism, systematism, realign, and embrace life in 2025. </p>
                    <div class="time-content pt-2" > <i class="icon-write" > </i>
                    <h6 class="f-w-600" > My Resolutions </h6>
                    </div><span class="cd-date" > December 31 2022</span>
                    </div>
                    </div>
                    </section>
To use timeline you have to add the following script js files
<!-- Timeline js-->
                    <script src="../assets/js/modernizr.js" ></script>
                    <script src="../assets/js/timeline/timeline-custom.js" ></script>