meraproject/content/modulebz/jade/sidebar/section_list.php

<div class="section_wrap"><div class="section_roller _roller"><div class="section"><div class="cont"><div class="title">Задачи<div class="icon plus opacity pointer"></div></div><div class="tasks"><div class="task checked"><div class="check"></div><div class="text">Сверстать секции</div></div><div class="task"><div class="check"></div><div class="text">Сверстать страницу помощи и страницу с календарём и страницу без календаря</div></div><div class="task"><div class="check"></div><div class="text">Запрограммировать движок</div></div><div class="task"><div class="check"></div><div class="text">Разобраться с кассой</div></div><div class="task"><div class="check"></div><div class="text">Заработать миллион</div></div></div></div><div class="sep"></div><div class="cont"><div class="title">Метки<div class="icon plus opacity pointer"></div></div><div class="labels"><div class="label blue">Вёрстка</div><div class="label red">Дизайн</div><div class="label yellow">Программирование</div><div class="label purple">Финансы</div><div class="label green">Менеджмент</div></div></div><div class="sep"></div><div class="cont"><div class="title">Вехи<div class="icon plus opacity pointer"></div></div><div class="progress blue"><div class="name">Вёрстка</div><div class="cont"><div class="wrap_bar"><div class="bar"><div class="line"><div class="fill"></div></div></div></div><div class="percent">90%</div></div></div><div class="progress red"><div class="name">Дизайн</div><div class="cont"><div class="wrap_bar"><div class="bar"><div class="line"><div class="fill"></div></div></div></div><div class="percent">90%</div></div></div><div class="progress yellow"><div class="name">Программирование</div><div class="cont"><div class="wrap_bar"><div class="bar"><div class="line"><div class="fill"></div></div></div></div><div class="percent">90%</div></div></div><div class="minihelp"><div class="icon help small"></div><div class="text">Вы участники этой вехи и вы можете получать увдомления, а можете и не получать</div></div><div class="progress purple"><div class="name">Финансы</div><div class="cont"><div class="wrap_bar"><div class="bar"><div class="line"><div class="fill"></div></div></div></div><div class="percent">90%</div></div></div><div class="progress green"><div class="name">Менеджмент</div><div class="cont"><div class="wrap_bar"><div class="bar"><div class="line"><div class="fill"></div></div></div></div><div class="percent">90%</div></div></div></div><div class="sep"></div><div class="section"><div class="cont"><div class="title"><div class="text">Подтвержденные</div></div><div class="avatars"><div style="background-image:url(pics/ava.jpg)" class="ava small"></div><div style="background-image:url(pics/ava2.jpg)" class="ava small"></div><div style="background-image:url(pics/ava3.jpg)" class="ava small"></div></div></div></div></div><div class="section"><div class="header"><div class="cont"><div class="title">Woman.jpg</div></div></div><div class="tabs"><div class="tab selected">Детали</div><div class="tab">История действий</div></div><div class="image"><img src="pics/ava2.jpg"/></div><div class="subtitle2"><div class="text">Поделились</div><div class="avatars"><div style="background-image:url(pics/ava.jpg)" class="ava small"></div><div style="background-image:url(pics/ava2.jpg)" class="ava small"></div><div style="background-image:url(pics/ava3.jpg)" class="ava small"></div><div class="ava more">+12</div></div></div><div class="cont"><table class="info"><tr><td>Тип</td><td>Изображение</td></tr><tr><td>Размер</td><td>3,6 MB (3,258,385 bytes)</td></tr><tr><td>Расположение</td><td>Фотографии</td></tr><tr><td>Владелец</td><td><a href="#" class="link">Виктор Гвоздиков</a></td></tr><tr><td>Изменено</td><td>25 мая 2019</td></tr><tr><td>Создано</td><td>16 мая 2018</td></tr></table></div></div><div class="section"><div class="header"><div class="cont"><div class="title">Как пользоваться системой</div></div></div><div class="instruction"><div class="el"><div class="num">1</div><div class="cont"><div class="text">Сначала выполните пункт один и перейдите к пункту 2</div><div class="path"><div class="step">Сначала прочтите</div><div class="step">Потом поймите и подумайте и поразмышляйте и поверьте в себя</div><div class="step">Просто сделайте это</div></div></div></div><div class="el"><div class="num">2</div><div class="cont"><div class="text">Пунт первый вы вполнили! <br>Переходите к третьему</div></div></div><div class="el"><div class="num">3</div><div class="cont"><div class="text">И этот пункт выполнен</div></div></div><div class="el"><div class="num">4</div><div class="cont"><div class="text">Вы читаете уже четвертый пункт</div></div></div><div class="el"><div class="num">5</div><div class="cont"><div class="text">И ура! Наконец-то всё сделано. <Br>Можно и отдохнуть.</div></div></div></div></div><div class="section"><div class="subtitle"><div class="text">Ваш выбор</div><div class="clear">очистить фильтр</div></div><div class="cont"><div class="tag_search"><div class="tag">Ресторан</div><div class="tag">Кофе</div></div></div><div class="subtitle"><div class="text">Результаты поиска</div></div><div class="result_list"><a href="#" class="el"><div class="wrap_ava"><div style="background-image:url(pics/ava.jpg)" class="ava"></div></div><div class="cont"><div class="title">CoffeeHouse</div><div class="info"><div class="stars"><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star"></div></div><div class="distance">~234 м</div></div><div class="text">Отличное заведение, которое мало чем славится, тем не менее оно есть.</div></div></a><a href="#" class="el"><div class="wrap_ava"><div style="background-image:url(pics/ava2.jpg)" class="ava"></div></div><div class="cont"><div class="title">Coffee Point</div><div class="info"><div class="stars"><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star"></div></div><div class="distance">~431 м</div></div><div class="text">Отличное заведение, которое мало чем славится, тем не менее оно есть.</div></div></a><a href="#" class="el"><div class="wrap_ava"><div style="background-image:url(pics/ava3.jpg)" class="ava"></div></div><div class="cont"><div class="title">Home of Coffee</div><div class="info"><div class="stars"><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star s"></div><div class="star"></div></div><div class="distance">~191 м</div></div><div class="text">Отличное заведение, которое мало чем славится, тем не менее оно есть.</div></div></a></div></div><div class="section"><div class="header"><!--.icon.back.small--><div class="cont"><div class="title"><?php echo htmlspecialchars("Заголовок ".$j, ENT_QUOTES, 'UTF-8'); ?></div></div></div><div class="list"><?php for($i=1;$i<=10;$i++){; ?><?php $class = ($i==3 && $j==0)?'selected':''; ?><a href="#" class="el <?= htmlspecialchars($class, ENT_QUOTES, 'UTF-8'); ?>"><div class="icon play small"></div><div class="cont"><div class="title">Как в Filezilla настроить фильтрацию папок быстро</div><div class="text">В этом урока будет рассказано как в Filezilla настроить фильтрацию папок</div></div></a><?php }; ?></div></div></div></div>