Битрикс. Создание сайта услуг от А до Я. Часть 29. Верстка. Делаем блок «Наша команда»

Автор Pavel Shevchuk
Битрикс. Создание сайта услуг от А до Я. Часть 29. Верстка. Делаем блок «Наша команда»

Всем привет мы продолжаем.

Наш курс по созданию сайта услуг — это отдаем мы продолжаем верстать наша была. Так теперь у нас. Согласно дизайн идёт наша команда.

Давайте её приступим будем делать.

Так Footer в самый низ почти вот здесь уйдёт наш наша команда. Давайте напишем blockers работники внутри соответственно так пропишем сна потом скорее всего на мы добавим уже опять в инфоблок. Так согласна дизайн. Что у нас там заголовок наша команда. А дальше пойдёт уже наш инфоблок новый блок отвечающий за команду поэтому мы убираем копирование ос лист суда убираем. Саш мы будем его копировать. Так давайте загрузим наш шаблон становимся у нас ещё пока не создан самый инфоблок. Давайте создадим так workers так наша команда. Тоже никуда ссылаться только на главной странице поэтому он так и оставляем так поля начало активности текущее. А вот картинка нам нужна картинка поставим 600 так свойства какие у нас свойства могут быть, что мы там добавляли вполне у нас имя будет назвать анонс будет например должностью. Так, что нет поля свойства нам не нужны поля разделов тоже нет доступа чтение подписи. Давайте сотрудники сотрудник добавить сотрудника сменить удалить такое журнал событий на скажем так по сколько сотрудников и я же не буду вешать фотографии именно мы просто соберём самый простой вариант. Давайте уберём сначала лишние так не у нас ещё будет картинка для анонса обязательно предлагаю, а у нас ещё расписание анонс будет так знать как поступим символьный код не нужен сортировка оставим на всякий случай так названием. Мы переменны картинка для анонса фотографии описание для анонса должность установить для всех. Я значит здесь фамилия имя так имя фотографию мы возьмём какую-то например такую 475 на 560a вполне должность на так и напишем должность сохраняю и делаем такие же элементов ещё раз картинки так не добавить копировать снова картинки выберем. Ну и снова копируйте вот так давайте выйдем настройки сначала служебные наша команда четыре человека вполне никаких дополнительных свойств нас нету и не будет сохраняем и теперь нам надо, что ещё сделать нам надо скопировать данные шаблон давайте так и напишем workers blockers так сохраняем и скачиваем я скачиваем на локаль для дальнейшей работы с ним так у нас теперь в News вести появился еще один элемент. А ну надо было blockers, но хотя да ладно. Как назвали так назвали так ставил. Стас так неправильно. Давайте его удалим ещё раз ставил сааз так добавляем charset — это добавляем наши файлы перед запуском Gold я запускаем шаблон так тоже возьми его раскроем expand All. Так у нас пускай будет workers List. Так сами элементы поменяем. Нагиев убираем пагинацию разбивку настройки на странице снизу и сверху она мне потребуется картинка потребуется дата нет имя потребу превьюшка потребуется всё остальное — это так теперь у нас News item. А мы просто worker — это мы назовём так изображение у нас всегда должно быть поэтому просто убираемся всё оставляем чисто только нашей изображение никакого обтекание float Left картинку делаем png response так высоту не зададим ширину заданием как 100% в принципе можем даже её не указывать цену и размер оставляем как есть так хорошо имя возьмём отсюда уберемся лишнее и текст. Мы тоже возьмём отсюда уберемся вишня. Итак сделаем изображение. Давайте назовём. Аватар блок и соответственно внутреннего разве наши картинку дали мы. Нам нужен. Диф отвечающий за фамилию давайте так и сделаем. Иди в отвечающий за текст или профессию Professional давайте так и напишет точно не помню как по-английски имена давайте так его давайте так укажи так ещё нам надо будет прописать обязательно bootstrap col-xs 12 кал см-6м. ТВ3 вот так нас не получится. Так давайте workers. Сначала мы пропишем workers list так когда будет класс потом у нас. Пойдёт Что у нас там borgir и там у него должен быть тоже отступ margin Bottom чтобы они друг на друга не наезжали AOS укб 1 вход. Маркин Так. Ну, что ещё. А теперь пойдём уже по каждому из этих так. Аватара давайте сделаем нам ещё можно сказать так. Столичный присобачить добавить сенсор чтобы у нас текста и все записи были по центру так насчёт. Аватара Так давайте ему заданием чётко 150 пикселей изображения 150 высоту дисплей так border-radius нас она будет в виде круга сделано так борзо радиус сколько там 5 пикселей Nissan бордюрчик 1 пиксель. Салют так и наш красный цвет вот так далее. У нас силу так и у нас должно быть немного отходить от аватарки поэтому предлагаем. Арген комнате маргента соответственно и наш базар вот этот размер под магнитолу так хорошо фонд сайт на какую каждом как 22А. Здесь 16 iPhone SE 122 пикселям так также у нас жирная читання болт и, что ещё у нас Color медный цвет тобою ты вообще забыли так хорошо теперь у нас идёт профессия профессия он так шрифт на стандартный фон сайт 16 в принципе можно и не писать. Так давайте обновим посмотрим так border-radius я не тот сказал новости по порядку так border-radius 150 чтобы у нас всё. Круглое было, а доля Overflow. Давайте уберём седан тоже, а вот так и у нас, что ещё не хватает так во-первых отступа между фамилией и должностью новости тоже самое. Маркин пропишем фонд и нам необходимо необходимо, а вместе картинку по центру. Так, что мы можем сделать по идее мы можем прописать такой. Карл Мартин 0 Auto так ингрис пульс в данный.

0 комментариев
0

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