page2

From none, 4 Years ago, written in HTML5.

Embed

Download Paste or View Raw
Hits: 233

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>



<!doctype html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" type="text/css">

<link rel="stylesheet" href="pixel.css" type="text/css">

</head>

<body>

<div class="section section-md py-5">

<div class="container">



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mb-5">

<a href="https://themesberg.com">

<img src="https://themesberg.com/img/brand/themesberg-logo.svg" alt="Logo Themesberg Light" class="mb-4" style="width: 75px;">

<h1 class="h3 mb-4">Themesberg</h1>

</a>

<h6 class="font-weight-bold"><a href="https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit" target="_blank" class="btn mr-2 mb-2 btn-tertiary animate-up-2">Download timelines</a></h6>

</div>

</div>

</div>

<div class="row mt-4">

<div class="col-md-10 mx-auto">



<div class="timeline timeline-one">



<div class="timeline-item">

<span class="icon icon-info icon-lg"><i class="fab fa-react"></i></span>

<h5 class="my-3">React</h5>

<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>

</div>



<div class="timeline-item">

<span class="icon icon-secondary"><i class="fab fa-vuejs"></i></span>

<h5 class="my-3">VueJs</h5>

<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.</p>

</div>



<div class="timeline-item">

<span class="icon icon-danger"><i class="fab fa-angular"></i></span>

<h5 class="my-3">Angular</h5>

<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.</p>

</div>

</div>



</div>

</div>



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mt-6 mb-5">

<h6 class="font-weight-bold">Timeline Style 2</h6>

</div>

</div>

</div>



<div class="row mt-4">

<div class="col-md-10 mx-auto">



<div class="timeline timeline-two">



<div class="timeline-item shadow-sm border border-light">

<div class="post-meta mb-3"><a class="text-secondary mr-2" href="#"><i class="far fa-heart mr-2"></i>2.1k</a> <span class="text-light"><i class="far fa-clock mr-2"></i>Jan 03, 2019</span></div>

<h5>We open our first office</h5>

<p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.</p>

<a href="#" class="btn btn-link text-dark btn-icon"><span class="btn-inner-icon"><i class="fab fa-readme"></i></span> <span class="btn-inner-text font-weight-bold">See story</span></a>

</div>



<div class="timeline-item shadow-sm border border-light">

<div class="post-meta mb-3"><a class="text-secondary mr-2" href="#"><i class="far fa-heart mr-2"></i>10k</a> <span class="text-light"><i class="far fa-clock mr-2"></i>Mar 10, 2017</span></div>

<h5>We sold more than 1000 copies</h5>

<p>Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.</p>

<a href="#" class="btn btn-link text-dark btn-icon"><span class="btn-inner-icon"><i class="fab fa-readme"></i></span> <span class="btn-inner-text font-weight-bold">See story</span></a>

</div>



<div class="timeline-item shadow-sm border border-light">

<div class="post-meta mb-3"><a class="text-secondary mr-2" href="#"><i class="far fa-heart mr-2"></i>15.2k</a> <span class="text-light"><i class="far fa-clock mr-2"></i>Set 24, 2016</span></div>

<h5>The begining</h5>

<p>AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.</p>

<a href="#" class="btn btn-link text-dark btn-icon"><span class="btn-inner-icon"><i class="fab fa-readme"></i></span> <span class="btn-inner-text font-weight-bold">See story</span></a>

</div>

</div>



</div>

</div>



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mt-6 mb-5">

<h6 class="font-weight-bold">Timeline Style 3</h6>

</div>

</div>

</div>



<div class="row mt-4">



<div class="vertical-timeline">



<div class="row d-flex align-items-center">

<div class="col-md-2 text-center bottom">

<div class="shape bg-primary d-flex align-items-center justify-content-center organic-radius icon-white"><i class="fab fa-angular"></i></div>

</div>

<div class="col-md-6">

<h6>Organic shape</h6>

<p>Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>

</div>

</div>

<div class="row timeline-inner">

<div class="col-md-2">

<div class="corner top-right"></div>

</div>

<div class="col-md-8">

<hr>

</div>

<div class="col-md-2">

<div class="corner left-bottom"></div>

</div>

</div>



<div class="row align-items-center justify-content-end vertical-timeline">

<div class="col-md-6 text-right">

<h6>Circle shape</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>

</div>

<div class="col-md-2 text-center full">

<div class="shape bg-secondary right d-flex align-items-center justify-content-center icon-white rounded-circle"><i class="fab fa-vuejs"></i></div>

</div>

</div>

<div class="row timeline-inner">

<div class="col-md-2">

<div class="corner right-bottom"></div>

</div>

<div class="col-md-8">

