Пример создания секции сайта «Our Team» в сервисе PIXLI

Автор Lyubov Stishevskaya
Пример создания секции сайта «Our Team» в сервисе PIXLI

Всем добрый день.

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

Зато Дима ширину.

Да на воде блока 1170 пикселов выравнивание по центру также верхний отступ в 30 пикселов добавим на. Шредер наше сердце напиши мне а. Вадим Зайди мне на новый класс. Годер настроим наш заголовок затем высоту 34 пиксела выравнивание по центру. Нижний отступ 30 пикселов копируем необходимые. Нам свет добавим его палитру мы зададим жирность побольше отлично. Добавь в наш блог четыре колонки первую колонку на пром ещё один див назовём я вам мэнди зададим им высоту 350 пикселов и левый и правый отступ N20 пикселов новый Grand поставим фотографию нашего сотрудника сначала загрузилась redo также сразу загрузим иконки почты и телефона добавить фотографию размер листа металла без повтора и положения вверх центр добавил в наш devblog ещё один контейнер диван Game Dev зададим и позиционированием абсолютная признак нижнему краю хризантема левый правый отступ от 20 пикселов внутренние отступы также по 20 пикселов также добавим заливку нашим основным цветом в этот блок добавим кнопку с именем нашего сотрудника зададим новый класс кнопки набатом желаю белый цвет высоту текста 19 пикселов выравнивание по центру, а при наведении изменить цвет. Наследники также в этот блок добавим разделяющую линию зелёного цвета зададим Clash line население забудем высоту 2 пиксела скопировать цвет в нашей линии и добавим заливку также добавим отступаем верхний и нижний отступ опять пикселов, а подлиннее мы добавим текст с названием специальностям нашего сотрудника добавил класс пост диван белый цвет выравнивание по центру наклонный шрифт. Также можно интересный шрифт 1552 высотой наш главный блок добавим ещё один контейнер. Инстаграм Иван повар гиф высоту и ширину 100 пикселов 100% извиняюсь чтобы он занимал у нас 100% ширины и высоты родительского. Дева заходи минимум фон с прозрачностью. Таня будет нормально также Z1 в верхнем внутренний отступ 135 слов добавим наш блог ещё один дев назовем его контакт зададим высота 20 пикселов ширина 170 выравнивание по центру добавим в наш. Диф иконку телефона высотой 20 шириной 20 пикселов я взяла у меня по левому краю этот блок также добавим кнопку с номером телефона данного сотрудника чтобы мы могли быстро и удобно ему позвонить зададим класс контакт батон сделаем отступ слева 30 пикселов верхнем 2 цвет текста белый высота шрифта 15 сразу зададим свойства при наведении чтобы нас текста нравился зелёненький копируем наш devblog не заводи минимум. Нижний отступ 10 прицелов. Сохрани наш проект изменим иконку также ширина высотой 20 пикселов покажем адрес электронная почта данного сотрудника так сохраняем теперь нам остается настроить чтобы без наведения на блок наш фон с контактами скрывался, а при наведении. Он полностью показывался необходимо начальным состоянием задать ему прозрачность и сместить его на 40 пикселов вниз, а при наведении 100% на смещение сделать 0 пиксет для родительского Jean блоком необходимо задать параметры переполнения фильм так посмотрим, что у нас получилось так при наведении на div один момент мы забыли указать плавное появление полность появление продаётся раздели анимация выбираем свойства все свойства и задаем беременной промежуток появление посмотрим, что у нас получилось замечательно при наведении нас меняется цвет подсвечивается кнопка ссылки теперь нам остается лишь скопировать наши блоки колонки делаем. Это клавишей консультация, а потом просто перетаскиваем колонки теперь нам остается лишь изменить фотографии наших сотрудников их имена и название специальности изменяем кино 2 сотрудника его должность 3 девушки наконец 4 сохраняем смотрим. Что у нас получилось так при наведении у нас появляется так и думал переполнение мы так и не установили. Сейчас посмотрим да необходимо задать песня так как надо сейчас проверяем отлично. Всем спасибо и хороший дизайнов на сервисе пиксели население.

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

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