Записи в ленточной форме для сайта на 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> <!-- cd-timeline-img --> <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><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-movie"><img alt="Movie" src= "/img/cd-icon-movie.svg"></div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Название под номером 2</h2> <p>И когда она выйдет на 7 ноября, это будет стоить $ 499 - вдвое больше, чем текущий Xbox One S.</p><a class= "cd-read-more" href="#0">Read more</a> <span class= "cd-date">Jan 18</span> </div><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-picture"><img alt="Picture" src= "/img/cd-icon-picture.svg"></div> <!-- cd-timeline-img --> <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><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-location"><img alt="Location" src= "/img/cd-icon-location.svg"></div> <!-- cd-timeline-img --> <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><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-location"><img alt="Location" src= "/img/cd-icon-location.svg"></div> <!-- cd-timeline-img --> <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><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> <div class="cd-timeline-block"> <div class="cd-timeline-img cd-movie"><img alt="Movie" src= "/img/cd-icon-movie.svg"></div> <!-- cd-timeline-img --> <div class="cd-timeline-content"> <h2>Названые поста</h2> <p>Оригинальные игры Xbox не только ближайшие к семье Xbox One.</p><span class= "cd-date">Feb 26</span> </div><!-- cd-timeline-content --> </div><!-- cd-timeline-block --> </section> Здесь еще устанавливается дата, что можете в ручную поставить или чтоб она работала, то оператор поможет. Чтоб примерно посмотреть как все отображаться будет, то можете посмотреть демонстрацию, но и на источнике узнать подробнее. Здесь также по этой теме: codyhouse.co/gem/vertical-timeline | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
