Сетки

Сетка колонок 9 + 3 (Контент новости)

medium-9 column
medium-3 column
                          
    <div class="row collapse">
      <div class="primary medium-9 column"></div>
      <div class="secondary medium-3 column"></div>
    </div>
                        

Сетка из 7 колонок (Контент материала)

.medium-7 .medium-offset-2 .column
                        
    <div class="row collapse">
      <div class="longread-block__main medium-7 medium-offset-2 column"></div>
    </div>
                      

Сетка из 8 колонок (Текст колонки колумниста)

.medium-8 .medium-offset-2 .column
                          
        <div class="row collapse">
          <div class="longread-block__main medium-8 medium-offset-2 column"></div>
        </div>
                        

Сетка из 3 колонок (карточки материалов и новостей)

.medium-6 .large-4 .column
.medium-6 .large-4 .column
.medium-6 .large-4 .column
                            
    <div class="row collapse">
      <div class="medium-6 large-4 column">.medium-6 .large-4 .column</div>
      <div class="medium-6 large-4 column">.medium-6 .large-4 .column</div>
      <div class="medium-6 large-4 column">.medium-6 .large-4 .column</div>
    </div>
                        

Сетка 2/3 + 1/3 (карточки материалов и новостей)

.medium-12 .large-8 .column
.medium-6 .large-4 .column
                          
    <div class="row collapse">
      <div class="medium-12 large-8 column">.medium-12 .large-8 .column</div>
      <div class="medium-6 large-4 column">.medium-6 .large-4 .column</div>
    </div>
                        

Сетка из 2 колонок (раздел Фоторепортаж и Видео)

                          
    <div class="gallery-list row width-fix" id="content">
      <article class="medium-6 column"></article>
      <article class="medium-6 column"></article>
    </div>
                        

Сетка 5 + 7 (Страница колумниста)

.medium-5 .large-4 .column
.medium-7 .large-6 .end .column
                          
    <div class="row collapse">
      <div class="medium-5 large-4 column"></div>
      <div class="medium-7 large-6 end column"></div>
    </div>
                        

Цветовое кодирование тем

Цвета бирок для карточек с кавер-фото

Город Люди Ситуация Наука и техника Бизнес Спорт Weekend
                          
    <article class="image-card">
      ...
      <div class="tags">
        <span class="tag city">Город</span>
        <span class="tag people">Люди</span>
        <span class="tag info">Ситуация</span>
        <span class="tag tech">Наука и техника</span>
        <span class="tag business">Бизнес</span>
        <span class="tag sport">Спорт</span>
        <span class="tag weekend">Weekend</span>
      </div>
    </article> 
                      

Цвета бирок для карточек и для заголовка новости

Город Люди Ситуация Наука и техника Бизнес Спорт Weekend
                        
    <div class="tags">
      <span class="tag city">Город</span>
      <span class="tag people">Люди</span>
      <span class="tag info">Ситуация</span>
      <span class="tag tech">Наука и техника</span>
      <span class="tag business">Бизнес</span>
      <span class="tag sport">Спорт</span>
      <span class="tag weekend">Weekend</span>
    </div>
                      

Типографика

Шрифты

Шрифт поумолчанию для всего текста – Roboto

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

                          
      font-family: Roboto‚ Arial‚ Helvetica‚ sans-serif;
                        

Шрифт для заголовков – Ubuntu

СМИ сообщили о «странных действиях» экипажа при катастрофе Ту-154 в Сочи

                          
      font-family: Ubuntu‚ sans-serif;
                        

Шрифт для заголовков у главных материалов и на странице материала используем – PT Serif.

Я — морж

                          
      font-family: PT Serif‚ serif;
                        
Текст материала

Используется в текстах материалов и новостей

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

                          
      <p>...</p>
                        
                          
      margin: 1.25rem;
      color: #333;
      font-family: Roboto‚ sans-serif;
      font-weight: 300;
      font-size: 16px;
      line-height: 26px;
                        
Заголовки

HEADER 1

Заголовок материала

Культурная революция

                          
    <h1 class="post-header-title">...</h1>
                        
                          
    font-family: PT Serif‚ serif;
    font-weight: 400;
    font-size: 2.3rem;
    line-height: 1.2;
                        

Заголовок новости на странице одной новости

Главное за сутки

                          
    <header class="news-post-header">
        <h1 class="post-title">...</h1>
    </header>
                        

HEADER 2

Подзаголовок в материале (Заголовок секции внутри материала)

Геннадий: стаж моржевания 10 лет

                          
      <h2 class="title">...</h2>
                        

HEADER 3

Заголовок в карточке материала - с изображением и без изображения

Главное за сутки

                          
      <article class="image-card">
        <h3>...</h3>
      </article>
                        
                          
      <article class="post-card">
        <h3>...</h3>
      </article>
                        

Заголовок раздела

Новости

                        
    <header class="news-stream-header toolbar">
      <h3 class="news-stream-header__title">...</h3>
    </header> 
                      

Заголовок темы материала

                        
    <header class="material-stream-section__header">
      <h3 class="title">
        <a href="">...</a>
      </h3>
    </header>
                      

Заголовок типа новости в короткой версии хедера (при прокрутке)

Статья

                          
      <div class="topbar-header__title-post">
        <h3>...</h3>
      </div>
                        

Заголовок "Последние новости" и "Главное за сутки"

Главное за сутки

                          
      <h3 class="news-section__header">...</h3>
                        

HEADER 4

Подзаголовок количества материалов в теме материала

202 материала

                          
      <header class="material-stream-section__header">
        <h4 class="stat">...</h4>
      </header>
                        

HEADER 5

Заголовок новости в колонке "Последние новости

                          
      <ul class="news-list">
        <li>
          <h5 class="title">
            <a href="/news/samsung-predstavila-ubijcu-siri-101821">...</a>
          </h5>
        </li>
      </ul>
                        

Заголовок новости в короткой версии хедера (при прокрутке)

