<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>
<!------ Include the above in your HEAD tag ---------->
<!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="https://demo.themesberg.com/pixel-pro/css/pixel.css" type="text/css">
</head>
<body>
<div class="section section-md py-5">
<div class="container">
<!-- Title -->
<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">
<!-- Timeline -->
<div class="timeline timeline-one">
<!-- Timeline Item 1 -->
<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>
<!-- Timeline Item 2 -->
<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>
<!-- Timeline Item 3 -->
<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>
<!--End of Timeline-->
</div>
</div>
<!-- Title -->
<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>
<!-- End of Title -->
<div class="row mt-4">
<div class="col-md-10 mx-auto">
<!-- Timeline -->
<div class="timeline timeline-two">
<!-- Timeline Item 1 -->
<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>
<!-- Timeline Item 2 -->
<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>
<!-- Timeline Item 3 -->
<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>
<!-- End of Timeline -->
</div>
</div>
<!-- Title -->
<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>
<!-- End of Title -->
<div class="row mt-4">
<!-- Timeline -->
<div class="vertical-timeline">
<!-- Timeline Item 1 -->
<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>
<!-- Timeline Item 2 -->
<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>
<!-- Timeline Item 3 -->
<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>
<!-- End of Timeline -->
</div>
<!-- Title -->
<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>
<!-- End of Title -->
<div class="row mt-4">
<div class="col-md-10 mx-auto">
<!-- Timeline -->
<div class="timeline timeline-four">
<!-- Timeline Item 1 -->
<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>
<!-- Timeline Item 2 -->
<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>
<!-- Timeline Item 3 -->
<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>
<!-- End of Timeline -->
</div>
</div>
<!-- Title -->
<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>
<!-- End of Title -->
<div class="row mt-4">
<!-- Timeline -->
<div class="timeline timeline-five px-3 px-sm-0">
<!-- Item 1 -->
<div class="row">
<!-- timeline item 1 center image & middle line -->
<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>
<!-- Timeline item 1 content-->
<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>
<!-- Item 2 -->
<div class="row">
<!-- timeline item 2 center image & middle line -->
<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>
<!-- Timeline item 2 content -->
<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>
<!-- Timeline Item 3 -->
<div class="row">
<!-- timeline item 3 center image & middle line -->
<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>
<!-- Timeline item 3 content -->
<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>
<!-- End of Timeline -->
</div>
<!-- Title -->
<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>
<!-- End of Title -->
<div class="row mt-4">
<!-- Timeline -->
<div class="timeline timeline-six px-3 px-sm-0">
<!-- Timeline Item 1 -->
<div class="row no-gutters">
<div class="col-sm">
<!--spacer-->
</div>
<!-- timeline item 1 center image & middle line -->
<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>
<!-- timeline profile card -->
<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>
<!-- Timeline Item 2 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<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>
<!-- timeline item 2 center image & middle line -->
<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">
<!--spacer-->
</div>
</div>
<!-- Timeline Item 3 -->
<div class="row no-gutters">
<div class="col-sm">
<!--spacer-->
</div>
<!-- timeline item 3 center image & middle line -->
<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>
<!-- timeline profile card -->
<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>
<!-- Timeline Item 4 -->
<div class="row no-gutters">
<!-- timeline profile card -->
<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>
<!-- timeline item 4 center image & middle line -->
<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">
<!--spacer-->
</div>
</div>
</div>
<!-- End of Timeline -->
</div>
</div>
</div>
</body>
</html>