<hr>

</div>

<div class="col-md-2">

<div class="corner top-left"></div>

</div>

</div>



<div class="row align-items-center vertical-timeline">

<div class="col-md-2 text-center top">

<div class="shape bg-tertiary d-flex align-items-center justify-content-center icon-white"><i class="fab fa-react"></i></div>

</div>

<div class="col-md-6">

<h6>Square shape</h6>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.</p>

</div>

</div>

</div>



</div>



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mt-6 mb-5">

<h6 class="font-weight-bold">Timeline Style 4</h6>

</div>

</div>

</div>



<div class="row mt-4">

<div class="col-md-10 mx-auto">



<div class="timeline timeline-four">



<div class="timeline-item">

<div class="icon"></div>

<div class="date-content">

<div class="date-outer"><span class="date"><i class="far fa-money-bill-alt"></i> <span class="year mt-1">2018-2019</span></span></div>

</div>

<div class="timeline-content">

<h5 class="title">Business</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>

</div>

</div>



<div class="timeline-item">

<div class="icon"></div>

<div class="date-content">

<div class="date-outer"><span class="date"><i class="far fa-lightbulb"></i> <span class="year mt-1">2017-2018</span></span></div>

</div>

<div class="timeline-content">

<h5 class="title">Development</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>

</div>

</div>



<div class="timeline-item">

<div class="icon"></div>

<div class="date-content">

<div class="date-outer"><span class="date"><i class="far fa-paper-plane"></i> <span class="year mt-1">2015-2016</span></span></div>

</div>

<div class="timeline-content">

<h5 class="title">Marketing</h5>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.</p>

</div>

</div>

</div>



</div>

</div>



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mt-6 mb-5">

<h6 class="font-weight-bold">Timeline Style 5</h6>

</div>

</div>

</div>



<div class="row mt-4">



<div class="timeline timeline-five px-3 px-sm-0">



<div class="row">



<div class="col-auto text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid rounded-circle" src="https://demo.themesberg.com/pixel-pro/assets/img/team/8.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>



<div class="col-12 col-lg-12 col-xl-11 my-4">

<div class="card shadow-sm bw-md border-primary text-primary">

<div class="card-body">

<div class="post-meta float-right"><a class="text-primary" href="#"><i class="far fa-thumbs-up"></i>345</a></div>

<h5 class="card-title text-primary">Time Schedule 1</h5>

<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.</p>

<button class="btn btn-sm btn-primary" type="button" data-target="#t1_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>

<div class="collapse" id="t1_details">

<div class="p-2 mt-3 text-monospace">

<div>08:30 - 09:00 Breakfast in Town</div>

<div>09:00 - 10:30 Attend a team meeting</div>

<div>10:30 - 10:45 Research on new technologies and tools</div>

<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>

</div>

</div>

</div>

</div>

</div>

</div>



<div class="row">



<div class="col-auto text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid rounded-circle" src="https://demo.themesberg.com/pixel-pro/assets/img/team/10.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>



<div class="col-12 col-lg-12 col-xl-11 my-4">

<div class="card shadow-sm bw-md border-secondary text-success">

<div class="card-body">

<div class="post-meta float-right"><a class="text-secondary" href="#"><i class="far fa-thumbs-up"></i>515</a></div>

<h5 class="card-title text-secondary">Time Schedule 2</h5>

<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.</p>

<button class="btn btn-sm btn-secondary" type="button" data-target="#t2_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>

<div class="collapse" id="t2_details">

<div class="p-2 mt-3 text-monospace">

<div>08:30 - 09:00 Breakfast in Town</div>

<div>09:00 - 10:30 Attend a team meeting</div>

<div>10:30 - 10:45 Research on new technologies and tools</div>

<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>

</div>

</div>

</div>

</div>

</div>

</div>



<div class="row">



<div class="col-auto text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid rounded-circle" src="https://demo.themesberg.com/pixel-pro/assets/img/team/9.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>



<div class="col-12 col-lg-12 col-xl-11 my-4">

<div class="card shadow-sm bw-md border-tertiary text-tertiary">

<div class="card-body">

<div class="post-meta float-right"><a class="text-tertiary" href="#"><i class="far fa-thumbs-up"></i>115</a></div>

<h5 class="card-title text-tertiary">Time Schedule 3</h5>

<p class="card-text">Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.</p>

<button class="btn btn-sm btn-tertiary" type="button" data-target="#t3_details" data-toggle="collapse">Show Details <i class="fas fa-angle-down toggle-arrow ml-1"></i></button>

<div class="collapse" id="t3_details">

<div class="p-2 mt-3 text-monospace">

<div>08:30 - 09:00 Breakfast in Town</div>