«Краснодар» — «Сельта»: 0:2. Фоторепортаж «Югополиса»
                          
      <div class="topbar-header__title-post">
        <h5>...</h5>
      </div>
                        

Заголовок "Читайте нас" в сайдбаре

Читайте нас:
                          
    <h5 class="small-header">...</h5>
                        

Заголовок в карточке автора в авторских колонках (имя автора)

                          
    <section class="authors-stream">
      <div class="author">
        <h5 class="title">
          <a href="">...</a>
        </h5>
      </div>
    </section>
                        

HEADER 6

Заголовок на странице автора (статус автора)

журналист
                          
    <div class="author">
        ...
        <h6 class="status">журналист</h6>
    </div>
                        

Подзаголовок в карточке автора в авторских колонках (статус автора)

журналист
                          
    <h6 class="stat">...</h6>
                        
Лид материала

Используется в заголовке материала.

Компания Apple представила стриминговый музыкальный сервис Apple Music, позволяющий слушать аудиозаписи из библиотеки iTunes, не скачивая их.

                          
      <div class="post-header-brief">
        <p>...</p>
      </div>
                        

Используется в текстах материала.

Славную победу одержал на днях известный борец за нравственность, предводитель нереестровых казаков, «доктор богословия» Альберт Гаямян. Краснодарский концерт музыканта Noize MC, против которого отважно выступил наш неистовый местный Савонарола, концерт, который должен был пройти не в храме, не в детском саду и не в квартире Альберта Гаямяна; на который не было потрачено ни копейки бюджетных денег; который собирались посетить взрослые дееспособные граждане, был официально отменён.

                          
      <div class="content-brief">
        <p>...</p>
      </div>
                        
Списки

Маркированный список

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
                          
      <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...
          <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ul>
        </li>
      </ul>
                        

Нумерованный список

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
                         
      <ol>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...
          <ol>
            <li>...</li>
            <li>...</li>
            <li>...</li>
          </ol>
        </li>
      </ol>
                        
Таблица

Таблица в материалах

Место проведения Время Наименование мероприятия
Сквер имени Г.К.Жукова 17.30 – 18.00 @Пролог
Презентационное выступление гусляра
Ул. Красная
Ул. Гимназическая
Сквер имени Г.К. Жукова
18.30 – 19.00 Парадное шествие казачьей кавалерии и девушек-барабанщиц
Сквер имени Г.К.Жукова 19.00 – 22.00 Праздничная театрализованная программа, посвященная Году российской истории и Отечественной войне 1812 года
                          
    <table class="event-table">
      <thead>
        <tr>
          <th>Место проведения</th>
          <th>Время</th>
          <th>Наименование мероприятия</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td scope="row">Сквер имени Г.К.Жукова</td>
          <td>17.30 – 18.00</td>
          <td>@Пролог<br>
          Презентационное выступление гусляра</td>
        </tr>
        <tr>
          <td scope="row">Ул. Красная<br>
          Ул. Гимназическая<br>
          Сквер имени Г.К. Жукова</td>
          <td>18.30 – 19.00</td>
          <td>Парадное шествие казачьей кавалерии и девушек-барабанщиц</td>
        </tr>
        <tr>
          <td scope="row">Сквер имени Г.К.Жукова</td>
          <td>19.00 – 22.00</td>
          <td>Праздничная театрализованная программа, посвященная Году российской истории и Отечественной войне 1812 года</td>
        </tr>
      </tbody>
    </table>
                        
Цитаты

Цитаты в материалах (кавычки слева)

Местная специфика такова, что практически весь информационный поток контролируется региональной властью. Это данность, от которой никуда не денешься»
                          
    <div class="quotation-card quote-left">
      <blockquote>...</blockquote>
    </div>
                        

Цитаты в материалах (кавычки сверху)

«Вовлечение в бред» — так психиатры называют случаи, когда здоровые люди идут на поводу у нездоровых.
                          
    <div class="longread-block">
      <div class="row">
        <div class="medium-3 column">
          <div  class="quotation-card quote-top">
            <blockquote>...</blockquote>
            <div class="caption">
              <div class="quote-button-wrapper">
                <a class="button quote-button radius" href="#"><i class="icon-twitter"></i>Цитировать</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Цитаты без кавычек

Самолет выпустил белый шлейф дымовой завесы и мы увидели римские цифры XII, обведенные кружком. Тогда не поняли, что это было.
                        
    <div class="quotation-card quote-left-border">
      <blockquote>...</blockquote>
    </div>
                      

Цитаты без кавычек с цветным фоном

Сегодня у нас 45 тысяч реестровых казаков, это очень мало для пятимиллионной Кубани. Нужно, чтобы у нас был миллион казаков или два с половиной миллиона, как это было на кубанской земле до 1917 года. Вот тогда вернется казачий уклад жизни.
                          
    <div class="colored-list">
      <div class="colored-list__item">
        <div class="page-width-wrapper">
          <div class="row">
            <div class="quotation-card quote-left-border">
              <blockquote>...</blockquote>
            </div>
            <div class="caption">
              <div class="quote-button-wrapper">
                <a href="">Ссылка</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
                        
Фактойд

Фактойд в материале

1991

год

Дата основания факультета журналистики КубГУ

                          
    <div class="side-stat">
      <h5>...</h5>
      <p class="red">...</p>
      <p>...</p>
    </div>
                        
Врезки

Врезка, выделенная цветным фоном

На фоне тотального молчания произошёл забавный казус. Газеты «Кубанские новости» и «Краевые новости» заретушировали трость Ткачёва на его фотографиях со встречи с патриархом Алексием II. В итоге губернатор предстал перед читателями в довольно странных позах — сжимающим то какую-то непонятную вещь, то пустоту.
                        
    <div class="longread-block">
      <div class="row collapse">
        <div class="medium-7 column">
          <span class="insert-yellow">
            <mark>...</mark>
          </span>
        </div>
      </div>
    </div>
                        

