File size: 31.92Kb
<!DOCTYPE html>
<!--[if lt IE 10]> <html lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Timeline | Components | Structura</title>
<meta name="description" content="HTML5/CSS3 template components for Framework Y and business industries, based on Framework Y.">
<link rel="stylesheet" href="../../../HTWF/scripts/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../../../HTWF/style.css">
<link rel="stylesheet" href="../../../HTWF/scripts/php/contact-form.css">
<link rel="stylesheet" href="../../../HTWF/css/animations.css">
<link rel="stylesheet" href="../../../HTWF/css/components.css">
<link rel="icon" href="../../../images/favicon.png">
<link rel="stylesheet" href="../../../skin.css">
</head>
<body>
<div id="preloader"></div>
<header class="fixed-top scroll-change" data-menu-anima="fade-in">
<div class="navbar navbar-default mega-menu-fullwidth navbar-fixed-top" role="navigation">
<div class="navbar navbar-main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="../../index.html">
<img class="logo-default" src="../../../images/logo.png" alt="logo" />
<img class="logo-retina" src="../../../images/logo-retina.png" alt="logo" />
</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Home <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../index-square.html">Square</a></li>
<li><a href="../../index-cube.html">Cube</a></li>
<li><a href="../../index-parallelogram.html">Parallelogram</a></li>
<li><a href="../../index-ellipse.html">Ellipse</a></li>
<li><a href="../../index-rectangle.html">Rectangle</a></li>
<li><a href="../../index-circle.html">Circle</a></li>
<li><a href="../../index-triangle.html">Triangle</a></li>
<li><a href="../../index-hexagon.html">Hexagon</a></li>
<li><a href="../../index-pentagon.html">Pentagon</a></li>
<li><a href="../../index-line.html">Line</a></li>
<li><a href="../../index-fullpage.html">Fullpage</a></li>
<li><a href="../../index.html">Intro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Pages <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Niche</a>
<ul class="dropdown-menu">
<li><a href="../../pricing.html">Pricing</a></li>
<li><a href="../../gallery.html">Photo & video</a></li>
<li><a href="../../faq.html">Faq</a></li>
<li><a href="../../history.html">History</a></li>
<li><a href="../../team.html">Team</a></li>
<li><a href="../../coming-soon.html">Coming soon</a></li>
<li><a href="../../404.html">404</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li><a href="../../about-us-1.html">About us one</a></li>
<li><a href="../../about-us-2.html">About us two</a></li>
<li><a href="../../about-us-3.html">About us three</a></li>
<li><a href="../../about-us-4.html">About us four</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contacts</a>
<ul class="dropdown-menu">
<li><a href="../../contacts-1.html">Contacts one</a></li>
<li><a href="../../contacts-2.html">Contacts two</a></li>
<li><a href="../../contacts-3.html">Contacts three</a></li>
<li><a href="../../contacts-4.html">Contacts four</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../portfolio-1.html">Portfolio one</a></li>
<li><a href="../../portfolio-2.html">Portfolio two</a></li>
<li><a href="../../portfolio-3.html">Portfolio three</a></li>
<li><a href="../../portfolio-4.html">Portfolio four</a></li>
<li><a href="../../portfolio-5.html">Portfolio five</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single item</a>
<ul class="dropdown-menu">
<li><a href="../../portfolio-single-1.html">Single one</a></li>
<li><a href="../../portfolio-single-2.html">Single two</a></li>
<li><a href="../../portfolio-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Blog <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../blog-grid.html">Grid</a></li>
<li><a href="../../blog-masonry.html">Masonry</a></li>
<li><a href="../../blog-classic.html">Classic</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single post</a>
<ul class="dropdown-menu">
<li><a href="../../blog-single-1.html">Single one</a></li>
<li><a href="../../blog-single-2.html">Single two</a></li>
<li><a href="../../blog-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown mega-tabs active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Elements <span class="caret"></span></a>
<div class="mega-menu dropdown-menu multi-level row bg-menu">
<div class="tab-box" data-tab-anima="fade-in">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Components</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Titles</a></li>
</ul>
<div class="panel active">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-posterous"></i> <a href="../../features/components/icons.html">Icons</a></li>
<li><i class="fa-li im-secound"></i> <a href="../../features/components/counters-countdown.html">Counters</a></li>
<li><i class="fa-li im-clock-back"></i> <a href="../../features/components/counters-countdown.html">Countdowns</a></li>
<li><i class="fa-li im-libra"></i> <a href="../../features/components/progress-bars.html">Progress bars</a></li>
<li><i class="fa-li im-arrow-refresh2"></i> <a href="../../features/components/progress-bars.html">Circle progress bars</a></li>
<li><i class="fa-li im-calendar-4"></i> <a href="../../features/components/timeline.html">Timeline</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/section-slider.html">Slider</a></li>
<li><i class="fa-li im-speach-bubbles"></i> <a href="../../features/components/php-contact-form.html">Contact form</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-hand-touch"></i> <a href="../../features/components/buttons.html">Buttons</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes.html">Image boxes</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes-advanced.html">Advanced image boxes</a></li>
<li><i class="fa-li im-id-2"></i> <a href="../../features/components/content-box.html">Content boxes</a></li>
<li><i class="fa-li im-facebook"></i> <a href="../../features/components/social-media.html">Social media</a></li>
<li><i class="fa-li im-numbering-list"></i> <a href="../../features/components/lists.html">Lists</a></li>
<li><i class="fa-li im-map2"></i> <a href="../../features/components/maps.html">Google maps</a></li>
<li><i class="fa-li im-bold-text"></i> <a href="../../features/components/typography.html">Typography</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-horizontal2window"></i> <a href="../../features/components/tables.html">Advanced table</a></li>
<li><i class="fa-li im-maximize"></i> <a href="../../features/containers/lightbox.html">Lightbox and popups</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/sliders.html">Sliders and carousels</a></li>
<li><i class="fa-li im-scroll-fast"></i> <a href="../../features/containers/scroll-box-collapse.html">Scroll box</a></li>
<li><i class="fa-li im-download-2"></i> <a href="../../features/containers/scroll-box-collapse.html">Collapse box</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/tabs.html">Tabs</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/accordions.html">Accordions</a></li>
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-grid.html">Grid</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-masonry.html">Masonry</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image.html">Background image</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image-parallax.html">Background parallax</a></li>
<li><i class="fa-li im-film-strip"></i> <a href="../../features/containers/section-background-video.html">Background video</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/containers/section-animations.html">Bg animations</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/parallax.html">Footer parallax</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/minimal.html">Footer minimal</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/base.html">Footer base</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic.html">Menu classic</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic-transparent.html">Menu classic transparent</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/big-logo.html">Menu big logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subline.html">Menu subline</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subtitle.html">Menu subtitle</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo.html">Menu middle logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo-top.html">Menu middle logo top</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-box.html">Menu middle box</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons.html">Menu icons</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons-top.html">Menu icons top</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side.html">Side classic</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-lateral.html">Side lateral</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-simple.html">Side simple</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image.html">Image background</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen.html">Image full-screen</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen-parallax.html">Image full-screen parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax.html">Image parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax-ken-burn.html">Image parallax ken-burn</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-mp4.html">Video background MP4</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-youtube.html">Video background Youtube</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen.html">Video full-screen</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen-parallax.html">Video full-screen parallax</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-parallax.html">Video parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-1.html">Title base 1</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-2.html">Title base 2</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation.html">Animation background</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation-parallax.html">Animation parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider.html">Slider background</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen.html">Slider full-screen</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen-parallax.html">Slider full-screen parallax</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-parallax.html">Slider parallax</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="header-base">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="title-base text-left">
<h1>Timeline</h1>
<p>This template come with lot of innovative features and an awesome and extensive documentation ready to be used to build your website.</p>
</div>
</div>
<div class="col-md-3">
<ol class="breadcrumb b white">
<li><a href="#">Home</a></li>
<li class="active">Features</li>
</ol>
</div>
</div>
</div>
</div>
<div class="section-empty">
<div class="container content">
<ul class="timeline">
<li>
<div class="timeline-badge"></div>
<div class="timeline-label"><h4>1940</h4><p>Company foundation</p></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Company foundation</h4>
</div>
<div class="timeline-body">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proidento.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"></div>
<div class="timeline-label"><h4>1948</h4><p>Company aquisition</p></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Company aquisition</h4>
</div>
<div class="timeline-body">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge"></div>
<div class="timeline-label"><h4>2002</h4><p>Become the leading</p></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Become the leading</h4>
<p><small class="text-muted">The begin of a great adventure</small></p>
</div>
<div class="timeline-body">
<p>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge"></div>
<div class="timeline-label"><h4>2018</h4><p>We are wordlwide leader</p></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">We are wordlwide leader</h4>
<p><small class="text-muted">The begin of a great adventure</small></p>
</div>
<div class="timeline-body">
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="section-empty text-center section-doc">
<div class="container content">
<h4 class="text-normal">Documentation</h4>
<p>This template is built with HTWF and more variants<br /> are available, check the official documentation for more details.</p>
<hr class="space xs" />
<a href="http://html.framework-y.com/components/#timeline" target="_blank" class="btn btn-sm">Go to documentation</a>
</div>
</div>
<footer class="footer-base">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tag-row icon-row icon-row-square">
<span><a>About</a></span>
<span><a>Services</a></span>
<span><a>Support</a></span>
<span><a>Contacts</a></span>
</div>
</div>
<div class="col-md-6 text-right text-center-sm">
<div class="btn-group social-group btn-group-icons">
<a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
<i class="fa fa-facebook text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
<i class="fa fa-twitter text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
<i class="fa fa-google-plus text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
<i class="fa fa-linkedin text-s"></i>
</a>
</div>
</div>
</div>
<div class="row copy-row">
<div class="col-md-12 copy-text">
© 2018 Structura - One page minimal template <span>Handmade by <a href="http://schiocco.com/">schiocco.com</a></span>
</div>
</div>
</div>
</div>
<script src="../../../HTWF/scripts/jquery.min.js"></script>
<script src="../../../HTWF/scripts/script.js"></script>
<link rel="stylesheet" href="../../../HTWF/scripts/iconsmind/line-icons.min.css">
<script src="../../../HTWF/scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../HTWF/scripts/jquery.tab-accordion.js"></script>
<script src="../../../HTWF/scripts/parallax.min.js"></script>
</footer>
</body>
</html>