<div>09:00 - 10:30 Attend a team meeting</div>

<div>10:30 - 10:45 Research on new technologies and tools</div>

<div>10:45 - 12:00 It’s a good idea to review the day’s work</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>



</div>



<div class="row">

<div class="col-md-4 text-center mx-auto">

<div class="mt-6 mb-5">

<h6 class="font-weight-bold">Timeline Style 6</h6>

</div>

</div>

</div>



<div class="row mt-4">



<div class="timeline timeline-six px-3 px-sm-0">



<div class="row no-gutters">

<div class="col-sm">



</div>



<div class="col-sm-1 text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid organic-radius border-tertiary" src="https://demo.themesberg.com/pixel-pro/assets/img/team/9.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>



<div class="col-sm py-2">

<div class="profile-card">

<div class="card shadow border-light">

<div class="card-body">

<h5 class="card-title">Tanislav Robert</h5>

<h6 class="card-subtitle">Director</h6>

<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>

<ul class="social-buttons mt-3">

<li><a href="#" target="_blank" class="btn btn-link btn-facebook"><i class="fab fa-facebook-f"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-slack"><i class="fab fa-slack-hash"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dribbble"><i class="fab fa-dribbble"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-google-plus"><i class="fab fa-google-plus"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dropbox"><i class="fab fa-dropbox"></i></a></li>

</ul>

</div>

</div>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-sm py-2">

<div class="profile-card">

<div class="card shadow border-light">

<div class="card-body">

<h5 class="card-title">Zoltan Szőgyényi</h5>

<h6 class="card-subtitle">Founder</h6>

<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>

<ul class="social-buttons mt-3">

<li><a href="#" target="_blank" class="btn btn-link btn-facebook"><i class="fab fa-facebook-f"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-slack"><i class="fab fa-slack-hash"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dribbble"><i class="fab fa-dribbble"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-google-plus"><i class="fab fa-google-plus"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dropbox"><i class="fab fa-dropbox"></i></a></li>

</ul>

</div>

</div>

</div>

</div>



<div class="col-sm-1 text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid organic-radius border-secondary" src="https://demo.themesberg.com/pixel-pro/assets/img/team/8.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>

<div class="col-sm">



</div>

</div>



<div class="row no-gutters">

<div class="col-sm">



</div>



<div class="col-sm-1 text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid organic-radius border-warning" src="https://demo.themesberg.com/pixel-pro/assets/img/team/10.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

</div>



<div class="col-sm py-2">

<div class="profile-card">

<div class="card shadow border-light">

<div class="card-body">

<h5 class="card-title">Calota Oana</h5>

<h6 class="card-subtitle">Marketing</h6>

<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>

<ul class="social-buttons mt-3">

<li><a href="#" target="_blank" class="btn btn-link btn-facebook"><i class="fab fa-facebook-f"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-slack"><i class="fab fa-slack-hash"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dribbble"><i class="fab fa-dribbble"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-google-plus"><i class="fab fa-google-plus"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dropbox"><i class="fab fa-dropbox"></i></a></li>

</ul>

</div>

</div>

</div>

</div>

</div>



<div class="row no-gutters">



<div class="col-sm py-2">

<div class="profile-card">

<div class="card shadow border-light">

<div class="card-body">

<h5 class="card-title">Lucian Tanislav</h5>

<h6 class="card-subtitle">Sales</h6>

<p class="card-text my-2">I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.</p>

<ul class="social-buttons mt-3">

<li><a href="#" target="_blank" class="btn btn-link btn-facebook"><i class="fab fa-facebook-f"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-slack"><i class="fab fa-slack-hash"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dribbble"><i class="fab fa-dribbble"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-google-plus"><i class="fab fa-google-plus"></i></a></li>

<li><a href="#" target="_blank" class="btn btn-link btn-dropbox"><i class="fab fa-dropbox"></i></a></li>

</ul>

</div>

</div>

</div>

</div>



<div class="col-sm-1 text-center flex-column d-none d-sm-flex">

<div class="row h-50">

<div class="col middle-line"> </div>

<div class="col"> </div>

</div>

<span class="m-3 avatar-separator"><img class="img-fluid organic-radius border-info" src="https://demo.themesberg.com/pixel-pro/assets/img/team/6.jpg" alt="avatar"></span>

<div class="row h-50">

<div class="col"> </div>

<div class="col"> </div>

</div>

</div>

<div class="col-sm">



</div>

</div>

</div>



</div>

</div>

</div>

</body>

</html>

Author

Title

Language

Your paste - Paste your paste here

&lt;link href=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;bootstrap-css&quot;&gt;
&lt;script src=&quot;//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!------ Include the above in your HEAD tag ----------&gt;