Врезка с фото и фоном

Проект Владимира Золотухина

Выдержка: «Казаки на вздыбленных лошадях — это мощь и движение вперед. Фигуры подняты на постамент и как бы парят над землей. Над всадниками возвышаются два архитектурных шпиля, между ними на высоте расположен шар как символ земли, которую они защищают».
                          
    <div class="longread-block">
      <div class="colored-list">
        <div class="colored-list__item">
          <div class="page-width-wrapper">
            <div class="row">
              <div class="large-3 medium-7 small-12 column">
                <img src="">
              </div>
              <div class="medium-8 column">
                <span>Проект Владимира Золотухина</span><br>
                <span>...</span>
              </div>
              <div class="medium-2 column"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
                        
Вынос

Вынос в материале

Начиная с 1 октября 2014 года на ремонт каждого пострадавшего транспортного средства выделяется до 400 тысяч
                          
    <div class="longread-block">
      <div class="page-width-wrapper">
        <div class="row collapse">
          <div class="medium-2 medium-pull-7 column end">
            <div class="side-stat image">
              <img src="" alt="">
              <div class="text">
                <p>...</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
                        
Крик

Крик в материале

В период аномальной жары повышение температуры на каждый градус увеличивает смертность на 3%

                          
    <div class="row">
      <div class="medium-2 column">
        <div class="side-shout">
          <p>...</p>
        </div>
      </div>
    </div>
                        
Справка или комментарий

Справка или комментарий в материалах

Местами он стихат

Колумнист «Югополиса» Анжелика Гюрза — о кубанской журналистике, бессмысленной и беспощадной.


Читать материал

                          
    <div class="side-reference">
      <div class="side-reference__thumb">
        <img src="" alt="">
      </div>
      <header class="side-reference__header">
        <h5 class="title">...</h5>
      </header>
      <div class="side-reference__content">
        <p>...</p><br>
        <p>
          <a href="" target="_blank">Читать материал</a>
        </p>
      </div>
    </div>
                        
Разделители для текста

Разделитель - линия черного цвета


                          
    <hr>
                        

Разделитель - линия из точек


                          
      <hr style="border-top: 1px dotted #ddd;">
                        

Разделитель - иконки по центру

⌘ ⌘ ⌘
                          
      <div style="text-align:center;">⌘ ⌘ ⌘</div>
                        

Разделитель - иконки по центру


                          
      <hr class="three">
                        

Разделитель - иконки по центру

                          
      <div style="text-align:center;">
        <img src="assets/img/bok.gif" style="width: 50px;">
      </div>
                        
Drop cap (буквица)

Drop cap (буквица) в материалах

Н

екоторые из вас, возможно, смотрели отечественный фильм Михаила Сегала «Рассказы». Помните последнюю новеллу? Обычная московская пробка, он и она, в этой пробке безнадежно застрявшие. Желтый от закатного солнца город, легкий ветер, шоколадная прядь кашемировых волос, струящаяся на ветру; изящная рука, выглядывающая из окна ее красной иномарки, «Мурка», доносящаяся из его. Ему на вид не меньше сорока, ей — не больше двадцати. Следующая сцена — постельная, на заднем сиденье ее новенькой «Ауди». Потом еще одна, и еще, и еще. Мне с тобой так интересно.Он был старше ее, но дальше не по Макаревичу. Она не знала, что такое Губчека и кто такие урки, кто и ради чего устроил Октябрьскую революцию, сколько людей погибло в Гражданскую. И о Ленине помнила только, что он вождь мирового пролетариата. И акул причисляла к классу млекопитающихся, но кому какое дело до акул. Скоро ему стало не о чем с ней трахаться.
                          
      <div class="longread-block">
        <div class="first-letter-big">
          <p>Н</p>
          ...
        </div>
      </div>
                        

Кнопки

Кнопка "Еще"

                        
      <div class="add-more-button" id="pagination">
        <a class="button radius more-button more-main" href="">
          <i class="icon-more-news"></i>Еще
        </a>
      </div>
                      

Кнопка "Читать"

                        
      <div class="link-to-post">
        <a href="">Читать →</a>
      </div>
                      

Кнопки на карточке фотоматериала

                        
      <article class="image-card">
        <div class="gallery-header-link">
          <a href="">
            <span class="info"><i class="icon-picture"></i>16 <b>фото</b></span>
            <span class="link"><i class="icon-play"></i> смотреть</span>
          </a>
        </div>
      </article> 
                      

Кнопка "Больше материалов"

                        
      <button class="button radius more-button more-materials" data-type="" data-url="">
        <i class="icon-more-news"></i> Больше материалов
      </button>
                      

Кнопка в форме авторизации

                        
      <div class="modal-section">
        <div class="account-form">
          <div class="buttons">
            <button type="submit" class="button radius">Войти</button>
          </div>
        </div>
      </div>
                      

Формы, элементы форм

Форма обратной связи на странице контактов

                        
    <div class="row">
      <div class="longread-block__main medium-8 medium-offset-2 end column">
        <div class="contact-form">
          <form class="ajaxForm" method="post" action="">
            <fieldset>
              <div>
                <label>Ваше имя</label>
                <input type="text" name="">
              </div>
              <div>
                <label for="email">Ваша электронная почта</label>
                <input type="email" name="" placeholder="Email">
              </div>
              <div>
                <label for="">Адрес страницы (если вы пишите о конкретном материале)</label>
                <input type="text" name="" placeholder="http://">
              </div>
              <div>
                <label for="">Комментарий</label>
                <textarea name=""></textarea>
              </div>
              <button class="button submit-button radius" type="submit">Отправить</button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
                      

