CSS-таймлайны
Подборка бесплатных таймлайнов на HTML и CSS: адаптивных, простых, вертикальных и горизонтальных.
- Вертикальные таймлайны
- TIMELINE CSS
- SCROLL TIMELINE
- CSS TIMELINE
- CSS VERTICAL TIMELINE
- CSS TIMELINE
- RESPONSIVE SLIDER TIMELINE
- TIMELINE CREATED WITH CSS GRID
- ADVANCED TIMELINE
- TIMELINE WITH FIXED HEADER USING FLEXBOX
- PROJECT TIMELINE
- TIMELINE
- HYPERLOOP TIMELINE
- VERTICAL TIMELINE
- FLEXBOX TIMELINE LAYOUT
- SINGLE DIV TIMELINE
- CSS TIMELINE
- VERTICAL TIMELINE
- TIMELINE
- COMMENTS & FEEADBACKS & HISTORY TIMELINE
- UI DESIGN MORNING TIMELINE
- TIMELINE
- TIMELINE UI
- SIMPLE RESPONSIVE TIMELINE
- VERTICAL TIMELINE
- RESPONSIVE TIMELINE
- VERTICAL TIMELINE
- PRETTY TIMELINE
- CSS TIMELINE
- TIMELINE
Вертикальные таймлайны

- Автор: Джонатан Снук, 10 мая 2018 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS.
О коде
TIMELINE CSS
Простой пунктирный CSS-таймлайн.

- Автор: Виктор Лебедев, 18 февраля 2018 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript/Babel (jquery.js).
О коде
SCROLL TIMELINE
Вертикальный прокручиваемый таймлайн.

- Автор: Алан Хаузер, 24 января 2018 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML / CSS (Less).
О коде
CSS TIMELINE
CSS-таймлайн со шрифтами "Saira" и "Chivo".

- Автор: CP Lepag, 24 января 2018 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Pug) / CSS (Sass).
О коде
CSS VERTICAL TIMELINE
Вертикальный адаптивный таймлайн, созданный на основе Bootstrap.

- Автор: Стас Мельников, 30 сентября 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML, CSS.
О коде
CSS TIMELINE
CSS-таймлайн с пользовательскими свойствами.

- Автор: Бруно Карвальо, 30 августа 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript (swiper.js).
О коде
RESPONSIVE SLIDER TIMELINE
Адаптивный таймлайн-слайдер, созданный с помощью библиотеки Swiper JS.

- Автор: Диана Ченг, 15 июля 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML (Pug) / CSS (SCSS).
О коде
TIMELINE CREATED WITH CSS GRID
Адаптивный таймлайн, созданный с помощью CSS grid. Браузеры, которые не поддерживают CSS grid, получат мобильную версию таймлайна.

ADVANCED TIMELINE
- Создан с помощью: HTML / CSS / JavaScript.
- Автор: MO7AMED, 6 июня2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE WITH FIXED HEADER USING FLEXBOX
Таймлайн, созданный на основе HTML и CSS с фиксированным заголовком, использующий flexbox.
- Автор: Matys 29 мая 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

PROJECT TIMELINE
Таймлайн, созданный на основе HTML и CSS.
- Автор: Рассел Бишоп, 19 февраля 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
HTML, CSS и JavaScript таймлайн.
- Автор: Мерт Нерукус, 6 февраля 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HYPERLOOP TIMELINE
Таймлайн, созданный на основе HTML и CSS.
- Автор: Якуб Бачо, 29 февраля 2017 г.
- Ссылки: ссылка на скачивание.

VERTICAL TIMELINE
Вертикальный CSS-таймлайн с временными интервалами.
- Автор: Andres, 25 января 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

FLEXBOX TIMELINE LAYOUT
Flexbox-макет таймлайна. Задача, стоявшая перед разработчиками, заключалась в том, чтобы получить HTML-макет в виде таймлайна.
- Автор: Пол Бейкер, 16января 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

SINGLE DIV TIMELINE
Таймлайн, созданный с помощью HTML и CSS, всего с одним div.
- Автор: Нильс Фогт, 28 декабря 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS TIMELINE
Таймлайн, созданный с помощью HTML и CSS.
- Автор: Рафаель Юаким, 26 декабря 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Таймлайн, созданный на основе HTML и CSS.
- Автор: Аттикус Койя, 22 декабря 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
Образец CSS-таймлайна с вертикальными и горизонтальными линиями, созданными с помощью псевдоэлементов.
- Автор: Nomisoft, 7 декабря 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

COMMENTS & FEEADBACKS & HISTORY TIMELINE
Таймлайн с комментариями с обеих сторон.
- Автор: Хосам Элнабави, 28 ноября 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

UI DESIGN MORNING TIMELINE
Таймлайн утреннего расписания, созданный на основе HTML и CSS.
- Автор: Хун Нгуен, 17 сентября 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
Таймлайн, созданный на HTML и CSS.
Автор: Келси Сантанжело, 14 ноября 2016 г.
Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE UI
Учебный пример таймлайна.
- Автор: Симри Райншпергер, 13 сентября 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

SIMPLE RESPONSIVE TIMELINE
Простой адаптивный таймлайн, созданный на основе HTML и CSS.
- Автор: Бреди Райт, 8 сентября 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Вертикальный таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Сава Лазич, 4 сентября 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

RESPONSIVE TIMELINE
Адаптивный таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Арно Балан, 25 августа 2016 г.
- ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Таймлайн на основе HTML и CSS.
- Автор: Яго Гонсалес, 23 августа 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