&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css&quot; type=&quot;text/css&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;pixel.css&quot; type=&quot;text/css&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
        
    &lt;div class=&quot;section section-md py-5&quot;&gt;
   &lt;div class=&quot;container&quot;&gt;
       &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mb-5&quot;&gt;
              &lt;a href=&quot;https://themesberg.com&quot;&gt;
                &lt;img src=&quot;https://themesberg.com/img/brand/themesberg-logo.svg&quot; alt=&quot;Logo Themesberg Light&quot; class=&quot;mb-4&quot; style=&quot;width: 75px;&quot;&gt;
              &lt;h1 class=&quot;h3 mb-4&quot;&gt;Themesberg&lt;/h1&gt;
              &lt;/a&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;&lt;a href=&quot;https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit&quot; target=&quot;_blank&quot; class=&quot;btn mr-2 mb-2 btn-tertiary animate-up-2&quot;&gt;Download timelines&lt;/a&gt;&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;div class=&quot;col-md-10 mx-auto&quot;&gt;
            &lt;!-- Timeline --&gt;
            &lt;div class=&quot;timeline timeline-one&quot;&gt;
               &lt;!-- Timeline Item 1 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;span class=&quot;icon icon-info icon-lg&quot;&gt;&lt;i class=&quot;fab fa-react&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;h5 class=&quot;my-3&quot;&gt;React&lt;/h5&gt;
                  &lt;p&gt;Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.&lt;/p&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 2 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;span class=&quot;icon icon-secondary&quot;&gt;&lt;i class=&quot;fab fa-vuejs&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;h5 class=&quot;my-3&quot;&gt;VueJs&lt;/h5&gt;
                  &lt;p&gt;Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.&lt;/p&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 3 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;span class=&quot;icon icon-danger&quot;&gt;&lt;i class=&quot;fab fa-angular&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                  &lt;h5 class=&quot;my-3&quot;&gt;Angular&lt;/h5&gt;
                  &lt;p&gt;AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.&lt;/p&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!--End of Timeline--&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mt-6 mb-5&quot;&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;Timeline Style 2&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Title --&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;div class=&quot;col-md-10 mx-auto&quot;&gt;
            &lt;!-- Timeline --&gt;
            &lt;div class=&quot;timeline timeline-two&quot;&gt;
               &lt;!-- Timeline Item 1 --&gt;
               &lt;div class=&quot;timeline-item shadow-sm border border-light&quot;&gt;
                  &lt;div class=&quot;post-meta mb-3&quot;&gt;&lt;a class=&quot;text-secondary mr-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-heart mr-2&quot;&gt;&lt;/i&gt;2.1k&lt;/a&gt; &lt;span class=&quot;text-light&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Jan 03, 2019&lt;/span&gt;&lt;/div&gt;
                  &lt;h5&gt;We open our first office&lt;/h5&gt;
                  &lt;p&gt;Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum.&lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark btn-icon&quot;&gt;&lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fab fa-readme&quot;&gt;&lt;/i&gt;&lt;/span&gt; &lt;span class=&quot;btn-inner-text font-weight-bold&quot;&gt;See story&lt;/span&gt;&lt;/a&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 2 --&gt;
               &lt;div class=&quot;timeline-item shadow-sm border border-light&quot;&gt;
                  &lt;div class=&quot;post-meta mb-3&quot;&gt;&lt;a class=&quot;text-secondary mr-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-heart mr-2&quot;&gt;&lt;/i&gt;10k&lt;/a&gt; &lt;span class=&quot;text-light&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Mar 10, 2017&lt;/span&gt;&lt;/div&gt;
                  &lt;h5&gt;We sold more than 1000 copies&lt;/h5&gt;
                  &lt;p&gt;Bootstrap. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas.&lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark btn-icon&quot;&gt;&lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fab fa-readme&quot;&gt;&lt;/i&gt;&lt;/span&gt; &lt;span class=&quot;btn-inner-text font-weight-bold&quot;&gt;See story&lt;/span&gt;&lt;/a&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 3 --&gt;
               &lt;div class=&quot;timeline-item shadow-sm border border-light&quot;&gt;
                  &lt;div class=&quot;post-meta mb-3&quot;&gt;&lt;a class=&quot;text-secondary mr-2&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-heart mr-2&quot;&gt;&lt;/i&gt;15.2k&lt;/a&gt; &lt;span class=&quot;text-light&quot;&gt;&lt;i class=&quot;far fa-clock mr-2&quot;&gt;&lt;/i&gt;Set 24, 2016&lt;/span&gt;&lt;/div&gt;
                  &lt;h5&gt;The begining&lt;/h5&gt;
                  &lt;p&gt;AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications.&lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-link text-dark btn-icon&quot;&gt;&lt;span class=&quot;btn-inner-icon&quot;&gt;&lt;i class=&quot;fab fa-readme&quot;&gt;&lt;/i&gt;&lt;/span&gt; &lt;span class=&quot;btn-inner-text font-weight-bold&quot;&gt;See story&lt;/span&gt;&lt;/a&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- End of Timeline --&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mt-6 mb-5&quot;&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;Timeline Style 3&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Title --&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;!-- Timeline --&gt;
         &lt;div class=&quot;vertical-timeline&quot;&gt;
            &lt;!-- Timeline Item 1 --&gt;
            &lt;div class=&quot;row d-flex align-items-center&quot;&gt;
               &lt;div class=&quot;col-md-2 text-center bottom&quot;&gt;
                  &lt;div class=&quot;shape bg-primary d-flex align-items-center justify-content-center organic-radius icon-white&quot;&gt;&lt;i class=&quot;fab fa-angular&quot;&gt;&lt;/i&gt;&lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;h6&gt;Organic shape&lt;/h6&gt;
                  &lt;p&gt;Picseel ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.&lt;/p&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row timeline-inner&quot;&gt;
               &lt;div class=&quot;col-md-2&quot;&gt;
                  &lt;div class=&quot;corner top-right&quot;&gt;&lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;hr&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-2&quot;&gt;
                  &lt;div class=&quot;corner left-bottom&quot;&gt;&lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 2 --&gt;
            &lt;div class=&quot;row align-items-center justify-content-end vertical-timeline&quot;&gt;
               &lt;div class=&quot;col-md-6 text-right&quot;&gt;
                  &lt;h6&gt;Circle shape&lt;/h6&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.&lt;/p&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-2 text-center full&quot;&gt;
                  &lt;div class=&quot;shape bg-secondary right d-flex align-items-center justify-content-center icon-white rounded-circle&quot;&gt;&lt;i class=&quot;fab fa-vuejs&quot;&gt;&lt;/i&gt;&lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row timeline-inner&quot;&gt;
               &lt;div class=&quot;col-md-2&quot;&gt;
                  &lt;div class=&quot;corner right-bottom&quot;&gt;&lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-8&quot;&gt;
                  &lt;hr&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-2&quot;&gt;
                  &lt;div class=&quot;corner top-left&quot;&gt;&lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 3 --&gt;
            &lt;div class=&quot;row align-items-center vertical-timeline&quot;&gt;
               &lt;div class=&quot;col-md-2 text-center top&quot;&gt;
                  &lt;div class=&quot;shape bg-tertiary d-flex align-items-center justify-content-center icon-white&quot;&gt;&lt;i class=&quot;fab fa-react&quot;&gt;&lt;/i&gt;&lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-md-6&quot;&gt;
                  &lt;h6&gt;Square shape&lt;/h6&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor gravida aliquam. Morbi orci urna, iaculis in ligula et, posuere interdum lectus.&lt;/p&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;!-- End of Timeline --&gt;
      &lt;/div&gt;
      &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mt-6 mb-5&quot;&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;Timeline Style 4&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Title --&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;div class=&quot;col-md-10 mx-auto&quot;&gt;
            &lt;!-- Timeline --&gt;
            &lt;div class=&quot;timeline timeline-four&quot;&gt;
               &lt;!-- Timeline Item 1 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;date-content&quot;&gt;
                     &lt;div class=&quot;date-outer&quot;&gt;&lt;span class=&quot;date&quot;&gt;&lt;i class=&quot;far fa-money-bill-alt&quot;&gt;&lt;/i&gt; &lt;span class=&quot;year mt-1&quot;&gt;2018-2019&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;timeline-content&quot;&gt;
                     &lt;h5 class=&quot;title&quot;&gt;Business&lt;/h5&gt;
                     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.&lt;/p&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 2 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;date-content&quot;&gt;
                     &lt;div class=&quot;date-outer&quot;&gt;&lt;span class=&quot;date&quot;&gt;&lt;i class=&quot;far fa-lightbulb&quot;&gt;&lt;/i&gt; &lt;span class=&quot;year mt-1&quot;&gt;2017-2018&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;timeline-content&quot;&gt;
                     &lt;h5 class=&quot;title&quot;&gt;Development&lt;/h5&gt;
                     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.&lt;/p&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- Timeline Item 3 --&gt;
               &lt;div class=&quot;timeline-item&quot;&gt;
                  &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;date-content&quot;&gt;
                     &lt;div class=&quot;date-outer&quot;&gt;&lt;span class=&quot;date&quot;&gt;&lt;i class=&quot;far fa-paper-plane&quot;&gt;&lt;/i&gt; &lt;span class=&quot;year mt-1&quot;&gt;2015-2016&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;timeline-content&quot;&gt;
                     &lt;h5 class=&quot;title&quot;&gt;Marketing&lt;/h5&gt;
                     &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ex sit amet massa scelerisque scelerisque. Aliquam erat volutpat. Aenean interdum finibus efficitur.&lt;/p&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- End of Timeline --&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mt-6 mb-5&quot;&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;Timeline Style 5&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Title --&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;!-- Timeline --&gt;
         &lt;div class=&quot;timeline timeline-five px-3 px-sm-0&quot;&gt;
            &lt;!-- Item 1 --&gt;
            &lt;div class=&quot;row&quot;&gt;
               &lt;!-- timeline item 1 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-auto text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid rounded-circle&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/8.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- Timeline item 1 content--&gt;
               &lt;div class=&quot;col-12 col-lg-12 col-xl-11 my-4&quot;&gt;
                  &lt;div class=&quot;card shadow-sm bw-md border-primary text-primary&quot;&gt;
                     &lt;div class=&quot;card-body&quot;&gt;
                        &lt;div class=&quot;post-meta float-right&quot;&gt;&lt;a class=&quot;text-primary&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-thumbs-up&quot;&gt;&lt;/i&gt;345&lt;/a&gt;&lt;/div&gt;
                        &lt;h5 class=&quot;card-title text-primary&quot;&gt;Time Schedule 1&lt;/h5&gt;
                        &lt;p class=&quot;card-text&quot;&gt;Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.&lt;/p&gt;
                        &lt;button class=&quot;btn btn-sm btn-primary&quot; type=&quot;button&quot; data-target=&quot;#t1_details&quot; data-toggle=&quot;collapse&quot;&gt;Show Details &lt;i class=&quot;fas fa-angle-down toggle-arrow ml-1&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;div class=&quot;collapse&quot; id=&quot;t1_details&quot;&gt;
                           &lt;div class=&quot;p-2 mt-3 text-monospace&quot;&gt;
                              &lt;div&gt;08:30 - 09:00 Breakfast in Town&lt;/div&gt;
                              &lt;div&gt;09:00 - 10:30 Attend a team meeting&lt;/div&gt;
                              &lt;div&gt;10:30 - 10:45 Research on new technologies and tools&lt;/div&gt;
                              &lt;div&gt;10:45 - 12:00 It’s a good idea to review the day’s work&lt;/div&gt;
                           &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Item 2 --&gt;
            &lt;div class=&quot;row&quot;&gt;
               &lt;!-- timeline item 2 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-auto text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid rounded-circle&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/10.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- Timeline item 2 content --&gt;
               &lt;div class=&quot;col-12 col-lg-12 col-xl-11 my-4&quot;&gt;
                  &lt;div class=&quot;card shadow-sm bw-md border-secondary text-success&quot;&gt;
                     &lt;div class=&quot;card-body&quot;&gt;
                        &lt;div class=&quot;post-meta float-right&quot;&gt;&lt;a class=&quot;text-secondary&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-thumbs-up&quot;&gt;&lt;/i&gt;515&lt;/a&gt;&lt;/div&gt;
                        &lt;h5 class=&quot;card-title text-secondary&quot;&gt;Time Schedule 2&lt;/h5&gt;
                        &lt;p class=&quot;card-text&quot;&gt;Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.&lt;/p&gt;
                        &lt;button class=&quot;btn btn-sm btn-secondary&quot; type=&quot;button&quot; data-target=&quot;#t2_details&quot; data-toggle=&quot;collapse&quot;&gt;Show Details &lt;i class=&quot;fas fa-angle-down toggle-arrow ml-1&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;div class=&quot;collapse&quot; id=&quot;t2_details&quot;&gt;
                           &lt;div class=&quot;p-2 mt-3 text-monospace&quot;&gt;
                              &lt;div&gt;08:30 - 09:00 Breakfast in Town&lt;/div&gt;
                              &lt;div&gt;09:00 - 10:30 Attend a team meeting&lt;/div&gt;
                              &lt;div&gt;10:30 - 10:45 Research on new technologies and tools&lt;/div&gt;
                              &lt;div&gt;10:45 - 12:00 It’s a good idea to review the day’s work&lt;/div&gt;
                           &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 3 --&gt;
            &lt;div class=&quot;row&quot;&gt;
               &lt;!-- timeline item 3 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-auto text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid rounded-circle&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/9.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- Timeline item 3 content --&gt;
               &lt;div class=&quot;col-12 col-lg-12 col-xl-11 my-4&quot;&gt;
                  &lt;div class=&quot;card shadow-sm bw-md border-tertiary text-tertiary&quot;&gt;
                     &lt;div class=&quot;card-body&quot;&gt;
                        &lt;div class=&quot;post-meta float-right&quot;&gt;&lt;a class=&quot;text-tertiary&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;far fa-thumbs-up&quot;&gt;&lt;/i&gt;115&lt;/a&gt;&lt;/div&gt;
                        &lt;h5 class=&quot;card-title text-tertiary&quot;&gt;Time Schedule 3&lt;/h5&gt;
                        &lt;p class=&quot;card-text&quot;&gt;Stay organized, reduce stress, and accomplish personal and business goals with a daily schedule template. It’s a simple yet effective time-management tool for any daily activity, whether you’re managing a busy work schedule, academic assignments or family chores.&lt;/p&gt;
                        &lt;button class=&quot;btn btn-sm btn-tertiary&quot; type=&quot;button&quot; data-target=&quot;#t3_details&quot; data-toggle=&quot;collapse&quot;&gt;Show Details &lt;i class=&quot;fas fa-angle-down toggle-arrow ml-1&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                        &lt;div class=&quot;collapse&quot; id=&quot;t3_details&quot;&gt;
                           &lt;div class=&quot;p-2 mt-3 text-monospace&quot;&gt;
                              &lt;div&gt;08:30 - 09:00 Breakfast in Town&lt;/div&gt;
                              &lt;div&gt;09:00 - 10:30 Attend a team meeting&lt;/div&gt;
                              &lt;div&gt;10:30 - 10:45 Research on new technologies and tools&lt;/div&gt;
                              &lt;div&gt;10:45 - 12:00 It’s a good idea to review the day’s work&lt;/div&gt;
                           &lt;/div&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;!-- End of Timeline --&gt;
      &lt;/div&gt;
      &lt;!-- Title  --&gt;
      &lt;div class=&quot;row&quot;&gt;
         &lt;div class=&quot;col-md-4 text-center mx-auto&quot;&gt;
            &lt;div class=&quot;mt-6 mb-5&quot;&gt;
               &lt;h6 class=&quot;font-weight-bold&quot;&gt;Timeline Style 6&lt;/h6&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End of Title --&gt;
      &lt;div class=&quot;row mt-4&quot;&gt;
         &lt;!-- Timeline --&gt;
         &lt;div class=&quot;timeline timeline-six px-3 px-sm-0&quot;&gt;
            &lt;!-- Timeline Item 1 --&gt;
            &lt;div class=&quot;row no-gutters&quot;&gt;
               &lt;div class=&quot;col-sm&quot;&gt;
                  &lt;!--spacer--&gt;
               &lt;/div&gt;
               &lt;!-- timeline item 1 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-sm-1 text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid organic-radius border-tertiary&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/9.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- timeline profile card --&gt;
               &lt;div class=&quot;col-sm py-2&quot;&gt;
                  &lt;div class=&quot;profile-card&quot;&gt;
                     &lt;div class=&quot;card shadow border-light&quot;&gt;
                        &lt;div class=&quot;card-body&quot;&gt;
                           &lt;h5 class=&quot;card-title&quot;&gt;Tanislav Robert&lt;/h5&gt;
                           &lt;h6 class=&quot;card-subtitle&quot;&gt;Director&lt;/h6&gt;
                           &lt;p class=&quot;card-text my-2&quot;&gt;I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.&lt;/p&gt;
                           &lt;ul class=&quot;social-buttons mt-3&quot;&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-facebook&quot;&gt;&lt;i class=&quot;fab fa-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-twitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-slack&quot;&gt;&lt;i class=&quot;fab fa-slack-hash&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dribbble&quot;&gt;&lt;i class=&quot;fab fa-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-google-plus&quot;&gt;&lt;i class=&quot;fab fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dropbox&quot;&gt;&lt;i class=&quot;fab fa-dropbox&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;/ul&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 2 --&gt;
            &lt;div class=&quot;row no-gutters&quot;&gt;
               &lt;!-- timeline profile card --&gt;
               &lt;div class=&quot;col-sm py-2&quot;&gt;
                  &lt;div class=&quot;profile-card&quot;&gt;
                     &lt;div class=&quot;card shadow border-light&quot;&gt;
                        &lt;div class=&quot;card-body&quot;&gt;
                           &lt;h5 class=&quot;card-title&quot;&gt;Zoltan Szőgyényi&lt;/h5&gt;
                           &lt;h6 class=&quot;card-subtitle&quot;&gt;Founder&lt;/h6&gt;
                           &lt;p class=&quot;card-text my-2&quot;&gt;I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.&lt;/p&gt;
                           &lt;ul class=&quot;social-buttons mt-3&quot;&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-facebook&quot;&gt;&lt;i class=&quot;fab fa-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-twitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-slack&quot;&gt;&lt;i class=&quot;fab fa-slack-hash&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dribbble&quot;&gt;&lt;i class=&quot;fab fa-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-google-plus&quot;&gt;&lt;i class=&quot;fab fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dropbox&quot;&gt;&lt;i class=&quot;fab fa-dropbox&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;/ul&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- timeline item 2 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-sm-1 text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid organic-radius border-secondary&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/8.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm&quot;&gt;
                  &lt;!--spacer--&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 3 --&gt;
            &lt;div class=&quot;row no-gutters&quot;&gt;
               &lt;div class=&quot;col-sm&quot;&gt;
                  &lt;!--spacer--&gt;
               &lt;/div&gt;
               &lt;!-- timeline item 3 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-sm-1 text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid organic-radius border-warning&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/10.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- timeline profile card --&gt;
               &lt;div class=&quot;col-sm py-2&quot;&gt;
                  &lt;div class=&quot;profile-card&quot;&gt;
                     &lt;div class=&quot;card shadow border-light&quot;&gt;
                        &lt;div class=&quot;card-body&quot;&gt;
                           &lt;h5 class=&quot;card-title&quot;&gt;Calota Oana&lt;/h5&gt;
                           &lt;h6 class=&quot;card-subtitle&quot;&gt;Marketing&lt;/h6&gt;
                           &lt;p class=&quot;card-text my-2&quot;&gt;I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.&lt;/p&gt;
                           &lt;ul class=&quot;social-buttons mt-3&quot;&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-facebook&quot;&gt;&lt;i class=&quot;fab fa-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-twitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-slack&quot;&gt;&lt;i class=&quot;fab fa-slack-hash&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dribbble&quot;&gt;&lt;i class=&quot;fab fa-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-google-plus&quot;&gt;&lt;i class=&quot;fab fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dropbox&quot;&gt;&lt;i class=&quot;fab fa-dropbox&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;/ul&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Timeline Item 4 --&gt;
            &lt;div class=&quot;row no-gutters&quot;&gt;
               &lt;!-- timeline profile card --&gt;
               &lt;div class=&quot;col-sm py-2&quot;&gt;
                  &lt;div class=&quot;profile-card&quot;&gt;
                     &lt;div class=&quot;card shadow border-light&quot;&gt;
                        &lt;div class=&quot;card-body&quot;&gt;
                           &lt;h5 class=&quot;card-title&quot;&gt;Lucian Tanislav&lt;/h5&gt;
                           &lt;h6 class=&quot;card-subtitle&quot;&gt;Sales&lt;/h6&gt;
                           &lt;p class=&quot;card-text my-2&quot;&gt;I spend my days with my hands in many different areas of web development from back end programming to front end engineering, digital accessibility, user experience and visual design.&lt;/p&gt;
                           &lt;ul class=&quot;social-buttons mt-3&quot;&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-facebook&quot;&gt;&lt;i class=&quot;fab fa-facebook-f&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-twitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-slack&quot;&gt;&lt;i class=&quot;fab fa-slack-hash&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dribbble&quot;&gt;&lt;i class=&quot;fab fa-dribbble&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-google-plus&quot;&gt;&lt;i class=&quot;fab fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href=&quot;#&quot; target=&quot;_blank&quot; class=&quot;btn btn-link btn-dropbox&quot;&gt;&lt;i class=&quot;fab fa-dropbox&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
                           &lt;/ul&gt;
                        &lt;/div&gt;
                     &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;!-- timeline item 4 center image &amp; middle line --&gt;
               &lt;div class=&quot;col-sm-1 text-center flex-column d-none d-sm-flex&quot;&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col middle-line&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;span class=&quot;m-3 avatar-separator&quot;&gt;&lt;img class=&quot;img-fluid organic-radius border-info&quot; src=&quot;https://demo.themesberg.com/pixel-pro/assets/img/team/6.jpg&quot; alt=&quot;avatar&quot;&gt;&lt;/span&gt;
                  &lt;div class=&quot;row h-50&quot;&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                     &lt;div class=&quot;col&quot;&gt; &lt;/div&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
               &lt;div class=&quot;col-sm&quot;&gt;
                  &lt;!--spacer--&gt;
               &lt;/div&gt;
            &lt;/div&gt;
         &lt;/div&gt;
         &lt;!-- End of Timeline --&gt;
      &lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Private - Private paste aren't shown in recent listings.

Delete After - When should we delete your paste?

Spam protection -

Reply to "page2"