Форма авторизации

                        
      <div class="modal-section">
        <div class="row">
          <div class="medium-6 large-offset-3 column">
            <form action="" method="" class="account-form ajaxForm" id="login_form">
              <input type="hidden" name="" value="">
              <h6 class="account-form__title">Войти с помощью электронной почты и пароля:</h6>
              <fieldset>
                <div>
                  <label for="email">Электронная почта</label>
                  <input type="text" name="" placeholder="Email">
                </div>
                <div>
                  <label for="email">Пароль</label>
                  <input type="password" name="" placeholder="Password">
                  <div class="field-tip">
                    <a href="" data-reveal-id="user-resetting-modal">
                      Восстановить пароль →
                    </a>
                  </div>
                </div>
                <div>
                  <label>
                    <input type="checkbox" name="">
                    Запомнить меня
                  </label>
                </div>
                <div class="buttons">
                  <button type=" submit" class="button radius">Войти</button>
                </div>
                <div>
                  <div class="open-next-modal">Нет аккаунта?
                    <a href="" data-reveal-id="user-register-modal">Зарегистрируйтесь →</a>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
                      

Форма для редактирования профиля

                        
       <div class="modal-section">
        <div class="row">
          <div class="medium-7 column">
            <div>
              <div class="account-form__user-avatar clearfix">
                <div class="avatar">
                  <img src="" class="avatar my-avatar">
                </div>
                <div class="avatar-tip">
                  Используйте квадратную картинку, чтобы все было красиво
                  <div class="load-field">
                    <input type="file" name="avatar" id="avatar">
                  </div>
                </div>
              </div>
            </div>
            <form class="account-form ajaxForm" action="" method="POST" id="">
              <fieldset>
                <div>
                  <label for="fio">Имя и Фамилия</label>
                  <input type="text" id="" name="" required="required" class="form-row-split" value="">
                  <div class="field-tip">Отображается в комментариях</div>
                </div>

                <div>
                  <label for="email">Электронная почта</label>
                  <input type="email" id="" name="" required="required" value="">
                </div>
                <div>
                  <label for="email">Текущий пароль</label>
                  <input type="password" id="" name="" required="required">
                </div>
                <input type="hidden" id="" name="" value="">
                <div class="buttons">
                  <button type="submit" class="button radius">Сохранить</button>
                </div>
              </fieldset>
            </form>
          </div>
          <div class="medium-5 column">
            <form class="account-form ajaxForm" action="" method="POST" id="">
              <h6 class="account-form__title">Сменить пароль:</h6>
              <fieldset>
                <div>
                  <label for="">Текущий пароль</label>
                  <input type="password" id="" name="" required="required">
                </div>
                <div>
                  <label for="form.new_password">
                    <label for="" class="required">Новый пароль</label>
                  </label>
                  <input type="password" id="" name="" required="required" class="form-input">
                </div>
                <div>
                  <label for="">
                    <label for="f" class="required">Еще раз</label>
                  </label>
                  <input type="password" id="" name="" required="required" class="form-input">
                </div>
                <div class="buttons">
                  <button type="submit" class="button radius">Изменить</button>
                </div>
              </fieldset>
              <input type="hidden" id="" name="" value="">
            </form>
          </div>
        </div>
      </div>
                      

Форма добавления комментария

                        
    <section class="comments-section" id="comments">
      <div class="row">
        <div class="comments-stream-container medium-8 column">
          <div class="comments-stream">
            <div class="comment comments-form">
              <a class="avatar" href="" title="" data-reveal-id="user-login-modal">
                <img src="">
              </a>
              <form method="post">
                <textarea name=""></textarea>
                <div class="comment-form-footer row collapse">
                  <div class="warning small-7 column">
                    Внимание! Комментарии модерируются.
                    Запрещена ненормативная лексика, а также оскорбление участников дискуссии.
                  </div>
                  <div class="small-5 column">
                    <button class="button submit-button radius right">Комментировать</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
                      

Карточки

Стандартные карточки

Стандартная карточка фоторепортажа

                          
      <article class="image-card">
        <img srcset="" src="">
        <div class="caption">
          <div class="tags">
            <span class="tag city">Город</span>
          </div>
          <h3 class="title">
            <a href="">Я — морж</a>
          </h3>
          <div class="gallery-header-link">
            <a href="">
              <span class="info"><i class="icon-picture"></i>16 <b>фото</b></span>
              <span class="link"><i class="icon-play"></i> смотреть</span>
            </a>
          </div>
        </div>
      </article>
                          

Стандартная карточка для колумниста с юзерпиком

                          
      <article class="post-card">
        <div class="thumbnail">
          <div class="avatar">
            <div class="avatar">
              <img src="">
            </div>
          </div>
          <div class="author">
            <a href=""> Бабаева</a>
          </div>
        </div>
        <div class="caption center">
          <div class="tags">
            <span class="tag people">Люди</span>
          </div>
          <h3 class="title">
            <a href="">Самая обаятельная и влиятельная</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Стандартная карточка для материала

Люди

Религия в контакте

Астрофизик, религиовед и представители четырёх конфессий рассказали «Югополису» о том, как относится религия к обнаружению внеземной жизни.
Денис Куренов
                          
      <article class="post-card">
        <div class="thumbnail">
          <img srcset="" src="">
        </div>
        <div class="caption">
          <div class="tags">
            <span class="tag people">Люди</span>
          </div>
          <h3 class="title">
            <a href="">Религия в контакте</a>
          </h3>
          <div class="brief">...</div>
          <div class="author">Денис Куренов</div>
        </div>
      </article>
                        

