ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный вид вертикального таймлайна

Адаптивный вид вертикального таймлайна

В статье представлен отличное решение в адаптивной верстке для таймлайна, который идет для позиционирования колонок и блоков на страницы сайта. Где можно веб разработчику сделать оригинальную шкалу, которая идет по центру и разделяет информацию по правую и левую сторону. Где наиболее актуальнее становится вертикальная шкала, которую можно задействовать под многие сайты.

Что в этом скрипте можно заметить, это вывод пользователя, и потом уже от его имени идет описание. Что по такому принципу можно сделать и другие темы, как меню в кафе или информация, что переведена на картинки с аналогичным описанием. Если на интернет ресурс нужна яркая и простая по стилистике шкала, то эта адаптивная в вертикальном положение шкала идеально подойдет.

По умолчанию идет в светлой гамме цвета:

Адаптивная верстка вертикального таймлайна на CSS

Установка:

Нужно прописать стили CSS, где устанавливаем в HEAD на странице.

Код

HTML

Код

<section class="timeline">
  <div class="container">
  <div class="row">
  <div class="col-md-10 offset-md-1">
  <div class="row">

  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/78/6518083.jpg" alt="Веб-дизайн"></div>
  <p>Если в прошлом вы никогда не рассматривали возможность инвестирования.<span>11/04/2018</span></p>
  </div>
  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/78/0636432.jpg" alt="zornet.ru"></div>
  <p>В конце концов, юридическая транскрипция имеет много преимуществ.<span>12/04/2018</span></p>
  </div>
  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/78/8067829.jpg" alt="CSS3"></div>
  <p>Юридические услуги транскрипции к вашим услугам в любое время.<span>13/04/2018</span></p>
  </div>
  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/63/3027513.jpg" alt="Аватарки"></div>
  <p>Юридические услуги транскрипции часто проходят несколько различных уровней.<span>14/04/2018</span></p>
  </div>
  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/78/1757565.jpg" alt="Скрипты"></div>
  <p>Как, по вашему мнению, юристы могут хранить всю необходимую информацию по делу!<span>15/04/2018</span></p>
  </div>
  <div class="col-sm-6 col-xs-12 timeline-item">
  <div class="timeline-item-img"><img src="http://zornet.ru/_fr/78/8885689.jpg" alt="Шаблоны"></div>
  <p>Верьте или нет, расшифрованные документы на самом деле являются лучшим!<span>16/04/2018</span></p>
  </div>

  </div>
  </div>
  </div>
  </div>
  </section>

Ведь хороший дизайн может привести к увеличению посетителей и плохой дизайн для меньших посетителей, но когда все разделено по полочкам, что пользователю и гостям понятно, то это также считаю большим плюсом.

Что теперь можно в режиме онлайн все обновлять, в плане событий, и выводить ссылку на страницу, где будет находиться шкала, что можно вывести на отдельной площадке.

Демонстрация

Источник: webdesign-master.ru

20 Октября 2019 Загрузок: 4 Просмотров: 1124 Комментариев: (5)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 5
Порядок вывода комментариев: Kosten 20 Октября 2019 17:07¹ 0 Как можно корректно выпрямить на свою ссылку, что идет формате .css, если делать через файловый менеджер, то не чего не выходит. В сети искал, не что подобного не нашел. Просто бывает такое, что ссылки становиться битыми, и здесь лучше из на свой домен перекидывать. -SAM- 21 Октября 2019 15:55² 0 Там отвалился файл шрифта, поскольку не залили себе, когда стили заливали (вот и сделали ссылки битыми; или они изначально были такими, в том материале, откуда вы брали - не в курсе). Вот: ../fonts/RobotoRegular/RobotoRegular - это относительный путь. Залить нужно себе или поставить прямую ссылку (на источник таблицы стилей или поставить путь к этому шрифту через Google, GitHub - чтобы не отвалилось со временем). UPD.: значит не ясно чего вы спрашиваете (ведь ссылку выпрямили, что залили стили css себе). Чтобы всё работало должным образом, то содержимое по путям должно присутствовать (будут ли это относительные ссылки или прямые - не важно даже). А не так, что берёте материалы у других частично, не указывая полный путь на источник публикации. Если ссылки относительные - значит нужно копировать структуру полностью или менять на свою, заливая себе по выбранному пути (или ставить прямые ссылки на содержимое с первоисточников). И кстати, я проверил залито ли на том сайте, откуда брали - так вот там оно залито (/demos/hs/hs4/css/main.min.css)... хотя согласен с тем, что шрифты в данном случае можно не подключать те вовсе. Kosten 21 Октября 2019 16:06³ 0 Что отвалился шрифт. мне известно, но в основном когда ставят кнопки или информер, то от основного идет. Что по методу, то делал через ярлык, где создавая его можно выставить ссылку. Но другое, что его нельзя расположить в файловом менеджере как ссылку. Kosten 21 Октября 2019 17:23⁴ 0 Просто не раз бывало, что нужно именно стили CSS перевести под свой домен, где ФМ нормально выпрямляется, но стоит ее поменять, так все рушится. Потом создавал текстовый файл, и заливал его на ФМ, далее копировал и переносил, что аналогично все слетало при установки. Вот про это спрашиваю, как именно можно выпрямить, чтоб все корректно выводило. Здесь как видим получилось! Но жто не на всех файлов может так фартонуть. -SAM- 22 Октября 2019 00:13⁵ 0 Это нужно пример мне привести, в каком случае слетает и что именно. Файл слететь не может css, когда залит уже в ФМ своего сайта. Слетают пути, что прописаны в нём (как в примере выше - стоит относительная ссылка на подключенный шрифт).