THESCRIPT - Все для вебмастера » Каталог файлов » uCoz » Записи в ленточной форме для сайта на CSS3

Записи в ленточной форме для сайта на CSS3

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

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

Приступаем к установке:

Сразу после /head на нужных страницах вставляйте:

<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type='text/javascript' src="/js/modernizr.js"></script>
<script type='text/javascript' src="/js/main.js"></script>

Теперь нам нужно на странице оформить этот стиль, что за ранее готовим его и потом ставим так где решили.

<section class="cd-container" id="cd-timeline">
  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-picture"><img alt="Picture" src=
  "/img/cd-icon-picture.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>ZORNET.RU</h2>
  <p>На сайте найдете все для создание сайта</p><a class="cd-read-more"
  href="#0">ХОЧУ!</a> <span class="cd-date">6 Декабря</span>
  </div>
  </div>

  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-movie"><img alt="Movie" src=
  "/img/cd-icon-movie.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>Название под номером 2</h2>
  <p>И когда она выйдет на 7 ноября, это будет стоить $ 499 - вдвое больше, чем текущий Xbox One S.</p><aclass=
  "cd-read-more" href="#0">Read more</a> <span class=
  "cd-date">Jan 18</span>
  </div>
  </div>

  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-picture"><img alt="Picture" src=
  "/img/cd-icon-picture.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>Title под номером 3</h2>
  <p>Названный «Xbox One X,» это мощный игровой автомат предназначен для полного на 4K игр и воспроизведения медиа. </p><a class=
  "cd-read-more" href="#0">Read more</a> <span class=
  "cd-date">Jan 24</span>
  </div>
  </div>

  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-location"><img alt="Location" src=
  "/img/cd-icon-location.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>Title под номером четыре</h2>
  <p>Во время вчерашней пресс-конференции E3, Microsoft представила готовую версию своего долгожданного полшага консоли. </p><a class="cd-read-more" href=
  "#0">Read more</a> <span class="cd-date">Feb 14</span>
  </div>
  </div>

  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-location"><img alt="Location" src=
  "/img/cd-icon-location.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>Здесь титле</h2>
  <p>Вы сможете играть системы Link-совместимых игр через каждое поколение консоли Xbox, от оригинала до последней Xbox One X.</p><a class=
  "cd-read-more" href="#0">Read more</a> <span class=
  "cd-date">Feb 18</span>
  </div>
  </div>

  <div class="cd-timeline-block">
  <div class="cd-timeline-img cd-movie"><img alt="Movie" src=
  "/img/cd-icon-movie.svg"></div>
  
  <div class="cd-timeline-content">
  <h2>Названые поста</h2>
  <p>Оригинальные игры Xbox не только ближайшие к семье Xbox One.</p><span class=
  "cd-date">Feb 26</span>
  </div>
  </div>
  </section>

Здесь еще устанавливается дата, что можете в ручную поставить или чтоб она работала, то оператор поможет. Чтоб примерно посмотреть как все отображаться будет, то можете посмотреть демонстрацию, но и на источнике узнать подробнее.