Стандартная карточка для колумниста с фотокавером

                          
      <article class="post-card">
        <div class="thumbnail">
          <img src="">
          <div class="card__thumbnail__avatar">
            <div class="avatar">
              <img src="">
            </div>
            <div class="author">
              <a href="#">Анжелика Гюрза</a>
            </div>
          </div>
        </div>
        <div class="caption">
          <div class="tags">
            <span class="tag">Weekend</span>
            <span class="tag info">Город</span>
          </div>
          <h3 class="title">
            <a href="#">Места знать надо</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Стандартная карточка для колумниста с фоном "дерева"

                          
      <article class="post-card bg-wooden">
        <div class="thumbnail">
          <div class="avatar">
            <img src="">
          </div>
          <div class="author">
            <a href="#">Анжелика Гюрза</a>
          </div>
        </div>
        <div class="caption center">
          <div class="tags">
            <span class="tag">Weekend</span>
            <span class="tag info">Город</span>
          </div>
          <h3 class="title">
          <a href="#">Места знать надо</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Карточка материала без бордера

                          
      <article class="post-card no-border ">
        <div class="thumbnail">
          <img srcset="" src="">
        </div>
        <div class="caption center">
          <div class="tags">
            <span class="tag sport">Спорт</span>
          </div>
          <h3 class="title ">
            <a href="">«Краснодар» — «Сельта»: 0:2. Фоторепортаж «Югополиса»</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Стандартная карточка материала с графическим рисунком и цветным фоном

                          
      <article class="post-card">
        <div class="thumbnail">
          <img srcset="" src="">
        </div>
        <div class="caption">
          <div class="tags">
            <span class="tag people">Люди</span>
          </div>
          <h3 class="title">
            <a href="">Вопрос. Почему государственные медучреждения не принимают от
            пациентов  рекомендации из частных клиник?</a>
          </h3>
          <div class="brief">...</div>
        </div>
      </article>
                        

Карточки новостей на главной странице

                          
      <div class="row">
        <div class="medium-8 column">
          <h3 class="news-section__header">Главное за сутки</h3>
          <div class="news-cards-stream row">
            <div class="medium-6 column">
              <article class="news-card">
                <div class="thumbnail">
                  <a href="">
                    <img srcset="" src="" alt="">
                  </a>
                </div>
                <h5 class="title">
                  <a href="">
                    Организаторы «Евровидения» нашли способ дать Самойловой выступить
                    <span class="time"> сегодня, 19:35</span>
                  </a>
                </h5>
              </article>
            </div>
            <div class="medium-6 column">
              <article class="news-card">
                <div class="thumbnail">
                  <a href="">
                    <img srcset="" src="" alt="">
                  </a>
                </div>
                <h5 class="title"><a href="">Убийца Вороненкова умер в больнице
                <span class="time"> сегодня, 17:07</span></a></h5>
              </article>
            </div>
            <div class="medium-6 column">
              <article class="news-card">
                <div class="thumbnail">
                  <a href="">
                    <img srcset="" src="" alt="">
                  </a>
                </div>
                <h5 class="title">
                  <a href="">
                    Губернатор Кубани ужаснулся, проехав по краснодарским дорогам
                    <span class="time"> сегодня, 12:27</span>
                  </a>
                </h5>
              </article>
            </div>
            <div class="medium-6 column">
              <article class="news-card">
                <div class="thumbnail">
                  <a href="">
                    <img srcset="" src="" alt="">
                  </a>
                </div>
                <h5 class="title">
                  <a href="">
                    Организаторы митинга «Он вам не Димон» в Краснодаре намерены провести его,
                    несмотря на запреты власти
                    <span class="time">сегодня, 12:13</span>
                  </a>
                </h5>
              </article>
            </div>
          </div>
        </div>
      </div>
                        

Большая карточка материала или фоторепортажа

Люди Ситуация

Итоги 2016 года: словарный запас

Юрий Лоза, нооскоп Вайно, тракторный марш, русиано, бабушка Кабаевой и мельдоний: «Югополис» составил словарь года.

                          
      <article class="image-card image-card__2x2">
        <img src="">
        <div class="caption center">
          <div class="tags">
            <span class="tag people">Люди</span>
            <span class="tag info">Ситуация</span>
          </div>
          <h3 class="title">
            <a href="">Итоги 2016 года: словарный запас</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Сдвоенная карточка материала

Город Люди Ситуация

Евгений Первышов: «Время прожектов и обещаний закончилось»

Мэр Краснодара рассказал «Югополису» о своей кадровой политике, реакции на арест вице-мэра Ольги Яковлевой, о том, как он относится к платным парковкам и почему нужно менять главного архитектора Краснодара.

                          
      <article class="image-card">
        <img srcset="" src="">
        <div class="caption">
          <div class="tags">
            <span class="tag city">Город</span>
            <span class="tag people">Люди</span>
            <span class="tag info">Ситуация</span>
          </div>
          <h3 class="title">
            <a href="">Евгений Первышов: «Время прожектов и обещаний закончилось»</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Карточка цифра дня – ссылка ведет на новость

                        
    <a href="">
      <article class="post-card num-card">
        <div class="title">Цифра дня</div>
        <div class="data slabtextdone">
          <span class="slabtext"> 14%</span>
        </div>
        <div class="brief">
          <p>россиян выступают за запрет бэби-боксов в стране.</p>
        </div>
        <div class="footer">
          <div class="date">
            <i class="icon-time"></i> 28 окт 2016
          </div>
        </div>
      </article>
    </a> 
                      

Карточка цитата – ссылка ведет на новость или материал

                          
      <article class="post-card quotation-card quote-top">
        <blockquote class="center">
          <p>
            <a href="">...</a>
          </p>
        </blockquote>
        <div class="caption center">
          <div class="brief">...</div>
        </div>
      </article>
                        

Стандартная карточка для спортивной новости с двумя командами

                          
      <article class="post-card bg-grey">
        <div class="score">
          <div class="row collapse">
            <div class="small-6 column">
              <h5>Португалия</h5>
              <h4>1</h4>
            </div>
            <div class="small-6 column">
              <h5>Франция</h5>
              <h4>0</h4>
            </div>
          </div>
        </div>
        <div class="caption">
          <div class="tags">
            <span class="tag sport">Спорт</span>
          </div>
          <h3 class="title small">
            <a href="">...</a>
          </h3>
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Сдвоенная карточка-цитата

                          
      <article class="post-card double quotation-card quote-left">
        <img class="bg-image" src="">
        <blockquote>
          <p>
            <a href="">...</a>
          </p>
        </blockquote>
        <div class="caption">
          <div class="brief">
            <p>...</p>
          </div>
        </div>
      </article>
                        