PRETTY TIMELINE
Красивый таймлайн, созданный с помощью HTML и CSS.
- Автор: Эван Виланд, 14 июля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS TIMELINE
CSS-таймлайн, созданный с помощью HTML и CSS.
- Автор: Тристан Уайт, 10 июля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
Таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Радхика Праджапати, 6 июля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE WITH CSS
Вертикальный таймлайн, созданный на основе CSS с включением JavaScript.
- Автор: Envato Tuts+, 24 мая2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
Таймлайн для персонального проекта, созданный на основе HTML и CSS.
- Автор: Бруно Родригес, 3 апреля2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

COLLAPSABLE TIMELINE
Сворачиваемый таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Барни Паркер, 26 ноября 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS3 TIMELINE
Полностью адаптивный mobile first CSS-таймлайн.
- Автор: Кришна Бабу, 24 ноября 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

ANIMATED SVG TRAVEL TIMELINE
Анимированный таймлайн на тему путешествий, созданный с помощью HTML, CSS и SVG.
- Автор: Винс Браун, 29 июля 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Вертикальный таймлайн, созданный на чистом CSS.
- Автор: Дарси Вутт, 11 марта 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE ANIMATION
Простой анимированный таймлайн.
- Автор: Крис Райт, 12 февраля 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

NARROW VERTICAL TIMELINE
Плагин таймлайна для мобильных экранов.
- Автор: Тайлер Берри, 3 февраля 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE FOR A PORTFOLIO
Таймлайн для страницы портфолио.
- Автор: Эндрю Р МакХью, 1 февраля 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

RESPONSIVE VERTICAL TIMELINE
Адаптивный вертикальный таймлайн, созданный с помощью HTML и CSS.
- Автор: Ратко Солайя, 26 сентября 2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Легко настраиваемый, адаптивный таймлайн. В нем используется CSS3 и jQuery для создания анимации подпрыгивания. Она отображается только на десктопных устройствах. Мобильным пользователям предоставляется минималистичная версия.
- Автор: CodyHouse,12 июля2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE SCRIBBLE
Таймлайн, созданный с помощью HTML и CSS.
- Автор: Michaela, 20 апреля2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

VERTICAL TIMELINE
Таймлайн, созданный с помощью HTML и CSS.
- Автор: Росс МакНейл, 7 января 2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS TIMELINE
Полностью адаптивный CSS-таймлайн.
- Автор: Нильс Витлер, 19 сентября2013 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS3 TIMELINE
Чтобы увидеть горизонтальную версию, установите для переменной $vertical значение false.
- Автор: Пейвен Лю, 19 мая2013 г.
- Ссылки: ссылка на скачивание, демо-версия и код.
Горизонтальные таймлайны

- Автор: Клей Ларсон, 28 января 2018 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML, CSS/Sass, JavaScript (jquery.js)
О коде
RESPONSIVE TIMELINE V3
Таймлайн для десктопов, который на мобильных устройствах переключается на кликабельные круги. Когда вы кликаете по кругу, контент изменяется.
- Автор: demonwhite, 4 декабря 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML, CSS/Sass, JavaScript/TypeScript (jquery.js).
О коде
NESTED AND COLOR TIMELINE
Интерактивный таймлайн с вложенными элементами.

- Автор: Дежан Бибия, 12 октября 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML, CSS/SCSS, JavaScript (jquery.js, slick.js).
О коде
RESPONSIVE HISTORY TIMELINE
Горизонтальный адаптивный таймлайн на историческую тему.

- Автор: Абхишек Радж, 3 октября 2017 г.
- Ссылки: демо-версия и код.
- Создано с помощью: HTML/Pug, CSS/SCSS, JavaScript (jquery.js, slick.js).
О коде
GROUP TIMELINE
Горизонтальный таймлайн.

HORIZONTAL TIMELINE
Горизонтальный таймлайн, созданный с помощью CSS и JavaScript.
- Автор: Envato Tuts+, 27 апреля 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE
Таймлайн со слайдером на основе slick.js.
- Автор: cenda, 10 апреля 2017 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

4 PANEL TIMELINE CSS
Таймлайн, созданный на чистом CSS.
- Автор: Джефф Гленн, 22 декабря 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE SEQUENCE V1
Таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Youssef, 8 июня 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE MOCKUP
Горизонтальный таймлайн, созданный с помощью HTML, CSS и JavaScript.
- Автор: Xin YAO, 18 февраля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HR TIMELINE
Таймлайн, созданный с помощью HTML и CSS.
- Автор: Youri, 17 февраля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE INSPIRED BY CODYHOUSE
Горизонтальный таймлайн, для которого можно динамически задать не более 5 дат.
- Автор: Адам Киммерер, 9 февраля 2016 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE
Горизонтальный таймлайн, созданный на основе HTML, CSS и JavaScript.
- Автор: Ритеш Кумар, 24 декабря 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE
Горизонтальный таймлайн, созданный на HTML, CSS и JavaScript.
- Автор: Alberto, 6 июля 2015 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

TIMELINE
Простой абстрактный таймлайн, созданный с помощью HTML и CSS.
- Автор: Абхи Шарма, 23 декабря 2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

ANIMATED CIRCLE TIMELINE
Таймлайн с анимированными элементами, которые отображаются при наведении курсора.
- Автор: Йен Хуан, 11 декабря 2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE
Горизонтальный таймлайн, созданный на основе HTML, CSS и JavaScript.
- Автор: Элтон Мескита, 29 августа 2014 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

HORIZONTAL TIMELINE
Таймлайн, созданный на основе HTML и CSS.
- Автор: Клинт Браун, 30 сентября 2013 г.
- Ссылки: ссылка на скачивание, демо-версия и код.

CSS3 HORIZONTAL TIMELINE
Горизонтальный таймлайн.
- Автор: Пейвен Лю, 17 мая 2013 г.
- Ссылки: ссылка на скачивание, демо-версия и код.