Сдвоенная карточка поста колумниста

                          
      <article class="image-card">
        <img src="">
        <div class="card__thumbnail__avatar">
          <div class="avatar"><img src=""></div>
          <div class="author">
            <a href="#">Анжелика Гюрза</a>
          </div>
        </div>
        <div class="caption">
          <div class="tags">
            <span class="tag people">Ситуация</span>
          </div>
          <h3 class="title"><a href="#">Места знать надо</a></h3>
          <div class="gallery-header-link">
            <a href="#">
              <span class="info"><i class="icon-picture"></i> 29 <b>фото</b></span>
              <span class="link"><i class="icon-play"></i> смотреть</span>
            </a>
          </div>
        </div>
      </article>
                        
Цветовое кодирование карточек

Сдвоенная карточка поста колумниста (цвет #fff8dc;)

Weekend Город

Места знать надо

«Югополис» составил список самых популярных мест в Краснодаре по версии сервиса Foursquare.

                          
      <div class="medium-6 large-4 column" style="">
        <article class="post-card bg-yellow">
          <div class="thumbnail">
            <div class="icon">
              <img src="">
            </div>
          </div>
          <div class="caption">
            <div class="tags">
              <span class="tag">Weekend</span>
              <span class="tag info">Город</span>
            </div>
            <h3 class="title">
              <a href="#">Места знать надо</a>
            </h3>
            <div class="brief">
              <p>...</p>
            </div>
          </div>
        </article>
      </div>
                        

Сдвоенная карточка поста колумниста (цвет #f1f1f1;)

Weekend Город

Места знать надо

«Югополис» составил список самых популярных мест в Краснодаре по версии сервиса Foursquare.

                          
      <div class="medium-6 large-4 column">
        <article class="post-card bg-grey">
          <div class="thumbnail">
            <div class="icon">
              <img src="">
            </div>
          </div>
          <div class="caption">
            <div class="tags">
              <span class="tag">Weekend</span>
              <span class="tag info">Город</span>
            </div>
            <h3 class="title">
              <a href="#">Места знать надо</a>
            </h3>
            <div class="brief">
              <p>...</p>
            </div>
          </div>
        </article>
      </div>
                        

Сдвоенная карточка поста колумниста (цвет #f8f8ff;)

Weekend Город

Места знать надо

«Югополис» составил список самых популярных мест в Краснодаре по версии сервиса Foursquare.

                          
      <div class="medium-6 large-4 column">
        <article class="post-card bg-ghostwhite">
          <div class="thumbnail">
            <div class="icon">
              <img src="">
            </div>
          </div>
          <div class="caption">
            <div class="tags">
              <span class="tag">Weekend</span>
              <span class="tag info">Город</span>
            </div>
            <h3 class="title">
              <a href="#">Места знать надо</a>
            </h3>
            <div class="brief">
              <p>...</p>
            </div>
          </div>
        </article>
      </div>
                        

Сдвоенная карточка поста колумниста (цвет #efd7ed;)

Weekend Город

Места знать надо

«Югополис» составил список самых популярных мест в Краснодаре по версии сервиса Foursquare.

                          
      <div class="medium-6 large-4 column">
        <article class="post-card bg-pink">
          <div class="thumbnail">
            <div class="icon">
              <img src="">
            </div>
          </div>
          <div class="caption">
            <div class="tags">
              <span class="tag">Weekend</span>
              <span class="tag info">Город</span>
            </div>
            <h3 class="title">
              <a href="#">Места знать надо</a>
            </h3>
            <div class="brief">
              <p>...</p>
            </div>
          </div>
        </article>
      </div>
                        

Сдвоенная карточка поста колумниста (цвет #ddf0e4;)

Weekend Город

Места знать надо

«Югополис» составил список самых популярных мест в Краснодаре по версии сервиса Foursquare.

                          
      <div class="medium-6 large-4 column">
        <article class="post-card bg-palegreen">
          <div class="thumbnail">
            <div class="icon">
              <img src="">
            </div>
          </div>
          <div class="caption">
            <div class="tags">
              <span class="tag">Weekend</span>
              <span class="tag info">Город</span>
            </div>
            <h3 class="title">
              <a href="#">Места знать надо</a>
            </h3>
            <div class="brief">
              <p>...</p>
            </div>
          </div>
        </article>
      </div>
                        

Блоки

Блок с фактами

22 000
Общая площадь ТРК «Сити Центр», кв.м.
11 000
Арендная площадь, кв.м.
85
Магазинов + 1 супермаркет
800
Парковочных мест
                          
    <div class="row collapse fact_line">
      <div class="small-12 medium-3 large-3 columns fact_line_block">
        <div class="fact_number">...</div>
        <div class="fact_text">...</div>
      </div>
      <div class="small-12 medium-3 large-3 columns fact_line_block">
        <div class="fact_number">...</div>
        <div class="fact_text">...</div>
      </div>
      <div class="small-12 medium-3 large-3 columns fact_line_block">
        <div class="fact_number">..</div>
        <div class="fact_text">...</div>
      </div>
      <div class="small-12 medium-3 large-3 columns fact_line_block">
        <div class="fact_number">...</div>
        <div class="fact_text">...
      </div>
    </div>
                        

Блок представления автора


Николай Табашников
Директор Молодежного театра
                          
      <div class="row">
        <div class="large-3 medium-7 small-12 column">
          <img src="">
        </div>
        <div class="medium-8 column">
          <br>
          <span>Николай Табашников</span>
          <br>
          <span>Директор Молодежного театра</span>
          <br>
        </div>
      </div>
                        

Материалы по теме

Материалы по теме (вне основного содержания)

                          
      <div class="related-posts">
        <h5 class="title-small">
          <a href="#">Материалы по теме</a>
        </h5>
        <ul class="news-list">
          <li>
            <a href="#">
              <img src="">
            </a>
            <h5 class="title"><a href="#">На Кубани на 18 лет осужден мужчина, сжегший трупы своих жертв
            <span class="time">10:32</span></a></h5>
          </li>
          <li>
            <h5 class="title"><a href="#">Биржевой курс доллара упал ниже 51 рубля
            <span class="time">10:07</span></a></h5>
          </li>
          <li>
            <h5 class="title"><a href="#">Работы по берегоукреплению реки Кубань в
              Краснодаре оценены в 6 млрд рублей 22 Апреля
            <span class="time">9:51</span></a></h5>
          </li>
        </ul>
      </div>
                        

Медиаблок

Блок без подписи в материале

Alt
                          
    <div class="media-block">
      <div class="media-block__media">
        <img src="" alt="">
      </div>
    </div>
                        

Блок с подписью в материале

Alt
                        
    <div class="media-block">
      <div class="media-block__media">
        <img src="" alt="">
      </div>
      <div class="media-block__caption">
        <h6 class="copyright"><i class="icon-camera"></i> Саша Сайгер для «Югополиса»</h6>
      </div>
    </div>
                      

Слайдер с фото

                        
    <div class="media-block">
      <div class="media-block__media">
        <div class="carousel flickity-enabled is-draggable" tabindex="0">
          <img src="" alt="">
          <img src="" alt="">
          <img src="" alt="">
          <img src="" alt="">
          <img src="" alt="">
          <img src="" alt="">
        </div>
        <div class="media-block__caption">
          <div class="media-block__caption">
            <h6 class="copyright"><i class="icon-camera"></i> Максим Тишин / Югополис</h6>
          </div>
        </div>
      </div>
    </div>
                      

Вставка видео

Видео с Youtube

                          
     <div class="media-block">
        <div class="media-block__media">
          <div class="flex-video">
            <iframe width="100%" src="" frameborder="0" allowfullscreen=""></iframe>
          </div>
        </div>
     </div>
                        

Виджеты

Социальные кнопки

98
0
2
                          
     <div class="likely likely_visible likely_ready" data-zeroes="yes" data-html="yes">
        <div class=" likely__widget likely__widget_twitter">
          <span class="likely__icon likely__icon_twitter">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">...</svg>
          </span>
          <span class="likely__button likely__button_twitter"></span>
        </div>
        <div class=" likely__widget likely__widget_facebook">
          <span class="likely__icon likely__icon_facebook">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">...</svg>
          </span>
          <span class="likely__button likely__button_facebook"></span>
          <span class="likely__counter likely__counter_facebook">98</span>
        </div>
        <div class=" likely__widget likely__widget_vkontakte">
          <span class="likely__icon likely__icon_vkontakte">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">...</svg>
          </span>
          <span class="likely__button likely__button_vkontakte"></span>
          <span class="likely__counter likely__counter_vkontakte">0</span>
        </div>
        <div class=" likely__widget likely__widget_odnoklassniki">
          <span class="likely__icon likely__icon_odnoklassniki">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">...</svg>
          </span>
          <span class="likely__button likely__button_odnoklassniki"></span>
          <span class="likely__counter likely__counter_odnoklassniki">2</span>
        </div>
     </div>
                        

Комментарии и последние обсуждения

Комментарии

2 комментария

avatar
the subscriber is unavailable вчера, 19:45
Не законно покрывать вора и жулика Димона, а митинговать очень даже законно.
Авторизуйтесь, чтобы можно было оставлять комментарии.
                          
        <section class="comments-section">
          <div class="row">
            <div class="comments-stream-container medium-8 column">
              <h3 class="col-header">2 комментария</h3>
              <div class="comments-stream">
                <div class="comment">
                  <strong class="avatar">
                    <img class="avatar" src="" alt="avatar">
                  </strong>
                  <h6>
                    <strong>the subscriber is unavailable</strong>
                    <span>вчера, 19:45</span>
                  </h6>
                  <div>...</div>
                </div>
              </div>
              <div class="media">
                <div class="media-body" style="">
                  <div>
                    <a href="" data-reveal-id="user-login-modal">Авторизуйтесь</a>,
                    чтобы можно было оставлять комментарии.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
                      

Последние обсуждения

                        
      <section class="comments-section">
        <div class="row">
          <div class="recently-commented medium-4 column">
            <h3 class="col-header">Последние обсуждения</h3>
            <ul>
              <li>
                <span>22</span>
                <a href="">...</a>
              </li>
              <li>
                <span>1</span>
                <a href="">...</a>
              </li>
              <li>
                <span>1</span>
                <a href="">...</a>
              </li>
              <li>
                <span>2</span>
                <a href="">...</a>
              </li>
            </ul>
          </div>
        </div>
      </section>
                      

Лонгрид

Пост с фото-кавером в разделах, он же врезка

                          
    <section class="cover-header cover-test">
      <div id="page-topbar-fix" class="page-topbar-fix" style="height: 60px;"></div>
      <header class="post-header post-header-center">
        <div class="page-width-wrapper">
          <div class="post-header-wrapper">
            <div class="post-header-tag">
              <span class="tag weekend">Weekend</span>
            </div>
            <a href="">
              <h2 class="post-header-title">Премьера недели. «Живое»</h2>
              <div class="post-header-brief">
                <p>...</p>
              </div>
              <div class="post-header-info">
                <span class="time"><i class="icon-time"></i>сегодня, 19:52</span>
                <span class="author">Сабина Бабаева</span>
              </div>
            </a>
            <div class="link-to-post">
              <a href="">Читать →</a>
            </div>
          </div>
        </div>
      </header>
      <div class="backstretch">
        <img src="">
      </div>
    </section>
                        

Первый экран лонгрида с фото-кавером

                        
    <section class="cover-header cover-test">
      <div class="page-topbar-fix"></div>
      <header class="post-header">
        <div class="page-width-wrapper">
          <div class="post-header-wrapper">
            <div class="post-header-tag">
              <span class="tag city">Город</span>
              <span class="tag info">Ситуация</span>
            </div>
            <a href="#">
              <h2 class="post-header-title">«Сплошной помпезный колхоз».
                  Как власть на Кубани паразитирует на идее казачества</h2>
              <div class="post-header-brief">
                <p>...</p>
              </div>
              <div class="post-header-info">
                <span class="time"><i class="icon-time"></i>07 мар, 11:03</span>
                <span class="author">Денис Куренов</span>
              </div>
            </a>
          </div>
        </div>
      </header>
      <div class="backstretch">
        <img src="">
      </div>
    </section>
                      

Заголовок лонгрида без фото-кавера

Ситуация

Крушение A320. Как проходит поисковая операция в Альпах

Утром 24 марта в предгорье французских Альп разбился пассажирский самолет Airbus A320 авиакомпании Germanwings.

23 фев, в 12:00 Евгений Резник
                        
    <header class="post-header post-header-center simple">
      <div class="page-width-wrapper">
        <div class="post-header-wrapper">
          <div class="post-header-tag">
            <span class="tag people">Ситуация</span>
          </div>
          <h2 class="post-header-title">Крушение A320. Как проходит поисковая операция в Альпах</h2>
          <div class="post-header-brief">
            <p>...</p>
          </div>
          <div class="post-header-info">
            <span class="time"><i class="icon-time"></i> 23 фев, в 12:00</span>
            <span class="author">Евгений Резник</span>
          </div>
        </div>
      </div>
    </header>
                      

Вставка фото

Вставка из инстаграмм


                            
    <div class="medium-8 column">
      <iframe class="instagram-media instagram-media-rendered" id="instagram-embed-0" src="" allowtransparency="true"
       frameborder="0" height="501" data-instgrm-payload-id="instagram-media-payload-0" scrolling="no" style=""></iframe>
      <script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>
      <br>
    </div>
                          

Большое фото с подписью в материале

Добро пожаловать в Краснодар!
                          
      <div class="media-block center">
        <div class="media-block__media">
          <img srcset="" src="" alt="">
        </div>
        <div class="media-block__caption">
          <h6 class="copyright"><i class="icon-camera"></i> Юрий Гречко / Югополис</h6>
        </div>
      </div>
                        

4 фото с подписью

                          
      <div class="media-block">
        <div class="media-block__media">
          <div class="">
            <div class="row small-collapse medium-uncollapse">
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-6 column">
                <img src="">
              </div>
            </div>
          </div>
        </div>
        <div class="media-block__caption">
          <div class="media-block__caption">
            <h6 class="copyright"><i class="icon-camera"></i> Денис Яковлев / Югополис</h6>
          </div>
        </div>
      </div>
                        

Вставка фото с подписью в новость

                          
      <div class="post-picture">
        <img srcset="" src="">
        <h6 class="copyright"><i class="icon-camera"></i> Юрий Гречко / Югополис</h6>
      </div>
                        

Большое фото и 3 стандартных

                          
      <div class="media-block">
        <div class="media-block__media">
          <div class="">
            <div class="row small-collapse medium-uncollapse">
              <div class="medium-12 column">
                <img src="">
              </div>
              <div class="medium-4 small-4 column">
                <img src="">
              </div>
              <div class="medium-4 small-4 column">
                <img src="">
              </div>
              <div class="medium-4 small-4 column">
                <img src="">
              </div>
            </div>
          </div>
        </div>
        <div class="media-block__caption">
          <div class="media-block__caption">
            <h6 class="copyright"><i class="icon-camera"></i> Максим Тишин / Югополис</h6>
          </div>
        </div>
      </div>
                        

Вставка с вертикальным фото

                          
      <div class="media-block">
        <div class="media-block__media">
          <div class="">
            <div class="row small-collapse medium-uncollapse">
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-6 column">
                <div class="row">
                  <div class="medium-12">
                    <img src="">
                  </div>
                  <div class="medium-12">
                    <img src="">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="media-block__caption">
          <div class="media-block__caption">
            <h6 class="copyright"><i class="icon-camera"></i> Евгений Резник / Югополис</h6>
          </div>
        </div>
      </div>
                        

5 фото

                          
      <div class="media-block">
        <div class="media-block__media">
          <div class="">
            <div class="row small-collapse medium-uncollapse">
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-6 column">
                <img src="">
              </div>
              <div class="medium-4 column">
                <img src="">
              </div>
              <div class="medium-4 column">
                <img src="">
              </div>
              <div class="medium-4 column">
                <img src="">
              </div>
            </div>
          </div>
        </div>
        <div class="media-block__caption">
          <h6 class="copyright"><i class="icon-camera"></i>Фото: Денис Яковлев/ Югополис</h6>
        </div>
      </div>
                        

Борода

Первая полоса

Первая полоса

Люди Наука и техника

Религия в контакте

Астрофизик, религиовед и представители четырёх конфессий рассказали «Югополису» о том, как относится религия к обнаружению внеземной жизни.

Ситуация

Пулевое послание

Политолог Михаил Савва — о главном выводе, который каждый россиянин должен сделать после убийства Вороненкова: уничтожат везде и любого.

Люди

«Я охранял Сталина»

90-летний житель Краснодара Валентин Мартынов охранял Вознесенского, Молотова и Сталина. О том, как это было, ветеран рассказал «Югополису».

Город Люди

Я — морж

Фотокор «Югополиса» в течение трёх зимних месяцев наблюдал за краснодарскими моржами в парке на Солнечном острове.

Читайте также

Читайте также

Город Люди

Ничего личного

Скелеты под полом, бетон в трубах и воровство на кухне — «Югополис» поговорил с обитателями коммунальных квартир в центре Краснодара.
Денис Яковлев
Город Люди

101 год одиночества

«Югополис» встретился с краснодаркой Анной Константиновной Кутановой, которая в мае этого года отметила свой 101-й день рождения, и попросил её рассказать о своей долгой жизни.
Наталья Галацан